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

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. 時限式・生意気小僧風 原始肉(マンガ肉) ゆきひら・真を再現
  10. 家電はなぜ壊れるのか?専門家が回答してみた
  11. ゆきひら流ビーフシチュー秋の選抜スペシャルを再現
  12. 食戟のソーマ 胡椒餅(フージャオピン)を再現
  13. 食戟のソーマ13話ゆきひら流スフレオムレツ
  14. 食戟のソーマ 熊肉のメンチカツを再現
  15. 食戟のソーマ ゆきひら流焦がし蕎麦の再現
  16. うずらの詰め物リゾットと卵 生意気小僧風 を再現
  17. 食戟のソーマ 時限式麻婆カレー麺の再現
  18. 北海道講座印のスペシャル豪雪うどんを再現
  19. すみれ印の唐揚げロールを再現してみた
  20. はるかのミルクキャラメル
  21. 食戟のソーマ さつま地鶏の手羽先餃子を再現
  22. ハウルのベーコンエッグを再現
  23. 食戟のソーマ 鹿もも肉の炭火焼き栗のソースを再現
  24. くまみこ第8話で登場した「水かけごはん」
    くまみこ8話の水かけごはんを再現
  25. 食戟のソーマ あんきもなかを再現
  26. 食戟のソーマ第4話の鯖バーグ
  27. Airのどろり濃厚ピーチ味を再現
  28. 食戟のソーマ チーズフォンデュロースカツ定食を再現
  29. NVIDIAの環境で動画を再生すると画面が真っ黒になる
  30. 少女終末旅行 イモのレーションを再現

月別の過去記事を見る

最近投稿されたコメント

  1. はるか (2024年10月08日)
    さばねこさん、こんにちは。解釈で感動したと思ってくれてありがとうございます。私はBD購入で最初に聞いたときから、ほむらとまどかの境界だと思っ…
  2. さばねこ (2024年09月15日)
    ♪「届かないほど 近くて遠い」>円環の理になってしまった、まどかとの距離・・・>のようにも読めますが、それだと今までの流れを壊す…
  3. Y (2024年08月18日)
    美味しそうです!食べてみたい!
  4. はるか (2024年08月15日)
    アルギン酸ナトリウムは、日本医薬品添加剤協会の実験などで各種検査をされていますが、有害性の報告はありません。よって私のレシピにこだわる事無く…
  5. Cocoa (2024年08月15日)
    度々すみませんあとアルギン酸ナトリウムは2グラム入れて滴下しても丸い形状にならず薄い膜みたいなものになってしまうのですが2グラム以上入れても…
  6. はるか (2024年08月14日)
    cocoaさんこんにちは。水滴の表面が固まるのは、化学反応なので溶液の濃度に依存します。のり溶液側に反応を阻害するミネラル類が多い場合、反応…
  7. cocoa (2024年08月14日)
    食感もゼリーみたいな食感で、いくらのようなプチンと言う食感は無いのですがナトリウムの入れすぎとかですかね策があれば教えていただきたいです
  8. はるか (2024年08月12日)
    Cocooaさんこんにちは。アルギニン酸ナトリウムは別のもの(どこで買ったか不明)ですが、乳酸カルシウムはリッチパウダーのものです。
  9. Cocoa (2024年08月11日)
    はるかさんこんにちはアルギン酸ナトリウム、乳酸カルシウムはリッチパウダーのやつですか?
  10. はるか (2023年12月08日)
    羽田野さんご指摘、感謝です。言い訳ですが、冷たい空気も東進しているのでそれを表現していました。おっしゃるとおり、誤解を生む可能性がありますの…