ワードプレスサイドバー画像挿入の簡単な作り方や綺麗に見せる配置
このページをご覧頂き有難うございます。
サイト管理人 錦織大輝と申します。
このページでは、ワードプレス初心者が最初にやるべき
作業や設定のコツの中から、「サイドバー画像挿入」を
中心にして、
・ワードプレスサイドバー画像挿入がきれいに見せる幅とは？
・ワードプレスサイドバー画像挿入がきれいに見える配置とは？
・ワードプレスサイドバー画像挿入の作業方法を画像付で解説
以上の構成からお届けしていこうと思います。
サイトは、全体的な見た目もファンを作るためには非常に大切。
気を抜かず、しっかり一つ一つ仕上げて基礎を固めていきましょう。
ワードプレスサイドバー画像挿入がきれいに見える幅とは？
この画像を用いた際の見え方を実際にお見せしながら、
サイドバーにおすすめの幅について解説していきます。
実際タイトル下にご紹介している画像の幅は、300pxに
なります。
メイン記事中の画像ではこのくらいの大きさが、
PC、スマホ、タブレットいずれの端末で見た時、崩れた
印象になりにくいと私は感じました。
実際、同じ画像を300pxで記事メインの場所に配置してみます。
PCからご覧になっている方には特に、
かなりインパクトも少ない形になりませんか？
綺麗な画像であっても、輪郭の見え方は、
小さくなればなるほど、見づらい画像になります。
しかし、
この画像がサイドバーならどうでしょうか？
十分幅も程よく広がって見えますよね？
ワードプレスサイドバーで画像挿入時に、
「大きく見せるための配置」には、周りの
余白とのバランスが最も重要。
全体の割合を含めて、
設定幅×6～7割程度の画像を用意しておく
ことを私はお勧めします。
では次に、
大きさのイメージ（画像の幅）が決まったら、
周りとのバランスを伴う目立たせるための配置
について解説していきます。
ワードプレスサイドバー画像挿入がきれいに見える配置とは？
次に、サイドバーに画像挿入する際の配置に
ついて解説していきます。
サイドバーに画像挿入するコツ1 テキストとの
バランス
画像挿入時に入れる画像には、テキストが含ま
れていますか？
画像には、
・テキストを含む画像
・テキストを全く含まない画像
大きく分けて2種類があると思います。
この２つにより、画像が引き立つ環境は変わります。
テキストを含む画像の場合に引き立つ配置のコツ
テキストを含む画像を配置させる場合は、上下には
十分な空白がベスト。
テキストを含んでいるのですから、上下にもテキストが
あると、画像が当然ながら目立ちません。
他の画像との接触も少なくしておきます。
この点を十分注意して配置を考えましょう。
テキストを含まない画像の場合に引き立つ配置のコツ
画像の中身に全くテキストが無い、風景やポスト等の
画像がある場合は、テキストの演出が非常に重要。
ネットの場合は、上から下に移動しますね？
という事は、
テキストを含まない画像をサイドバーに配置する場合は、
画像の上にテキストを必ず配置する事が重要。
なぜか？
画像があなたの思いや伝えたい事をシンプルに伝えた物で
あっても見る人により、見え方は別。
だからこそ、
「○○の関連画像が貼ってある位置ですよ。」という内容を
テキストで明確化しておくことが重要だから。
こうすることで画像の質や内容ではなく、配置としてきれいに
見せる効果は非常に高まります。
ぜひあなたのワードプレスサイドバーを綺麗に画像挿入する
レイアウト構成に参考にしてください。
では最後に、
サイドバーに画像挿入する簡単な方法を解説していきます。
ワードプレスサイドバー画像挿入の作業方法を画像付で解説
最後に実際にサイドバーに画像挿入する簡単な方法をご紹介
していきます。
ワードプレスサイドバーに簡単に画像挿入する方法 テキスト入力
もっとも簡単なのは、テキスト入力方法。
ウィジェットの使い方も非常に簡単。画像付で解説していきます。
まずは、サイドバーを触れるウィジェットという機能まで進みます。
①ダッシュボード内にある外観にマウスカーソルを合わせます。
②ウィジェットをクリック
このように右側に現在出ているウィジェットが表示されています。
左側にあるテキストというウィジェットをまずは、一番下にある
ウィジェットまで動かします。
動かし方は、
テキストを左クリックで押しながら、動かしていきます。
すると、
このようにテキストの枠がサイドバーメニュー内に入りました。
次に、▼をクリックします。
タイトル枠へは、メニュー代わりにするような
画像がある理由を書いて置きます。
次に、下の枠に、以下のタグを希望により
張り付けていきます。
サイドバーに画像表示のみを希望の方は、
|
1 2 3 4 5 6 |
<img src="画像のURL" alt="ALTテキスト表示名" width="サイズ指定したい場合のみ" height="サイズ指定したい時のみ" /> を書き込みます。 サイドバーに<strong>画像リンク</strong>を希望の方は、 |
|
1 |
<a href="クリック移動先URL"><img src="画像URL" alt="ALT用テキスト"></a> |
こうしたコードを張り付ければ、希望の内容が
画像表示できますのでぜひ実践してみて下さい。
もう一度綺麗に見せるための注意点を書いておきますが、
・サイズの横幅とサイドバー全体の幅のバランス。
・画像を挿入した上下のテキストの有無、行間のバランス
この２つを最低限しっかり行ってみて下さい。
きっとバランスのおかしな配置になる事はないと私は
自分のサイト制作をしながら、確信しています。
ではこのサイドバーへ簡単に画像挿入する方法や綺麗に
見せるコツを終わりたいと思います。
あなたのワードプレス導入後の不安がありましたら、
お気軽にご相談ください。
それでは、最後までこの記事をお読みいただき有難うございました。
アフィリエイトコンサル月収保障付!
