サイドバーに画像を張り付けてみる

PC・ブログ初心者の方の
ブログカスタマイズサポーター野口陽子です。

アメブロのサイドバーはスマホからは表示できないのですが、
パソコンから見るといろんな情報を掲載することができるので
とても便利な場所になります。

スマホユーザーが多い昨今ですが、
パソコンユーザーの訪問も必ずありますので、ここはきちんと
整えておく必要があります。

サイドバーにはよくfacebookのバナーやメルマガのフォームなど
張り付けている方もおおいです。

それに加えて、ご自分のサービスがわかる画像や
お客様と一緒の画像など貼っておくと、賑やかさだったり
楽しさだったりが伝わりますのでおすすめです。

それでは、サイドバーに画像を貼っていきましょう~


まずは、「マイページ」→「設定」→「ブログを書く」
と進みます。

そして、サイドバーに貼りたい画像をアップロードして、
記事枠に表示させます。
この時の画像のサイズは「小」にしておきます。



そして、下にスクロールして「HTML編集」をクリック。



表示されているコードを「HTMLコード」と呼んでおります。

張り付けられたコードの

『<img ~ width=220">』まで

この場合は、

『<img alt="" height="147" src="https://stat.ameba.jp/user_images/20180110/11/yoko0157/f4/c5/j/o0750050014109076146.jpg" width="220">』

までの部分をコピーします。



そして、上の方にある、三本線のようなマークをクリックします。


そうするといくつかの項目が出てきますので、その中の
「フリースペース編集」を選びます。


そして、そのスペースに先ほどコピーしたコードを張り付けます。
「プレビュー」で確認してみます。

サイドバーに画像が表示されていたらOKです。
忘れずに「保存」をしておきます。


これだけでもいいのですが、きっちりキレイに並べたい方に。
よく見ると画像がちょっと左に寄っております。



先ほどのコードを<center>~</center>で囲います。
「プレビュー」で必ず確認を。


画像が中心で揃いました。
サイドバーのサイズは2カラム・3カラムの広い方が300px
3カラムの狭い方が180pxとなっていますので、画像の幅もそれに合わせた方がきれいです。


350pxを300pxにしたり400pxを300pxにする、というサイズ変更は
先ほどのコードの中にあった
「width="220"」で変更できます。

「220」の数字を変更することで幅が変更できます。


このやり方は、あくまでアメブロに適したやり方です。
サーバーをお使いのホームページなどに画像を入れたい場合は
アップロードが必要な場合もあります。

サイドバーにお茶会やセミナーの様子、物販の場合は商品など
画像を貼っておくとお客様もイメージしやすいですので
やってみてくださいね♪






~自分Styleブログの作り方~

パソコン・スマホの操作が苦手な方に親切・丁寧なレクチャーとフォロー。 ブログカスタマイズの「基本のキ」からお伝えしています。 ブログヘッダーデザイン・カスタマイズ・セミナー・講座/対面・オンライン対応