【THE THOR】トップページの投稿一覧に区切り線を付けるカスタマイズ方法

どうも、じょにーでっぷん(@じょにーでっぷん)です。

今回はトップページやカテゴリページの投稿一覧に区切り線を付けるカスタマイズです。

【THE THOR】の「シャドウフレーム」や、「ボーダーフレーム」の記事一覧が個人的に見にくいと感じたので、同じように思っている方のお手伝いができれば幸いです。

今回目指すデザイン

ワイドレイアウトの場合

カードレイアウト・ノーマルレイアウトの場合

ノーマルレイアウト
カードレイアウト

【THE THOR】トップページやカテゴリページに区切り線を付けるカスタマイズ方法

画像のようにこのカスタマイズを行えば、全てのレイアウトでボーダーの区切り線を表示することが可能になります。

それでは、早速カスタマイズしていきましょう!

【コピペOK】THE THOR 区切り線のソースコード

以下のソースコードをwp-content>themes>the-thor-child>style-user.cssにコピペしてください。

これでアーカイブページに区切り線が表示できるようになりました!

ドット線以外のものを使いたい場合は、以下よりお好きなものをお選びください。

borderの種類の指定

border-bottom: 2px ○○ #D8D8D8;

の○○の部分を、以下の何れかに設定してください。

solid

solidを入れた場合の表示例

double

doubleを入れた場合の表示例(doubleの場合は”2px”の箇所を”3px”に変更してください)

solid

grooveを入れた場合の表示例

ridge

ridgeを入れた場合の表示例

dashed

dashedを入れた場合の表示例

dotted

dottedを入れた場合の表示例

 

FTPソフトやサーバーからstyle-user.cssファイルを開く術を知りません。という方は、

カスタマイズ画面から追加CSS

を開いていただき、まるっとコピペすれば大丈夫です。

あとがき

今回は、THE THORの記事一覧に区切り線(境界線)を表示させる方法についてお話しました。

わからないことがあれば(@じょにーでっぷん)までお気軽にご相談ください。

THE THORのカスタマイズ一覧はこちら!