Ver1.3.1をリリースしました(11/22)

ブログのタイトルとロゴ画像を設定しよう

タイトルとロゴの設定

今回は、WordPressテーマ「SANGO」でのタイトルやロゴ画像などの設定方法を解説します。

カスタマイザーを開く

まずは、WordPressでカスタマイザーを開きます。

カスタマイザーの位置
管理画面⇒外観⇒カスタマイズ

サイト基本情報を選ぶ

カスタマイザーの一番上にある「サイト基本情報」をクリックします。

サイトの基本情報

すると画面の左側に「サイトのタイトル」や「キャッチフレーズ」などを入力するウィンドウが開きます。

サイトのタイトルやキャッチフレーズを選ぶ

各項目の意味をざっと説明します。

サイトのタイトル

その名の通り、Webサイト(ブログ)のタイトルです。スマートに見せるために、できる限り短めのタイトルにすることをおすすめします。

キャッチフレーズ

サイトを表すキャッチフレーズを一言でつけます。と言ってもこのフレーズはサイト内で目に見える形では表示されません。どこに使われるかというと、Google等に認識してもらうトップページのタイトル(titleタグ)に使われます。例えばサイトのタイトルを「SANGO」、キャッチフレーズを「分かりやすさを追求したWordPressテーマ」とした場合、Googleには以下のようにインデックスされます。

 

注意
あくまでもGoogleがインデックスするタイトルを決めるため、実際には表示されるタイトルが異なる場合があります。

サイトの詳しい説明

この欄に書いた文章は「トップページのメタデスクリプション」としてGoogleなどの検索エンジンに伝わります。多くのテーマでは、トップページ専用のメタデスクリプションをカスタマイザーから設定することができませんが、SANGOであればここに入力するだけでOKです。文字数は100字以内に抑えるようにしましょう(短くでも構いません)。


ヘッダーのタイトル・ロゴ設定

次にサイトのヘッダー(最上部)に表示されるタイトルまわりの設定をしていきましょう。

ロゴ画像を登録する

ロゴ画像を登録

ヘッダーに表示されるタイトルは訪問者がいちばん最初に目にする部分です。

この部分により訪問者の抱くサイトへの印象は大きく左右されます。タイトルを文字で表示させることもできますが、できればロゴ画像を作成して登録することをおすすめします。

最近ではロゴ画像をデザイン初心者の方でも簡単に作成することのできる無料ツールやアプリが登場しています。個人的にはCanvaが使いやすくておすすめです。

PC版「Canva」の使い方
PC版「Canva」の使い方

また、ロゴ作成用の便利なアプリ等もあります。時間に余裕があれば、是非試してみてください。

ロゴ作成用アプリ|便利なiPhoneのデザインアプリ15選
ロゴ作成用アプリ|便利なiPhoneのデザインアプリ15選

ロゴ画像だけを表示

チェックをつけると、タイトルの文字が非表示になり、ロゴ画像だけが表示されるようになります。

大画面表示字にもロゴを中央寄せ

スマホでサイトが表示されるときにはタイトルは常に中央寄せで表示されます。一方で、PC表示の場合、初期設定ではロゴは左寄せになります。下の画像はチェックをつけなかった場合のPC表示です。

チェックをつけなかった場合

チェックをつけなかった場合

 

チェックをつけるとPC表示でも中央寄せされるようになります。この場合、メニューはロゴ画像の下に配置されるようになります。

中央寄せにチェックを付けた場合

チェックを付けた場合

メニューの設定については別の記事で解説します。

サイトアイコン

ここにアップロードした画像は、ブックマークしたとき等に表示されるサイトアイコンとして使われます。

サイトのブックマークアイコンとしても使われる

また、上のように、スマホやタブレットでページをホーム画面に追加したときにもここで登録した画像が使用されます。


ロゴ画像やタイトルのサイズを変更する方法

ロゴ画像やタイトルのサイズを変更したい場合もあるかと思います。そのような場合には、子テーマのstyle.cssにこれから紹介するコードを貼り付けて頂ければと思います。

子テーマって何?という方はこちらの記事をどうぞ。

WordPressで子テーマを活用して安全にカスタマイズを行う方法

ヘッダーのロゴ画像を横幅いっぱいに表示する

下の記事でヘッダーロゴ画像を横幅いっぱいに表示するカスタマイズ方法を紹介しています。

ヘッダーのロゴ画像を横いっぱいに表示するカスタマイズ

タイトル(文字)のサイズを変える方法

まず、ロゴ画像を使用しておらず、文字のタイトルのサイズを変えたい場合には以下のように書きます。

style.css
#logo {
    font-size: 23px;
}

この23pxの数字を大きくしたり、小さくしたりすることでタイトルサイズが調整できます(初期設定だと23pxになっています)。この書き方だとスマホでもPCでも同じサイズで表示されることにご注意ください。

スマホ表示は初期設定サイズで大画面表示のときのみサイズだけ変えたい場合

style.css
@media only screen and (min-width: 481px) {
   #logo {
       font-size: 25px;
   }
}

上のような書き方をすることで、端末の画面幅が481px以上のときのみ、フォントサイズを変えることができるようになります。

スマホ表示、大画面表示それぞれサイズを変えたいとき

style.css
#logo {
    font-size: 21px;/*スマホサイズ*/
}
@media only screen and (min-width: 481px) {
   #logo {
       font-size: 23px;/*481px以上での表示サイズ*/
   }
}

それぞれ調整したいときには上のようにします。ここでの/*〜*/の文字はコメントアウトと呼ばれるものなので、CSSに影響を及ぼしません。そのため、上のコードをそのまま貼り付けてもOKです。


ロゴ画像のサイズを変更する

ロゴ画像のサイズを変更する場合についてのパターンもいくつか紹介しておきます。

ロゴ画像のサイズを変える(スマホ/PC関わらず同サイズに)

style.css
#logo, #logo img, .desktop-nav li a,#drawer__open {
    height: 70px;
    line-height: 70px;
}

上記のheightline-height、両方の値を合わせて変えることで調整します。初期設定だと62pxとなっています。小さくしたければ、「50px」などに変えれば良いわけですね。

大画面表示のときのみロゴ画像サイズを変える

style.css
@media only screen and (min-width: 768px) {
   #logo, #logo img, .desktop-nav li a {
       height: 50px;
       line-height: 50px;
    }
}

上のように書けば、画面サイズが768px以上の端末で表示されるときのみサイズを変えることができます。つまり767px以下での表示は初期設定のままになります。

スマホ、大画面表示それぞれロゴ画像サイズを変える

スマホ表示での画像サイズも初期設定とは変えたいという場合には以下のようにします。

style.css
#logo, #logo img, .desktop-nav li a, #drawer__open {
    height: 50px;/*スマホ用サイズ*/
    line-height: 50px;/*スマホ用サイズ*/
}

@media only screen and (min-width: 768px) {
    #logo, #logo img, .desktop-nav li a {
       height: 70px;/*768px〜で見たとき用サイズ*/
       line-height: 70px;/*768px〜で見たとき用サイズ*/
    }
}

ヘッダーの影を消す方法

初期設定では、以下のようにヘッダー部分に影がついて表示されます。

中央寄せにチェックを付けた場合

この影を消したい場合には、以下のCSSをstyle.cssに書けばOKです。

style.css
.header {
    box-shadow:none;
}
CSSが効かない?

CSSを記述し、ページを再読込しても反映されないときの原因は「キャッシュ」かもしれません。詳しくは下の記事を参考にしてみてください。

ChromeでCSSが反映されない?キャッシュ消去で対処
ChromeでCSSが反映されない?キャッシュ消去で対処
キャッシュとは?IT初心者でも分かるように解説
キャッシュとは?IT初心者でも分かるように解説
CSSが効かない・反映されないときの対処法まとめ
CSSが効かない・反映されないときの対処法まとめ

8 Comments

山崎 朋也

タイトルの文字サイズを変えるCSSが反映されません。
推奨されているキャッシュの消去も行いましたが変化がありません。
ご教授お願いいたします。
当方、PC初心者です。

返信する
サルワカくん

外観⇒カスタマイズ⇒追加CSSに下記のCSSを書いていますよね?
#logo {
font-size: 23px;
}
これが反映されているようなのですが。
こちらを消せば、子テーマのstyle.cssで指定されたフォントサイズが反映されます。

返信する
れおん

ロゴ画像で「SVG推奨」と書いてありましたが、テーマ側で最適化済でしょうか?
プラグインの追加は必須でしょうか?

また、Google(Google Search ConsoleとPageSpeed Insights)のレンダリングで
SVG画像が表示されない現象がありました。

これはテーマの設定ではなく任意のSVG画像自体に問題があるのでしょうか?
PNG画像などは正常にレンダリングされます。

返信する
サルワカくん

WordPressの初期設定ではSVG画像をアップロードすることができないのですが、テーマ側でアップロードできるようにしております。
それ以外は特にSVGに関する設定は行っていません。
SANGOのデモページなどでもSVG画像をロゴに使っていますが、Google Search ConsoleやPageSpeed Insightsで問題なくレンダリングされております。
というわけで、おそらくSVG画像に何らかの問題がある可能性が考えられます。

返信する
れおん

返信が遅くなり申し訳ないです。
無事にレンダリングされるようになりました。

どうやら、PNG画像やJPEG画像をSVGに変換したものは、ユーザー視点で正常に表示されたとしても、Google Search ConsoleやPage Speed Insightsによるレンダリングでは全く表示されないようでした。

他の表現をすると、「illustratorなどで、ちゃんとアウトラインできるものは、正常にレンダリングされる」ということでした。

お騒がせしました。。。

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です