ワードプレス（WordPress）で書いた記事に画像を挿入したのはいいけれど…
挿入した画像とブログの背景が一体化してしまい
- 境目がなくて見づらい
- 画像なのか本文なのか分かりづらい
- 見栄えを良くしてブログを運営している他のライバルと差をつけたい
↑↑↑
この「そんな風に思ったことはありませんか？」の部分は実は、テキストではなく画像です。笑
…こんな風に↑↑↑
挿入した画像に「枠線」をつけて境目を作れば画像なのか、テキストなのか、ブログを読んでくれているユーザーさんも一目瞭然です◎
今日は初心者の方でも１分で簡単に今すぐできる方法を解説いたします！
今回紹介する方法は画像編集ソフトを使って、あらかじめ画像自体に枠線をつける方法ではなく、ワードプレスの簡単操作だけで完結できるやり方をお伝えしますね！
【簡単２STEP】画像に枠線をつけよう！
まずやり方について結論から伝えると…
【STEP１：スタイルシートに「画像に枠線をつける」CSSコードを追記する】
【STEP２：ブログに挿入した画像にCSSクラス名を記入する】
たったこれだけです！
もしあなたがワードプレス初心者さんだとして『CSSコード』や『CSSクラス名』と聞いて「ブログ上級者のテクニックなのかも…」と構えなくって大丈夫です。
今回はコピペで誰でも簡単にできちゃいます^^
安心してください！
では早速、この２STEPをさらに分かりやすく５つの手順に分けて、細かく解説していきます！
まずは【STEP１】を３つの手順で解説します！
【STEP１】スタイルシートに枠線のCSSを追記する【初心者でもデキル☆】
①ブログのTOP画面の上部「カスタマイズ」をクリックします
②「カスタマイズ」の中の「追加CSS」をクリック！
③「追加CSS」に下記のCSSコードを追加で記入し、必ず『公開』ボタンをクリック！
※コピペだけでOKのCSSコードはこの後で紹介します^^
これでCSSコードの追加は完了しました^^
◆コピペでOK！CSSコードの紹介！
こちらのサイトでは【シンプルな枠線】と【影付きの枠線】の２種類の枠線を設定しているので
それぞれのCSSコードと、実際どんな風に表示されるのかイメージ画像も紹介します^^
そのままコピペするだけで設定できますよ◎
【画像に枠線をつけていない状態】
※ちなみにこちらの画像は僕が最近購入した中古ドメインパワーをエイチレフスで計測した時のスクショです^^
枠線がついていないと画像とブログの背景が一体化してて見にくいですね。
【シンプルな枠線】
img.w {
border:1px solid #808080;
}
【影付きの枠線】
img.wk {
border: solid 1px #808080;
box-shadow: 0px 0px 5px #808080;
}
と、こんな感じ！
こうして比べてみると『枠線あり』の方が圧倒的に見やすいですね^^
個人的には【シンプルな枠線】よりも【影付きの枠線】の方が見やすいかなって感じてます◎
ちなみに下記画像の赤い丸で囲んである『w』や『wk』の部分のことを『CSSクラス名』といい、ここはあなたの覚えやすい言葉を入力してOKです！
例えば『waku』とか『wakusen』『wakukage』とかでもいいし、僕みたいに『w』や『wk』など…好きな単語で問題ありません◎
またオレンジの四角で囲まれた『#808080』部分は枠線の色をカラーコードで指定しています。
好みの色やブログのテーマカラーなんかがあったら、そちらのカラーコードを入力してくださいね^^
カラーコードについては下記のサイトが分かりやすかったのでよかったら是非^^
【関連記事】色の名前とカラーコードが一目でわかるWEB色見本 原色大辞典
それでは続いてSTEP２の手順を２つに分けて詳しく解説します！
【STEP２】画像にCSSクラス名を入力！
①ワードプレスのビジュアル画面で、挿入した画像をクリックすると『吹き出しのメニュー』が出てくるので、その中の『鉛筆マーク』をクリックします◎
②『画像詳細』画面の『上級者向け設定』のプルダウンをクリック！『画像CSSクラス』に『CSSクラス名』を入力し『更新』ボタンをクリック
【シンプルな枠線】
【影付きの枠線】
これで画像に枠線をつける設定は全て完了です^^
僕の設定の場合【シンプルな枠線】のクラス名は『w』、【影付きの枠線】のクラス名は『wk』と設定したので、そのように入力しています◎
『CSSクラス名』はCSSコードを追加した時の赤い丸で囲んだ部分になります^^
まとめ
今日は記事に挿入した画像に枠線をつける方法を解説しましたが…無事にあなたも枠線をつけることはできましたか？
この記事に書いてあるCSSコードをそのままコピペするだけで大丈夫なので、是非あなたも画像に枠線をつけて読者さんに読みやすい記事を作ってみてくださいね◎
繰り返しになりますが『CSSコード』や『枠線のカラーコード』はあなた仕様に変更してOKです^^
最後まで読んでくださってありがとうございました！
コメント