超簡単!Simplicityで記事中の画像に枠を付けて見やすくする方法

この記事は約3分で読めます。

6176693803_490b2b97b1

 

わたしは、テーマSimplicityを使用してこの記事を書いています。

 

今回、どうしても記事中の画像に枠を付けたくて、方法を探していました。

 

そうしたら、とっても簡単に出来たので、その方法をメモ♪( ´▽`)

スポンサーリンク

枠を付けるメリット

 

こんな感じで、周りの色と同じ色をした画像(この場合は白)を挿入しても、スッキリ区別して見せることが出来ます(*^o^*)

スクリーンショット 2016-03-08 13.54.38

 

方法

 

本当に一瞬なので、記事にするのが申し訳ないくらいなのですが…

 

このコードを「style.css」に貼り付けるだけ!!

 

ただし、貼り付けるならSimplicity「子テーマ」のstyle.cssにしましょう。

 

親テーマの方だと、開発者わいひら様によるアップデートの際、編集下部分が上書きされることによりせっかくのカスタマイズが消えてしまいます。

 

なので、子テーマをお持ちでない方は、子テーマのダウンロードを行ってからコードを貼り付けましょう♪

 

ダウンロードはこちらから\(^o^)/

Simplicity 公式サイト

 

まとめ

 

ということで、どうでしょう?

 

サイトに戻って更新してみると…

 

きちんと画像に枠が入ってると思います(=゚ω゚)ノ

 

これで、スッキリ見やすい記事になりましたね♪

 

かんた〜ん\(*^o^*)/

 

ちなみに、こちらの記事も載せておきます。

 

わたしは今のところは必要ないので試してません。

 

でも、今度使うことがあるかもしれませんので♪

本文画像の枠線の設定で、特定の画像だけ枠線の設定を変える方法

 

いや〜でも、cssをいじるだけでこんなに簡単にやりたいことが出来てしまうなんて!

 

感動しました(=´∀`)人(´∀`=)

 

短くて申し訳ありませんが、この記事を読んでいただきどうもありがとうございました!!

 

またお会いしましょう。

 

追記:

 

Simplicityで、簡単に画像に枠を付けられる機能を発見しました!!

 

「カスタマイズ」→「画像」→「画像効果」へ進んでください。

 

そこに、このような画面が!!

 

ここから、お好みの枠を設定することが可能です(*^o^*)

 

ちなみに、わたしは「シャドー(影)」にしてみました。

スクリーンショット 2016-03-14 3.04.17

 

もうSimplicity、すごいです!!!

 

こんなことまで簡単に設定出来てしまうなんて( ; _ ; )

 

開発者のわいひら様に感謝です。

 

コードも、勉強になったので無駄ではありません♪( ´▽`)

 

Simplicity以外のテーマを使用した場合に活かしましょう!!

タイトルとURLをコピーしました