WordPressテーマ Cocoon
このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。
今回は、WordPressテーマ Cocoonでの「メインページのインデックスリストにタイトルを付ける」カスタマイズについてまとめてみました。
WordPressテーマ Cocoon メインページのインデックスリストのタイトル
WordPressテーマ Cocoonでの「メインページのインデックスリストのタイトル」のスタイルは、次の様にタイトル設定がありません。
この「メインページのインデックスリストのタイトル」を付けたい場合は、適当なウイジェットを使いタイトルだけ登録すればOKです。
例えばウィジェット「カスタム HTML」を使って、【インデックスリストトップ】一番下に設定します。
そのウィジェット「カスタムHTML」のタイトルを設定して保存します。
これで「インデックスリスト」にタイトルが付きました。
これで如何にも「メインページのインデックスリスト」にタイトルが付いた感じになります。
しかし、この状態では他ウィジェットのタイトルとの間隔が異なったり、アーカイブページにもインデックスリストのタイトルが表示されてしまうので、これらを改善するカスタマイズを行います。
メインページのインデックスリストにタイトルを付けるカスタマイズ
WordPressテーマ Cocoonでの「メインページのインデックスリストにタイトルを付ける」カスタマイズを行います。
カスタマイズ内容
「メインページのインデックスリストにタイトルを付ける」カスタマイズ内容は、下記の通りです。
「スタイルシート(style.css)」を開き、今回のカスタマイズ内容を追記します。
/************************************
** ■インデックスリストのタイトル付け
************************************/
.list.ect-vertical-card-2.ect-vertical-card.ect-2-columns.front-page-type-index {
margin-top: 10px!important; /*上マージン調整*/
}
.archive .widget-index-top-title.main-widget-label { /*アーカイブインデックス*/
display: none; /*非表示*/
}
カスタマイズ後のメインページのインデックスリストのタイトル
今回のカスタマイズによって、「メインページのインデックスリストのタイトル」のスタイルは、次の様になりました。
今回のカスタマイズでは、インデックスリストの上マージンの調整とアーカイブページのタイトル非表示の2点について行いました。
最後に
メインページがゴチャゴチャしている場合は、インデックスリストにタイトルを付けたいところです。
そう言うことで、メインページのインデックスリストにタイトルを付けたい場合には、手軽なカスタマイズで良いと思います。
コメント