ブログにバナー（画像とURLリンク）を貼ろう。

バンドが宣伝用バナーを一般公開した時など、ブログに貼ってみてはいかがでしょう？

ボクセカの有末さんがバナーを配布しています。  
 ミニアルバム告知（480×125px）
 ワンマン告知（600×450px）

まず、画像をダウンロードします。
Winの場合は画像の上にカーソルを置いて右クリック→「名前を付けて画像を保存」。SNSに投稿された画像は英数字の羅列になっています。このままでも使用できますが、管理しやすいファイル名に変更した方が良いでしょう。




スマホの場合は、保存したい画像をタップして表示し、右上の「…」をタップ。メニューから「保存」を選択。


写メなどが保存されている画像フォルダを開くと、「Twitter」フォルダが作成され画像が保存されています。



次に、画像をアメブロにアップロードします。
ＰＣからの作業は 「新エディタ」 が便利です。

画像タイトルはつけなくてもいいのだけど、今回はつける方法をご案内します。スマホアプリではつけられません。


HTML表示の画面にして、画像を「小さいサイズで貼りつける」にチェックを入れた状態でクリック。

通常表示で確認ができます。



 HTML表示の画面に戻してコードを書き換えます。（ＰＣ操作）

 < p> < /p> は、囲まれた部分がひとつの段落であることを表し、前後に少しスペースが空きます。埋め込みコード作成の時点では削除。
 < a href= のURLは画像に貼るリンク先です。この状態は写真の拡大表示URLになっていますので、リンクしたいページのURLに変更します。さらに「 target="_blank" 」を入れることで、リンク先を新しいウィンドウで開くことができます。
 < img src="以下のURLは表示する画像のリンク先です。今回はこのままで。style="width:220px; height:57px; は画像の表示サイズ（幅×高さ）です。ブログ本文の場合はお好みサイズに。サイドバーに貼る場合は、サイズを確認してください。このブログでは180px。比率計算が面倒なので、「　height:57px;　」 は削除してしまいましょう。単語と単語の間の半角スペースは１つになるよう、半角スペースも削除してください。
　「alt = の文字は、画像が表示できなかった時に代替表示される文字です。また、画像の内容を検索エンジンに伝えるそうなので記載しておきましょう。
　「border:」はバナーの縁取りです。今回は不要なので削除。「ratio=」「id=」は、あってもなくてもいい。サイドバーのフリースペースは文字数制限があり、埋め込みコードは短い方がいいので削除。
埋め込みコード内に改行があると、改行分の段落スペースが空いてしまうので、コード全体が１行であることを確認しましょう。


< a href="リンク先URL" target="_blank" >< img src=" 画像URL " style="width:180px; alt="画像の説明" ></a>

スマホの場合
スマホアプリでは「投稿完了」で画像がアップロードされますので、「アメーバ限定」などで一旦公開してから「下書き（非公開）」にして作業してください。
「記事編集」 の画面から下の カメラマーク をタップして、フォルダから写真を選択→「貼付け」→「入力完了」→「公開」。



「記事の編集・削除」から投稿したブログを選択し、「下書き（非公開）」で保存。再度記事編集を開き「タグ編集」を開く。


 < a href = のURLは画像に貼るリンク先です。この状態は写真の拡大表示URLになっていますので、リンクしたいページのURLに変更します。さらに「 target="_blank" 」を入れることで、ＰＣで開いたとき、リンク先を新しいウィンドウで開くことができます。
 width="478" height="125"は、画像の表示サイズ（幅×高さ/ピクセル）です。ブログ本文の場合はお好みサイズに。サイドバーに貼る場合は、サイズを確認してください。このブログでは180ピクセル。比率計算が面倒なので、　height="125"は削除してしまいましょう。単語と単語の間の半角スペースは１つになるよう、半角スペースも削除してください。
 スマホアプリではalt = が記載されていません。入れたい場合は手入力で。


< a href="リンク先URL" target="_blank" >< img src=" 画像URL " style="width = "180" alt = "画像の説明" ></a>

出来上がった埋め込みコードを、貼り付けたい入力フォームへ貼りつけます。静止画像のバナーは、ブログ本文・メッセージボード・サイドバーのフリースペース・プロフィールのフリースペースに貼ることができます。
スマホアプリではサイドバーが表示されないので、ブログ上部のメッセージボードやプロフィールのフリースペースにも貼っておくと効果的です。


メニュー画面のここから編集に入れます。