MNekoeのゆるい日常

取り止めのない日常日記

本ページはアフィリエイトプログラムによる広告を利用しています

はてブ)ブログ村バナーリンク横並びリストにしてみる(目次とカテゴリが崩れたのでそっちも対応w)

 

 

ちょっと前ににほんブログ村に登録したのだけど、

参考)登録した時の話。(登録以降多少アクセス増えた気がする🙌)

 

m-nekoe-life.hatenablog.com

 

登録するにあたり、ランキング集計用のバナーを記事に入れてみてとにほんブログ村からの案内にあったのでそいつを入れてみてしばらく運用してたけど、見た目にスッキリさせたくて横並びさせてみた時の話。

 

 

とりあえず横並びにしてみた(リストタグを使って)

にほんブログ村のヘルプページを参照して指示通りにバナー用のHTMLをとりあえず追加したんだけど、3つ(ランキングとPVランキングとフォロー)も入れたら小さいバナーが縦に3つ並んでて横並びにできないものかなぁと。

で、(HTML タグはあまり詳しくないので)調べたら、HTMLタグのリストに入れて、CSSでインライン要素に指定すると横並びにできるよ!とあってなるほど!と思って入れてみた。

 

※追加した事項

1、バナーリスト

場所)デザイン→カスタマイズ→記事下HTML

内容)

----

<ul >
<li>(ランキングバナーをブログ村からコピペしていれる)</li>
<li>(PVランキングバナーをブログ村からコピペしていれる)</li>
<li>(フォローバナーをブログ村からコピペしていれる)</li>
</ul>

----

 

2、CSSにてインライン指定

場所)デザイン→カスタマイズ→デザインCSS

内容)

-----

 li {
display: inline;
}

-----

 

一応確認したけどバナーも横並びで表示されるしにほんブログ村側の集計もできてるみたいだし大丈夫やろと思った。。思ったんだよ。。。

 

問題発生。(→はてなブログの機能:目次とカテゴリ の表示が崩れる)

ふと、直近のブログとか見返してたら(個人的な備忘録も兼ねてるので時々見返す)、個人的に好きで多用してるはてなの機能「目次」と分類のために使ってる「カテゴリ」の表示で、各リンクが縦並びで表示されてないことに気がついた😱

 

これ、はてな記法の目次用のタグ追加したり、カテゴリ指定のとこから選択するだけだから何使ってるか分かってなくて、初めはどうしてこんなことになってるかわからなくて、焦って記事側に手を入れてみたりして「あれ?なんで???」ってハマってたんだけど😅、直近やったことに思いを馳せて、あ、しもたこのせいだ。目次とカテゴリのとこってリストタグ使ってんのか。。。と思い至り。

 

ブログ村バナーリスト限定の横並び指定に変更

クラス属性指定すれば指定も限定的になるんよね。っつーことで

前のとこからちょびっとだけバージョンアップ😅

 

※追加した事項

1、バナーリスト

場所)デザイン→カスタマイズ→記事下HTML

内容)

----

<ul class="mybannerList">
<li>(ランキングバナーをにほんブログ村からコピペしていれる)</li>
<li>(PVランキングバナーをにほんブログ村からコピペしていれる)</li>
<li>(フォローバナーをにほんブログ村からコピペしていれる)</li>
</ul>

----

 

2、CSSにてインライン指定

場所)デザイン→カスタマイズ→デザインCSS

内容)

-----

.mybannerList  li {
display: inline;
}

-----

 

タグなんて使ってないから大丈夫やろと思って油断してたけど初めからやっておけばよかった。。。😅

 

目次こんなに見にくかったっけ???って焦った。。自分のせいだった。orz

 

それだけー😆

 

 

↓↓※モチベボタン※↓↓

↑↑広告クリックで私のモチベが上がります↑↑