研Q110.アメブロつながり隊のバナーを作りました。
アメブロにアップした画像のURLを調べる方法。


アメブロつながり隊という素敵なネットワークが話題になっているのをご存知でしょうか。
アメーバブログのユーザー同士がお互いにブログを紹介し合ってネットワークを築きたいという素敵な運動のようです。
そのへんの事情にお詳しい方か、言い出しっぺの方が、アメブロつながり隊って何?ということをバシッと書いてくださると、バナーのリンク先にもなって助かるんですけどねー(^o^)
まあ、そのような運動だと想像するのであります。
当ブログはアメブロではありませんが、旧館がアメブロだったということもあって、アメブロにはシンパシーを持っているのであります。
つながり隊はアメブロだけなんていうことはないと思いますが、FC2も混ぜてくださいねー。
ということでアメブロつながり隊のバナーを作ってみました。
ことの始まりはアメブロガイド:amaneさんがアメーバのノベルティグッズの写真でバナーを作られたのですが、サイバーエージェントはアメブロのロゴもノベルティグッズの写真も著作権の使用を認めていなかったことだと思います。
⇒ アメブロつながり隊、バナー差し替えのお知らせ!|アメブロ・ブログの役立つ情報:アメブロ徹底攻略ガイド

こういう、著作権の名を借りた暴力をふるわれると僕はカチンとくるんですよね。
著作権的にフリーな素材を使ってバナーを作成したくなったのであります。
素材として使わせていただいたのは、現著作者が著作権を放棄し、パブリックドメインとしてあらゆる人に使用を認めている、アメーバー(生物)のイラストです。
このイラストのフォルムだけをいただいて色づけし、縦横比を変えたイラストに文字入れをしてあります。


アメブロガイド:amaneさんの上品なデザインと違って、目立ちたいだけのデザインですがバナーのようなものは色々ある中から使う方が選択されればいいので公開いたします。
アメブロのサイドバーに画像バナーを貼る方法。
アメーバブログの記事エディターには写真を貼るための補助ツールがついているのですが、フリースペースやフリープラグイン、メッセージボードのエディターには写真を貼る補助ツールがついていません。以前研Qした、画像タグの基本がわかれば、フリースペースにもフリープラグインにもメッセージボードにも自由に画像が貼れます。
まずは、ブログに画像をアップロードしてその画像URLを調べておきます。
アメーバブログなどの無料ブログにはそのブログで使うための画像をアップロードできるスペースが付随していて、画像をアップロードすると、インターネット上の画像にURL(アドレス)がつけられて、その画像を呼び出して表示することができるようになります。
今回はアメーバブログでのやり方をご説明します。(FC2ブログでも基本は同じなのですぐにおわかりになると思います。)
アメブロの記事エディターの画像フォルダページを開いて、パソコン内の画像ファイルを選択して、ブログにアップロードします。

画像フォルダーが読み込み直されて、今の画像がアップロードされています。

アップロードした画像のURLを調べるには、画像一覧の画像をクリックします。

すると、その画像が大きく表示されるので大きく表示された画像を
右クリックして「プロパティ」を選択します。

↑プロパティの、アドレス(URL)に書いてあるのがその画像のURLです。
画像のURLを画像タグに組み込めば画像をブログに表示することができます。
画像タグ
<img src="画像のURL">
画像を画像リンクにしたければ、画像タグをリンクタグで囲います。
このHTMLタグをフリースペースなどのURLに組み込めば、画像を表示することができます。
画像サイズの指定方法。
アメブロつながり隊のバナーは300×300の大きさに作ってあります。たとえば200×200の大きさでバナーを表示するときは、画像タグに「 width="200" height="200"」というオプションを組み込みます。
<img src="画像のURL" width="200" height="200">
写真がなんの写真なのかをGoogleや読者さんに伝えるための、代替テキストも追加します。
<img src="画像のURL" width="200" height="200" alt="アメブロつながり隊のバナー" title="アメブロつながり隊のバナー">
これで画像タグは完成です。
ブログ記事の中でもフリースペースでもフリープラグインでも好きなところにバナーを貼ることができます。
![]() 表示 - 継承 2.1 |
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。





- 関連記事
