ワードプレスでタイトルロゴ画像を表示させる方法

「ワードプレスでロゴを表示させたいけどよくわからない!」

という方はいらっしゃいませんか?

ワードプレスのカスタマイズ機能ではヘッダー画像や背景画像の変更はデフォルトで可能ですが、ロゴの表示はテーマによって操作方法が違ったり、そもそも対応していなかったりするので、始めたばかりの方にはなかなか難しいかもしれません。

そこで今回は、ワードプレスでタイトルロゴを表示させる方法を解説記事です。

ワードプレスでタイトルロゴを表示させるには、以下の2通りの方法があります。

  • ロゴ表示に対応しているテーマを使用する
  • PHPを編集する

対応テーマで表示させる

こちらの方法がPHPの編集が必要なく簡単で、初心者の方におすすめです。ワードプレスのテーマの中には、最初からロゴ画像の表示に対応しているものもあります。 今使用しているテーマがロゴ表示に対応していない場合、これらのテーマに変更してしまうのも一つの手です。

無料のテーマでも対応しているものがるので、タロログおすすめのロゴ画像表示に対応している無料テーマをいくつかご紹介いたします。

※テーマのインストール方法はこちらから

ワードプレスでのテーマの設定方法

2015.10.03

こちらがカスタマイズ画面です。

ワードプレスのカスタマイズ画面

カスタマイズ画面の開き方は、管理画面左メニューから「外観」→「カスタマイズ」をクリック、もしくはログインした状態でアドミンバー(上部に表示されるメニューバー)の「カスタマイズ」をクリックしてください。

これ以降のロゴの設定はテーマによって違うので、一つずつ解説します。

Twenty Fifteen以降のデフォルトテーマ

ワードプレスに最初からインストールされているデフォルトテーマ「Twenty」シリーズですが、2015年に公開された「Twenty Fifteen」からロゴ画像の表示に対応するようになりました。変更方法は共通なので、最新(2016年12月現在)の「Twenty Seventeen」を例に解説します。

変更方法

カスタマイズ画面より「サイトの基本情報」→「ロゴを選択」をクリックしてください。

「ロゴを選択」をクリック

アップロードされている画像の中からロゴにしたい画像を選択し「選択」をクリックすると、画像のトリミング画面に移行します。表示したいサイズを選択して、「画像切り抜き」をクリックしてください。推奨サイズは250×250ですが、横長等になっても特に問題ありません。

画像を選択して「選択」をクリック

画像をトリミングして「画像を切り抜き」をクリック

プレビュー画面を見てみましょう。実際の表示は次のようになります。

ロゴ表示1

おや?

タイトルロゴの横にタイトル文も表示されていますね。

このままだとなんだかおかしいので、タイトル文を非表示にしてみましょう。「サイトのタイトルとキャッチフレーズを表示」のチェックボックスをクリックしてチェックを外してください。

こちらがロゴのみ表示した状態です。すっきりしましたね。

ロゴ表示2

また、スマートフォンで表示するとこのような感じです。

Twenty Seventeenのスマホ表示

「Fifteen」「Sixteen」も同様にロゴを表示させてみます。

こちらが「Fifteen」

Twenty Fifteenのロゴ表示

スマートフォンでの表示

Twenty Fifteenのスマートフォン表示

次は「Sixteen」

Twenty Sixteenのロゴ表示

スマートフォンで表示するとこのようになります。

Twenty Sixteenのスマートフォン表示

ロゴのサイズ、表示位置が違うのでお好きなテーマを使ってみましょう。インストールされているデフォルトテーマは、ワードプレスをインストールした時期によって違うので、もし未インストールであれば管理画面からテーマをインストールしてください。

Simplicity2

シンプルなデザインながら、デフォルトでSNS各種のシェアボタンが表示されるなど高性能なテーマです。

「Simplicity2」のダウンロードはワードプレスの管理画面から行えないので、下のリンクからアクセスしてください。

カスタマイズ画面から「ヘッダー」をクリックします。

カスタマイズ画面から「ヘッダー」をクリック

「画像を選択」をクリックして画像一覧から画像を選択し「選択」をクリックしてください。

「Simplicity2」は画像サイズそのままにロゴを表示するので、アップロードの際にリサイズしましょう。

実際の表示

「Simplicity2」のスマートフォン表示はこちら

Simlicity2のスマートフォン表示

Virtue

用語が全て英語なので大変ですが、カスタマイズの項目が多く自由度の高いテーマとなっています。

「Virtue」は、管理画面からインストールが可能です。

カスタマイズ画面から「Main Settings」をクリックしてください。

カスタマイズ画面から「Main Settings」

「Logo」欄の「Upload」をクリックして、画像一覧から画像を選択し「選択」をクリックします。

「Logo」欄の「Upload」をクリック

「Virtue」では、ロゴの位置を変更することができるので、「Logo Layout」の欄で選択してください。例えば、中央にロゴを表示させると次のようになります。

Virtueの実際の表示

また、スマートフォン表示はこちら

Virtueのスマートフォン表示

Giraffe

ブログマーケッター松原潤一さんが、「STINGER5」をもとに制作されたテーマです。デフォルトのヘッダー画像がキリン(Giraffe)のイラストになっていてとてもチャーミングな印象を受けます。

カスタマイズ画面から「ロゴ画像」をクリックしてください。

カスタマイズ画面から「ロゴ画像」をクリック

「画像の選択」をクリックして画像一覧を開き、ロゴ画像を選択して「選択」をクリックします。

実際のプレビュー画面がこちらです。

実際のロゴ表示

「Giraffe」は自動的にタイトル文を非表示にしてロゴを表示するようになっています。一つ注意点は、ロゴ画像がそのままのサイズで表示されるので、適宜リサイズして設定するようにしてください。

スマートフォンで表示するとこのようになります。

Giraffeでスマートフォン表示

First

とてもシンプルなテーマです。シンプルでありながら、サイドバー1つにフッター3つとウィジェットを最大4つまで表示できるなど柔軟性に優れています。

インストールは管理画面から行ってください。

カスタマイズ画面から「ロゴ」→「画像を選択」をクリックします。

カスタマイズ画面より「ロゴ」をクリック

画像の一覧から選択して「画像の選択」をクリックして、「サイトタイトルと置き換える」にチェックを入れてください。実際の表示は次のようになります。

「First」のロゴ表示

また、この「First」はRetinaディスプレイにの表示にも対応しているのも特徴です。

スマートフォンで表示するとこのようになります。

Firstのスマートフォン表示

PHPを編集して表示させる

ロゴの表示に対応していないテーマも多数あり、こちらはカスタマイズ機能で対応することができません。

そこで、PHPを編集してロゴを表示させてみましょう。

PHPの編集が必要になるので、対応テーマと比べて少しだけ難易度が上がります。ですが、主な作業はソースコードの貼り付けなのでぜひやってみてください。

デフォルトテーマの「Twenty Fourteen」以前はロゴ表示に対応していないので、「Fourteen」を例に解説します。

※PHPの編集をする前に子テーマを作成してください。
子テーマの作り方はこちら

ワードプレスで子テーマを設定する方法

2016.12.15

画像の準備

まず、ロゴ画像を準備してください。表示サイズは自由に設定できるので特に画像サイズの指定はありませんが、あまり大きなサイズを用意するとスマートフォンなどで読み込みが遅くなるので、適度にリサイズをしましょう。

画像のアップロードは、管理画面左メニューから「メディア」→「ライブラリ」から行ってください。

header.phpを編集する

次はPHPファイルを編集します。まだ子テーマのフォルダ内に「header.php」が存在しないので、編集の前に親テーマのフォルダからコピーしておきましょう。

管理画面左メニューから「外観」→「テーマの編集」をクリックしてください。CSSやPHPの編集画面が表示されたら右メニューより「header.php」をクリックします。

こちらがheader.phpの変種画面です。

header.phpの編集画面

このファイルの中から、

<?php bloginfo(‘name’); ?>

という記述を探してください。

このソースコードでサイトタイトルを表示させているので、この部分を画像表示のコードに書き換えることでタイトルロゴを表示させることができます。この部分を、

<img src=”画像のURL“>

に書き換えましょう。「画像のURL」の部分は、メディアライブラリからロゴ画像を開いて「URL」をコピーして貼り付けてください。

実際の表示がこちらです。

PHP編集によるロゴ表示

画像の表示サイズを変更するときは、

<img src=”画像のURL” width=”” height=”>

のように記述します。赤字で長さをピクセル数(〇〇px)か拡大率(〇〇%)で指定することで、画像サイズの変更が可能です。

まとめ

以上が、ワードプレスでタイトルロゴを表示させる方法となります。いろいろと方法が分かれるので、しっかり確認して行ってください。

子テーマを利用したPHP編集は失敗してもやり直すことが可能なので、焦らずゆっくり行いましょう。

続いてナビゲーションメニューの設定方法の解説です。

ワードプレスでナビゲーションメニューを設定する方法

2016.12.17

『成果が10倍になるネット集客』無料プレゼント中

ABOUTこの記事をかいた人

マツ

高2から陰キャでコミュ障になり、最終学歴高卒フリーターの人生がけっぷち屑野郎へ。 こっから人生大逆転ホームラン狙ってます。担当はゲームとお菓子調達です。よろしこ