ホテル・結婚式場などのホームページがつくれるエレガントなデザインのテンプレート「CANON」

ワードプレステーマ別

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

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

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; }

この記事は役に立ちましたか?

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

同じテーマのカスタマイズ記事