JIN

JINカスタマイズ|前の記事・次の記事を正方形に

カスタマイズは自己責任にてお願いします(カスタマイズ前にバックアップ推奨)。コードを記入してもうまく反映されない場合があります。このカスタマイズは、あくまでもぼくのサイトで行ったものです。

この記事では

前の記事・次の記事をカスタマイズしてみました。

画像をスッキリさせてみました

BEFORE
カスタマイズ前
AFTER
カスタマイズ後
MENくん
MENくん
背景を透明から白にして、画像を正方形にしたよ
くま3号
くま3号
おい、これってまさか、、、

カスタマイズの準備

子テーマを使用している方は、style.cssを開いてください。

追加CSSでちゃちゃっと終わらしたい方は、こちらの記事を参考にしてください。

カスタマイズのコード

下記のコードを子テーマもしくは追加CSSに追記してください。

コード

/*--------------------------------------
前の記事 次の記事
--------------------------------------*/
@media (max-width: 767px){
.fixed-content {
margin-top: 200px;
}
#prev-next .prev,#prev-next .next {
background: white;
}
#prev-next .prev .metabox img, #prev-next .next .metabox img {
width: 100px;
height: 100px;
object-fit: cover;
margin: 5px;
}
#prev-next {
padding:0 15px;
}
#prev-next .prev .metabox p, #prev-next .next .metabox p {
margin-top: 20px;
}
#prev-next a.prev:after {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
top: 5px;
left: 6px;
}
#prev-next a.next:after {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
top: 5px;
right: 6px;
}}

 

まとめ

画像が横長よりも正方形ですっきりしたほうが好きな方向けです。

SANGOのメインカスタマイズ(?)サイトはこちら