アメブロのサイドバーに自分のホームページへのリンクを貼り付けたい！
所属している協会のバナーを置きたい！
この記事では、その方法を画像付きで説明します。
ざっと流れをまとめた動画（37秒）
画像つきの詳しい手順はここから↓
サイドバーにバナーを設定する手順
アメブロのサイドバーにバナーを設置する手順は以下となります。
- バナーを作成
- 画像をアップロード
- 画像にリンクを貼ったコードを取得
- コードをサイドバーに貼り付ける
手順どおりやれば、誰でもできます！
バナーを作成する
まずは、バナー作成です。
バナーの作成方法
バナーを作る方法はいくつかありますが、ヘッダー画像と同じです。
１，プロにお願いする（有料）
２，Photoshop、Gimp、Pixlrなどの画像加工ソフトを使ってパソコンで作る（無料）
３，スマホのアプリで作る（無料）
バナーのサイズ
ご自分のアメブロが何カラムなのか？
どこに置きたいか？
で、サイズは決まります。
まず幅ですが、
- ２カラム→300px
- ３カラムで幅の広いほうに置きたい→300px
- ３カラムで幅の狭いほうに置きたい→200px
となります。
高さはお好みで、決めてください。
例）300 ✕ 210
例）300✕270
画像の種類
画像のファイル形式は、jpegかpngであれば問題ありません。
依頼する場合自分で作成して保存する場合、
このどちらかにしておきます。
画像をアップロード
バナーの準備ができたら、さっそくアメブロの設定に入ります。
１，『ブログを書く』で新規エディタ画面を表示し、バナー画像をアップロードする。（この記事を投稿するわけでないので、タイトルやテーマは必要ありません）
２，アップロードした画像を記事に追加する
画像のコードを取得
画像をクリックするとリンク先に飛ぶように、画像にリンクを貼ります。
１，画像を選択して『リンク』をクリック
２，リンクの設定画面が表示されますが、リンク先URLは画像そのもののURLになっているので、何やらダラダラと書かれています。このURLは消しちゃいます。
３，URL内をクリックして、ctrlキー（Macの場合は⌘キー）を押しながらAを押して、ボックス内のURLを全て選択、削除します。
A＝allと覚えます。ちなみに、Cはコピー、Vは貼り付け、Xは切り取り、Zはやり直し。
これらのショートカットキーはすべての操作で使えます。
４，リンク先のURLを入力し、『リンクを別ウィンドウで開く』にチェックを入れ、『決定』をクリックします。
５，コードをコピーするので、一番下の『HTML表示』をクリックします。
６，<a target=・・・・から</a>まで範囲選択してコピーしておきます。
あとは、今コピーしたコードをサイドバーに貼り付けるだけです！
コードをサイドバーに貼り付ける
１，右上の『管理トップへ』をクリック
２，左側の一番下、『設定・管理』をクリック
３，『フリースペース編集』をクリック
４，先程コピーしたコードを貼り付ける
５，プレビューで確認して、サイズや配置を確認。OKだったら保存をクリックします。
最後に、ちゃんとリンクができるかどうが確認してくださいね！
複数設置したい場合は、フリースペースに順番にコードを貼り付けていけばOKです。
以上です！お疲れ様でした！
思い通りのデザインにならない方へ
スマホ用 記事下バナーを無料プレゼント中
