アメブロのサイドバーに自分のホームページへのリンクを貼り付けたい!
所属している協会のバナーを置きたい!

この記事では、その方法を画像付きで説明します。
ざっと流れをまとめた動画(37秒)
画像つきの詳しい手順はここから↓
サイドバーにバナーを設定する手順
アメブロのサイドバーにバナーを設置する手順は以下となります。
- バナーを作成
- 画像をアップロード
- 画像にリンクを貼ったコードを取得
- コードをサイドバーに貼り付ける
手順どおりやれば、誰でもできます!
バナーを作成する
まずは、バナー作成です。
バナーの作成方法
バナーを作る方法はいくつかありますが、ヘッダー画像と同じです。
1,プロにお願いする(有料)
2,Photoshop、Gimp、Pixlrなどの画像加工ソフトを使ってパソコンで作る(無料)
3,スマホのアプリで作る(無料)
バナーのサイズ
ご自分のアメブロが何カラムなのか?
どこに置きたいか?
で、サイズは決まります。
まず幅ですが、
- 2カラム→300px
- 3カラムで幅の広いほうに置きたい→300px
- 3カラムで幅の狭いほうに置きたい→200px
となります。
高さはお好みで、決めてください。
例)300 ✕ 210

例)300✕270

画像の種類
画像のファイル形式は、jpegかpngであれば問題ありません。
依頼する場合自分で作成して保存する場合、
このどちらかにしておきます。
画像をアップロード
バナーの準備ができたら、さっそくアメブロの設定に入ります。

1,『ブログを書く』で新規エディタ画面を表示し、バナー画像をアップロードする。(この記事を投稿するわけでないので、タイトルやテーマは必要ありません)
2,アップロードした画像を記事に追加する

画像のコードを取得
画像をクリックするとリンク先に飛ぶように、画像にリンクを貼ります。
1,画像を選択して『リンク』をクリック

2,リンクの設定画面が表示されますが、リンク先URLは画像そのもののURLになっているので、何やらダラダラと書かれています。このURLは消しちゃいます。

3,URL内をクリックして、ctrlキー(Macの場合は⌘キー)を押しながらAを押して、ボックス内のURLを全て選択、削除します。

A=allと覚えます。ちなみに、Cはコピー、Vは貼り付け、Xは切り取り、Zはやり直し。
これらのショートカットキーはすべての操作で使えます。
4,リンク先のURLを入力し、『リンクを別ウィンドウで開く』にチェックを入れ、『決定』をクリックします。

5,コードをコピーするので、一番下の『HTML表示』をクリックします。

6,<a target=・・・・から</a>まで範囲選択してコピーしておきます。

あとは、今コピーしたコードをサイドバーに貼り付けるだけです!
コードをサイドバーに貼り付ける
1,右上の『管理トップへ』をクリック

2,左側の一番下、『設定・管理』をクリック

3,『フリースペース編集』をクリック

4,先程コピーしたコードを貼り付ける

5,プレビューで確認して、サイズや配置を確認。OKだったら保存をクリックします。

最後に、ちゃんとリンクができるかどうが確認してくださいね!
複数設置したい場合は、フリースペースに順番にコードを貼り付けていけばOKです。

以上です!お疲れ様でした!
思い通りのデザインにならない方へ
スマホ用 記事下バナーを無料プレゼント中
