姉妹サイト:トマトサーチ2

【Luxeritas】サイトタイトル設置、周辺余白の調整の仕方

WordPressのテーマによって、機能やデザインが違います。

今回は、Luxeritas(ルクセリタス)の「サイトタイトル」の設置の仕方と、その周辺の余白の調節方法を解説していきます。

スマホとPCの表示の違い

スマートフォンとパソコンでは、表示されるサイトのデザインは異なります。

多くの人は、パソコンの画面でサイトを制作するので、パソコンで見た時の見た目ばかりを気にしがちです。

しかし、インターネットの検索でサイトに訪れる人の多くは、スマートフォンになるので、パソコンの見た目よりも、スマートフォンの見た目をしっかり意識して制作しなければいけません。

そこで、解説はスマートフォンで表示される画像で行いたいと思います。

サイトのタイトル設置

上の画像では、「サイトのタイトル」を「千金」と、設置しています。

設置方法は、「Wordpressのダッシュボード」から、以下の手順で行います。

➡外観

➡カスタマイズ

➡サイト情報/サイトアイコン

➡サイトのタイトル(入力する)

サイトのタイトルの文字色

「サイトのタイトル」の文字の色の変更方法は、「Wordpressダッシュボード」から以下の手順で行います。

➡外観

➡カスタマイズ

➡文字の色

➡ヘッダーリンク色

「サイトのタイトル」に指で触れると、色が変わるように設定するときは、「ヘッダーリンクホバー文字色」で色を設定します。

「ヘッダーリンク色」とは少し色を変えると、リンクと分かりやすくなります。

サイトタイトルの位置・余白調整

黄色で囲んだ部分が余白

「サイトのタイトル」の位置・余白の調節は、「カスタマイズ」画面の「ヘッダー/フッター」の項目を編集します。

タイトルの配置」から「中央」を選択すると、「サイトのタイトル」を中央に設置できます。

左右上下の余白を調整するには、「ヘッダーのパディング」の数値を変更します。

上の画像では「ヘッダーのマージン」の「ヘッダー上」を100px 、 「ヘッダーのパディング」の「ヘッダー左」を30pxになっていますが、これを実際に行うと、下のよう表示されます。

上の余白が多くなり過ぎましたが、なんとなく、数字を入れた時のイメージが分かるのではないでしょうか?

「サイト名」や「サイトのイメージ」に合わせて、余白の調節を行うと、キレイなデザインになると思います。

サイトタイトルの画像を設置

「サイトタイトル画像」設置 → こちら

⇩ロゴ制作ができるスマホアプリ

[CcavaG]

オシャレなロゴを作って欲しい!

そんな人は⇩

キャッチフレーズの設置

赤〇が「サイトのキャッチフレーズ」

サイトの「キャッチフレーズ」は、”こういう情報を掲載しています”と、ユーザーに伝えるための文言です。

変更の手順は、「Wordpressダッシュボード」から以下の手順で行います。

➡外観

➡カスタマイズ

➡細部の見た目

➡ヘッダーのキャッチフレーズ変更

➡枠に、「キャッチフレーズ」を入力。

☑ヘッダーキャッチフレーズを表示(チェック)

この手順で、キャッチフレーズを入れることができますが、設置されない場合もあるので、その場合の対処法もご説明します。

設置されない原因は、「背景」の高さが低く設定されているので、そこを解除する必要があります。

「背景高さ」の変更の手順は以下の通りです。

➡ダッシュボード

➡外観

➡カスタマイズ

➡背景・タイトル・ロゴ画像

➡ヘッダー背景画像

「自動調節でもこの値より高くしない」の部分の数値を上げると、高さがアップするので、「キャッチフレーズ」が入るようになります。