トップ » はるかのひとりごと » 情報提供 » ブログ配布バナーのスクリプトを作る
はい。はるかです。
今回は、情報提供という事で配布バナーを
簡単にカット&ペーストしブログに貼り付ける方法を
記載します。

banner


例では、アメーバブログを使いますが、
殆どのブログやWebサイトで使える方法ですので
是非ともマスターしてくださいね。

1.配布バナーを作る

まず配布用のバナーを作ります。
大きさはいろいろですが、150x50くらいの小さいサイズが
良いでしょう。
もちろん、大きいのや動いたり点滅したりするのも
可能ですが、配布バナーというのは
貼って紹介して頂くものなので
自己主張は、ほどほどにした方が良いでしょう。

私は、ブログデザインと自分のプロフィール画像を合成して
ペイントで数分で作りました^^;
はるかのひとりごと
画像の劣化が激しいので、できたらPNGファイルで作った方が良いです。
BMPはサイズが大きいのでやめましょう。

2.スクリプトを作る

バナーは、フリープラグインに入れる方が良いでしょう。
スクリプトは以下の様になります。

↓黒いところをダブルクリックで全選択されるのでCTRL+C等でコピー
バナーの上の文字<br />
<img border="0" src="画像のURL" alt="ブログ名称" />
<input value='<a href="ブログのURL" target="_blank"><img border="0" src="画像のURL" alt="ブログ名称" /></a>' readonly onclick="this.select()" style="width:150px">
<br />バナーの下の文字<br />

↑のスクリプトは。メモ帳などにコピーします。
必要なのは、
  • バナー画像のURL
  • ブログのURL

ですが、ブログのURLは、だれでも分かりますね。
問題は、バナー画像です。
それでは、アメブロでバナー画像のURLを取得する方法を
実践してみます。

例という事で、http://ameblo.jp/moja0517/entry-11876107998.html
を使ってみたいと思います。

2.1普通にブログを書くを選ぶ

ブログを書く→画像ボタン
ここまでは、いつも操作している通りですね。
画像ボタンを押す

2.2画面の通りオリジナル画像を選択する

画像フォルダの画面が表示されたら
オリジナル画像のラジオボタンを選んで
バナーに使いたい画像を選択します。
オリジナル画像

2.3画像のURLを取得する

画像がオリジナル画像で張り付いたら
もう、出来たも同然です。
あとは、図のようにリンク先をコピーします。
<IEの場合>
画像を右クリックでショートカットのコピー
<Firefoxの場合>
画像を右クリックでリンク先のURLをコピー
<chromeの場合>
画像を右クリックで画像のURLをコピー
urlをコピー

画像のURLがコピーできたら、メモ帳などに貼り付けておきます。
ファイル名はoXXXXXXとなっていたら成功です。
tで始まるファイル名は、サムネイル(Thumbnailの略)ですので
失敗です。オリジナルが選択されないです。

3.出来たスクリプトを確認する

メモ帳などで、自分のブログにあった設定を作ります。

うまくできたら次のようになるはずです。
当ブログはリンクフリーです<br>
<img border="0" src="http://stat001.ameba.jp/user_images/20141009/11/moja0517/70/e7/p/o0200005013092305132.png" alt="まあみのピグ日記" /><br>
<input value='<a href="http://ameblo.jp/moja0517/" target="_blank"><img border="0" src="http://stat001.ameba.jp/user_images/20141009/11/moja0517/70/e7/p/o0200005013092305132.png" alt="まあみのピグ日記" /></a>' readonly onclick="this.select()" style="width:200px">
<br>ブログに貼り付けてね<br>


4.完成

上手にスクリプトができたら、
フリープラグインに貼り付けてみましょう。

4.1.プラグインの追加を開く

図のように、マイページからブログ右側の≡の部分をクリックして
「プラグインの追加」を選びます。
フリープラグイン

4.2.フリープラグインの画面を出す

次の画面が表示されるので、フリープラグインを押します。
プラグインタブ

4.3.フリープラグインを保存

フリープラグインに入れたいスクリプトを入れて
「保存」ボタンを押します。
スクリプトのコピーはCTRL+Cで、
ペーストはCTRL+Vボタンで出来ます。
スクリプト

以降は一度設定するだけで以後は触りません

4.4.メニューから配置設定を選ぶ

同じように、≡をクリックして「配置設定」を選びます。
配置設定1

4.5.フリープラグインをドラッグする

フリープラグインのアイコンをマウスでつかんで
空いたスペースの所に落とします。
ドラッグアンドドロップといいます。
配置設定2

4.6.保存する

ドラッグアンドドロップが終わったら、
図のように勝手に入ります。
場所は好きな位置に出来ます。
場所が決定したら、「保存」を押します。
配置設定3

以上でおしまいです。

それじゃ、またね♪
おやすみ♡
この記事は 2016年06月23日15時21分 に更新

コメント一覧

  1. シルク
    解りやすく丁寧ですね
    所でサンプルのまあみさんは
    はるかさんのサブ?
    それともお友達かな…
    ちょっと気になったw

    アメーバーはエディターでタグが変わったりで
    吃驚ですよ。
    まだ色々ありそうですけどね。
    内部は知らないので何ともw
  2. はるか
    >シルクさん
    どうもです^^
    まあみさんは、お友達ですよ♪
    というか、あんな神の手を持った人と
    同一人物だったら、幸せですよwww

    アメーバのエディタって、素人向けに
    良くできていると思います。
    ブログを全く知らない私でも、
    ちゃんと使えましたし。
    ですが、同じ感覚でWordPressを使うと
    酷い目に逢いました。
    今のページの構成が、WordPress標準の機能なんですが、
    私は、全く使い方が分からず、
    今回の記事で、初めてマトモにできましたw
  3. まあみ
    ほんとに ほんとにありがとう!!
    なんか 一年くらい完成にかかりそうだったのに
    できそうな気がしてきたっ♡

    せっかくなので どの写真にしようかなって
    ゆっくり画像作りから 再挑戦してみます

    150×50 がおすすめってと 一緒に挑戦中の
    白い魔女ちるちるにも伝えました

    お友達って言ってもらえて 黒い魔女の私テレテレです♪
  4. はるか
    >まあみさん
    了解です。
    ただ、作ったスクリプトは試していません。
    うまく動いたら、教えてください。
    基本、画像のURLとサイズを変えるだけですので、
    この説明で大丈夫だと思います。

    何か分からない事があったら、おしえてくださいね。
    ではでは。
  5. aipooo
    こんにちは♪
    やっとプラグイン整頓しました
    その際、はるかちゃんのスクリプロいただきました^^

    とっても分かり易くて助かりましたよ~
    まあみさんにもお知らせしなくちゃね(´∀`)b

    ありがとうございました
  6. はるか
    >aipoooさん
    確認しました。左側のリンクが映えてきましたね^^
    Google+もGOODです^^

    まあみさんもうまくいったみたいで
    良かったです^^
  7. ちるちる
    こんにちは~
    はるかさんの記事を見て aipoooちゃんにも 教わりながら
    やっと バナーができました♬ (((o(*゚▽゚*)o)))

    画像のサイズが どうしても 150X50にはできなかったのですが
    なんとか 貼り付けられて 感動しております(* >ω<)

    わかりやすく 紹介してくれてたので
    助かりました♬ ありがとうございます ヽ(*´∀`)ノ

    記事で この はるかさんの バナーの記事のリンクを
    貼って紹介しても いいですか?
  8. はるか
    >ちるちるさん
    バナー表示、うまくいってよかったですね^^
    私のブログ(こっちもアメブロも)は、
    リンクフリー許可不要ですので
    リンクや紹介は、大歓迎です。
    ありがとうございます(o^^o)

コメントする

Gravatarに登録してログインすると自分専用のアバターを表示できます。

コメントを残す





鈴木はるかのプロフィール画像
(Haruka Suzuki)
仕事:金融システムのSE
好きな物:スイーツ、絶景
趣味:お菓子/アニメ/多趣味

人気の高い記事

  1. 食戟のソーマゆきひら流進化形のり弁を再現
  2. ゆきひら流シャリアピンステーキ丼
  3. 食戟のソーマゆきひら流 鶏卵の天ぷら丼を再現
  4. 食戟のソーマ5話のさわらおにぎり茶漬け
  5. ゆきひら流タラのお柿揚げ
  6. 家電はなぜ壊れるのか?専門家が回答してみた
  7. 時限式・生意気小僧風 原始肉(マンガ肉) ゆきひら・真を再現
  8. 食戟のソーマ16話のりんごのリゾットを再現
  9. 食戟のソーマ13話ゆきひら流スフレオムレツ
  10. 食戟のソーマ 胡椒餅(フージャオピン)を再現
  11. ゆきひら流ビーフシチュー秋の選抜スペシャルを再現
  12. アニ菓子とは
  13. 食戟のソーマ 熊肉のメンチカツを再現
  14. 食戟のソーマ ゆきひら流焦がし蕎麦の再現
  15. うずらの詰め物リゾットと卵 生意気小僧風 を再現
  16. 食戟のソーマ 時限式麻婆カレー麺の再現
  17. はるかのミルクキャラメル
  18. 北海道講座印のスペシャル豪雪うどんを再現
  19. ハウルのベーコンエッグを再現
  20. すみれ印の唐揚げロールを再現してみた
  21. 食戟のソーマ さつま地鶏の手羽先餃子を再現
  22. 食戟のソーマ 鹿もも肉の炭火焼き栗のソースを再現
  23. 食戟のソーマ あんきもなかを再現
  24. Airのどろり濃厚ピーチ味を再現
  25. くまみこ第8話で登場した「水かけごはん」
    くまみこ8話の水かけごはんを再現
  26. 食戟のソーマ チーズフォンデュロースカツ定食を再現
  27. 食戟のソーマ第4話の鯖バーグ
  28. 葬送のフリーレン 馬鹿みたいにでかいハンバーグを再現
  29. ゆきひら謹製カレーリゾットオムライス
  30. ゆきひら流 香ばしバターピラフ稲荷寿司を再現

月別の過去記事を見る

最近投稿されたコメント

  1. はるか (2023年12月08日)
    羽田野さんご指摘、感謝です。言い訳ですが、冷たい空気も東進しているのでそれを表現していました。おっしゃるとおり、誤解を生む可能性がありますの…
  2. 羽田野 (2023年12月07日)
    水滴が出来る際の雲の自活現象ですね。分かりやすいです。寒冷前線、冷気の傾きが、逆のようです。
  3. はるか (2023年10月26日)
    こんばんは、リンゴとバナナというのがよく分かりませんが、アニメで葉山さんが答えたのは「クミン、カルダモン、グローブ、マンゴーチャツネ」という…
  4. 匿名 (2023年10月25日)
    8年前の投稿にですがアニメでりんごとバナナをすりおろしたとリゾットの匂いを嗅いだ葉山が答えていたのですが、このリゾットは加えてないのでしょう…
  5. はるか (2023年07月02日)
    えっささん、こんにちは。画像を出典のURLを掲載していただき、私の画像が副次的(えっささんのブログ記事が主)になっていれば、問題ありません。…
  6. えっさ (2023年07月02日)
    鈴木はるかさんこんにちはエッサといいますマンモス肉 愉しく拝見しました お願いがあります 小生blog花のしもべ日誌 (ameblo.jp)…
  7. (2023年04月11日)
    はるか様、こんにちはペコリ(o_ _)o))すみません。echoの後のipv4とipv6は、はるか様の記述通りですね。申し訳ありませんでした…
  8. (2023年04月10日)
    こんにちは(^-^)はるか様。丁寧に教えてくださりありがとうございます。(o*。_。)oペコッ>noindexは結構重要ですね。最近で…
  9. はるか (2023年04月10日)
    こんにちは。noindexは結構重要ですね。最近では、テーマでデフォルト実装されているので、わすれつつある中身ですが・・・下部のセッションの…
  10. (2023年04月09日)
    はるか様、はじめまして(o*。_。)oペコッ。こちらの記事、とても参考になりましたありがとうございます。それとは別なのですが・・・、フッター…