今回はTCDテンプレート『IZM(tcd034)』の初期設定の第3回目ですが、何をするかと言うとテーマオプションの設定 をしていきます。
テーマオプションとは簡単に言えばブログの見栄えのカスタマイズですね。
当ブログのテーマはSimplicity(現在はSANGO)ですが、テーマオプションという項目は見当たりませんね。
かわりに管理画面の「サイトをカスタマイズ」をクリックするとズラリとカスタマイズ出来る項目が現れます。
沢山の項目が現れました。
一方で今回使用するTCDテンプレート『IZM(tcd034)』はカスタマイズの項目が少ないです。
たったこれだけ？ 無料テーマよりもかなり少ない様な…。
実はIZMのカスタマイズ画面は「外観」➝「テーマオプション」から行えます、これは最初にロゴを設定した場所と同じですね(笑)。
目次
IZM(tcd034)のテーマオプションの設定
ここでは8つの項目があります。
この中で「ロゴの設定」「トップページ」は過去記事で解説済みなので、残りを1つずつ設定して行きましょう。
TCDテンプレート『IZM(tcd034)』～初期設定編ロゴ＆ヘッダースライダー
基本設定
いちばん初めは基本設定になります。
色の設定
ここはとりあえずデフォルトのままで。
レイアウトの設定
ブログのレイアウト設定は4種類選択可能です。
- 2カラム右サイドバー
- 2カラム左サイドバー
- 3カラム左右サイドバー
- 3カラム右サイドバー2つ
デフォルトでは3カラムになってたので、そのままにしておきました。
ところがブログの右サイドバーには何もありません(笑)、ウィジエットで追加するのでしょうか？
追記：レイアウトを3カラムに設定する場合、ウィジェットを追加する必要があります。
基本的に『IZM(tcd034)』では4つの表示ページがあります、なのでブログのサイドバーを常に同じ状態にする場合は4種類のウィジェットで同じ設定を行う必要があります。
- トップページ
- アーカイブページ
- 記事ページ
- 固定ページ
カスタムCSS
こちらに書き込むことでテーマファイルをいじる事なくデザインをカスタマイズする事が出来ます。
例えばカエレバをカスタマイズする場合は一般的にはスタイルシート(CSS)にコードを挿入します。
ところが『IZM(tcd034)』ではカスタムCSSにコードを追加するだけで安全にブログのカスタマイズが出来ます。
挿入前
挿入後
絵文字の設定
記事に絵文字は使わないのでチェックを外します。
レスポンシブデザインの設定
ここは当然レスポンシブデザインを利用します。
ロゴの設定
TCDテンプレート『IZM(tcd034)』～初期設定編ロゴ＆ヘッダースライダー
トップページ
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を挿入するとアイコンが表示されます。
あまり目立つ感じではないですね。
その他
ここはデフォルトのままにしておきます。
以上でテーマオプション設定の完了です。
