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

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

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

●Before
枠なし記事

下の方にパワーポイントの資料スライドを
2枚掲載しているのですが
何とも締まりがなくて間抜けです。

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

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

絶対に必要だと思いませんか?アレ。






そうです、画像の枠です。






画像に枠を付けると
このようになります。

●After
枠あり記事

たったこれだけのことで
どこからどこまでがスライドなのか
分かりやすく、美しくなりました。



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

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

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

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

●Before
枠なし

単純にメディアを追加した状態の
画像のソースです。

●After
画像ソースにコードを追加しました。
枠あり

ソースはこちら↓

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

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

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

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



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

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

あなたのブログの表示範囲に
画像の大きさを収めましょう。



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

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

画像の編集

「設定を表示」のプルダウンメニューから
「カスタムサイズ」を選択。


カスタムサイズ

サイズを入力します。

サイズ設定


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



まとめ

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

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

白っぽい画像には
なるべく枠線を付けるなどすれば
見やすさが断然変わってきますので
参考にしてみてくださいね。



最後まで読んでいただき
ありがとうございました。



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

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


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

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

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



スポンサード リンク

コメントを残す

画像を挿入できます

サブコンテンツ

運営者の紹介

名前:うみぞう
年代:40代
性別:女性
職業:デザライター
詳しいプロフィールはこちら
【メッセージ】
40代OLが隙間時間を利用してパソコンを最大限に活用したインターネット・マーケティングを実践中!


ブログランキングに参加中!!

人気ブログランキング1位

お陰様で1位をいただきました。

フォローしてください

このページの先頭へ