今回は、TCDテンプレート『IZM(tcd034)』の初期設定の第3回目ですが、何をするかと言うと、テーマオプションの設定をしていきます。テーマオプションとは簡単に言えば、ブログの見栄えのカスタマイズですね。
当ブログの今現在のテーマはSimplicityですが、テーマオプションという項目は見当たりませんね。かわりに管理画面の「サイトをカスタマイズ」をクリックすると、ズラリとカスタマイズ出来る項目が現れます。
沢山の項目が現れました。
一方で、今回使用するTCDテンプレート『IZM(tcd034)』では、カスタマイズの項目が少ないです。
たったこれだけ？ 無料テーマよりもかなり少ない様な・・・。
実は、IZMのカスタマイズ画面は、「外観」➝「テーマオプション」から行えます。これは最初にロゴを設定した場所と同じですね(笑)。
IZM(tcd034)のテーマオプションの設定
ここでは8つの項目があります。
この中で「ロゴの設定」「トップページ」は過去記事で解説済みなので、残りを1つずつ設定して行きましょう。
基本設定
いちばん初めは基本設定になります。
色の設定
ここはとりあえずデフォルトのままで。
レイアウトの設定
ブログのレイアウト設定は4種類選択可能です。
- 2カラム右サイドバー
- 2カラム左サイドバー
- 3カラム左右サイドバー
- 3カラム右サイドバー2つ
デフォルトでは3カラムになってたので、そのままにしておきました。
ところが、ブログの右サイドバーには何もありません(笑)。ウィジエットで追加するのでしょうか？
追記 レイアウトを3カラムに設定する場合、ウィジェットを追加する必要があります。
基本的に『IZM(tcd034)』では、4つの表示ページがあります。なので、ブログのサイドバーを常に同じ状態にする場合、4種類のウィジェットに同じ設定を行う必要があります。
- トップページ
- アーカイブページ
- 記事ページ
- 固定ページ
カスタムCSS
こちらに書き込むことで、テーマファイルをいじる事なくデザインをカスタマイズする事が出来ます。例えば、カエレバをカスタマイズする場合、普通ならスタイルシート(CSS)にコードを挿入しますが、『IZM(tcd034)』では、カスタムCSSにコードを追加するだけで安全にブログのカスタマイズが可能になります。
挿入前
挿入後
絵文字の設定
記事に絵文字は使わないのでチェックを外します。
レスポンシブデザインの設定
ここは当然、レスポンシブデザインを利用します。
ロゴの設定
トップページ
3段目のトップページの項目です。
ヘッダースライダーの設定
ロゴの設定と同じ記事で解説しています。
記事一覧の設定
記事一覧の設定とは何の事かと言うと、デフォルトでは「記事一覧1の設定」だけにチェックが入っています。
こんな感じのトップページでした。
残りの3つを設定してチェックを入れてやります。
すると先ほどの「新着記事」の横に、設定した3つの記事が現れました。クリック1つで切り替えが出来る優れものですね。
アーカイブページ
アーカイブページとは、例えば12月に書いたページや、IZMのカテゴリーページなど、いくつかのページをまとめて紹介するページの事です。
記事一覧の設定
アーカイブページの表示に、日付とカテゴリを入れるかどうか選択できます。更に文字の大きさも変更できます。
ここでは、14pX➝16pXに変更しました。
記事ページ
記事ページとは、投稿・固定ページの事ですね。
フォントサイズ
ここでは、記事タイトルと本文記事の文字の大きさを変更する事が出来ます。
記事タイトルを21pX➝28pXへ変更。
本文の文字を14pX➝18pXに変更しました。
項目の表示設定
IZMにテーマを変更してから、記事の最初に貼り付けていた写真が2枚に増えていたのでおかしいなと思っていたのですが、ようやく原因が分かりました。
「サムネイルを本文の前に表示する」にチェックが入っていて、画像が2枚表示されていたので、このチェックを外してやりました。
すると、2枚表示されていた画像が1枚になりました。
ソーシャルボタンの設定
SNSシェアボタンは大きいタイプに変更しました。
いちばん下のTwitterボタンの設定では、＠（アットマーク）なしのアカウント名を記入すればOKです。
記事ページの広告設定1(関連記事上)
将来的にGoogle アドセンスの広告を貼る予定なので、広告の設定は大事になります。そこで、Google アドセンスのバナーと同じ336×280サイズのサンプルを作りました。
このサンプルバナーを右左両方の広告に設定してみました。
しかし、なぜか縦に表示されました(笑)。
推奨サイズが300×250となっているので、336×280では大きすぎるのでしょうか？今度は推奨サイズ300×250に縮小して、もう一度チャレンジしてみました。
今度は横に2つ並びました。しかし、記事の終わりと離れているためにクリックされる確率は低い気がしますね。
記事ページの広告設定2
記事中の任意の場所にも広告を挿入できます。ショートコードをコピーして広告を入れたい所に貼り付けます。
すると、記事の終わりのSNSボタンの上に表示されました。
ヘッダー
お次はヘッダー関係です。
ヘッダーバーの表示位置
ヘッダーバーというのは、要するにグローバルナビゲーションの事ですね。
最初の設定では上になっていましたが、下に変更してみました。
すると、ブログを下にスクロールした時に、一緒にヘッダーバーが追尾して来ました(笑)。
ヘッダーカルーセルの設定
なにやら初めて聞く名前が出てきましたが、カルーセルとはどういった物なのでしょうか？ 調べてみると、どうやら左右にスライドする広告ですね。
とくに変更すべき個所はありませんが、記事タイプは選べるようになっています。
フッター
フッターにもカルーセルがありました。
フッターカルーセルの設定
フッターにはヘッダーと違う記事タイプを選ぶのが良いですね。
フッターの広告設定
フッターにも広告を貼ることが可能です。こちらの広告ユニットの推奨サイズは、横幅728px縦幅90pxという事で、横長のバナーになりますね。
こんな感じになりました。
SNSボタンの設定
TwitterやFacebookのURLを挿入すると、アイコンが表示されます。
あまり目立つ感じではないですね。
その他
ここはデフォルトのままにしておきます。
以上でテーマオプション設定の完了です。
