Warning: Undefined variable $post in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/functions.php on line 12

Warning: Attempt to read property "ID" on null in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/functions.php on line 12

【SANGOを自分でカスタマイズ】記事カードの画像に余白をつけておしゃれ感をだしてみる


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

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

[wp-svg-icons icon="checkmark-circle" wrap="i"] カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。


この記事では
記事カードの画像に余白をプラスしたカスタマイズを説明。
MENくん
このカスタマイズはガッツリSANGO用です

MENくん
記事カードをもう少しオシャレに見せたいな、、
くま3号
サルワカさんのサイト見て勉強してこい
MENくん
あっ!余白をプラスするだけでもおしゃれ感が違う!

このサイトの環境

テーマ
子テーマ
プラグイン

こんな感じ

Before

変更前

After

記事カード変更後


使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

サブクライムテキストsublime text

記事カードの画像に余白を追加するカスタマイズをする準備

追加方法 難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズコードを追加する

/*--------------------------------------
記事カードに余白を追加
--------------------------------------*/
.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;
}

 

確認の手順

  1. カスタマイズコードを保存
  2. カスタマイズしたページを開く
  3. cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

キャッシュを削除して更新
ブラウザ(Google Chromeなど)で自分のサイトを開いた状態で、F12を押す>更新マーク右クリックキャッシュの削除とハード再読込をクリックするとスタイルが反映されます。

 

MENくん
今回のカスタマイズはお手軽にできちゃいます!
MEMO スマホ(横425px)表示で画像が左による方
padding:.45em .45em 0 .45emの下にwidth:100%;を追加すると解消されます。これで解決しますが、原因がわからないため、詳しい方がいましたら教えていただけると幸いです。

NEWの部分が気になる方へ

MENくん
この部分が気になる方は読んでください。
NEWの部分
余白を入れた影響でNEWの部分のバランスが少し偏ってしまいます。
くま3号
はいキタ、細かすぎて伝わらない部分
MENくん
そうそう、伝わらないけど10秒で直せるから許してよ

ここが気になって、ぼくみたいにどうしようもない方はこちらのコードをstyle.cssに追加してください。

/*--------------------------------------
NEW部分の位置調整(記事カード余白追加用)
--------------------------------------*/
.newmark {/*NEWの部分*/
    right: 1.05em;/*右からの距離*/
    top: 1.05em;/*上からの距離*/
}

するとこんな感じになります

Before

伝わらない部分変更前

After

伝わらない部分変更後

くま3号
もはや間違い探しレベルだぞ

 

 

記事カードの画像に余白をプラスする手順まとめ

追加CSSのまとめ

手順をザクッと説明
変更手順
  • FTPソフトとテキストエディタを開いて準備OK。
  • 追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。
くま3号
サルワかさんに感謝しろよ
MENくん
そいやっさ!