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。次のページ では「作りたいサイトの種類・目的別」に分け、おすすめテーマを選抜して紹介しています。

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

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. アレ?Chromeの表示文字、汚なくなった!? キレイなフォントを1分で取り戻そ…
  2. 知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケ…
  3. 【基本編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  4. 理想のWEBサイトを直感デザイン。TCD『テーマオプション』の使い方
  5. Twitterのシェア数表示を復活!「widgetoon.js & count.…

関連記事

  1. valuable-content-from-image_ec

    ワードプレス

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

    記事を見栄えよく、伝わりやすくするには?ブログ記事を書き始めると、…

  2. retina-weight-saving_ecmg
  3. retina-slider_ec

    ワードプレス

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

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

  4. favicon-generator_ec
  5. todoist-constitution_ec

    マネジメント

    ブロガー以外も知っておきたい。ブログ記事の書き方と、頭を整理する構成方法

    ストレスフリーで効率的な下準備。いざ記事を書こうとしても、すぐに手…

  6. unveil-lazy-load_ec

    ワードプレス

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

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

スポンサーリンク
高速・安定レンタルサーバー
高速・高機能・高安定レンタルサーバー【エックスサーバー】 高速・高機能・高安定レンタルサーバー【エックスサーバー】

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

レク.サウンドラボ

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

特集記事

  1. theme-change_ecrt
  2. improvement-flow_ecmg
  3. display-speed_ec
  4. business-books_ecmg
  5. todoist_ec
  6. original-share-button_ecmg
  7. valuable-content-from-image_ec
  8. extension-tools-for-bloggers_ec
  9. retina_ecmg
  10. tcd-theme-user-review_ecmg

ピックアップ記事

  1. dash_ecmg
  2. reset-button_ecrt
  3. chrome-font_ecmg
  4. restriction_ecrt
  5. todoist-basic_ec
  6. jpg-gif-png_ecmg
  7. tcd-theme-widget_ecmg
  8. gif-animation_ec
  9. sns-count-cache_ecmg
  10. todoist-advanced_ec

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

business-books

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

todoist

おすすめ記事

  1. 不要なメール通知にうんざり!購読・迷惑メールの解除をまとめて…
  2. アップデートで英語化された!?BackWPupをサクッと日本…
  3. 成長に欠かせない大切な秘訣。真面目な人ほど陥りやすい、…
  4. Windows?Mac?なんでもゴザレ。スクリーンショットに…
  5. ほら、こんなに直感的。投稿記事の順番を並び替えるWordPr…

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

retina-os-solution

ブログクオリティー底上げ10ツール

extools-for-bloggers

最近の記事

  1. 「私の名前はページプラグイン。」Facebookページのいい…
  2. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ペー…
  3. feedlyのフォロワー数が表示されないっ!?SNS Cou…
  4. カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせ…
  5. 【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザ…

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

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

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

Requ.log | おすすめ物語

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

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

Requ.log | STORY

  1. 「あの時、気づけなかった。」苦しい時に思い出して奮い立つ、人…
  2. 心が折れそうに辛いとき。一歩前へ踏み出し紡がれた、今へ続くス…
  3. 大切な人の最後の1年
  1. todoist_ec

    マネジメント

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

    ワードプレス

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

    ワードプレス

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

    ブログ

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

    ワードプレス

    目指せ軽量化!今から始める、WordPressサイトの表示スピード改善計画
PAGE TOP