WordPressテーマ THE THOR
別ブログのZMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
WordPressテーマ THE THOR（ザ・トール）は、アーカイブページのレイアウト設定（【アーカイブ設定[THE]】→【コントローラー設定】→【レイアウト切替ボタンの設定】）として、
- ワイドレイアウト(default)
- カードレイアウト
- ノーマルレイアウト
の3種類から設定することができます。
ZMASAa.blogは、2019年1月1日に運営して以来、これまでdefaultの「ワイドレイアウト」に設定して使ってきました。
なお、【レイアウト切替ボタンを表示するか選択】の設定は「非表示(default)」にしていたため、閲覧者が他のレイアウトに切り替えることは不可能で「ワイドレイアウト」固定の表示となります。
最近になって「ワイドレイアウト」に飽きてきたのとアイキャッチのサイズが大きすぎると思い、アーカイブレイアウトの設定を「ワイドレイアウト」から「ノーマルレイアウト」に変更してみました。
「ノーマルレイアウト」に変更したことで、気になったことが幾つか出てきたので、それらを改善してみたいと思います。
前回は「エントリー記事カードの投稿年月日」についてカスタマイズを行いました。
今回は、WordPressテーマ THE THOR（ザ・トール）の「エントリー記事カードのタイトル」に関するカスタマイズについてまとめてみました。
WordPressテーマ THE THOR エントリー記事カードのタイトル
WordPressテーマ THE THOR（ザ・トール）の「エントリー記事カードのタイトル」での表示は次の様になっています。
今回気になっている点は、「エントリー記事カードのタイトル」の表示が少し寂しいことです。
これについて改善するカスタマイズを行ってみました。
エントリー記事カードのタイトルのカスタマイズ
「エントリー記事カードのタイトル」のカスタマイズを行います。
カスタマイズ内容
「エントリー記事カードのタイトル」のカスタマイズは、下記の通りです。
このカスタマイズ内容をthe-thor-childフォルダ内の「スタイルシート(style-user.css)」に追記します。
/************************************
** ■エントリー記事カードのタイトルのカスタマイズ
************************************/
.archive h2 a {
display: block;
position: relative;
color:#333; /*文字色*/
font-size:18px; /*フォントサイズ*/
letter-spacing:1px; /*文字間隔*/
text-decoration:none; /*装飾無し*/
font-weight:bold; /*フォント太さ*/
border-left:8px solid #fe619a; /*左ライン太さとカラー*/
border-radius: 3px; /*角丸コーナー*/
padding: 5px 3px 5px 6px; /*内側余白設定*/
line-height:150%; /*行の高さ*/
background: -webkit-repeating-linear-gradient(-45deg, #fdeef7, #fdeef7 3px,#ffddee 3px, #ffddee 7px); /*背景カラー*/
background: repeating-linear-gradient(-45deg, #fdeef7, #fdeef7 3px,#ffddee 3px, #ffddee 7px); /*背景カラー*/
transition-duration: 0.6s; /*アニメーション*/
}
カスタマイズ後のエントリー記事カードのタイトル
今回の「エントリー記事カードのタイトル」のカスタマイズによって、「エントリー記事カードのタイトル」の表示は次の様になりました。
今回の「エントリー記事カードのタイトル」のカスタマイズは、
- フォントを小さく調整
- 左側にラインを表示
の2点について修正を行いました。
最後に
今回は「エントリー記事カードのタイトル」のカスタマイズを行ったことで、タイトルが明確化されタイトルだけを確認する方には見やすくなったと思います。
なお、今回のカスタマイズは「ノーマルレイアウト設定のアーカイブページ」時のエントリー記事カードのタイトルだけでなく、「ワイドレイアウト設定のアーカイブページ」「カードレイアウト設定のアーカイブページ」時のエントリー記事カードのタイトルに対しても有効となります。
コメント