【SANGOカスタマイズ】一覧ページの画像に余白をつける方法

2 min 3 views
sangoカスタマイズ 余白アイキャッチ
イズミケイタ

イズミケイタ

漫画描いてます。日常をコマ割りに。
描き殴れ手直しはその後だ。いろんな種類の漫画をアップしていくぞ。
Beauty is in the eye of the beholder.

FOLLOW

[say img=”https://kitsunepublishing.com/wp-content/uploads/2017/12/prof.jpg” name=””]Wordpressテーマ、「SANGOで」一覧表示時のサムネイルに白枠(余白)をつける方法です。

まぁ、好みの問題ですけどね。作業自体は1分で終わります。[/say]

一覧表示に余白をつける(before/after)

SANGOはトップページの一覧表示を「カードタイプ」「横長タイプ」の二種類から選ぶことができる。

このカスタマイズは「カードタイプ」のデザインについてです。

SANGOカスタマイズ 一覧表示のサムネに余白をつける方法
通常時のカードタイプの見え方

このサムネイル画像に白枠(余白)をつけるというカスタマイズ。いきますよ↓

SANGOカスタマイズ 一覧表示のサムネに余白をつける方法
余白をつけた場合の一覧表示

はい。白枠(余白)つきました。上の二枚の画像はトップページですけど、カテゴリーの一覧表示も白枠(余白)付きに変わります。

カテゴリーページの一覧表示も「カードタイプ」と「横長タイプ」がカスタマイザーで選択可能。

↓デザイン的なものでカード自体がトップページよりも大きく表示される。

SANGOカスタマイズ 枠線付き カテゴリー一覧表示
カテゴリー選択時の一覧表示

「おすすめマンガ・本」のカテゴリーです。カテゴリーページには左上のラベルは表示されないのですぐわかります。当たり前ですよね。左上のラベル自体がカテゴリーですから。

カスタマイズ方法はCSS追記でOK

ボクは完全素人なんでよくわかってないんですけど、元のファイルをいじるのは出来そうもないのでCSS追記にしました。

【SANGOカスタマイズ】 一覧ページの画像に余白をつける方法 設定方法

このソースコードをコピペして終わり!
[codebox title=”追加CSS”]

.cardtype__img {
margin: 8px;
overflow: hidden;
position: relative;
height: 0;
padding-bottom: 57.7%;
}

[/codebox]

marginの数字の大きさが枠線(余白)の太さです。

もとのファイルからソースコードみて一覧表示のところ全体をコピーしてmarginのサイズを変えたものなんですけど、overflow以下はよくわからないので含めてコピペした。
でもmarginの値を変えるだけだから、そこだけ貼ればいいのかも。

[codebox title=”追加CSS”]

.cardtype__img {
margin: 8px;
}

[/codebox]

多分、これだけでOK。

[say img=”https://kitsunepublishing.com/wp-content/uploads/2017/12/prof.jpg” name=”イズミケイタ”]現在、この短いコードにしました。何も問題ないです。[/say]

一覧表示カスタマイズまとめ

「横長タイプ」のサムネに白枠(余白)がついてたから「カードタイプ」にもつけたくなってやってみたんだ。

SANGO 横長表示
横長表示の見え方

でも、グーグルの提唱する「マテリアルデザイン」的にはナシかも。

縦線も横線も多くなっちゃうからね。そういうの書いてあった気がする。

本当はマンガの表紙絵みたいな感じにしたかったんだ。
で、白い枠線のところに黒で枠線引いたらさらにくどくなったからやめた。

アール・ヌーヴォーのポスター絵みたいなモノも目指したんだけど無理でしたね。

CSSやプログラミングも知らなきゃだめだこりゃ。

[say img=”https://kitsunepublishing.com/wp-content/uploads/2017/12/prof.jpg” name=”” from=”right”]白枠(余白)つけると紙の雑誌感やポラロイド感がでる。飽きたらやめればいいさ。[/say]

私の愛機「SX-70」、折りたたみ式ポラロイドです。
もう手放したけどすっごい好きだった。フィルムの入手が手軽じゃなくて苦労した。

Sx-70

IZUMI KEITA/イズミ ケイタさん(@keita_kitsune)がシェアした投稿 –

関連リンク

[sanko href=”https://saruwakakun.design/” title=”SANGO|心地よさを追求したWordPressテーマ” site=”サルワカ”]

RTはこちらから

イズミケイタ

イズミケイタ

漫画描いてます。日常をコマ割りに。
描き殴れ手直しはその後だ。いろんな種類の漫画をアップしていくぞ。
Beauty is in the eye of the beholder.

FOLLOW

カテゴリー:
タグ:
関連記事