【STINGERカスタマイズ】画像に枠やフレーム・影を装飾する方法

最近少しづつ記事が増えてきたのはいいのですが、スクリーンショット画像やキャプチャ画像を頻繁に使う仙台カフェに新たな問題点が１つ発覚。

カスタマイズや設定変更後の記事の反映具合などをキャプチャした画像を使う場合に、コンテンツと画像の区別がつけにくく分かりづらい^^;

画像サイズを変えるなどすれば問題はありませんが、結局スマホで見たときに見づらい。

それに、いちいち影やフーレムなどの枠線を付ける画像加工をするのも面倒なので、自動で画像加工をしてくれる方法を調べて設定してみました。

以下が解決方法。

つまづきポイント

• 枠線が表示されても右枠だけが消えてしまう
• 枠と画像の間に余白を入れたい

僕が今回設定していて解決案を探せずに一番苦労したのが、「右枠の線が切れる」という現象です。

あれこれ試していたら軽く１時３０分弱の時間を費やしていました^^;

できていなかったら再度、CSSが嫌いになっていたところでしたよ、ホントに…。

枠の余白は一瞬で解決しましたが、調べる必要があったのでつまづきポイントとして挙げました。

対処方法は以下から。

コンテンツと区別できない同化した画像

うん。自分で見ていても見づらい。

キャプチャした記事の内容なのか、この記事の内容なのか非常に曖昧。

これは訪問者にとって有益ではないということで、画像に枠線を自動で追加してくれるようにSTINGERをカスタマイズしてみよう！となりました。

自動で画像に枠線や影の効果を追加する設定方法

サイトやブログ上で使用している画像に枠線や影などの効果を追加表示したい場合や装飾したい場合はphpファイルにCSSを書き加える必要があります。（あってるのかな？笑）

僕はSTINGERの子テーマを使用しているので、子テーマのスタイルシート（style.css）に以下をコピペして貼り付けるだけで完了です。

.post img {
border:solid 1px #ccc;
}

上記コードは下記サイトから引用させていただきました。

ところが…。

画像の右枠だけが切れて表示されない！

そうなのです。

右枠だけがどーしても表示されないのです。

（はて。これは困った困った^^;）

検索エンジン上に表示されているサイトを横断しながら、色々と調べて試してはみるものの全く解決しない！

padding,margin,shadowbos insetなど色々試してみましたが全てダメ。

最終的に解決できた方法が「width」のサイズ設定でした。

widthを100%→98~99%で解決

色々と試した結果、全く解決できなかったので最終手段として画像サイズの横幅の変更を試みたのです。

とりあえず99%に設定したところ、

お！見切れていた右の枠線が表示された！

solid（実線）の太さなどにもよりますが、線が太い場合はwidthを98%などに設定すれば見切れずに表示されるはずです。

設定箇所

img.size-full, img.size-large {
margin-bottom: 10px;
height: auto;
max-width: 100%;
}

の、１００％を９９％に変更。

img.size-full, img.size-large {
margin-bottom: 10px;
height: auto;
max-width: 99%;
}

（好みで数値を変えてみてください。）

完成したコードがコレ！

.post img {
border:solid 1px #ccc;
padding:1px;
}

どちらかというとシンプルで枠線をあまり目立たせたくなかったので、色はそのままグレーを使用しました。

画像と枠線の間に少しだけ隙間を作ってあげると区切りがはっきりして見栄えも良くなるのでpaddingで指定してあげて完了です^^

子テーマならどこでも良いので貼り付けするだけです^^

後で何を変更したのかが分かりやすいように、以下のようにしておくと良いかもしれませんね。

/* 画像の枠線 */
img.size-full, img.size-large {
max-width: 99%;
}
.post img {
border:solid 1px #ccc;
padding:1px;
}

（このままコピペできます）

スマホ表示でのレイアウト崩れは？

次に気になったのが、スマホ表示の際のレイアウトの崩れなどです。

一応、９９％なので大きく崩れることはないと思ったのですが、一応確認することに。

フレーム変更（影や点線）などはお好みで！

上記のコードのsolid,px,#cccの部分を変更することで好みのフレームを作成することができます。

以下は簡易解説。

枠線を実践から点線にしたい場合はsolid部分を変更

枠線の種類は豊富にあるので、以下のいずれかに変更してお好みのスタイルに設定してください。

枠の太さを変えたい場合

枠の太さは○pxの数字で簡単に変更できます。

１〜３pxがオススメですが、そこはお好みで！

枠の色を変えたい場合

#○○○の部分の英数字を変えるだけで色を簡単に変更することができます。

色のコードは以下のようなサイトを参考にしてみてください。

画像に影をつけたい場合

画像に影をつけたい場合は

box-shadow

上のコードを以下のように書き加えればOKです！

.post img {
border:solid 1px #ccc;
padding:1px;
box-shadow:5px 5px 10px;
border:1px solid #000;
}

（好みの影にするにはpxの数値、#のカラーなどを変更してみてください）

影の詳しい解説サイトはこちら

あとがき

僕がサイトに画像を掲載するときは、基本的にfullサイズでメディアを追加して横幅は自動調整で表示されている仕様でした。

今回はその横幅を指定するmax-widthの１００％指定が何か邪魔をしていたようでした。

（コード初心者につき詳しい原因は分かりません^^;）

小さなサイズの画像は問題なく枠線が表示されていたので、、、。

このカスタマイズや設定方法が正しいやり方なのかどうかはわかりかねますが、とりあえず無事に表示されているのでOKとします！