八咫スロ

八咫のスロット稼働ブログ。スロットの稼働日記を書いています。稼働の9割以上がスロット魔法少女まどか☆マギカ。 低貸し専門スロッターです。

Slider

ひとりごと

【雑談】ブログ村のバナーをオリジナルの大きなサイズの画像に差し替える方法。

どもども、八咫でございます。

今日はちょっと質問があったので、ブログ村のバナーをオリジナルサイズの画像に入れ替える方法について説明しますね。
htmlがわかる人には既知の情報ですので無視してあげてくださいw

 

ブログ村では、自分でオリジナルのバナーを作れる
ランキング用オリジナルバナー作成・共有のページ
(http://mypage.blogmura.com/linkoriginal)

がありますね。

でもこのページで作れるバナーには、【幅・高さが240ピクセル以下】というサイズ制限があります。

なので、このブログで使っている大きなサイズのバナーは上述の作成ページでは作れません。

じゃあどうするか…というと、

 

作ったオリジナルバナーのタグを改造して画像をオリジナルのものに差し替えてやればいいやん?

ってことを今回は説明していきたいと思います。

実際に作成ページで作ったバナーが↓

にほんブログ村 スロットブログ スロット日記へ

さて、ここでちょっとお勉強w

htmlタグが全くわからない人にとってはまるで呪文のように思えるでしょうが
上のバナーを表示しているhtmlタグが↓こちら

<a href="//slot.blogmura.com/slot_diary/ranking.html" target="_blank"><img src="//slot.blogmura.com/slot_diary/img/originalimg/0000867275.jpg" width="242" height="128" border="0" alt="にほんブログ村 スロットブログ スロット日記へ" /></a>

さて、他の部分は無視していいので 赤い文字の部分だけ見てください。

img src という呪文のあとに続いている

//slot.blogmura.com/slot_diary/img/originalimg/0000867275.jpg

という文字列。これが上のバナー画像のアドレス。つまり、このほむほむのバナー画像はここに置いてありますよっていう、インターネット上の画像の住所ですね。

img src というのは、この住所に置いてある画像を表示しなさいっていう命令文みたいなものです。

つまり、上の住所を自分の作ったオリジナルバナー画像のある住所に差し替えてやれば画像だけを入れ替えることができるのです。

 

ここで問題発生。自分のオリジナル画像のアドレスってどうやって調べりゃいいの???

 

質問者さんがFC2を使ってるってことだったので
ちょっと昔懐かしのFC2上の八咫スロの管理ページを覗いてみましょう。

bannersetsumei001

管理画面の左のメニューからファイルのアップロードのページを開きます。

 

さて、ここに自分で作ったオリジナルのバナーをアップロードしてあげてください。
今回はちょっと懐かしい

↑こんなバナーをアップしてみました。

さて、画像をアップすると
bannersetsumei002↑アップされた画像の一覧が上のように表示されていると思います。
一番上にある画像が今アップしたバナー画像です。
さて、真ん中の欄の【ファイル情報】を見て下さい。
ここに、欲しい情報は全部詰まってます。

ここに書いてある情報を書き出してみると

banner_blogmura01ok.jpg
33KB (300 x 260)
2016/05/20 21:35:27
http://blog-imgs-92.fc2.com/y/a/t/yatasulo/banner_blogmura01ok.jpg

こんな感じの情報が書いてあるはずです。

必要なのは4行目。そして補足で2行目です。

まずは4行目ですね。

http://blog-imgs-92.fc2.com/y/a/t/yatasulo/banner_blogmura01ok.jpg
↑これは、今アップしたオリジナルバナー画像のアドレス。つまり、インターネット上のどこに置いてあるかを示しています。

そしてあとからちょっと説明しますが
2行目のかっこの中。

(300 x 260)
↑これはこのバナー画像の表示サイズを示しています。
つまり、『このバナーは横幅が300ピクセルで縦の高さが260ピクセルの画像だよ~』って書いてあるのです。

さぁ、これで必要な情報は全部揃いました。

さっきのブログ村のバナー表示タグをもう一度見て下さい。

<a href="//slot.blogmura.com/slot_diary/ranking.html" target="_blank"><img src="//slot.blogmura.com/slot_diary/img/originalimg/0000867275.jpg" width="242" height="128" border="0" alt="にほんブログ村 スロットブログ スロット日記へ" /></a>

これをそのまま表示させると

にほんブログ村 スロットブログ スロット日記へ

↑こうなります。

それでは、さきほどFC2にアップした画像のアドレスをこのhtmlタグの画像アドレスに上書きしてしまいましょう。

画像のアドレスは
http://blog-imgs-92.fc2.com/y/a/t/yatasulo/banner_blogmura01ok.jpg
でした。

これをさっきのhtmlタグの画像の部分と入れ替えてやると

<a href="//slot.blogmura.com/slot_diary/ranking.html" target="_blank"><img src="http://blog-imgs-92.fc2.com/y/a/t/yatasulo/banner_blogmura01ok.jpg" width="242" height="128" border="0" alt="にほんブログ村 スロットブログ スロット日記へ" /></a>

↑こうなります。

さて、ここでついでに青文字の部分にもちょっと修正を加えてやります。

widthというのは、このバナー画像の表示される幅。
heightというのは、このバナー画像の表示される高さ。

となっています。なので、この部分の数字も、オリジナルのバナーの縦横のサイズに入れ替えてあげましょう。
オリジナルのバナーのサイズは横が300ピクセル、高さが260ピクセルだったので
それぞれ書き換えてやると↓こうなります。

<a href="//slot.blogmura.com/slot_diary/ranking.html" target="_blank"><img src="http://blog-imgs-92.fc2.com/y/a/t/yatasulo/banner_blogmura01ok.jpg" width="300" height="260" border="0" alt="にほんブログ村 スロットブログ スロット日記へ" /></a>

さぁ、これで書き換えはOKです。
実際に表示してやると

にほんブログ村 スロットブログ スロット日記へ

↑こんな感じで、オリジナルの画像に変更されたブログ村バナーが出来上がりました。

 

さて、こんな感じで、簡単に説明してきましたが
いかがでしょ?

こういうのあんまりやったことないからな~
わかりにくいかな~…。

 

↓クリックしていただけると八咫が泣いて喜びます。
魔界村へ

にほんブログ村 スロットブログ スロット日記へ

banner_toracomu_madomagi01
トラコミュ スロットまどマギ委員会参加中!!

oen魔界村space にほんブログ村 スロットブログ スロット日記へ spaceブログランキング

子ブログ『やほよろづ』新着記事一覧






-ひとりごと
-,