【Stork】記事内の画像に影をつけるCSSを紹介します【コピペで簡単反映】

こんにちは〜!傘フォトグラファーのKamitani(@umbrellaly)です。

  • Strokでカスタマイズがしたい
  • マテリアルデザインっぽくしたい
  • 画像の背景に影を入れたい
  • CSSとかHTMLとかよくわからん

こういった方の気持ちにお答えいたします。

自分のブログを運営していると、様々細かなポイントのカスタマイズをしたくなるもの。でも、CSSやHTMLのある程度の知識や技術も必要で、挫折される方もおられると思います。

本記事では、簡単に記事内画像へ影を入れる方法をご紹介。
有料WordPressテーマである、「Stork」を使われている方向けの記事になってはいますが、他のブログでも応用可能です。

Storkで画像に影を入れるやり方は非常に簡単でして、今回ご紹介するコードをそのままコピペするだけで反映することができます。

ブログのデザインを少しでも好みのスタイルにして、書いていくモチベーションにもぜひ繋げてみてください!

※カスタマイズは、自己責任でお願いします。

スポンサーリンク

「Stork」で記事内の画像に影をつける方法

「記事内画像に影をつける」とはどういうことか、わからない方もおられるかと思います。

例えば、以下のようなイメージです。

この画像の周りに、影が出ているのがお分かりでしょうか?

赤枠で囲った部分のように、画像に影が出ます。
こうすることで、画像が少し浮いたような印象を、読み手の方に与えることができます。

結構細かい部分かもしれませんが、これだけでもかなり雰囲気が変わります。

実際の記事例

以下は僕が過去にあげた記事ですが、実際の記事になるとこんな見た目になります。

[kanren postid=”982″]

画像が立体的になるので、ちょっとスタイリッシュな感じで表示させることが可能です。

「画像に影をつける」とは、どういうものかお分りいただけたところで、ここからは実際のコードと、挿入の方法をお伝えします。

画像に影を入れるコード

実際のコードは以下のものです。

.entry-content img {
box-shadow: 5px 10px 20px rgba(0,0,0,0.25);
overflow: visible;
}

これをスタイルシートにコピーするだけでOKです。

それぞれの数値をいじることで、影の雰囲気を変えることができますが、とりあえずこのコードを入れてみてください。

スタイルシートへの記述の仕方

WordPressでブログを立ち上げた方は、「スタイルシート」と呼ばれるものに、CSSのコードを打ち込むことで、デザインを変更することができます。

「style.css」というのが、スタイルシートのファイルです。

このファイルに、CSSを打ち込んでいくことになります。

CSSエディターを利用

今回は、カスタマイズの内容がリアルタイムで反映され、それを見ながら編集ができる、「CSSエディター」という機能を利用して、カスタマイズを行なっていきます。

プラグインなどで追加するものでなく、誰でも使えますので、ご安心ください!

まずは、ブログの管理画面から、「外観」→「カスタマイズ」を選択します。

カスタマイズ画面を開いて、1番下にある「追加CSS」を選択します。

すると、下記の写真のような画面になります。

すいません、一応カスタマイズ内容にはモザイクをかけております!笑
(何も変なことはしてませんよ!!笑)

このモザイクが掛かっている部分に、CSSのコードを打ち込んでいきます。

反映させたいカスタマイズ内容(今回で言えば影を入れるカスタマイズ)を打ち込みおわったら、左上の「公開」をクリックします。

公開ボタンを押して、「公開済み」と表示されたら、完了です。
実際の記事ページなどにいってうまく反映されているかも確認してみてください。

念の為バックアップは必須

カスタマイズを反映させてみると、たまに

  • やばい画面真っ白
  • 文字化けがすごい
  • デザイン崩れちゃった
  • 動かなくなっちゃった

稀にこういったことが発生したりします。

ですので、カスタマイズをされる際には「バックアップ」をとるようにしてください。
せっかく一生懸命書いてきた記事や、時間をかけてこだわってきた、お気に入りのデザインも全て飛んでしまうことにもつながります。

そうなると、もう絶望しか待っていませんので、ぜひバックアップをとるようにしてください。
冒頭でもお話ししましたが、カスタマイズは自己責任でお願いします。

記事内画像に影を入れて、ブログの独自性を計りましょう

以上のように、CSSを挿入することで、記事内画像に影を落とすことができます。
このやり方は、「box-shadow」というCSSを利用していまして、これは他の部分でも活用することができます。僕のこのブログでも、色々多用しまくっていまして、影オタク化しています。笑

手軽に、おしゃれで近代的なビジュアルのブログに変えていくことができますので、まだ使っていない方は、ぜひ導入してみてはいかがでしょうか?

デザインを変えてみることで、ブログを継続していくためのモチベーションを維持することもできますので、ぜひ活用してみてください!

[kanren postid=”730″]

Twitterアカウント始動

降り頻るNews・情報の雨 良くも悪くも明日は我が身!我が身を守るもまた我自身。
『貴方は傘をお持ちですか?』

いま、はじめよう。

最新情報をチェックしよう!