こんにちは。SaitoKouです。

WordPressテーマTCDの「VOGUE」を使用したWebサイト制作を最近実施しました。そこで出会ったカスタマイズについて、方法を記載していきます。訪れたみなさんのお役に立てれば幸いです。

修正内容:トップページのNEWS欄を非表示にする。

TCDテーマVOGUEには、ブログとお知らせの二つの投稿タイプがあり、それぞれトップページでは以下のように一覧を表示することができます。

今回の制作では、「ブログ」をお知らせとして使用し、「お知らせ」は使用しないという運用に決まったので、上記の画像のNEWS欄は不要ということになりました。この部分は使用しないので非表示とすることにしました。

修正方法

以下のCSSコードを追加します。

/* NEWSを非表示にする */
.p-content03__news {
    display: none;
}

/* BLOGの表示幅を右端まで広げる */
.p-content03__blog {
    width: 100%;
}

上記で表示が下図のように変わるはずです。いかがでしょうか?

まとめ

追加のCSSコードを記載することで、NEWS欄を非表示とすることができました。随時更新する記事の種類としてBLOGかNEWSどちらかしかないのであれば、上記のように片方だけにしてしまうのが良いと思います。

TCDテーマのカスタマイズ方法に関しては、公式のホームページに色々ノウハウが乗っていますので、そちらも参考にしてみてください。僕のサイトでのTCDコラムは、公式に乗っていないノウハウや豆知識を随時掲載していくつもりです。

<PR>

[PR] TCDテーマの表示変更、代行します

NEWS欄の非表示だけでなく、トップページの表示順変更や不要セクションの削除など、TCD VOGUEのレイアウト調整に対応します。ライセンス所持済みですので、安心してご依頼いただけます。

TCDテーマは非常に綺麗で高品質なテーマですが、決まった箇所にしか要素を配置できない少々「がちっ」とした有料テーマです。柔軟性の高いレイアウトを実現するためにはコーディングが必ず必要になってきます。実現したいご要件を聞かせていただき、既存テーマを壊さず必要な表示制御を実装します。

関連記事

  • 関連記事
  • おすすめ記事
  • 特集記事
TOP