2.0 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;
    object-fit: contain;
}

上記の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;/*スマホ用サイズ*/
    object-fit: contain;
}

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

100 COMMENTS

あみん 2020/02/13

ロゴ画像とプロフィール背景画像が表示されない

子テーマにPORIPUを使用しています。 PCやYahoo!のブラウザでサイトを見ると普通なのですが、携帯のChromeのブラウザでサイトを見ると、ロゴの画像とプロフィールの背景画像が表示されないです。 TwitterやインスタなどのSNSにリンク貼ると、同じように表示されません。 初心者で最初の設定がワケわからず行ったのか、解決願います。

回答を見る
ゆいきち 2020/01/15

トップページ用サイドバー(有り)でのメインカラム部分の背景透過は可能ですか?

初めまして。全く初めてのwordpressもsangoとサルワカを読んでわかるようになってきました。 今回、固定ページサイドバー(有り)での背景透過の方法がどうしてもわからず質問させていただきました。 divで指定した緑のボックス(div.box{…)は残したいのですが、その周りの白塗り部分の透過を指定するクラス名などがソースを見ても私には特定できず難航しております。 足りない情報がございましたら…

回答を見る
YUKA 2019/12/24

サイトタイトルの文字が出てこない

サルワカ様 よろしくお願いします。 現在タイトルにロゴを使用しているのですが、ロゴを削除してタイトル文字を表示させたいのに出てきません。 ・ロゴ画像だけを表示(文字を非表示に)のチェックは外している ・大画面表示時にもロゴを中央寄せのチェックも一応外している ・ヘッダータイトル色はヘッダー背景色とは異なる色(白)にしている これ以外で何か原因がありますでしょうか。 お忙しい中恐れ入りますが、どうぞ…

回答を見る
西山 2019/12/01

TOPページのみtwitterカードの画像が表示されない

twitterでTOPページが共有された時のみtwitterカードの画像が表示されません。 他の記事が共有された時は問題なく表示されています。 トップページのソースを確認したところ meta property="og:image" content= が空でした。他の記事は画像URLが入っています。 過去のQ&Aなどを見るとサイト基本設定でTOPページのOGPを設定していたりするようですが……

回答を見る
ちょもす 2019/11/25

ロゴ画像にclassをつけたいのですが……

遅延表示プラグインのa3 Lazy Loadを利用しております。 タイトルロゴ画像は遅延させたくないのですが、 idでは遅延を防ぐことができずclassはないので指定できません。 こちらclassをロゴ画像につけることはできるでしょうか? もしくは相性の良い遅延表示プラグインがあれば教えて戴けると幸いです。

回答を見る
大庭 2019/11/22

サイトTOPページのメタデスクリプションを反映させたい。

お世話になっております。 サイトのTOPページのメタデスクリプションを検索エンジン上に反映させたいのですが、なぜかキャッチフレーズが反映されてしまいます。 カスタマイズ→「サイトの詳しい説明(100字以内推奨)」に記述したのですが、ソースコードを見ても反映されていないように思えます。 ご教授お願い致します。

回答を見る
mugi 2019/11/01

OGP画像が反映されない?

サルワカさんお世話になっております。 トップページのOGP画像を「基本設定」のところから設定しているのですがTwitterでトップページをシェアするとファビコン画像が表示されてしまいます。何か解決策があれば教えて頂けると助かります。 ちなみに子テーマはPORIPUを使用しています。

回答を見る
ザキオカ 2019/10/23

ロゴ画像の表示に関して

お世話になっております。 ロゴ画像を設定しているのですが… 記事ページに飛ぶとロゴ画像が拡大して表示されてしまいます。 対処法などありますでしょうか?

回答を見る
轟元気 2019/10/10

mediakit的なものはありますか?

いつもお世話になっております。 次回、カテゴリー整理のタイミングで「WordPress」カテゴリーを新設し、そこで使用しているテーマSANGOを紹介しようと思っています。 その際に使用しても良いLOGOなどはあるのでしょうか? RESUMEのmediakitみたいなものがあればぜひ活用したいと思っております。

回答を見る
田中 2019/09/27

ヘッダーメニューの各種設定について

ヘッダーのレイアウトについて2点質問したいです。 ・カスタマイズのヘッダーメニュー文字色の設定がメニューの各所で適用されますが、モバイル画面で表示されるハンバーガーメニューを開いたときに表示される右上の閉じる『×』マークの色を個別で変更したいです。スタイルを適用するクラス名はどうしたらよいのでしょうか? ・カスタマイズ内の『大画面表示字にもロゴを中央寄せ』を選択時、ヘッダーがロゴ部分とナビの二段に…

回答を見る
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テキストをロゴに変更する。

先日購入させて頂きカスタマイズ中です。 ご教授して頂きたいのですが、フッター部分にあるHOMEテキストをロゴに変更するにはどの様に設定したら良いのでしょうか? お手数お掛けしますが、何卒宜しくお願い致します。

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

スマホのヘッダーに検索窓を入れたい

サルワカさん、お久しぶりです! ユーザビリティ向上のため、スマホビューのみヘッダーの中に検索窓を入れたいのですが、そういったカスタマイズは可能なものでしょうか? お忙しいところ大変恐縮ですが、ご教示よろしくお願いいたします。

回答を見る
YUU 2019/01/31

titleタグからサイトタイトルを削除したい

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

回答を見る
Sakura 2019/01/28

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

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

ロゴ画像の縦横比が崩れる

ヘッダーロゴの設定について質問です。 PCからみると問題ないのですが、スマホからみると画像が細くなり崩れてしまいます。 対処法を教えていただきたいです。よろしくお願いします。 画像の高さを180pxに固定していますよね。この画像の場合、高さが180pxなら幅が480pxになります。 そのため、幅が480px以下の端末で見たときに、幅だけはみ出ないように調整されてしまうというわけです。 【解決策1】…

回答を見る
中山 2019/01/21

h1タグにロゴ画像をあてない方が検索上位表示が狙えるのか

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

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

サイトのタイトルの画像が小さく表示されてしまう

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

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

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

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

CSSをどこに書き込めば良いのか

初めまして SANGOを購入させていただき昨日から使い始めました。 マニュアルを参考に進めていたのですが… タイトル(文字)のサイズを変える方法 まず、ロゴ画像を使用しておらず、文字のタイトルのサイズを変えたい場合には以下のように書きます。 style.css #logo { font-size: 23px; } ↑はどこに書き込めば良いのでしょうか? 大変初歩的な質問で申し訳ありません。 宜しく…

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

PCのみヘッダーにロゴを中央表示させてその横にキャッチフレーズのみを表示させたい

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

回答を見る
tamami 2018/08/01

タイトルロゴ画像の縦横比が崩れる

こんにちは。 時々質問をさせていただいております。 いつも丁寧なご対応ありがとうございます。 タイトルロゴを設定しているのですが、時々このロゴが横にびよーんと伸びて表示されてしまいます。サイズを変えて設定しなおしたりするのですが、原因がわからず困っています。現在は2400x500png で設定しています。 お忙しいところすみませんが、もし原因がわかるようでしたらご教授いただけると嬉しいです。 よろ…

回答を見る
Nyakkun 2018/05/18

キャッチフレーズを変更してもGoogleに反映されない

キャッチフレーズが変更できないのですが 理由がわかりません 外観→カスタマイズ→サイト基本情報→キャッチフレーズに入力していますが 表示は前のままになってしまいます ご指導お願いいたします

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

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

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

Canvaで作成したロゴ画像がぼやける

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

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

コーヒーカップのサムネイル画像を変えたい

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

回答を見る
taketake 2017/12/11

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

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

ロゴに登録したSVG画像が表示されない

ロゴ画像で「SVG推奨」と書いてありましたが、テーマ側で最適化済でしょうか? プラグインの追加は必須でしょうか? また、Google(Google Search ConsoleとPageSpeed Insights)のレンダリングで SVG画像が表示されない現象がありました。 これはテーマの設定ではなく任意のSVG画像自体に問題があるのでしょうか? PNG画像などは正常にレンダリングされます。

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

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

回答を見る

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。