tcd-theme-widget_ecmg

ワードプレス

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

WEBサイトのレイアウトって、メインカラムだけじゃキマらない。サイドやフッターにたたずむ、関連リンクやバナー広告。これらをセンスよく配置させることも欠かせません。

センスよく・・配置できる自信なんてないっス

そりゃそーっス。普通ならそーっス。でも、普通じゃないTCDテーマには各テンプレートごとに最適な【オリジナルウィジェット】が用意されています。

言語やデザインの専門知識が必要とされるはずのWEBサイト制作。「オリジナルウィジェット」が大いに助けてくれます。早速どんなものか見ていきましょう。

スポンサーリンク

WordPressの「ウィジェット」とは?

そもそも「ウィジェット」って何モノ?という方もいるでしょう。コレです。

tcd-widget_01

どこで設定するの?という方もいるでしょう。ココです。

tcd-widget_02

エラいややこしそーやんけ、という方もいるでしょう。余裕です。

クリックで拡大

tcd-user-review_43

上の場合、トップページの上から3つ目に「おすすめ記事」を設置した、ということですね。

TCDテーマを有効化するだけで、WordPressにデフォルトで実装されているウィジェットに加え、独自のウィジェットが追加されます。このサイトで使用中のテンプレート「MAG」の場合を例に、どんなオリジナルウィジェットが追加されるのかを紹介します。

以降の見えにくい画像はクリックで拡大できます。

デザインされた記事一覧

tcd-widget-ins1

MAGはブログに特化したテンプレートなので、訪問者にたくさんの記事を見ていってもらう工夫が施されています。特に、サイドバーに興味のある記事リンクが表示されていると、回遊率も上がり、効果的なアクセスアップが見込めます。

ということで、独自の「デザインされた記事一覧」ウィジェットが2種類用意されていました。

デザインされた記事一覧(tcdバージョン)

ひとつ目は「アイキャッチ画像のサムネイル」「記事タイトル」「記事抜粋文」を表示させる、リッチな印象のパターン。

tcd-widget_03

tcd-widget_04

マウスオーバーした時のエフェクトも楽しいウィジェットです。

tcd-widget_05

デザインされた記事一覧2(tcdバージョン)

tcd-widget_06

tcd-widget_07

こちらはシンプルなデザインならではの使い方ができるパターン。例えばこのウィジェットを効果的に挟むことで、ゴチャついた印象になりがちなレイアウトを引き締めることができます

tcd-widget_08

またどちらのパターンも、表示させたい記事の種類、表示数などを自由に選択可能。

tcd-widget_09

tcd-widget_10

「どの記事を、どんなタイトルで表示させるか」の設定も、各記事投稿画面内でワンクリック。

tcd-widget_11

カテゴリー一覧(tcdバージョン)

カテゴリー一覧表示も「ただそこにあるだけ」じゃない。おぉっ!?、と目を引く、気持ちのいいモーションです。

tcd-widget_12

tcd-widget_13

広告(tcdバージョン)

収益化に重宝するのがこのウィジェット。広告を「1箇所に」最大3つまで設定でき、ページを訪問する度にそれらをランダム表示させます。今回はフッターに設置してみましょう。

tcd-widget_14

「広告1」をクリックして、表示させたいアフィリエイトコードや、Googleアドセンスコードなどを貼り付けるだけ。それを「広告3」まで同様に行います。それだけで・・・

tcd-widget_15

tcd-widget_16

tcd-widget_17

tcd-widget_18

こんなかんじで、ページを訪問する度にランダム表示してくれます。このウィジェットの恩恵は、収益化を図る上ではとても大きなものです。例えば、

メリット

紹介したい広告が沢山あっても、広告枠だらけでゴチャついたサイトにならない

同じ場所でランダム表示させることで、収益結果から「効果的な広告」を判断できる

といったことが挙げられます。サイトイメージを損なわずに設置できるだけでなく、トライ&エラーの判断にも貢献してくれる、ということですね。

スクロール追尾型広告(tcdバージョン)

長い記事ページなどでありがちなことがあります。読み進めてどんどん下へスクロールしていくと・・・サイドカラムに設置していたウィジェットたちの表示は全て通り過ぎてしまい、「何もないスペース」ができてしまいます。これ、けっこうさみしいんですよね・・・

tcd-widget_19

記事によってコンテンツのボリューム(長さ)が違うのは当然なので、しょうがないことではあります。しかし、この「スクロール追尾型広告」を配置しておくと・・・

tcd-widget_31

tcd-widget_20

広告がスクロールと一緒についてきてくれます。記事を読み終えた後も、横で訴求し続けてくれるため、収益化につながりやすくなります

いつの間にか通りすぎてしまったものを、もう一度振り返って見に行く、なんてことは決して多いとは言えません。広告だけでなく、SNSリンクやフォローボタン、記事リンクや商品ページリンクなど、いろいろと応用がきくウィジェットです

同じような機能を実装するプラグインもありますが、使用テーマとの相性が悪いことも多いので、カスタマイズ無しで、デフォルトで備わっているのはありがたいですね。

Google AdSense広告の追尾は、規約違反となるのでやめましょう。

Googleカスタム検索(tcdバージョン)

WordPressデフォルトの「検索」ウィジェットでは、検索ワードが含まれる記事のみが、更新順に表示されます。しかも、検索ワードに「完全一致」していなければヒットしません

この「Googleカスタム検索」ウィジェットでは完全一致だけでなく、Googleの検索機能と同等の精度の高いサイト内検索が可能になります。しかも高速。

tcd-widget_21

tcd-widget_22

さらに、検索結果画面にAdSense広告を絡め、収益化に繋げることも可能。設定方法はこちらが参考になります。

ユーザープロフィール(tcd-wバージョン)

このウィジェットはその名の通り、「自己紹介ウィジェット」です。プロフィール画像や紹介文、各種SNSページへのリンクをひとまとめにして設置できます。

tcd-widget_23

tcd-widget_24

必要な項目だけを埋めればシンプルでスッキリしたウィジェットになりますし・・・

tcd-widget_25-2

全部の項目を埋めれば・・・

tcd-widget_26

ここまでボリューミーなウィジェットになります。SNSをたくさん利用している人には、各ページへのリンクをひとまとめにできるので、とても重宝しそうです。

通常であればプラグインで設置するような、SNSページヘのリンク付きウィジェット。これもデフォルトで実装されているので、最初からすぐに設置できて助かります。

また、画像にもリンクを設定できるので、別途作ったプロフィールページなどに飛ばすこともできます。応用すれば、「プロフィールウィジェット」としてではなく、「ランディングページや商品ページなどへ繋げるウィジェット」としても利用できそうですね。

スマホ用ウィジェット

tcd-widget-ins2

スマートフォンでの表示は、そのスペースの少なさゆえに、PCでの見栄えとは異なります。特にサイドに設置しているウィジェットは省略されがち。でも、スマートフォンでも「おすすめ記事」などを表示したい時は多々あります

・・・『スマートフォンでの表示だけを変更する』なんて、どうやるんでしょう。

レイアウトを決定づけている、PHPやCSSをいじる?どのくらい?どうやって?

外注すると○○万円?・・・高っ!自分でなんとかいじってみよう・・・

嗚呼(ああ)、レイアウトが崩れて見るも無残なサイトに・・・

嗚呼(ああ)、元に戻せない・・・

なんてことなく、初心者でもカスタマイズできてしまうのが「スマホ用ウィジェット」です。ここでは広告を追加してみます。

tcd-widget_27

tcd-widget_28

楽勝。

おまけ – デフォルトウィジェットもお綺麗。

例えば、WordPressにデフォルトで実装されている「テキスト」ウィジェットや「カスタムHTML」ウィジェット。使う機会も多い汎用的なものです。

そんな「オリジナルウィジェット」じゃない彼らも・・・

tcd-widget_29

tcd-widget_30

テーマのデザインにあった表示に仕上げられます。デフォルトで用意されているものも全て利用できるので、選択肢が広がります。これもありがたい。

【まとめ】WEBサイトは自分で立ち上げ、運営する時代。

別記事で紹介した「テーマオプション」。

そして今回紹介した「オリジナルウィジェット」。この2つの基本機能だけでサイトレイアウトは完成。専門的な知識がなくてもここまで簡単に設定できます。

自分好みに仕上げられるだけでなく、ほんの少しの時間で、何度でも変更を加えることができる ーー 外注した場合のコストを考えれば、費用対効果は非常に高いと言えるでしょう。

tcd-widget-ins3

もちろん他にも、スタートアップの時点でつまずかない工夫や、運営しやすい便利機能も特盛。

「コダワリが強い為に、つい時間がかかってしまうタイプの人」も、「サクッとやるだけでセンスよく仕上げたいタイプの人」も、設定は簡単に。オリジナリティーも出せる。コンテンツづくりに集中できる。TCDテーマならではの強みだと思います。

TCD関連記事一覧

次々と新しいテンプレートをリリースしているので、作りたいサイトの種類・業種などの目的で選べるのも特徴的。きっと、お気に入りのテーマが見つかるはずです。

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. ChromeでWEBページ全体をフルスクリーンショット!見ているページの全画面キ…
  2. 理想のWEBサイトを直感デザイン。「TCDテーマオプション」の使い方
  3. ほら、こんなに直感的。投稿記事の順番を並び替えるWordPressプラグインIn…
  4. きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG…
  5. ”ブログにおいしい”、注釈画像の作り方。Screenpressoで矢印や枠線、文…

関連記事

  1. retina-logo_ec

    ワードプレス

    【Retinaディスプレイ対応4】サイトの顔も綺麗に。TCDテーマなら3ステップで完了する、ロゴ画像…

    サイトロゴは、サイトの顔。このサイトでは最上部にロゴを配置していま…

  2. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法

    もっと思い通りに。具体的な調整例。下の記事で紹介した「カッコ美しい…

  3. tcd-theme-selection_ecmg-ps
  4. unveil-lazy-load_ec

    ワードプレス

    設定不要!WordPressプラグイン「Unveil Lazy Load」でページ読込スピードアップ…

    簡単装備で速度をブースト!プラグインをインストールするだけで、ペー…

  5. sns-count-cache_ecmg2

    ワードプレス

    便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cacheの設定方法と有効…

    必要な設定だけにフォーカス。「ページを表示するたびに、今のシェア数…

  6. show-title-tag_ecmg

    マーケティング

    もっと・・見せてくれませんか?タブに隠れた見えないタイトル。Show Title Tagを使って全表…

    ちょっと見せてるぐらいなら・・全部見せてください。誤解しないで。ブ…

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

特集記事

  1. valuable-content-from-image_ec
  2. adjust-the-button_ecmg
  3. display-speed_ec
  4. extension-tools-for-bloggers_ec
  5. retina_ecmg
  6. tcd-theme-user-review_ecmg

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

todoist

ピックアップ記事

  1. tcd-css-customize_ecmg
  2. enlarge-image-ecmg
  3. sns-count-cache_ecmg2
  4. gif-animation_ec
  5. todoist-basic_ec-ps
  6. intuitive-custom-post-order_ec

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

tcd-mag

掘り出し記事

  1. LightShot-Screenpresso_ecmg
  2. insert-card-link_ecmg
  3. todoist-re-schedule_ec
  4. screenpresso-initial-setting_ec
  5. todoist-design_ec
  6. screenpresso-capture-ecmg

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

retina-os-solution

ピックアップ記事

  1. child-theme-mechanism_ecmg-ps
  2. spark-tutorial-ecmg
  3. todoist-basic_ec-ps
  4. tcd-css-customize_ecmg
  5. widgetoon-js-count-jsoon_ecmg
  6. chrome-full-screen-capture-ecmg

ゆっくり、フシギな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. todoist-basic_ec-ps
  2. intuitive-custom-post-order_ec
  3. child-theme_ecmg
  4. chrome-full-screen-capture-ecmg
  5. todoist-routine_ecrt
  6. quicktag_ecmg

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. improvement-flow_ecmg
  2. valuable-content-from-image_ec
  3. theme-change_ecrt
  4. tcd-theme-user-review_ecmg
  5. extension-tools-for-bloggers_ec
  6. retina_ecmg

ピックアップ記事

  1. facebook-fast-display_ecmg
  2. jpg-gif-png_ecmg
  3. like-button-card_ecmg-ps
  4. unroll-me_ec
  5. blog-theme-mag_ecmg-ps
  6. child-theme_ecmg

最近の記事

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

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
  2. extension-tools-for-bloggers_ec

    ブログ

    【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個の…
  3. display-speed_ec

    ワードプレス

    目指せ軽量化!今からでも始めるべき、WordPressサイトの表示スピード改善計…
  4. valuable-content-from-image_ec

    ワードプレス

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

    マネジメント

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