WordPressテーマTCDのカスタマイズを研究するサイト

TCDテーマKADAN:ブログ等でトップページと同じレイアウトのボタンリンクを表示する方法

Q.ブログや固定ページでトップページのリンクボタンと同じものを使いたいです。

 
▼トップページ該当箇所イメージ 赤枠のリンクボタンのデザインを踏襲します。
変更箇所イメージ

A.下記の方法でご対応ください。

・リンクボタンのHTML記述

ページビルダーの文章コンテンツ内やGutenbergエディター(ブロックエディター)のHTML編集にて以下のように記述します。

<p class="p-cb__item-btn">
  <a href="リンク先URL" class="p-btn">リンク文言</a>
</p>
・カスタムCSS

上記記述のみですと、ボタン内のリンク文字色に「記事本文内のリンク文字色」が適用され、ホバー時に下線が表示されますので、記事編集画面のカスタムCSSに下記を入力し表示を調整します。

.p-cb__item-btn a { color: #fff; }
.p-cb__item-btn a:hover { text-decoration: none; }

この記事は役に立ちましたか?
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

0

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCD LABOへのお問合せやご要望は
ご連絡フォーム をご利用ください。