Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 18
Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21
Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 30
Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33
[kjk_temp id=”2523″]
この記事では
記事カードの画像に余白をプラスしたカスタマイズを説明。
記事カードの画像に余白をプラスしたカスタマイズを説明。
[kjk_balloon id=”7″]記事カードをもう少しオシャレに見せたいな、、[/kjk_balloon] [kjk_balloon id=”13″]サルワカさんのサイト見て勉強してこい[/kjk_balloon] [kjk_balloon id=”6″]あっ！余白をプラスするだけでもおしゃれ感が違う！[/kjk_balloon]
[kjk_temp id=”3320″]
こんな感じ
Before
After
[kjk_temp id=”3368″]
記事カードの画像に余白を追加するカスタマイズをする準備
[kjk_temp id=”3370″]カスタマイズコードを追加する
/*--------------------------------------
記事カードに余白を追加
--------------------------------------*/
.cardtype__img img {/*カード記事の画像*/
padding: .45em .45em 0 .45em;/*上 右 下 左の余白*/
}
/*-----こちらはお好みで-----*/
.osusume-card .cardtype__link {/*カード記事全体に対して*/
padding-bottom: 15px;/*下の余白(内側)*/
text-align: center;/*文字中央揃え*/
}
/*--------------------------------------
記事カードに余白を追加
--------------------------------------*/
.cardtype__img img {
padding: .45em .45em 0 .45em;
}
.osusume-card .cardtype__link {
padding-bottom: 15px;
text-align: center;
}
[kjk_temp id=”3406″]
キャッシュを削除して更新
ブラウザ（Google Chromeなど）で自分のサイトを開いた状態で、F12を押す＞更新マーク＞右クリック＞キャッシュの削除とハード再読込をクリックするとスタイルが反映されます。[kjk_balloon id=”2″]今回のカスタマイズはお手軽にできちゃいます！[/kjk_balloon]
MEMO スマホ(横425px)表示で画像が左による方
padding:.45em .45em 0 .45emの下にwidth:100%;を追加すると解消されます。これで解決しますが、原因がわからないため、詳しい方がいましたら教えていただけると幸いです。NEWの部分が気になる方へ
[kjk_balloon id=”1″]この部分が気になる方は読んでください。[/kjk_balloon]
余白を入れた影響でNEWの部分のバランスが少し偏ってしまいます。
ここが気になって、ぼくみたいにどうしようもない方はこちらのコードをstyle.cssに追加してください。
/*--------------------------------------
NEW部分の位置調整（記事カード余白追加用）
--------------------------------------*/
.newmark {/*NEWの部分*/
right: 1.05em;/*右からの距離*/
top: 1.05em;/*上からの距離*/
}
するとこんな感じになります
Before
After
[kjk_ab id="4"]
記事カードの画像に余白をプラスする手順まとめ
手順をザクッと説明
変更手順
- FTPソフトとテキストエディタを開いて準備OK。
- 追加のコードを書き込んで、保存。アップロード。
- 更新して確認。
[kjk_temp id=”3171″]
