ミルクレープのホームページ制作ブログ

rarecheese.comから魔界村のサブドメインにブログ移転しました

ランキングバナー貼り付け講座【中級編】

 

 

 

講座を始める前に、前回使ったバナー用の画像を貼っておきます

 

 

makai

こちらはフリー素材と自作絵だけで作ったバナーなので、

使いたいという奇特な人が居れば遠慮なく使ってください

 

 

 

 

 

そういう事なら遠慮なく、え~っと画像のURLをimg srcに指定して・・・

tp3

 

待ってください、皆さんちょっと待ってください

 

遠慮なく使ってくれとは言いましたが、画像の直リンクはマナー違反です!

 

 

 

wp53

たしかに冒頭に貼った画像のURLを直接img srcに指定しても、魔界村バナーとして機能はします

 

しかし言うなれば、これは他人のタンスから勝手に下着を取り出して着用するようなものです

持ち主から 「下着をあげるよ」 と言われていたとしても、自分のタンスに移してから使用するようにしましょう

 

ネットの世界で言うたら、自分のブログの画像フォルダがタンス代わりとなります

 

つまりは画像を【名前を付けて保存】してから、自分のブログの画像フォルダにアップロード

そういう手順を踏んだURLをランキングバナーのimg srcに指定してください

 

ランキングバナーに限らず、ブログに画像を直リンクで組み込むのは御法度です

 

・・・というわけで、ネットを使う上で知っておかなければいけないマナーのお話でした

では本題に移ります

 

 

 

 

wpp13

まずはPCページのサイドバーにランキングバナーを設置する方法を説明します

※図で読者Aと読者Bがアクセスしている部分

 

前回と同じように、ブログ管理画面はPC表示にして操作を行います

 

 

 

FC2ブログでPCページサイドバーにランキングバナーを貼る

 

1.設定欄にある【プラグインの設定】を選択

2.プラグインの設定、PC用列にある【公式プラグイン追加】を選択

3.拡張プラグイン欄にある【フリーエリア】を見つけて追加ボタンを押す

4.記入欄に前回作成したランキングバナーのコードを貼る

 

 

wpp23-2

コードの下に改行タグの<br/>と、説明文を追加しました

※改行が無い場合、文字が画像の横に付いてしまいます

ブログデザインに合わせて中央揃え等も設定しましょう

 

5.【設定】を押して設置完了

 

 

 

 

 

wp55

 

あっ・・・

 

サイズ調整を忘れていたので、バナーのwidthを200に、heightを150に変更

ついでに表示位置をプラグインカテゴリ2に設定しました

 

・・・するどどうでしょう!

 

 

 

wp56

上手いこと表示されました

 

フリーエリアの編集、削除、表示位置の変更は、【プラグインの設定】から行えます

 

 

 

 

ライブドアブログでPCページサイドバーにランキングバナーを貼る

 

1.【ブログ設定】 → 【ブログパーツ】を選択

2.自由なカスタマイズ用欄の【フリーエリア】を、AやらBやら書かれているBOXに移動

※上手くいかない場合は、前回記事のリンク集を追加する説明を参照

3.BOXに移動したフリーエリアを指定して、【設定】を押す

4.記入欄に前回作成したランキングバナーのコードを貼る

 

 

wpp24

コードの下に改行タグの<br/>と、説明文を追加しました

※改行が無い場合、文字が画像の横に付いてしまいます

 

改行設定の【改行を<br/>タグに変換】はそのままの意味です

そちらを選択して改行してもらっても構いません

 

 

5.【保存】を押して設置完了

 

 

widthを200、heightを150に設定しましたが、それでも少し画像が大きかったので、

widthを180、heightを135に修正しました

 

・・・するとどうでしょう!

 

 

 

wp57

上手いこと表示されました

 

 

このフリーエリアを使う事でAmazonの商品リンク等も設置出来ます

今回そこまでの説明はしませんが、興味のある方は各々で調べてみてください

 

 

 

 

・・・さて、これでPCページのサイドバーに魔界村リンクが設置されたわけですが、

スマホページ、ガラケーページにも変化があるのかというと、その2つは変化していないはずです

 

基本的にブログデザインはPC用、スマホ用、ガラケー用の3つをそれぞれ設定する必要があります

 

ぶっちゃけガラケー用ページをいじる必要はありませんが、スマホ用ページの設定は非常に重要です

何故ならブログ閲覧者はスマホユーザーが圧倒的に多いからです

 

先ほどPCページのサイドバーに設置したランキングバナーの戦闘力がヤムチャレベルとすると、

スマホのTOPページに設置したランキングバナーの戦闘力はゴールデンフリーザくらいあります

 

まぁ実際に設置してみると効果の程がお分かり頂けるかと思います

※但しお気に入り登録者の多いブログに限る

 

 

 

 

FC2ブログでスマホTOPページにランキングバナーを貼る

 

wpp25

スマホ用ページへのフリーエリア設置も、先程と同じ要領で行えるので説明は割愛します

 

 

 

ライブドアブログでスマホTOPページにランキングバナーを貼る

 

wpp26

からの~

 

 

wpp27-2

ここまで辿り着ければ説明は不要かと思います

 

【追記】

※ライブドアのスマホ用ページでフリーエリアや画像にリンクを設定しても、

ライブドアブログ以外を指定するとリンクが無効になっていました(怒髪天)

 

 

 

wp52

 

上級編ではブログテンプレートそのものに手を加えていきます、本当です

 

 

 

 

 

魔界村入口
2015年5月12日 Comment (14)

共有

ランキングバナー貼り付け講座【中級編】

“ランキングバナー貼り付け講座【中級編】” への14件のフィードバック

  1. さやま より:

    こんな懇切丁寧な説明まで…お疲れ様です(´,,・ω・,,`)
    上級編も期待!!!

  2. げりチェ より:

    TOP画像付けようといじくったら文字色が全部白になってしまって、直せなくてテンプレート変えざるを得なくなった僕にはタイムリーな記事!

  3. nori より:

    スマフォに貼り付けるとゴールデンフリーザだと・・!?
    スマフォテンプレートを適当にしている僕のブログはヤムチャでしたw

    • millcreape より:

      え!スマホテンプレート放置で村の上位ランカーになっていたのですか!?
      それマジでパねぇ事ッスよwwwww

  4. ヒクイドリ より:

    下着のたとえにワロタ
    でも、分りやすい例えでヅラ脱帽

    ネチケット的な観点でもそうですが、
    直リンクすると、元サイトの管理人がファイル削除すると
    突然Xになってしまうので
    画像でオチをつけるようなスロブログだと
    意味不明な記事になる・・・

    つまりは、直リンク、ダメ絶対!ということっすな~

    • millcreape より:

      補足ありがとうございます!
      自分のブログの為にも直リンクは避けるべきスな~

  5. アキオ より:

    >直リンはタンスから下着を盗むのと同じ

    ΩΩΩ<な、なんだってー!?

    つまり…北〇景子のブログから直リンすれば…

    イコール下着を盗んだって事ですか!?

    しかも、やっちゃダメって言われると余計に背徳感が生まれて良いですね(危

  6. げりチェ より:

    更新日時が0になって一番下に表示されるんですけどこれが神のジゴスパークですか?

    バナーか!?バナーが汚いからか!?

  7. はむ より:

    公式バナー来た!これで勝つる!

    ミルクレープさんの下着、履かせていただきます( ˘ω˘)

コメントを残す

メールアドレスが公開されることはありません。