女性のためのトータルビジネスデザインサービス F-Labo

ビジネス相談 / アメブロカスタマイズ / HP制作 F-Labo

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

108608 views
約 5 分

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

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

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

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

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

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

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

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

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

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

バナーを作成する

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

バナーの作成方法

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

1,プロにお願いする(有料)

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

3,スマホのアプリで作る(無料)

バナーのサイズ

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

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

まず幅ですが、

  • 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を入力し、『リンクを別ウィンドウで開く』にチェックを入れ、『決定』をクリックします。

HTML表示

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

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

コードをコピー

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

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

管理トップへ

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

設定・管理

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

フリースペース編集

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

貼り付け

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

プレビュー

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

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

フリースペースに複数コードをコピー

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

バナー設置例

・・・しつこいですね。

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

Facebookページの場合↓

あなたのサービスを【もっと多くの人】に知ってもらうには?

いまさら人に聞けない【ネット集客の基本】をまとめたPDF資料が今すぐダウンロードできます!

  • 検索にひっかかるってどういうこと?
  • WordPressって何?
  • SNSってやったほうがいいの?
  • メルマガって何のためにやるの?
  • LINE@って必要?
    ・・・他

一般的なネット集客のノウハウをおうちサロン・女性個人事業主の方向けにアレンジしてまとめました。

資料の詳細を見てみる

この記事を書いた人

PC講師20年、おうちサロン歴6年。
次男の障害をきっかけにママ支援をするも、SEOの知識の無さから本当に必要な人に情報が届かないという、もどかしさを経験。それをきっかけにWordPress、SEOを本格的に学び、同じ悩みを持つ女性個人事業主の方に向けて、情報発信をしています。

詳しいプロフィールはこちら