tcd-theme-widget_ecmg

ワードプレス

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

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

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

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

デザインセンスも必要とされる・・・ハズのWEBサイト制作。「オリジナルウィジェット」にまかしときゃあ解決です。早速どんなモンか見ていきましょう。

ウィジェットとは?

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

tcd-widget_01

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

tcd-widget_02

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

tcd-user-review_43

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

さて、WordPressにデフォルトで実装されているウィジェットに加え、TCDテーマには、それぞれのテーマに適したオリジナルウィジェットが用意されています。このサイトで使用中のテーマ「MAG」の場合を例に、どんなオリジナルウィジェットがあるのかを紹介していきます。

デザインされた記事一覧

パターン1

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

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

tcd-widget_03

tcd-widget_04

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

tcd-widget_05

パターン2

tcd-widget_06

tcd-widget_07

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

tcd-widget_08

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

tcd-widget_09

tcd-widget_10

記事ごとの設定も、記事投稿画面内でワンクリック。たったそれだけ。 

tcd-widget_11

カテゴリー一覧

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

tcd-widget_12

tcd-widget_13

広告

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

tcd-widget_14

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

tcd-widget_15

 クリックで拡大

tcd-widget_16

tcd-widget_17

tcd-widget_18

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

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

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

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

スクロール追尾型広告

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

tcd-widget_19

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

tcd-widget_20

広告がスクロールと一緒についてきてくれます!これでもう、さみしくなんてない・・・だけじゃありません。記事を読み終えた後も、横で訴求し続けてくれているわけです。つまり収益化につながりやすい

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

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

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

Googleカスタム検索

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

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

tcd-widget_21

tcd-widget_22

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

WordPress-Theme-TCD_Google-Custom-Seach

ユーザープロフィール

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

tcd-widget_23

tcd-widget_24

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

tcd-widget_25

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

tcd-widget_26

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

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

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

スマホ用ウィジェット

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

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

CSSやPHPのコードをいじる?どのくらい?どうやって?外注すると○○万円?息巻いて自分でいじってみて、レイアウト崩れが起きて、見るも無残なサイトに、、、

なんてことなく、私たちのような”ド素人ちゃん”でもカスタマイズできてしまうのが「スマホ用ウィジェット」です。今回は広告を追加してみます。

tcd-widget_27

tcd-widget_28

楽勝。

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

例えば、WordPressデフォルトで実装されている「テキスト」ウィジェット。汎用的なので、よく使うことになるものです。そんな「オリジナルウィジェット」じゃないコも・・・

tcd-widget_29

tcd-widget_30

テーマのデザインにあった表示に仕上げられてます。これはヒジョーにありがたい!

まとめ

先の記事で紹介した【テーマオプション】と、今回の【オリジナルウィジェット】たち。魅力はこれだけじゃないんですが、専門的な知識が無くても、自分だけでここまで簡単に設定できてしまうのであれば、もうイチから外注する必要もありませんね。

有料WordPressテーマを導入するということは、形のない”サービスを買う”ということ。当然私も慎重になった経験があります。それでも、妥協して思い通りにならずに時間をかけていたら、きっとスタートアップの時点でつまづいていたはず。サイト運営のモチベーションも続かなかったでしょう。

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

とはいえ、次々と新テーマをリリースし続けるTCD。次のページ では「作りたいサイトの種類・目的別」に分け、おすすめテーマを選抜して紹介しています。

きっと、お気に入りのテーマが見つかるはずです。

関連記事

【使用者レビュー】WordPress初心者にこそおすすめのブログテーマ、TCD「MAG」のデフォルト機能と魅力を徹底解説

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. TodoistでToDoリスト。プロジェクトやタスクの階層化で頭の中を楽にする
  2. 理想のWEBサイトを直感デザイン。TCD『テーマオプション』の使い方
  3. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  4. 魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「Phrase…
  5. ブロガー以外も知っておきたい。ブログ記事の書き方と、頭を整理する構成方法

関連記事

  1. retina-slider_ec

    ワードプレス

    【Retinaディスプレイ対応5】もっと美しくワガママに。スライダー画像さえも綺麗に表示させてしまう…

    スライダー嬢も、綺麗に。このサイトのトップページには、スライダーが…

  2. tcd-mag_ecmg-ps
  3. child-theme_ecmg

    ワードプレス

    「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡単解説!

    とりあえず作りきる!知識は後半!記事ページをカスタマイズしたい。え…

  4. switch-by-the-device_ecmg
  5. LightShot-Screenpresso_ec

    WEBデザイン

    辿り着いたキャプチャーツール、LightShotとScreenpresso。その機能比較と併用の魅力…

    併用すれば、もっとハカドる。スクリーンショットに特化したキャプチャ…

  6. sns-count-cache_ecmg

    ワードプレス

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

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

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

Requ.Sound Lab. | レク.サウンドラボ

レク.サウンドラボ

音に、景色と”振る舞い”を。

特集記事

  1. todoist-tips_ecmg
  2. todoist-extension_ecmg
  3. tcd-theme-selection_ecmg-ps
  4. valuable-content-from-image_ec
  5. business-books_ecmg
  6. tcd-theme-user-review_ecmg
  7. display-speed_ec
  8. adjust-the-button_ecmg
  9. todoist_ec
  10. theme-change_ecrt

ピックアップ記事

  1. blog-contents_ecrt
  2. todoist-class_ecrt
  3. blog-theme-mag_ecmg-ps
  4. facebook-page-plugin_ecmg-ps
  5. like-button-card_ecmg-ps
  6. todoist-routine_ecrt
  7. todoist-basic_ec-ps
  8. media-setting_ec
  9. gif-animation_ec
  10. phrase-express_ecmg

強みを見つけて、活かしていくために。

business-books

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

todoist

おすすめ記事

  1. 不要なメール通知にうんざり!購読・迷惑メールの解除をまとめて…
  2. メディア問題さん、さようなら。画像サイズを気ままに追加するプ…
  3. 小規模チーム、家族間の疎通に。Todoistで始める気軽なタ…
  4. 【Retinaディスプレイ対応1】Macで綺麗に。Windo…
  5. 【Retinaディスプレイ対応3】ねえ・・どうする?widt…

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

tcd-mag

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

retina-os-solution

最近の記事

  1. 【使用者レビュー】WordPress初心者にこそおすすめのブ…
  2. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  3. タスクに、日時や曜日が勝手に反映される・・!?Todoist…
  4. 魅力的なブログで収益化。ワードプレステーマTCD【MAG】の…
  5. MAGのデザインをフル活用。PCとスマホの広告設置枠を自由に…

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

特集記事

  1. 【フリーランス必見】確実に納期を守るために。タスク管理ツール…
  2. 【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザ…
  3. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  4. 最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くし…
  5. 【目的別】とっておきのWordPressテーマ比較。TCDテ…

Requ.log | おすすめビジネス書

コンテンツの秘密-ぼくがジブリで考えたこと 「言葉にできる」は武器になる。
プロフェッショナルは「ストーリー」で伝える 日本人の知らなかったフリーエージェント起業術

Requ.log | おすすめ物語

モモ マリコ/マリキータ
なんくるない たったひとつの冴えたやりかた

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. business-books_ecmg

    マーケティング

    【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分の強みを見つけて活か…
  2. tcd-mag_ecmg-ps

    ワードプレス

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

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点…
  4. tcd-theme-selection_ecmg-ps

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
  5. valuable-content-from-image_ec

    ワードプレス

    『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテンツ
PAGE TOP