アメブロのサイドバーに画像バナーを貼る方法

アメブロサイドバーにバナーを設置

アメブロのサイドバーに自分のホームページへのリンクを貼り付けたい!

所属している協会のバナーを置きたい!

サイドバーにバナーをつける バナー設置例

 

この記事では、その方法を画像付きで説明します。

ざっと流れをまとめた動画(37秒)

 

画像つきの詳しい手順はここから↓

サイドバーにバナーを設定する手順

アメブロのサイドバーにバナーを設置する手順は以下となります。

  1. バナーを作成
  2. 画像をアップロード
  3. 画像にリンクを貼ったコードを取得
  4. コードをサイドバーに貼り付ける

手順どおりやれば、誰でもできます!

 

バナーを作成する

まずは、バナー作成です。

バナーの作成方法

バナーを作る方法はいくつかありますが、ヘッダー画像と同じです。

1,プロにお願いする(有料)
ブログやホームページのヘッダー画像を格安で頼む方法

ブログやホームページのヘッダー画像を格安で頼む方法

2016.08.24

2,Photoshop、Gimp、Pixlrなどの画像加工ソフトを使ってパソコンで作る(無料)

3,スマホのアプリで作る(無料)
アメブロのヘッダーをスマホのアプリで作る方法

アメブロのヘッダーをスマホのアプリで作る方法

2016.08.21

バナーのサイズ

ご自分のアメブロが何カラムなのか?
どこに置きたいか?

で、サイズは決まります。

まず幅ですが、

  • 2カラム→300px
  • 3カラムで幅の広いほうに置きたい→300px
  • 3カラムで幅の狭いほうに置きたい→200px

となります。

高さはお好みで、決めてください。

例)

幅300px  高さ80px
発達凸凹情報サイトバナー

幅300px 高さ150px
数秘&カラーバナー

依頼する場合にもサイズが必要となります。

画像の種類

画像のファイル形式は、
jpegかpngであれば問題ありません。

依頼する場合、
自分で作成して保存する場合、

このどちらかにしておきます。

画像をアップロード

バナーの準備ができたら、さっそくアメブロの設定に入ります。

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

画像アップロード

 

2,アップロードした画像を記事に追加する

画像を記事内に追加

 

画像のコードを取得

画像をクリックするとリンク先に飛ぶように、画像にリンクを貼ります。

1,画像を選択して『リンク』をクリック

リンクを選択

 

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

リンク先

 

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

リンク内の文字をすべて選択
ctrl(又は⌘)キー + A→すべて選択
A=allと覚えます。ちなみに、Cはコピー、Vは貼り付け、Xは切り取り、Zはやり直し。
これらのショートカットキーはすべての操作で使えます。

4,リンク先のURLを入力し、『リンクを別ウィンドウで開く』にチェックを入れ、『決定』をクリックします。

リンクの作成

 

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

HTML表示

 

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

コードをコピー

あとは、今コピーしたコードをサイドバーに貼り付けるだけです!

 

コードをサイドバーに貼り付ける

1,右上の『管理トップへ』をクリック

管理トップへ

 

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

設定・管理

 

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

フリースペース編集

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

貼り付け

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

プレビュー

 

最後に、ちゃんとリンクができるかどうが確認してくださいね!

 

複数設置したい場合は、フリースペースに順番にコードを貼り付けていけばOKです。

フリースペースに複数コードをコピー バナー設置例

・・・しつこいですね。

以上です!お疲れ様でした!

Facebookページの場合↓

アメブロのサイドバーにFacebookページへのリンクを入れる方法【2016年度最新版ページプラグインを使う】

2016.10.07