【TCDテーマIZM(tcd034)】テーマオプションの設定

TCDテーマ『IZM(tcd034)』テーマオプションの設定

今回はTCDテンプレート『IZM(tcd034)』の初期設定の第3回目ですが、何をするかと言うとテーマオプションの設定 をしていきます。

テーマオプションとは簡単に言えばブログの見栄えのカスタマイズですね。

当ブログのテーマはSimplicity(現在はSANGO)ですが、テーマオプションという項目は見当たりませんね。

かわりに管理画面の「サイトをカスタマイズ」をクリックするとズラリとカスタマイズ出来る項目が現れます。

Simplicity「サイトをカスタマイズ」

沢山の項目が現れました。

Simplicity「サイトをカスタマイズ」

一方で今回使用するTCDテンプレート『IZM(tcd034)』はカスタマイズの項目が少ないです。

TCDテンプレート『IZM(tcd034)』「サイトをカスタマイズ

たったこれだけ? 無料テーマよりもかなり少ない様な…。

実はIZMのカスタマイズ画面は「外観」➝「テーマオプション」から行えます、これは最初にロゴを設定した場所と同じですね(笑)。

IZM(tcd034)のテーマオプションの設定

ここでは8つの項目があります。

IZM(tcd034)のテーマオプションの設定

この中で「ロゴの設定」「トップページ」は過去記事で解説済みなので、残りを1つずつ設定して行きましょう。

TCDテンプレート『IZM(tcd034)』~初期設定編ロゴ&ヘッダースライダー

基本設定

いちばん初めは基本設定になります。

色の設定

ここはとりあえずデフォルトのままで。

TCDテンプレート『IZM(tcd034)』の初期設定~色の設定

レイアウトの設定

ブログのレイアウト設定は4種類選択可能です。

  • 2カラム右サイドバー
  • 2カラム左サイドバー
  • 3カラム左右サイドバー
  • 3カラム右サイドバー2つ

デフォルトでは3カラムになってたので、そのままにしておきました。

TCDテンプレート『IZM(tcd034)』の初期設定~レイアウトの設定

ところがブログの右サイドバーには何もありません(笑)、ウィジエットで追加するのでしょうか?

TCDテンプレート『IZM(tcd034)』の初期設定~レイアウトの設定

追記:レイアウトを3カラムに設定する場合、ウィジェットを追加する必要があります。

基本的に『IZM(tcd034)』では4つの表示ページがあります、なのでブログのサイドバーを常に同じ状態にする場合は4種類のウィジェットで同じ設定を行う必要があります。

  • トップページ
  • アーカイブページ
  • 記事ページ
  • 固定ページ

TCDテンプレート『IZM(tcd034)』の初期設定~レイアウトの設定

カスタムCSS

こちらに書き込むことでテーマファイルをいじる事なくデザインをカスタマイズする事が出来ます。

例えばカエレバをカスタマイズする場合は一般的にはスタイルシート(CSS)にコードを挿入します。

ところが『IZM(tcd034)』ではカスタムCSSにコードを追加するだけで安全にブログのカスタマイズが出来ます。

TCDテンプレート『IZM(tcd034)』の初期設定~カスタムCSS

icon-check-square-o挿入前

TCDテンプレート『IZM(tcd034)』の初期設定~カスタムCSS

icon-check-square-o挿入後

TCDテンプレート『IZM(tcd034)』の初期設定~カスタムCSS

絵文字の設定

記事に絵文字は使わないのでチェックを外します。

TCDテンプレート『IZM(tcd034)』の初期設定~絵文字の設定

レスポンシブデザインの設定

ここは当然レスポンシブデザインを利用します。

TCDテンプレート『IZM(tcd034)』の初期設定~レスポンシブデザインの設定

スポンサーリンク

ロゴの設定

ロゴの設定は先日の記事で解説しています。

TCDテンプレート『IZM(tcd034)』~初期設定編ロゴ&ヘッダースライダー

トップページ

3段目のトップページの項目です。

ヘッダースライダーの設定

ロゴの設定と同じ記事で解説しています。

記事一覧の設定

記事一覧の設定とは何の事かと言うと、デフォルトでは「記事一覧1の設定」だけにチェックが入っています。

TCDテンプレート『IZM(tcd034)』の初期設定~ロゴの設定

こんな感じのトップページでした。

TCDテンプレート『IZM(tcd034)』の初期設定~ロゴの設定

残りの3つを設定してチェックを入れてやります。

TCDテンプレート『IZM(tcd034)』の初期設定~ロゴの設定

すると先ほどの「新着記事」の横に設定した3つの記事が現れました、クリック1つで切り替えが出来る優れものですね。

TCDテンプレート『IZM(tcd034)』の初期設定~ロゴの設定

アーカイブページ

アーカイブページとは、例えば12月に書いたページやIZMのカテゴリーページなどのいくつかのページをまとめて紹介するページの事です。

記事一覧の設定

アーカイブページの表示に日付とカテゴリを入れるかどうか選択できます、更に文字の大きさも変更できます。

TCDテンプレート『IZM(tcd034)』の初期設定~記事一覧の設定

ここではフォントサイズを14pX➝16pXに変更しました。

TCDテンプレート『IZM(tcd034)』の初期設定~記事一覧の設定

記事ページ

記事ページとは投稿・固定ページの事ですね。

フォントサイズ

ここでは記事タイトルと本文記事の文字の大きさを変更する事が出来ます。

TCDテンプレート『IZM(tcd034)』の初期設定~フォントサイズ

記事タイトルを21pX➝28pXへ変更。

TCDテンプレート『IZM(tcd034)』の初期設定~フォントサイズ

本文の文字を14pX➝18pXに変更しました。

TCDテンプレート『IZM(tcd034)』の初期設定~フォントサイズ

項目の表示設定

IZMにテーマを変更してから記事の最初に貼り付けていた写真が2枚に増えていたのでおかしいなと思っていたのですが、ようやく原因が分かりました。

TCDテンプレート『IZM(tcd034)』の初期設定~項目の表示設定<

「サムネイルを本文の前に表示する」にチェックが入っていて画像が2枚表示されていたので、このチェックを外してやりました。

TCDテンプレート『IZM(tcd034)』の初期設定~項目の表示設定<

すると2枚表示されていた画像が1枚になりました。

TCDテンプレート『IZM(tcd034)』の初期設定~項目の表示設定<

ソーシャルボタンの設定

SNSシェアボタンは大きいタイプに変更しました。

TCDテンプレート『IZM(tcd034)』の初期設定~ソーシャルボタンの設定 width=

TCDテンプレート『IZM(tcd034)』の初期設定~ソーシャルボタンの設定

いちばん下のTwitterボタンの設定では@(アットマーク)なしのアカウント名を記入すればOKです。

TCDテンプレート『IZM(tcd034)』の初期設定~ソーシャルボタンの設定

記事ページの広告設定1(関連記事上)

将来的にGoogle アドセンスの広告を貼る予定なので広告の設定は大事になります、そこでGoogle アドセンスのバナーと同じ336×280サイズのサンプルを作りました。

TCDテンプレート『IZM(tcd034)』の初期設定~記事ページの広告設定1(関連記事上)

このサンプルバナーを右左両方の広告に設定してみました。

TCDテンプレート『IZM(tcd034)』の初期設定~記事ページの広告設定1(関連記事上)

しかしなぜか縦に表示されました(笑)。

TCDテンプレート『IZM(tcd034)』の初期設定~記事ページの広告設定1(関連記事上)

推奨サイズが「300×250」となっているので「336×280」では大きすぎるのでしょうか?今度は推奨サイズ「300×250」に縮小してもう一度チャレンジしてみました。

TCDテンプレート『IZM(tcd034)』の初期設定~記事ページの広告設定1(関連記事上)

今度は横に2つ並びましたが、記事の終わりと離れているためにクリックされる確率は低い気がしますね。

記事ページの広告設定2

記事中の任意の場所にも広告を挿入できます、ショートコードをコピーして広告を入れたい所に貼り付けます。

TCDテンプレート『IZM(tcd034)』の初期設定~記事ページの広告設定2

TCDテンプレート『IZM(tcd034)』の初期設定~記事ページの広告設定2

すると記事の終わりのSNSボタンの上に表示されました。

TCDテンプレート『IZM(tcd034)』の初期設定~記事ページの広告設定2

ヘッダー

お次はヘッダー関係です。

ヘッダーバーの表示位置

ヘッダーバーというのは要するにグローバルナビゲーションの事ですね。

TCDテンプレート『IZM(tcd034)』の初期設定~ヘッダーバーの表示位置

最初の設定では上になっていましたが下に変更してみました。

TCDテンプレート『IZM(tcd034)』の初期設定~ヘッダーバーの表示位置

するとブログを下にスクロールした時に一緒にヘッダーバーが追尾して来ました(笑)。

TCDテンプレート『IZM(tcd034)』の初期設定~ヘッダーバーの表示位置

ヘッダーカルーセルの設定

なにやら初めて聞く名前が出てきましたが、カルーセルとはどういった物なのでしょうか? 調べてみるとどうやら左右にスライドする広告ですね。

TCDテンプレート『IZM(tcd034)』の初期設定~ヘッダーカルーセルの設定

とくに変更すべき個所はありませんが、記事タイプは選べるようになっています。

TCDテンプレート『IZM(tcd034)』の初期設定~ヘッダーカルーセルの設定

フッター

フッターにもカルーセルがありました。

フッターカルーセルの設定

フッターにはヘッダーと違う記事タイプを選ぶのが良いですね。

TCDテンプレート『IZM(tcd034)』の初期設定~フッターカルーセルの設定

フッターの広告設定

フッターにも広告を貼ることが可能です、こちらの広告ユニットの推奨サイズは「横幅728px縦幅90px」という事で横長のバナーになりますね。

TCDテンプレート『IZM(tcd034)』の初期設定~フッターの広告設定

こんな感じになりました。

TCDテンプレート『IZM(tcd034)』の初期設定~フッターの広告設定

SNSボタンの設定

TwitterやFacebookのURLを挿入するとアイコンが表示されます。

TCDテンプレート『IZM(tcd034)』の初期設定~SNSボタンの設定

あまり目立つ感じではないですね。

TCDテンプレート『IZM(tcd034)』の初期設定~SNSボタンの設定

その他

ここはデフォルトのままにしておきます。

TCDテンプレート『IZM(tcd034)』の初期設定~その他

以上でテーマオプション設定の完了です。

TCD無料テンプレート
TCD最新テンプレート

IZM関連記事一覧はコチラ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿や心無いコメントは無視されますのでご注意ください。(スパム対策)