まずは画像を用意する
ご自身のサイドバーのサイズに合わせた画像を用意します。今回は参考例として当ブログのFacebookページの告知用バナーを取り上げますが、前述のとおり、応用は可能です。
画像フォルダに画像をアップする
普段、行っている手順のとおりに画像をアップします。簡単ですよね？
アップした画像のソースを表示させる
⑥画像選択後、⑦「オリジナルで表示」にチェックし、⑧ボタンをクリックします。
すると、以下のように、下書き記事にソースが表示されます。
<a href="http://stat.ameba.jp/user_images/20110910/12/copyself/d6/ac/p/o0147020711473682455.png"><img src="http://stat.ameba.jp/user_images/20110910/12/copyself/d6/ac/p/o0147020711473682455.png" alt="アメブロを魅せるブログに集客カスタマイズ*Mydesign-バナー画像" width="147" height="207" border="0" /></a>ブラウザがIE（インターネットエクスプローラー）で標準エディタをご使用の方は、画面下の「タグの非表示」を「HTMLタグを表示」に切り替えてください。通常のままですと、ソースが表示されません。
参照記事：
「カスタマイズの基本！投稿エディタの種類と違いとは？」
ソースをカスタマイズする①
このままでも画像自体は貼り付けることはできますが、今回の事例のように、バナー画像を利用して、外部サイトに誘導したい場合、リンク先は必ず変更しておきましょう。
<a href="https://www.facebook.com/pages/Mydesign/240243869349440" target="_blank"><img src="http://stat.ameba.jp/user_images/20110910/12/copyself/a5/fb/p/o0147020711473669469.png" alt="" width="147" height="207" /></a>リンク先の表示方法も「新しいウィンドウ：target="_blank"」に設定しておくと、より親切です。ブログ内ペ―ジでしたら必要ありません。あくまでも外部サイトの場合です。
ソースをカスタマイズする②
画像の位置調整をしたい場合は、以下のように、ソースに新たなタグを追加します。
真ん中寄せ：
<p align="center"><a href="https://www.facebook.com/pages/Mydesign/240243869349440" target="_blank"><img src="http://stat.ameba.jp/user_images/20110910/12/copyself/a5/fb/p/o0147020711473669469.png" alt="" width="147" height="207" /></a></p>真ん中寄せ＋上下に5pxの間隔：
<p style="margin:5px auto 5p auto;"><a href="https://www.facebook.com/pages/Mydesign/240243869349440" target="_blank"><img src="http://stat.ameba.jp/user_images/20110910/12/copyself/a5/fb/p/o0147020711473669469.png" alt="" width="147" height="207" /></a></p>レイアウトに応じて、適切な数字を代入してください。最初はうまくいかなくても、いろいろ試していくうちに感覚がつかめてくると思います。
関連記事：
「ブログ記事を彩る、これだけは押さえておきたいCSS属性」
記事本文を簡単に装飾する方法を解説しています。
「初心者でもできる！テキストやペタ画像を中央揃えにする方法」
画像やテキストを真ん中に指定する方法を解説しています。