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

TCDテーマCURE:トップページボックスコンテンツのタイトルに付与される「01」を非表示にする、内容を変更する方法

Q.トップページのボックスコンテンツについて、01・02・03と表示されるアイコン部分を消す方法、あるいは別のアイコンに変更する方法はありますか。

 
▼変更箇所イメージ
変更箇所イメージ

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

・アイコンを非表示にする

TCDテーマ>サイト基本設定のカスタムCSSに入力してください。

#index_box_content .box_item .title:before { display: none; }
#index_box_content .title { padding: 0 45px; }

アイコン部分を非表示にした分、下の説明文などと文頭の位置が合うよう調整しています。

・別のアイコンに変更する

TCDテーマ>サイト基本設定のカスタムCSSに入力してください。

#index_box_content .box_item .title:before { font-family: 'design_plus'; }
/* コンテンツ1 */
#index_box_content .box_item.box_item1 .title:before { content: '\e0b7'; }
/* コンテンツ2 */
#index_box_content .box_item.box_item2 .title:before { content: '\e320'; }
/* コンテンツ3 */
#index_box_content .box_item.box_item3 .title:before { content: '\e813'; }

補足)
「e0b7」「e320」「e813」部分で各アイコンを指定しています。
アイコンの確認方法はTCDテーマSOURCE:3点ボックスコンテンツに表示するアイコンを変更する方法
『1. 表示させたいアイコンを確認する』『2. unicodeの値を確認する』をご参照ください。

丸枠を外してアイコンを大きく表示させたい場合は以下の記述を追加してください。

#index_box_content .box_item .title:before { font-size: 24px; border: none; }
CUREデモ

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

TCD LABO ご利用上の注意

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

またカスタマイズ内容は、バージョンにより異なる場合がございますこと予めご理解賜りますようお願いいたします。

お問合せ・ご要望

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