WordPressのテーマによって、機能やデザインが違います。
今回は、Luxeritas(ルクセリタス)の「サイトタイトル」の設置の仕方と、その周辺の余白の調節方法を解説していきます。
スマホとPCの表示の違い
スマートフォンとパソコンでは、表示されるサイトのデザインは異なります。
多くの人は、パソコンの画面でサイトを制作するので、パソコンで見た時の見た目ばかりを気にしがちです。
しかし、インターネットの検索でサイトに訪れる人の多くは、スマートフォンになるので、パソコンの見た目よりも、スマートフォンの見た目をしっかり意識して制作しなければいけません。
そこで、解説はスマートフォンで表示される画像で行いたいと思います。
サイトのタイトル設置
上の画像では、「サイトのタイトル」を「千金」と、設置しています。
設置方法は、「Wordpressのダッシュボード」から、以下の手順で行います。
➡外観
➡カスタマイズ
➡サイト情報/サイトアイコン
➡サイトのタイトル(入力する)
サイトのタイトルの文字色
「サイトのタイトル」の文字の色の変更方法は、「Wordpressダッシュボード」から以下の手順で行います。
➡外観
➡カスタマイズ
➡文字の色
➡ヘッダーリンク色
「サイトのタイトル」に指で触れると、色が変わるように設定するときは、「ヘッダーリンクホバー文字色」で色を設定します。
「ヘッダーリンク色」とは少し色を変えると、リンクと分かりやすくなります。
サイトタイトルの位置・余白調整
「サイトのタイトル」の位置・余白の調節は、「カスタマイズ」画面の「ヘッダー/フッター」の項目を編集します。
「タイトルの配置」から「中央」を選択すると、「サイトのタイトル」を中央に設置できます。
左右上下の余白を調整するには、「ヘッダーのパディング」の数値を変更します。
上の画像では「ヘッダーのマージン」の「ヘッダー上」を100px 、 「ヘッダーのパディング」の「ヘッダー左」を30pxになっていますが、これを実際に行うと、下のよう表示されます。
上の余白が多くなり過ぎましたが、なんとなく、数字を入れた時のイメージが分かるのではないでしょうか?
「サイト名」や「サイトのイメージ」に合わせて、余白の調節を行うと、キレイなデザインになると思います。
サイトタイトルの画像を設置
「サイトタイトル画像」設置 → こちら
キャッチフレーズの設置
サイトの「キャッチフレーズ」は、”こういう情報を掲載しています”と、ユーザーに伝えるための文言です。
変更の手順は、「Wordpressダッシュボード」から以下の手順で行います。
➡外観
➡カスタマイズ
➡細部の見た目
➡ヘッダーのキャッチフレーズ変更
➡枠に、「キャッチフレーズ」を入力。
☑ヘッダーキャッチフレーズを表示(チェック)
この手順で、キャッチフレーズを入れることができますが、設置されない場合もあるので、その場合の対処法もご説明します。
設置されない原因は、「背景」の高さが低く設定されているので、そこを解除する必要があります。
「背景高さ」の変更の手順は以下の通りです。
➡ダッシュボード
➡外観
➡カスタマイズ
➡背景・タイトル・ロゴ画像
➡ヘッダー背景画像
「自動調節でもこの値より高くしない」の部分の数値を上げると、高さがアップするので、「キャッチフレーズ」が入るようになります。