cocoonエントリーカード画像位置の簡単なカスタマイズ

今回はほんとにちょっとした事なんだけど、気になった部分の調整記事です
同じような設定にしてる方の参考になるかな？

Index

cocoonの設定部分

エントリーカードを枠付きの設定にしている場合
Cocoon設定インデックスにある枠線の表示カードの枠線を表示するをチェック
のデフォルトだと画像のようになると思います

デフォルト

見てわかるようにサムネイル画像が左側についてる状態になりますよね？
この状態がちょっと気になったので、この部分をCSSに追加して変更します

デベロッパーツールを使ってクラスを探し、追記してあげる形ですね

/* エントリーカード画像 */
.widget-entry-card-thumb {
    margin-left: 3px;
}

追記するファイルは子テーマディレクトリ内のCSSファイルです

margin-leftでサムネイルの左側にスペースを開けてあげれば下の画像のようになります

変更後

細かい事ですがこうする事でバランスが取れ、見た目が少し良くなりますね＾＾
数値は好みの数値を入れてくださいね

上記コードを追記すると新着、人気記事ウィジェットのカードに適用されます

一度トップに表示している奴のサムネイルを大きいやつにしようかと変更した時に
上記コードだと当たり前ですがサムネイルが右側にはみ出るので以下に変更しました

/* 画像位置調整 */
img.attachment-thumb120,
img.new-entry-card-thumb-no-image,
img.widget-entry-card-thumb-no-image {
    margin-left: 3px;
}

気にはなってたんだけど放置していて、少し前に「やっぱり気になるから弄ろう」
となったので今回記事にしてみました
ほんとに細かい事なので、どれぐらいの人の参考になるかは分からないけど
もし同じような設定にしていて「ちょっと気になるんだよなぁ…」なんて人が居たら
簡単ですので是非試してみてくださいね

[share]