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

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

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

 

 

 

今回でランキングバナー貼り付け講座は最後になります

 

バナーの貼り付け講座と言いつつ、今回はブログタイトルをTOP絵に変える方法も紹介しているので、

「ランキングには興味無いけど、テンプレート編集のやり方は知っておきたい!」という方も是非ご覧ください

 

それではこれからブログテンプレートに手を加えていくわけですが、

その前に今一度ランキングバナーのコードに目を向けて理解を深めておきましょう

 

 

 

<a href="http://millcreape.com/">
<img src="http://rarecheese.millcreape.com/wp-content/uploads/2015/05/makai.jpg" alt="ブログ魔界村入口" width="200" height="150" />
</a>

img srcに続く部分には画像のURLを指定しましたが、

a hrefに続く部分にはリンク先に設定したいURLを指定します

そして <a href=”リンク先URL”> タグを </a> タグで締める事によって、

その二つに挟まれた部分(ここでは画像)にリンクが挿入されます

 

 

ブログ魔界村入口

画像が押された時リンク先に飛びます

 

 

 

 

<img src="http://rarecheese.millcreape.com/wp-content/uploads/2015/05/makai.jpg" alt="ブログ魔界村入口" width="200" height="150" />

試しにリンク設定のタグを外してみると・・・

 

 

ブログ魔界村入口

単純に画像のみが表示されます

 

 

 

 

<a href="http://millcreape.com/">
<img src="http://rarecheese.millcreape.com/wp-content/uploads/2015/05/makai.jpg" alt="ブログ魔界村入口" width="200" height="150" />
<br/>
びっくりするほどユートピア
</a>

では再びリンク設定のタグを書き加えて、その間に画像、改行タグ<br/>、文章を記述します

 

 

ブログ魔界村入口
びっくりするほどユートピア

 

画像と文章にリンクが設定されました

 

 

 

 

<center>
<a href="http://millcreape.com/">
<img src="http://rarecheese.millcreape.com/wp-content/uploads/2015/05/makai.jpg" alt="ブログ魔界村入口" width="200" height="150" />
<br/>
びっくりするほどユートピア
</a>
</center>

さらに中央揃えを設定するタグ <center> </center> で囲ってみます

ちなみに例のコードは見易いように改行表示していますが、一行にまとめて記述しても問題ありません

 

 

ブログ魔界村入口
びっくりするほどユートピア
 

リンクの設定された画像と文章が中央に表示されました

 

※中級編で設置したフリーエリア内で中央揃えタグを使っても、

プラグイン設定が優先されて中央揃えにならない事があるのでご注意ください

 

このようにタグは、 <なんたら~> と </なんたら~> で対になっている事が多いです

 

ブログでよく目にする失敗は、太字タグ <b> を、 </b> で閉じ忘れて、

記事の大半からコメント欄に至るまで太字になっちゃっているパターンです

 

この辺はブログテンプレートに手を加える上で覚えておいた方がいい知識となります

 

 

・・・といった所で、ようやっとブログテンプレートに手を加えていきます

 

やはり今回もブログの管理画面はPC表示にして操作を行います

また、 今回例として使用するのはFC2、ライブドアブログのデフォルトテンプレートです

 

冒頭でも言った通り、ブログTOP絵を設定する方法と併せて説明していきます

 

 

 

 

 

FC2ブログのブログテンプレートを編集

 

 

1.設定欄にある【テンプレートの設定】を選択

2.現在使っているテンプレートのバックアップを取る

 

 

wpp28

今回手を加えるのはHTML編集欄だけなので、そちらをコピペして控えておいてもらえればと思います

 

最悪テンプレートを再起不能になるまで変更しても、同じテンプレートを読み込む事で初期化は可能です

しかしテンプレートの編集をしていた個所が多ければその分設定し直す手間が増えるので、

愛用しているブログデザインのテンプレートならば必ずバックアップは取っておきましょう

 

 

3.予め用意していたTOP絵をブログの画像フォルダにアップロードする

4.テンプレートを書き換える

 

 

wpp29

図で選択している部分がタイトル表示コードとなり、コードを消すとブログからタイトルも消えます

 

【重要】

<h1> </h1> は見出し部分を指定するタグです(デフォルトではブログタイトルが指定されています)

これを消すとブログの検索順位、すなわちアクセス数に少なからず影響が出るようです

私は今まで文字の大きさを変えるだけのタグかと思っていました←

なのでSEO(検索最適化)云々が気になる人は、この部分を残した上でTOP絵を挿入した方がいいようです

なお、私は特に設定していない模様

 

 

wpp30

ここに中央揃えしたTOP絵を表示するコードを記述します

したらば~

 

 

 

wp59

ブログタイトルが文字からTOP絵に変わりました

 

例ではリンクを省略しましたが、TOP絵にはブログのTOPページをリンク先に設定した方がいいかもしれません

ブログタイトルを押す事でTOPページを表示(ページを再読み込み)出来た方が親切な作りといえます

 

さておき

TOP絵の下にランキングバナーを置きたい場合は、初級編で作ったランキングバナーのコードを用意します

 

 

~前略~
<div id="header">

<center>
<img src="http://blog-imgs-74.fc2.com/s/t/e/stealth5th/wp58.jpg" alt="期待値太郎の期待値ブログ" />
<br/>
<br/>
<ランキングバナーコード>
</center>

<p><%introduction></p>
~後略~

先ほど記述した部分を消して、上記のように変えればTOP絵の下にランキングバナーが表示されます

※画像に余白を設定する事も出来ますが、改行タグ<br/>を書き連ねる事でも余白は作れます

 

 

 

 

PC用テンプレートの編集が終わったら、次はスマホ用テンプレートの編集も行います

 

【テンプレートの設定】 → スマートフォン用【テンプレート管理】を選択

テンプレートが未設定になっている場合は、スマートフォン用【公式テンプレート追加】を選択します

 

wpp31

 

新着テンプレートの一番上に表示されるテンプレートがデフォルトテンプレートのようなので、

【詳細】 → 【ダウンロード】を選択してスマホ用テンプレートページに追加します

 

もちろん他に自分が良いと思ったテンプレートがあればそちらをダウンロードしてください

意外と共有テンプレート(ユーザー投稿のテンプレート)の方が凝った作りになっていたりします

 

話を戻して、スマートフォン用【テンプレート管理】を選択して編集していきます

 

今さっきテンプレートをダウンロードしたばかりの人は、

テンプレート名の横にあるチェックボックスにチェックを入れて【適用】を押してください

 

 

 

wpp32

スマホテンプレートのタイトル部分はこちら

PC用テンプレートではこの中の一部を書き換えましたが、こちらは残したままにしておいてください

 

上図で選択したコードは、下図の赤枠部分を表示しているコードです

 

 

wpp34

特に消す必要も無いと思うので、この下にTOP絵やランキングバナーを設置してみます

 

 

 

~前略~
<div id="header">
 <h1><a href="<%url>"><%blog_name></a></h1>
 <div id="header_menu"><span></span></div>
</div>

<center>
<img src="http://blog-imgs-74.fc2.com/s/t/e/stealth5th/wp58.jpg" alt="期待値太郎の期待値ブログ" />
<br/>
<br/>
<ランキングバナーコード>
</center>

<div id="ad_header" class="ad_header"><%ad></div>
~後略~

PC用テンプレートと同じ要領でコードを記述します

 

他の場所に画像やバナーを設置したい場合は、「この辺かな?」と思った場所にコードを書き加え、

プレビュー表示で確認して、思い描いた場所に目的の物が表示されていたら保存を押す形を取りましょう

 

ちなみにテンプレート編集で勝手に表示されるFC2広告を消す事は出来ますが、

有料会員でなければこれらの広告を消す事は許可されていないのでご注意ください

 

 

 

 

最後に、ブログの個別記事全てにランキングバナーを設置する方法です

 

更新する記事全てに毎度ランキングバナーを貼り付けるやり方もありますが、

これから紹介するやり方の方が圧倒的に効率が良いです

 

また、何かの理由でランキングバナーを外したくなった時、

このやり方ならブログテンプレートの一部分を消すだけで、

全ての記事からランキングバナーを撤去する事が出来ます

 

ランキングバナーだけでなく、自分でブログに広告を載せるとなった時にもこのやり方は重宝します

 

 

ではまずは【テンプレートの設定】 → PC用【テンプレート管理】を選択します

次にCtrl+Fキー(スマホなら検索機能)で topentry_more を検索します

 

 

wpp35-2

見つかりました

この付近のコードには、「個別記事がなんたら~」というような事が書かれています

 

 

wpp37

この付近に図の赤枠部分を追記してみました

 

 

 

 

wpp36-2

※個別記事before

 

すると・・・あぁ!なんという事でしょう

 

 

 

wpp36

※個別記事after

 

殺風景だったブログの個別記事に、テンプレートに加えた言葉が載っているではありませんか

確認すると、展開した記事全てに定型文が挿入されているのがお分かり頂けると思います

 

さて、初級編からここまで読んでくださった方にはもはや説明は不要でしょう

あとはテストと記述した部分をランキングコードに置き換えるだけです

 

 

 

 

wpp38

スマホページはスマホ用テンプレートで別に設定が必要なのをお忘れなく

 

 

 

wpp39

※参考用にPC版よりテスト文の挿入個所を増やしてあります

 

 

 

 

 

 

ライブドアブログのブログテンプレートを編集

 

 

ライブドアブロガーも上のFC2ブログのテンプレート編集のやり方を読んだものとして、

こちらのテンプレート編集方法はざっくりと説明します

 

 

まずはブログにTOP絵を設置する方法から

 

ライブドアブログはブログデザインに[タイトル]と付いている場合、テンプレートを編集する必要がありません

【ブログ設定】 → 【PC】 → 【タイトル/背景】 → 【かんたんタイトル画像】から画像アップロードで設置完了です

 

かんたんタイトル画像に対応していないブログデザインの場合は、

【ブログ設定】 → 【PC】 → 【カスタマイズ】 → トップページのタブを選択

 

 

wpp41

バックアップを取って、この辺をなんやかんやしていればTOP絵が設置出来ます

※上の方でも書きましたが、 <h1> </h1> タグを消すのはSEO(検索最適化)的にはよろしくないです

 

 

 

ライブドアブログのスマホ用ページにTOP絵を設置する際も、テンプレートを編集する必要はありません

というか出来ません

 

【ブログ設定】 → 【スマートフォン】 → 【レイアウト】 → 【トップページ】を選択

【ブログタイトル】項目 → 【設定】で、ブログタイトルを画像に変える事が出来ます

 

 

 

 

最後に、ブログの個別記事全てにランキングバナーを設置する方法です

 

【ブログ設定】 → 【PC】 → 【カスタマイズ】 → 個別記事ページのタブを選択

 

 

 

wpp42

ここで赤枠部分を追記すると・・・

 

 

 

wpp43

展開される全ての記事に定型文が挿入されます

 

テストという記述をランキングバナーのコードに置き換えれば全てが解決しますね

 

 

 

 

スマホ用ページは前述した通りテンプレート編集が出来ないので、

 

【ブログ設定】 → 【スマートフォン】 → 【レイアウト】 → 個別記事ページのタブを選択

ここにリンクを設定した画像を追加すれば万事OK・・・と、思ったのですが

スマホページでリンク先をライブドアブログ以外にすると、何故かリンクが無効になりました

 

よく見ると前回フリーエリアに設置したランキングバナーのリンクも無効になっていました

これは酷い

 

 

 

結論:ライブドアブログは使い易いんだか使い難いんだかよく分からない

 

 

 

 

 

 

 

 

s28

 

今まで本当にありがとうございました

 

 

 

 

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

共有

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

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

  1. げりチェ より:

    これや!ワイが知りたかったンはこれや!!

    できらぁ!!

  2. ナムル より:

    とてもわかりやすい内容面に涙で前が見えません

    最近の検索エンジンは〈h1〉〈h2〉〈h3〉などはもちろん、タイトル画像の代替テキスト〈alt〉もきっちり読みに来るので、面倒くさがらずにやらないといけませんな

    • millcreape より:

      そうですね、やはりそういう部分は面倒くさくてもしっかりやるべきでしょう
      なおミルクレープ

  3. サリエラ より:

    読んでないけど、何やら凄いことだけは分かった

    魔界村脱退します

  4. sai より:

    aタグやimgタグはtitleも使うといいよーん

    title=”画像やリンク先の説明及びタイトル”

    altは画像表示ができないときのものですが、title属性でタイトルや説明入れると、マウスを画像に載せた時、設定した文言が表示されるようになりますよ(検索エンジンにも良い効果あります)

  5. 凛ちゃん より:

    わかった気になりました!
    何度も今までの内容を読み返してみます!講義ありがとうございます!お疲れさまでした!

    • millcreape より:

      キラリンとしている顔文字があると何故かコメントが表示されなかったので編集しましたw

      さておき、講義を真面目に聞いてくれてありがとうございます!

  6. アキオ より:

    ちょっと記事とは関係ない件なんですが・・・

    報告があります!

    5/15 0:10 過去記事に追記を入れたんですが・・・

    魔界村の更新順が1位になりました(驚愕

    これは更新せずとも空(から)更新で表示位置を上げれるので、マズイ気がします;;

    • millcreape より:

      実は今まで見て見ぬふりをしてきたのですが←
      光の速さで直す事が出来る不具合でした
      報告ありがとうございました!
      やはりアキオさんを魔界村のβテスターに引き入れて良かったです!

コメントを残す

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