ワードプレスサイドバー画像挿入の簡単な作り方や綺麗に見せる配置

このページをご覧頂き有難うございます。

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

このページでは、ワードプレス初心者が最初にやるべき

作業や設定のコツの中から、「サイドバー画像挿入」を

中心にして、

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

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

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

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

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

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

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

ワードプレスサイドバー画像挿入のコツ

この画像を用いた際の見え方を実際にお見せしながら、

サイドバーにおすすめの幅について解説していきます。

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

なります。

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

PC、スマホ、タブレットいずれの端末で見た時、崩れた

印象になりにくいと私は感じました。

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

ワードプレスサイドバー画像挿入のコツサイズ比較

PCからご覧になっている方には特に、

かなりインパクトも少ない形になりませんか?

綺麗な画像であっても、輪郭の見え方は、

小さくなればなるほど、見づらい画像になります。

しかし、

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

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

ワードプレスサイドバーで画像挿入時に、

「大きく見せるための配置」には、周りの

余白とのバランスが最も重要。

全体の割合を含めて、

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

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

では次に、

大きさのイメージ(画像の幅)が決まったら、

周りとのバランスを伴う目立たせるための配置

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

 

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

ワードプレスサイドバー画像挿入配置のコツ

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

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

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

バランス

画像挿入時に入れる画像には、テキストが含ま

れていますか?

画像には、

テキストを含む画像

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

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

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

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

テキストを含む画像を配置させる場合は、上下には

十分な空白がベスト。

テキストを含んでいるのですから、上下にもテキストが

あると、画像が当然ながら目立ちません。

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

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

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

画像の中身に全くテキストが無い、風景やポスト等の

画像がある場合は、テキストの演出が非常に重要。

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

という事は、

テキストを含まない画像をサイドバーに配置する場合は、

画像の上にテキストを必ず配置する事が重要。

なぜか?

画像があなたの思いや伝えたい事をシンプルに伝えた物で

あっても見る人により、見え方は別

だからこそ、

「○○の関連画像が貼ってある位置ですよ。」という内容を

テキストで明確化しておくことが重要だから。

こうすることで画像の質や内容ではなく、配置としてきれいに

見せる効果は非常に高まります。

ぜひあなたのワードプレスサイドバーを綺麗に画像挿入する

レイアウト構成に参考にしてください。

では最後に、

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

 

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

操作方法画像付

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

していきます。

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

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

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

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

ワードプレスサイドバー画像挿入タグ入力0

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

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

ワードプレスサイドバー画像挿入タグ入力

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

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

ウィジェットまで動かします。

動かし方は、

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

すると、

ワードプレスサイドバー画像挿入タグ入力1

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

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

ワードプレスサイドバー画像挿入タグ入力2

タイトル枠へは、メニュー代わりにするような

画像がある理由を書いて置きます。

次に、下の枠に、以下のタグを希望により

張り付けていきます。

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

こうしたコードを張り付ければ、希望の内容が

画像表示できますのでぜひ実践してみて下さい。

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

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

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

きっとバランスのおかしな配置になる事はないと私は

自分のサイト制作をしながら、確信しています。

ではこのサイドバーへ簡単に画像挿入する方法や綺麗に

見せるコツを終わりたいと思います。

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

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

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

当サイト人気コンテンツ

アフィリエイトコンサル6万円でアドセンス×物販月収保証付の全貌

コメントを残す

サブコンテンツ

著者:錦織大輝プロフィール


管理人:錦織大輝

年齢 1979年生まれ

私の収入実績

平成26年12月 アドセンス本格参入

平成27年3 月 アドセンス収入14万円達成

平成27年10月 アドセンス収入100万円突破

平成28年3月 コンサル依頼と指導実践開始
Googleアドセンスで100万円稼ぎました!
2015年10月アフィリエイト報酬実績証拠画像

2014年3月実績証拠画像
2015年3月アフィリエイト報酬実績証拠画像



私へのご相談もお待ちしております。

錦織にコンサルを頼んでみたい! こんな熱意のある方に、私が全力 でサポートしている詳細は↓

錦織のアフィリエイトコンサル費用

アフィリエイトコンサル決済後日程相談の方へ


Skype音声通話を希望の方へ

Skypeによる無料音声相談を行っております。


skype希望の方は、まずは、chatにてご連絡ください。
24時間以内に確実にご回答させていただくことをお約束します。

応援ありがとうございます。

YOUTUBEチャンネル

トレンドアフィリエイトやり方

トレンドアフィリエイト初心者やり方まとめ

最新情報をメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

アフィリエイト始め方

アフィリエイト初心者始め方まとめ

物販アフィリエイトやり方

物販アフィリエイト初心者向けやり方講座まとめ

更新記事をメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

最近のツイート

このページの先頭へ

FX ブログ