ワードプレスサイドバー画像挿入の簡単な作り方

このページをご覧頂きありがとうございます。

サイト管理人　錦織大輝と申します。

このページでは、ワードプレス初心者が最初にやるべき作業や設定のコツの中から、

「サイドバー画像挿入」を中心にして、

・ワードプレスサイドバー画像挿入がきれいに見せる幅とは？

・ワードプレスサイドバー画像挿入がきれいに見える配置とは？

・ワードプレスサイドバー画像挿入の作業方法を画像付で解説

以上の構成からお届けしていこうと思います。

サイトは、全体的な見た目もファンを作るためには非常に大切。

気を抜かず、しっかり一つ一つ仕上げて基礎を固めていきましょう。

ワードプレスサイドバー画像挿入がきれいに見える幅とは？

この画像を用いた際の見え方を実際にお見せしながら、サイドバーにおすすめの幅について解説していきます。

実際タイトル下にご紹介している画像の幅は、300pxになります。

メイン記事中の画像ではこのくらいの大きさが、

PC、スマホ、タブレットいずれの端末で見た時、崩れた印象になりにくいと私は感じました。

実際、同じ画像を300pxで記事メインの場所に配置してみます。

PCからご覧になっている方には特に、かなりインパクトも少ない形になりませんか？

綺麗な画像であっても、輪郭の見え方は、小さくなればなるほど、見づらい画像になります。

しかし、この画像がサイドバーならどうでしょうか？

十分幅も程よく広がって見えますよね？

ワードプレスサイドバーで画像挿入時に、「大きく見せるための配置」には周りの余白とのバランスが最も重要。

全体の割合を含めて、

設定幅×6～7割程度の画像を用意しておく

ことを私はお勧めします。

では次に、

大きさのイメージ（画像の幅）が決まったら、周りとのバランスを伴う目立たせるための配置について解説していきます。

ワードプレスサイドバー画像挿入がきれいに見える配置とは？

次に、サイドバーに画像挿入する際の配置に

ついて解説していきます。

サイドバーに画像挿入するコツ1　テキストとのバランス

画像挿入時に入れる画像には、テキストが含まれていますか？

画像には、

・テキストを含む画像

・テキストを全く含まない画像

大きく分けて2種類があると思います。

この2つにより、画像が引き立つ環境は変わります。

テキストを含む画像の場合に引き立つ配置のコツ

テキストを含む画像を配置させる場合は、上下には十分な空白がベスト。

テキストを含んでいるのですから、上下にもテキストがあると画像が当然ながら目立ちません。

他の画像との接触も少なくしておきます。

この点を十分注意して配置を考えましょう。

テキストを含まない画像の場合に引き立つ配置のコツ

画像の中身に全くテキストが無かったり、風景やポスト等の画像がある場合は、テキストの演出が非常に重要。

ネットの場合は、上から下に移動しますね？

という事は、

テキストを含まない画像をサイドバーに配置する場合は画像の上にテキストを必ず配置する事が重要。

なぜか？

画像があなたの思いや伝えたい事をシンプルに伝えた物であっても見る人により、見え方は別。

だからこそ、

「○○の関連画像が貼ってある位置ですよ。」という内容をテキストで明確化しておくことが重要だから。

こうすることで画像の質や内容ではなく、配置としてきれいに見せる効果は非常に高まります。

ぜひあなたのワードプレスサイドバーを綺麗に画像挿入するレイアウト構成の参考にしてください。

では最後に、サイドバーに画像挿入する簡単な方法を解説していきます。

ワードプレスサイドバー画像挿入の作業方法を画像付で解説

最後に実際にサイドバーに画像挿入する簡単な方法をご紹介していきます。

ワードプレスサイドバーに簡単に画像挿入する方法　テキスト入力

もっとも簡単なのは、テキスト入力方法。

ウィジェットの使い方も非常に簡単。画像付で解説していきます。

まずは、サイドバーを触れるウィジェットという機能まで進みます。

①ダッシュボード内にある外観にマウスカーソルを合わせます。

②ウィジェットをクリック

このように右側に現在出ているウィジェットが表示されています。

左側にあるテキストというウィジェットをまずは、一番下にあるウィジェットまで動かします。

動かし方は、テキストを左クリックで押しながら、動かしていきます。

すると、

このようにテキストの枠がサイドバーメニュー内に入りました。

次に、▼をクリックします。

タイトル枠へは、メニュー代わりにするような画像がある理由を書いて置きます。

次に、下の枠に以下のタグを希望により張り付けていきます。

サイドバーに画像表示のみを希望の方は、

<img src="画像のURL" alt="ALTテキスト表示名" width="サイズ指定したい場合のみ" height="サイズ指定したい時のみ" />

を書き込みます。

サイドバーに画像リンクを希望の方は、

<a href="クリック移動先URL"><img src="画像URL" alt="ALT用テキスト"></a> 

こうしたコードを張り付ければ、希望の内容が画像表示できますのでぜひ実践してみて下さい。

もう一度綺麗に見せるための注意点を書いておきますが、

・サイズの横幅とサイドバー全体の幅のバランス。
・画像を挿入した上下のテキストの有無、行間のバランス

この2つを最低限しっかり行ってみて下さい。

きっとバランスのおかしな配置になる事はないと私は自分のサイト制作をしながら、確信しています。

ではこのサイドバーへ簡単に画像挿入する方法や綺麗に見せるコツを終わりたいと思います。

あなたのワードプレス導入後の不安がありましたら、

お気軽にご相談ください。

それでは、最後までこの記事をお読みいただきありがとうございました。