満員の通勤電車もプラス思考にチェンジ! ブログ媒体運営に欠かせない知識とスキルを身に付けて 1つの世界に依存しないワラジライフを楽しんでいます。

*

デザインを締める!WordPressの画像に枠線を付ける方法

      2017/06/09

不安定なデザインは底が抜けたような不安感を与える

デザインの悪い見本キャプチャを大公開!
私のブログ記事より(笑)

●Before
枠なし記事
[br num=”1″]
下の方にパワーポイントの資料スライドを
2枚掲載しているのですが
何とも締まりがなくて間抜けです。

上と下の境目がなく
宙に浮いたようになっていますよね。

何故こんなに間抜けかというと
大切なアレがないんです。

絶対に必要だと思いませんか?アレ。
[br num=”5″]
そうです、画像の枠です。
[br num=”5″]
画像に枠を付けると
このようになります。

●After
枠あり記事
[br num=”1″]
たったこれだけのことで
どこからどこまでがスライドなのか
分かりやすく、美しくなりました。
[br num=”2″]

WordPressで画像に枠を付けるシンプルな方法

CSSを書き換えたりプラグインを使うのは
ちょっと面倒だし難しい・・・。

そこで最もシンプルに
画像に枠を付ける方法をご紹介します。

記事の編集画面のテキストエディタで
画像のソースに一文を追加するだけなので
簡単です!

●Before
枠なし
[br num=”1″]
単純にメディアを追加した状態の
画像のソースです。

●After
画像ソースにコードを追加しました。
枠あり
[br num=”1″]
ソースはこちら↓

style="border: 1px solid #a9a9a9;"

「1px」の部分は太さ
「#a9a9a9」はWEBの色番号ですので
あなたの好きな太さ、色を
選んでくださいね。

ちなみに真っ黒よりはグレーの方が
お洒落っぽく見えますよ。

色番号は↓以下のサイト↓が参考になります。
色の名前とカラーコードがわかる
WEB色見本
原色大辞典
[br num=”2″]

画像の右側の枠が消える?

いい感じに画像に枠が付いたけど
右の枠が表示されない!という場合は
大きすぎて画像が
はみ出している可能性があります。

あなたのブログの表示範囲に
画像の大きさを収めましょう。
[br num=”2″]

WordPressでメディアサイズを変える方法

画像の大きさを変更するには
記事編集画面のビジュアルエディタで
画像を選択して
編集をクリックします。

画像の編集
[br num=”1″]
「設定を表示」のプルダウンメニューから
「カスタムサイズ」を選択。
[br num=”1″]
カスタムサイズ
[br num=”1″]
サイズを入力します。

サイズ設定
[br num=”1″]
このブログの場合は
横幅を575pxにしています。

追記:2015年8月15日
スマホで見ると575pxだとちょっとはみ出している気がします。
まだまだ改変の余地ありですね。
再追記:2015年9月27日
テーマ変更により、幅はもっと小さくしました。

[br num=”2″]

まとめ

デザインは基本的に、
目に見えなくても全体が
四角で構成されています。

画像やテキストなどのパーツ要素も
四角を意識することで
安定感のあるデザイン
見せることができます。

白っぽい画像には
なるべく枠線を付けるなどすれば
見やすさが断然変わってきますので
参考にしてみてくださいね。
[br num=”2″]
最後まで読んでいただき
ありがとうございました。
[br num=”2″]

ブログ運営でネタ探しとか
悩んでいませんか?

動画マーケティングの教科書

動画作成とマーケティングを
学べる教材なのに
私の場合、ブログの
ネタ探しに対する考えは激変し
ブログそのものの改善点が
大量に見つかりました。

なんということでしょう・・・。

動画もブログも、
大切なのは「私」であり「あなた」です。

[br num=”3″]

 - サイトの作成・運営 , ,