1.8.6 Released !

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

タイトルとロゴの設定

今回は、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が効かない・反映されないときの対処法まとめ

67 COMMENTS

Nakano 2019/08/16

お世話になります。
サイトタイトルが長く、モバイル表示にするとタイトルと検索ボタン(虫眼鏡のボタン)がかぶってしまいます。
検索ボタンの位置を変更するか、非表示にするにはどのように操作すればよいでしょうか。
よろしくお願いいたします。

回答を見る
headcocoro 2019/07/26

固定ページを利用時で、
テンプレートに「1カラム表示」または「トップページ用1カラム」を使用する際に、containerの背景色に白が固定で設定されており、その下のbodyのbackgroudに指定されている背景画像が適用できません。

containerの白塗りつぶしは意図的なものでしょうか教えて下さい。

回答を見る
さやえんどう 2019/07/18

最近はてブからワードプレスに移行し、以前からずっと使いたかったSANGOを使用することができてカスタマイズ楽しんでます!
ところで、ヘッダーのロゴですがサファリで入れるとどんなにサイズを小さくしても巨大に画面いっぱいに表示されてしまいます。
その他のブラウザーでは問題ないのですが・・・。
何か設定が間違ってますでしょうか?
今はとりあえず外しています。
教えてください。よろしくお願いします。

回答を見る
こっこ 2019/04/12

ワードプレス初心者のものです。

ブログのホーム画面から見る
記事のアイキャッチ画が画質が悪く
見栄えが悪くなってしまいます…。

記事を開くとキレイになるのですが
どうしたら変更できるでしょうか?

初歩的な質問ですみません…。

回答を見る
ひょう 2019/03/28

先日購入させて頂きカスタマイズ中です。

ご教授して頂きたいのですが、フッター部分にあるHOMEテキストをロゴに変更するにはどの様に設定したら良いのでしょうか?

お手数お掛けしますが、何卒宜しくお願い致します。

回答を見る
マクリン 2019/03/25

サルワカさん、お久しぶりです!

ユーザビリティ向上のため、スマホビューのみヘッダーの中に検索窓を入れたいのですが、そういったカスタマイズは可能なものでしょうか?

お忙しいところ大変恐縮ですが、ご教示よろしくお願いいたします。

回答を見る
YUU 2019/01/31

サルワカ様
下層ページに表示される「ページタイトル|サイトタイトル」の「|サイトタイトル」の部分を削除することはできますか?

回答を見る
Sakura 2019/01/28

こんにちは。初心者です。
サイトのタイトルが出ません。
こちらの指示通りに入力しています。
思い当たる原因は、ヘッダーをシンプルにしたくてヘッダーのメニューを削除したと思います。
普段はメニューのカスタマイズ中は、鉛筆マークや、手のマークが出てますが、画面1番上のブログ名が表示されるスペースが全く反応しません。
サイト名が無いのでサイト名からホームにも戻れません。
初心者には致命的な失敗をしてしまったでしょうか?

回答を見る
サルワカくん 2019/01/24

ヘッダーロゴの設定について質問です。
PCからみると問題ないのですが、スマホからみると画像が細くなり崩れてしまいます。
対処法を教えていただきたいです。よろしくお願いします。

画像の高さを180pxに固定していますよね。この画像の場合、高さが180pxなら幅が480pxになります。
そのため、幅が480px以下の端末で見たときに、幅だけはみ出ないように調整されてしまうというわけです。

【解決策1】
ロゴ画像の縦横比をキープするためには、以下のCSSを追加すると良いと思います。

#logo img {
  object-fit: contain;
}

【解決策2】
480px以下の端末でロゴ画像の高さ指定を解除すればOKです。

@media only screen and (max-width: 481px) {
   #logo img {
     height: auto;
   }
}
回答を見る
中山 2019/01/21

タイトルでもSEO対策をするためにキーワードにこだわっています。(タイトル名をh1タグにしたい。)ロゴ画像をつけると、alt属性でタイトル名をh1タグにできるのでしょうか?それとも、ロゴ画像にしないほうが、タイトル名での上位表示が狙えるのでしょうか?

回答を見る
海外子連れTRAVEL 2018/12/28

こんにちは!
サイトのタイトルを「567×283」で作成したのですが、小さく表示されてしまいます。。。推奨サイズなどあるのでしょうか。よろしくお願い致します。

回答を見る
がぶりえる 2018/12/14

サルワカ様、

ついでのご質問で恐縮ですが、ロゴ上にテキストを表示する方法はありますでしょうか?
個別のカスタマイズにお応えしていないことは承知の上で、差し支えなければご教示よろしくお願いいたします。

回答を見る
佐藤 2018/11/08

初めまして
SANGOを購入させていただき昨日から使い始めました。
マニュアルを参考に進めていたのですが…

タイトル(文字)のサイズを変える方法
まず、ロゴ画像を使用しておらず、文字のタイトルのサイズを変えたい場合には以下のように書きます。
style.css
#logo {
font-size: 23px;
}
↑はどこに書き込めば良いのでしょうか?

大変初歩的な質問で申し訳ありません。
宜しくお願いいたします。

回答を見る
まいける 2018/08/18

お世話になります。
2点質問があります。

PCのみヘッダーにロゴを中央表示させてその横にキャッチフレーズのみを表示させたいのですが可能でしょうか?またそのキャッチフレーズのフォントサイズや字体も調整したいです(スマホではロゴ表示のみ)
あとフッターで表示されるロゴサイズやキャッチフレーズについても編集したく、PC、スマホで表示を変えたいのですが可能でしょうか?

質問ばかりですみませんが、よろしくお願いいたします。

回答を見る
tamami 2018/08/01

こんにちは。
時々質問をさせていただいております。
いつも丁寧なご対応ありがとうございます。

タイトルロゴを設定しているのですが、時々このロゴが横にびよーんと伸びて表示されてしまいます。サイズを変えて設定しなおしたりするのですが、原因がわからず困っています。現在は2400x500png で設定しています。

お忙しいところすみませんが、もし原因がわかるようでしたらご教授いただけると嬉しいです。
よろしくお願いいたします。

回答を見る
Nyakkun 2018/05/18

キャッチフレーズが変更できないのですが
理由がわかりません

外観→カスタマイズ→サイト基本情報→キャッチフレーズに入力していますが
表示は前のままになってしまいます

ご指導お願いいたします

回答を見る
海老原明子 2018/03/25

WordPressもテーマも、全くの初心者です。
よろしくお願いします。
ヘッダーテキスト(ブログタイトル)のリンク時の色はどこでしょうか。

回答を見る
あさり 2018/02/07

こんにちは。また質問させてください。
ロゴ画像をCanvaで作り、透過背景のpngでダウンロードしてサイトに設定したのですが、画像がぼやけてしまうというか画質が荒くなってしまいます。
どうしたら良いでしょうか?
お忙しいところ申し訳ないですが、ご回答いただけると助かります。
よろしくお願いいたします。

回答を見る
近藤茂樹 2018/02/04

カテゴリーの箇所に、コーヒーカップの画像が出てくるのですが、変更または破棄する方法がわかりませんので教えてください。超初心者です。よろしくお願いいたします。

回答を見る
taketake 2017/12/11

最新版を利用しており、子テーマを使用しています。

サイトの詳しい説明が更新されなくってなってしまいました。
対策はありますか?
コードやデータベースを操作して変更できるのであれば、その方法を教えて頂きたく。

回答を見る
れおん 2017/11/11

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

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

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

回答を見る
山崎 朋也 2017/11/06

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

回答を見る

コメントを残す

メールアドレスは公開されません。* は必須項目です。コメント投稿のガイドライン