ワードプレス

TCDテーマ「CORE」でサイトのレイアウトをカスタマイズしてみました

こんにちは、マツコ・ミニマムです。

今日はいつも記事を書いている時間をサイトのレイアウトを変更をする時間に充ててみました。

というのも、これまで他に運営していたサイトでは賢威を使っていて、まだまだこのテーマに慣れていなかったというのもあり、サイトのレイアウト変更にあまり時間を使えていなかったからです。

とりあえず記事を先に書き始めると、意外にレイアウトを考えるのを後回しにしすぎてしまうので、時には思い切りも大切ですね。

さっそくどんな風にレイアウトを変更したのかまとめていきます。(ほぼ自己満足の世界ですが…)

スポンサードリンク



PCトップページ

画面上部

中央の記事タブはもともと「タブ記事一覧1」が最新記事、「タブ記事一覧2」は人気記事、「タブ記事一覧3」が注目記事という割り振りでした。

しかし、「人気記事と注目記事の違いって何?」とずっと疑問に思っていたので、思い切って複数カテゴリーを一つにまとめて表示することに。

今回の変更では、最新記事ビジネス記事好きなことという割り振りに変更しています。

ビジネス記事ではワードプレスやSEO関連をまとめて、好きなことでは私生活やゲームについての最新記事を表示するようにしました。

ちなみに、グローバルメニュー下のスライダーはサイトが重くなるので外しました。

 

画面左には最近の投稿をタイトルのみ10記事テキスト形式で表示しています。

アイキャッチ画像付きにするか迷いましたが、画像付きで10記事だと画面に圧迫感が出そうなのでとりあえずこの形式に落ち着きました。

画面中部

画面の中部では中央に記事まとめを配置。

もともとは「ピックアップ記事一覧」という名前でしたが、こちらも上部と同様にカテゴリ分けした方が見やすいと判断しました。

しばらくはワードプレスまとめを表示する予定です。

画面左に読者に複数ページサイト内を楽しんでいただけるよう人気記事を10個並べました。

画面下部

画面の下部では「特集記事スライダー」をオススメ記事に変更し、画面を下まで見てもらった時にスライダーで読みたい記事を選んでもらえるよう設定。

スライダーのボタンは、初めてサイトを訪れてくれた方のために、ボタンを押すとスライドすることを念のため説明書きしています。

 

画面右は「検索窓」→「広告」→「カテゴリー」→「過去ログ(アーカイブ)」→「カレンダー」の順に配置しています。

PC記事ページ

オススメ記事を画面中央にアイキャッチ画像で15個表示しています。

TCDのテーマはデザインで魅せるテーマなので気になる画像から記事を選んでもらおうという目論見です。その下は広告を設置。

 

画面右は「検索窓」→「広告」→「カテゴリー」→「過去ログ(アーカイブ)」→「最近の記事」→「人気記事」の順に配置しています。

できるだけトップページと似た配置にし、画面が切り替わった際に読者が違和感を持たないよう意識しました。

ちなみに、同一感を出すため、記事ページの設定をカテゴリーページの設定にも反映させています。

スマホトップページ

画面上部~中部

スマホトップページではPC版と同様に上部の3つのタブ、ピックアップ記事一覧、特集記事スライダーが自動が表示されます。

これについてはPCでの変更がそのまま反映されているので内容については割愛します。

画面下部

スマホ版ではPC版のサイドバーで設定した部分の内容を、スマホ専用の内容として別に設定できる機能があります。

そこで、画面下部には「検索窓」→「広告」→「最近の投稿」→「人気記事」→「広告」の順に配置しました。

同一感を出すために、記事ページ、カテゴリーページも同様の設定です。

まとめ

今回はガッツリと時間を取ってレイアウトの変更をしてみました。とても楽しかったです。

TCDのテーマはPCでのレイアウトとスマホでのレイアウトが完全に独立しているので、設定に時間はかかるものの、自由なカスタマイズをすることができます。

今回はフッターの設定ができなかったので、次はフッターに時間を使いたいと思います。

TCDのCOREは追加のプラグインなしでも簡単に凝ったレイアウトができるので作業していてストレスフリーでした。

賢威の時は設定だけでもCSSやらなんやらに頭を悩ませていたので(笑)

サイトのデザインは、読者の離脱率を低くしたり、PVを伸ばすためには必須の作業です。どうしても記事の執筆に時間を取られがちですが、時間を決めて作業するのも大事だと思います。

 

最後まで読んでいただきありがとうございました。


当ブログでは TCDのWordPressテーマ「CORE」を使用しています。

WordPressテーマ「CORE (TCD027)」

スポンサードリンク

関連記事

  1. TCDテーマ「CORE」で記事下にアドセンスを貼る方法
  2. TCDテーマ「CORE」でAll in one SEO pack…
  3. TCDテーマ「CORE」でFacebookのシェア数をカウントす…
  4. ファビコンってちゃんと作ってる?設定方法から自分で綺麗に作成する…
  5. TCDテーマ「CORE」で記事タイトルをh1タグで出力する方法
  6. 賢威7でヘッダーのロゴ画像上下にある余白を消す方法
  7. TCDテーマ「CORE」でTwitterのシェア数をカウントする…
  8. TCDテーマ「CORE」で記事のアイキャッチ画像を非表示にする方…
スポンサードリンク
スポンサードリンク

過去ログ

PAGE TOP