何となくイイ感じ？
つい変更してしまった、WordPressのテーマ「Stinger2」ですが、表示までの速度も速くなり、気のせいかも知れませんが、まだ導入後1週間ですが、なんとなく、Googleからの流入も少しずつ増えて来たように感じられます。
とりあえず、サーバエラー(500)も回避出来たし。
「Stinger2」を導入して、とりあえずプラグインをリセットして、サーバエラーを回避して何となく動き始めて、このブログです。(この過程は、こちらのページをご覧下さい。)
ブログの顔となる、ヘッダー画像とファビコンを設定しました
基本的な初期設定に関しては、「Stinger2」の設定のページに詳しく書かれていますので、こちらのページを見ながら初期設定をしましょう。
WordPressテーマ「Stinger」の設定方法 | SEO対策に強い無料WordPressテーマ「Stinger」
ヘッダー画像のサイズが合わない
だいたいは、「Stinger2」の設定のページの通りで問題ないのですが、「Stinger2」の標準のヘッダー画像のサイズが「986px×150px」で、ふーたらのヘッダー画像のサイズが「940px×198px」です。
とりあえず、ふーたらのヘッダー画像の横幅を「986px」に変更しましたが、この縦横比を維持したままだと高さが「208px」になっちゃいました。
ふーたらのヘッダー画像の縦横比を変更するって手もありますが、ここは折角なんで、「Stinger2」の設定のページに書かれている方法で「Stinger2」のヘッダーのサイズを変更してみましょう。
functions.phpを変更しましょう
ヘッダー画像の表示サイズを変更するには、「functions.php」に変更を加えます。
変更箇所は上の図の➃の部分です。
この数字を変更するだけで、ヘッダー画像部分のサイズが変更されます。
ファビコンの設定の前に「子テーマ」を作ろう
さて、ファビコンの設定を皮切りに、これからブログを色々と弄くる予定ですので、バージョンアップの影響を受けないように、ここで「子テーマ」を作っておきましょう。
まずは、「wp-content/themes」の下に子テーマを置くフォルダを作成します。今回の私の場合は、「stinger_child」としてます。
子テーマのフォルダ作ったら、ここに(今回の例だと「stinger_child」)必要事項を記述した「style.css」を作るだけです。
ちなみに、「style.css」に書く必要最低減の事項は、
- Theme Name：子テーマ名
- Template：親テーマのディレクトリ名
- @import：親テーマのスタイルシート
だけです。
参考例として、このふーたらのブログでは、
/*
Theme Name: Stinger_child
Template: stinger2013815
*/
@import url('../stinger2013815/style.css');
と書いています。
「style.css」まで作成したら、「外観」→「テーマ」で、先程作って子テーマを有効化します。
設定が完了したら、ブログの表示具合を確認しましょう。恐らく何も変わっていないはずです。何も変わっていなければ、子テーマの作成は完了です。
ファビコンを設定しよう
子テーマを作り終わったら、ファビコンをアップロードししょう。アップロード先は、親テーマの下の「images」をいうフォルダです。
ファビコンをアップロードしたら、続いてソースの変更です。
子テーマでのソースの変更は、親テーマから変更したいソースを子テーマのフォルダにコピーしてから変更します。
今回はファビコンの設定ですので、変更するソースは「header.php」です。
子テーマにコピーしてきた、「header.php」の部分のもともとあったファビコンの設定を先程アップロードしたファイル名に変更します。
修正前
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/rogo.ico" />
修正後
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico" />
これで、こんな感じで、ファビコンが表示されているかを思います。
まとめ
以上の簡単操作で、ヘッダー画像とアイコンの設定が完了しました。また、子テーマの作成も完了しまたい。
今後は、この子テーマに、もっともっとカスタマイズを入れていく予定です。
では、よい「Stinger」ライフを！
