目指せ連載!! ボウリング漫画への道

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

sangoカスタマイズ 余白アイキャッチ

Wordpressテーマ、「SANGOで」一覧表示時のサムネイルに白枠(余白)をつける方法です。

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

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

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

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

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

通常時のカードタイプの見え方

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

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

余白をつけた場合の一覧表示

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

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

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

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

カテゴリー選択時の一覧表示

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

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

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

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

このソースコードをコピペして終わり!

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

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

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

追加CSS
.cardtype__img {
margin: 8px;
}

多分、これだけでOK。

イズミケイタ

現在、この短いコードにしました。何も問題ないです。

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

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

SANGO 横長表示

横長表示の見え方

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

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

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

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

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

白枠(余白)つけると紙の雑誌感やポラロイド感がでる。飽きたらやめればいいさ。

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

Sx-70

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

関連リンク

参考 SANGO|心地よさを追求したWordPressテーマサルワカ

RTはこちらから