micata

micata:記事本文中の画像をポラロイド風にする方法

mikata-logo

こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

今回の記事では先日公開された、無料WordPressテーマ:micata (ミカタ)の個別記事に表示される画像を、ポラロイド風にする方法を紹介したいと思います。

micata

micata と言っても聞き慣れないかもしれませんが、実はこのテーマ、あの Stinger で有名な Enji さんが提供してくれているんです。
すでにこれだけStingerが有名なのに、また別のテーマを無料で公開してくれるというのは、、、本当にすごいことですよね。
Enjiさんのテーマにファンが多いのも納得です。

今回はそんな micata のメインコンテンツ部分に表示される画像を、ポラロイド風にする方法を紹介したいと思います。

カスタマイズ前

↓ 最初の状態では画像の周りに白い余白や影は表示されません
(下の画像の外側に追加されている余白や影は、うちのサイトが付けているものです)

mikata-main-contents-image-before

カスタマイズ後

カスタマイズ 1

↓ 画像の周りに白い余白と影を追加

mikata-main-contents-image-after-1
カスタマイズ 2

↓ 影を左に移動し、濃さを調整

mikata-main-contents-image-after-3

[ad]

1. style.css を編集

micata でもStingerと同じようにカスタマイズ用の子テーマを配布してくれているので、ここでは子テーマを使用してカスタマイズしていきます。

子テーマの中に入っている style.css に以下のコードを書き込むと、、、

.single .post img {
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    max-width: 90%;
    margin: 0 auto;
    padding: 10px;
}

画像の周囲に白い余白と影が追加されて、ポラロイド風になりました。

mikata-main-contents-image-after-1

この方法、画像とコンテンツをしっかり区別してくれるので、うちのサイトみたいにスクリーンショットをよく使うようなサイトには、特にオススメです。
(画像の中の文字とサイト上の本文を、しっかり区別してくれます)

1-1. 固定ページの画像もポラロイド風にするには

先ほどのコードは個別記事(投稿)のメインコンテンツに表示される画像をポラロイド風にしましたが、固定ページの画像も同じようにポラロイド風にすることができます。

これは .page .post img という指定を増やすだけなので、style.css に追加するCSSコードは下のようになります。

.single .post img,
.page .post img {
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    max-width: 90%;
    margin: 0 auto;
    padding: 10px;
    background: #fff;
}

これで固定ページの画像にも影が追加されました。

mikata-main-contents-image-after-2

2. 影を調整するには

先ほど追加した影は box-shadow というCSS(プロパティ)で追加しているので、この box-shadow を編集すれば、お好みの影を画像に追加することができます。

box-shadowのプロパティを公式風に書いてみると、、、

main-contents-box-shadow-property

となります。

※ x方向、y方向というのは縦横の影の向きで、rgba(…)というのは、通常のカラーコード(rgb)に不透明度(a)を追加したものです。

なので、例えばx方向の向きを-4pxにして、影の色を薄く(不透明度を10%に変更)してみると、、、

.single .post img,
.page .post img {
    box-shadow: -4px 0 10px rgba(0,0,0,.5);
    max-width: 90%;
    margin: 0 auto;
    padding: 10px;
    background: #fff;
}

影が左に(x方向に-4px)移動して、不透明度が0.5(50%)になりました。

mikata-main-contents-image-after-2

ちなみに「ぼかし具合」の後に 10px のようなピクセル数を追加すると、スプレッド(影のサイズ)も追加することができます。

このあたりの話は下のサイトに詳しく書いてあるので、チェックすると良いかもしれません。

CSS3 box-shadow プロパティ:
http://memopad.bitter.jp/w3c/css3/css3_pr_box-shadow.html

今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。