ワードプレス

理想のWEBサイトを直感デザイン。「TCDテーマオプション」の使い方

tcd-theme-options_ecmg

TCDだけの「テーマオプション」。これまでの設定だけで、ずいぶんレイアウトはまとまってきました。が、ここからが真骨頂です。今回はこのサイトで利用しているブログテンプレート「MAG」を例にしているので、特に「記事ページ」の自由度が非常に高くなっています。

テーマオプションは、テンプレートごとに最適な設定項目が用意されていますが、中でもMAGはシンプルなレイアウト。テーマオプションの主軸となる設定紹介にはもってこいです。

では早速いきましょう。

スポンサーリンク

記事ページ

tcd-theme-option_39

設定項目

記事タイトル・本文のフォントサイズ

SNSボタンなど各種項目の表示設定

Facebook OGP、Twitter Cardsの設定

ソーシャルボタンのデザイン設定

記事下の広告設定

記事中の広告設定

記事タイトル・本文のフォントサイズ

tcd-theme-option_40

そのままです。それぞれの文字サイズを変更できます。

クリックで拡大

tcd-theme-option_41

tcd-theme-option_42

SNSボタンなど各種項目の表示設定

tcd-theme-option_43

記事ページに必要な各種項目の表示をクリックひとつで選択できます。

上の画像のとおりですが、「ソーシャルボタンを表示する」「次の記事、前の記事リンクを表示する」「関連記事を表示する」など、かゆいところに手が届く項目たちが並んでいます。用途にあわせてチョイスできる自由度の高さ。プラグインやカスタマイズ無しでここまでできるのは嬉しい

シェアボタン・カテゴリー・タグ・前後記事欄

tcd-theme-option_44

ピックアップ記事欄

tcd-theme-option_45

関連記事欄

tcd-theme-option_46

Facebook OGP、Twitter Cardsの設定

tcd-theme-option_47

ここではFacebookやTwitterでシェアされた時に、美しく表示させるための設定ができます。

Facebook/Twitter

tcd-theme-option_48

tcd-theme-option_49

テキストだけのリンクではなく、カード型でキレイに表示されます

また、Facebook OGPを設定していれば、記事に「いいね」をした人のウォールだけでなく、その友達のニュースフィードにも表示されるようになるようです。そのためには「fb:admins ID」というものを調べる必要がありますが、簡単に調べられます。

調べ方はこちらの記事の最後にサラッと紹介しています。

本来なら手動でコードをいじって設定したり、別途プラグインを導入して設定する必要があるんですが、TCDテーマであればこのセクションに「fb:admins ID」とTwitterアカウント名を入力するだけで、OGP設定ができるようになっています。親切キワマレリ。

Twitter Cardsは「Twitter Developerページ 」での登録が必要です。

ソーシャルボタンのデザイン設定

tcd-theme-option_50

 公式のSNSボタンのデザインは、どーも野暮ったい・・

という人には最高に嬉しい機能。TCDテーマの洗練されたデザインに合った、4種類のボタンデザインが用意されています(もちろん公式ボタンも選択可能)

ボタンタイプ1(左寄せ+color)

tcd-theme-option_51

ボタンタイプ2(左寄せ+mono)

tcd-theme-option_52

ボタンタイプ3(カラム幅+color)

tcd-theme-option_53

ボタンタイプ4(カラム幅+mono)

tcd-theme-option_54

ボタンタイプ5(公式ボタン)

tcd-theme-option_55

特別なカスタマイズ無しで。クリックひとつで。いつでも自由に選べます。もちろん、表示するボタンの種類もクリックひとつ。

tcd-theme-option_56

このサイトでは独自にカスタマイズしたシェアボタンを設置しています。

記事下の広告設定

クリックで拡大

tcd-theme-option_57

tcd-theme-option_58

記事本文の下、または記事ページの一番下に広告を設置できます。AdSenseやアフィリエイトなど、発行されているコードを貼り付けるだけで完了。簡単です。

クリックで拡大

tcd-theme-option_59

tcd-theme-option_60

レイアウトを崩すこと無く、自然に配置されます。「いかにも広告欄!」なカンジでゴチャゴチャしないのが嬉しいですね。TCDはどのテーマを見ても、閲覧する側が不快になりにくいよう、広告配置場所にも徹底した配慮が感じられます

サイト運営者】だけでなく【サイト訪問者】の視点も考慮し作り込まれている。コンテンツマーケティングにおいて欠かせない、大切なことですね。見た目だけに留まらない、かつ”引っかかり”のあるセンスを存分に活用させてもらいましょう。

記事中の広告設定

また、用意されているショートコードをコピーするだけで、記事中の好きな場所に広告を設置できる機能も実装しています。アフィリエイト・AdSense収益化を図る場合、とても効果的に利用できます。

MAG_02

MAG_03

また、TCDテーマでは広告専用の「オリジナルウィジェット」というものも用意されているので、記事下や記事中だけでなく、あらゆるところにオイシく配置できるようになっています。「オリジナルウィジェット」についてはこちら 

ヘッダー

tcd-theme-option_60-61

設定項目

ヘッダーのスクロール追従設定

サイト説明文の表示設定

ヘッダーのスクロール追従設定

tcd-theme-option_61

「ページ上部に固定表示」を選択すると・・・

tcd-theme-option_62

tcd-theme-option_63

スクロールといっしょに、ヘッダーメニューが追いかけてきてくれます。

サイト説明文の表示設定

tcd-theme-option_64

「サイトの説明文をロゴの下に表示する」を選択すると・・・

tcd-theme-option_65

表示してくれます。不要な場合はチェックを外すだけ。”選べる”のはありがたいことです。なお、WordPress管理画面「設定」→「一般」の「キャッチフレーズ」に入力されているものが反映されます。

tcd-theme-option_66

フッター

tcd-theme-option_67

設定項目

一覧表示される記事の種類やエフェクトの選択

フッターに表示させるメニューの設定

スマホ用フッターメニューの設定

SNSボタンの設定(スマホ専用)

スマホ用固定フッターバーの設定

一覧表示される記事の種類やエフェクトの選択

tcd-theme-option_68

ここでは、どのページでも最下部に表示されるこの部分  の設定ができます。

tcd-theme-option_69

「一覧表示する記事タイプ」や、「タイトルの色設定」「タイトルの背景色の透明度設定」まで設定できます。デフォルトではこんな感じ。

MAG_07

いじらなくたって、じゅーぶんいい感じじゃないですか・・・

フッターに表示させるメニューの設定

tcd-theme-option_70

フッターのこの部分  の「見出し」の設定ができます。

tcd-theme-option_71

ここでは見出しの名称だけを設定できます。実際に表示させるものはWordPress管理画面「外観」→「メニュー」で自由に組むことができます。

tcd-theme-option_72

tcd-theme-option_73

カテゴリー一覧や、特定の記事へのリンクなどを配置できます。

スマホ用フッターメニューの設定

tcd-theme-option_75

チェックを入れると、スマホ閲覧時、グローバルメニューがフッターに表示されます。

tcd-theme-option_76

tcd-theme-option_77

SNSボタンの設定(スマホ専用)

tcd-theme-option_78

各種SNSページへのリンクを設定すると、スマートフォンのフッターにリンク付きアイコンが表示されます。

tcd-theme-option_79

スマホ用固定フッターバーの設定

tcd-theme-option_80

スマホ閲覧時、フッターに追従する固定バーを設置可能。シェアボタンや任意のページへのリンクなど、自由に設定できます。

blog-theme-mag_39

blog-theme-mag_40

メールマガジン登録ページやランディングページへのリンクとしても活用できますね。



ここまでの全ての設定を「TCDテーマオプション」だけで完結できます!

他にも、TOPページにスライダー機能があるテーマなどでは、スライダーの表示内容を設定できたり・・・

tcd-user-review_14

tcd-user-review_15

注目記事や最新情報などをTOPICS枠として設定できたり・・・

tcd-user-review_17

tcd-user-review_18

tcd-theme-option_74

と、こんなカンジで各テーマに適した様々な機能が、テーマオプションから一気に設定できるようになっています。

まとめ – ストレスフリーなレイアウト設定

TCDテーマだけに付いてくる「テーマオプション」。ここだけで、サイトレイアウトはほとんど完成してしまいます。各項目には全て日本語の説明がついている専門的な知識がなくても簡単に、直感的に設定できる。ストレスフリーにレイアウト設定できるのは、TCDならではですね。

次は、テーマに付属する「オリジナルウィジェット」を紹介します。指定した広告のランダム表示機能や画像つき記事リンクなど。レイアウトの自由度がさらに広がる機能です。

多彩な「ウィジェット」

ページ:
1

2

スポンサーリンク

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. ゆっくりじわじわ、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方…
  2. 知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケ…
  3. TodoistでToDoリスト。プロジェクトやタスクの階層化で頭の中を楽にする
  4. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ページプラグインたちの読…
  5. 理想のWEBサイトを直感デザイン。「TCDテーマオプション」の使い方

関連記事

  1. tcd-theme-widget_ecmg

    ワードプレス

    サイトを彩る直感設定。WordPressテーマTCD「オリジナルウィジェット」の効果的な使い方

    本格レイアウトの「キモ」。WEBサイトのレイアウトって、メインカラ…

  2. backwpup-japanese_ec

    ワードプレス

    アップデートで英語化された!?BackWPupをサクッと日本語化する方法

    アップデートしたら、設定画面が英語化された!?20…

  3. widgetoon-js-count-jsoon_ecmg

    マーケティング

    Twitterのシェア数表示を復活!「widgetoon.js & count.jsoon」の登録方…

    簡単登録で、後はおまかせ。Twitterは以前仕様変更があり、公式…

  4. simple-image-sizes_ec-ps

    ワードプレス

    メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simple Image Si…

    挿入画像サイズ、もっと自由に選びたい。お悩み相談室のコーナーです。…

  5. quicktag_ecmg

    ワードプレス

    WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機能の使い方

    反則ギリギリな簡単さ。小見出しのデザインを美しくしたい?ああ、例え…

  6. blog-contents_ecrt

    思考志向 - シコウシコウ

    ブログにおける「価値あるコンテンツ」とは?三大要素と”オリジナリティー”の正体

    いまだから、考えるべきこと。音楽制作をしていると、”自分の発するも…

【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. retina_ecmg
  2. extension-tools-for-bloggers_ec
  3. display-speed_ec
  4. valuable-content-from-image_ec
  5. todoist-tips_ecmg
  6. todoist_ec

タスク管理で、自己管理。

todoist

人気記事

  1. child-theme-mechanism_ecmg-ps
  2. media-setting_ec
  3. chrome-full-screen-capture-ecmg
  4. jpg-gif-png_ecmg
  5. child-theme_ecmg
  6. compress-jpeg-png-images-ecmg

魅力的なブログを、今すぐ作る。

tcd-mag

ピックアップ記事

  1. spark-tutorial-ecmg
  2. customized-theme-update_ecmg-1-ps
  3. simple-image-sizes_ec-ps
  4. original-share-button_ecmg-ps
  5. dash_ecmg
  6. blog-theme-mag_ecmg-ps

ブログのRetina対応、始めませんか?

retina-os-solution

掘り出し記事

  1. facebook-app-id-app-secret-ecmg2
  2. todoist-design_ec
  3. retina-text-widget-ecmg
  4. screenpresso-initial-setting_ec
  5. LightShot-Screenpresso_ecmg
  6. todoist-share_ec

ゆっくり、フシギなGIFアニメ。

gif-animation

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg

とっておきのWordPressテーマ。

tcd-theme-selection

ピックアップ記事

  1. original-share-button_ecmg-ps
  2. widgetoon-js-count-jsoon_ecmg
  3. facebook-fast-display_ecmg
  4. tcd-css-customize_ecmg
  5. todoist-productivity_ecmg
  6. tcd-theme-options_ecmg

CATEGORIES

Requ.log | Recommend

WordPressテーマ「MAG(TCD036)」
WordPressテーマ「Bloom(TCD053)」

特集記事

  1. theme-change_ecrt
  2. adjust-the-button_ecmg
  3. todoist_ec
  4. valuable-content-from-image_ec
  5. display-speed_ec
  6. tcd-mag_ecmg-ps

人気記事

  1. compress-jpeg-png-images-ecmg
  2. child-theme-mechanism_ecmg-ps
  3. chrome-font_ecmg
  4. screenpresso-initial-setting_ec
  5. todoist-basic_ec-ps
  6. media-setting_ec
  7. jpg-gif-png_ecmg

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg
  1. valuable-content-from-image_ec

    ワードプレス

    「わかりやすいブログ」に必須の「伝わりやすい画像」の作り方
  2. todoist-extension_ecmg

    マネジメント

    いつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選
  3. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  4. display-speed_ec

    ワードプレス

    目指せ軽量化!今からでも始めるべき、WordPressサイトの表示スピード改善計…
  5. tcd-mag_ecmg-ps

    ワードプレス

    魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカ…
PAGE TOP