さて今回からワードプレス無料テーマ「Gush2」の初心者によるカスタマイズ備忘録を記していきます。

実は私「初心者」という言葉があまり好きではなくて。でも「上級者」じゃないし、「中級者」というのもよく分からん。うーん・・・ということでやむなく「初心者」と掲げていきます。

ブログロゴを画像に変更する

ロゴはブログの顔

ブログのヘッダー部分、特にロゴは「ブログの顔」とよく言われますよね。すべてのページで一番最初に表示されるわけですから、そりゃそうだ。

画像を作るのは大変・・・と思うかもしれません。でも良さ気なフォント使うだけでもずいぶん違います。

ちなみに当ブログもそんな感じ。好きなフォント使用&単語ごとに色付け&背景透明 PNG にして保存しただけです。検索すればやり方はいくらでも出てきますので、頑張りましょう。

ブログで大切なのはもちろん本文の内容ですが、私はロゴもかなり大切だと思っています。「う、なんかセンスねぇな」というブログは、きっと自分と感性が合わないだろうな～と足が遠のきます。ちょっと時間かけてでも納得の行くものを作ってみてもいいかもです。

header.phpを編集する

会心のロゴ画像ができあがったら、さっそく変更していきます。ワードプレスの Gush2 がインストールされているフォルダの「images」フォルダに移動させます。

当ブログの場合はこういう構造です。「logo.png」という名称。

次に外観→テーマ編集から、ヘッダー（header.php）を選択します。

この記述の箇所を修正します。Windows の場合は「Ctrl」+「f」キーで検索すれば簡単に見つかりますよ。

変更方法は下記のとおり

ですので当ブログの場合にはこのようになります。

• 画像URL＝https://pinonon.com/wp/wp-content/themes/gush2/images/logo.png
• サイト名＝Choice is yours

ここまで修正したら「ファイルを更新」をクリックして保存し、サイトを確認してみましょう。ちゃんとできていればロゴが画像に変わっているはず。もしも反映されていない場合は、右クリックからサイトを再読み込みしてみてください。

ちなみにロゴはセンタリングしてあります。こんな塩梅。

<div align=”center”><div>で括ってあります。

ファビコンをオリジナルに変更する

ファビコンって何よ

これです。

PCで開いた時の上部にある、サイト名横のこれ。デフォルトだと Gush の「g」マークになっていますが、これも印象的なものい変えてみましょう。

まずはアイコンファイルを作成する必要があります。「ファビコン 作り方」とかでググればいくらでも出てきますので割愛。最終的に「favicon.ico」という名称で保存してください。

再び header.php を編集・・・する必要なし

ファイルを作ったらロゴ画像同様に images フォルダに移動させ、元々あるファイルと差し替えてください。

今回は一切手を加える必要はありません。ただファイル名を「favicon.ico」以外にするのであれば、もちろんコードも変更する必要があります。

またファビコンはどうやら反映されるまでに時間がかかるようです。1～2分では変更されないみたいなので、のんびり待ちましょう。

今回のビフォーアフター

Before（単純にテーマを変えただけの状態）

After（ロゴとファビコンを変更）

ロゴが画像になってセンタリングされましたが、全体感は変わっていませんね。まだまだカスタマイズ一合目。

次回はヘッダーと背景の色目を変えていきます。

※ワードプレス無料テーマ「Gush2」はこちらから。

WordPress Theme Gush2

wp-gush.com

では再見。