【WordPress】特定の画像にだけ枠線・影をCSSで付ける方法(スマホスクリーンショットで便利)

https://farm6.static.flickr.com/5762/20919637280_707214c8c3.jpg

こんにちは。WordPress初心者の部長ナビ(@nabi_1080)です。日々カスタマイズ頑張っております!

スポンサーリンク

iPhoneのスクリーンショットは「枠線」が付かないので、超絶見づらい

先日アップしたPush7の記事だが、iPhoneのスクリーンショットは、枠線がないと白い部分が多くてとにかく見づらいです

例えばこれ

IMG_3787

↑はい、これ。超絶見づらい

これに枠線・影を付ける方法を発見したので紹介します

1 WordPressの外観→テーマの編集→style.cssに枠を付けるコードをブチ込む

以下のコードを突っ込みます

色は自分で適当に決めて下さい

2 MarsEditで、ショートカットを作る

スクリーンショット 2016-03-29 16.40.49

MarsEditの記事作成画面で、右上にある「Format」の一番下「Customize」を選び、左下の「+」を押して新しいショートカットを作ります

私は名前を「枠線」にして、「枠」なんで、「Command」+「Option」+「Shift」+「W」にショートカットを設定しました

このように設定して、アップした画像を選択して、ショートカットキーを押すと、このコードがブチ込まれて枠線が付きます

3 「Command」+「Shift」+「T」でHTMLモードに変更して、画像のコードを選択する(私はflickrでアップしてます)

スクリーンショット 2016-03-29 16.53.03

↑この状態では、ただ画像がアップされているだけなので、画像の部分を選んで、ショートカットキーを叩き込みます

4 「div class」がブチ込まれる

スクリーンショット 2016-03-29 16.53.22

↑先頭と、最後にdivが入ったのが分かると思います。これでオーケー。後はアップしましょう!

5 完成!So Nice!

IMG_3787

↑ほい。こんな感じ。ね?見やすいでしょ?

画像が多いと、いちいち作業しなければイケませんが、普通の画像は基本的に私は枠無しなので、希望するモノのみ枠を付けると言う事が出来るこの技をぜひお試しあれ!

スポンサーリンク

この記事をシェアする!

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

この記事の関連カテゴリ

サイト内検索