livedoor Blogでランキングボタンの固定

※ この記事はGジェネFRとは全く関係ありません。

タネ魔鬼さんからブログランキングについて教えていただいたのでお礼に(^^)

Livedoor Blogを使っていて、 HTMLやCSSがいまいち分からない方には 役立つかも？

ブログの記事下に固定で「ランキングのポチボタン」を入れる方法です。

これをすれば、コードをいちいち追加しなくても自動でボタンが表示されるようになります。

簡単に説明しますので、分からなかったらコメントくださいｗ

個別記事に表示する場合

①　ブログの設定から、デザイン / ブログパーツ設定 の PCをクリック

②　上のタブの「カスタマイズ」をクリックし、「個別記事ページ」を選択。

③　HTMLのコードの中から次のコードを探します。

<!-- 記事本文 -->
<div class="article-body" itemprop="articleBody">
<div class="article-body-inner">
<$CommonTheme$>
<$ArticleBody$>
<IfArticleBodyMore><div class="article-body-more" id="more"><$ArticleBodyMore$></div></IfArticleBodyMore>
</div>
<$RelatedArticles$>
<$ArticleTagsList$>
</div>
<!-- /記事本文 -->


④　好きな場所に「ランキングボタンのコード」を貼ります。

<!-- 記事本文 -->
<div class="article-body" itemprop="articleBody">
<div class="article-body-inner">
<$CommonTheme$>
<$ArticleBody$>
<IfArticleBodyMore><div class="article-body-more" id="more"><$ArticleBodyMore$></div></IfArticleBodyMore>
</div>
（ここにコードを貼れば書いた記事の下に表示される）
<$RelatedArticles$>
（ここにコードを貼ればカテゴリの最新記事の下に表示される）
<$ArticleTagsList$>
（ここにコードを貼ればタグの下に表示される）
</div>
<!-- /記事本文 -->

トップページ に表示する場合

①　ブログの設定から、デザイン / ブログパーツ設定 の PCをクリック

②　上のタブの「カスタマイズ」をクリックし、「トップページ」を選択。

③　HTMLのコードの中から次のコードを探します。

個別記事と似てますがちょっと違います。

<!-- 記事本文 -->
<div class="article-body">
<div class="article-body-inner">
<$CommonTheme$>
<$ArticleBody$>
<IfArticleBodyMore><span class="article-continue"><a href="<$ArticlePermalink$>#more">続きを読む</a></span></IfArticleBodyMore>
（ここにランキングボタンのコードを貼り付ける）
<$ArticleTagsList$>
</div>
</div>
<!-- /記事本文 -->

位置の調整

多分ボタンが記事にピッタリ付いていて、左よりになってると思うので・・・

ちょっと調整。

<br>
<center>
<ブログランキングのコード>
</center>

ランキングボタンのコードを<center></center>の間に入れてください。

そうすると 中央寄せになります。

<br>は改行のコードで、記事とボタンの間を一行開けてくれます。

これを上で説明した場所に貼り付けてください。


さらにこんな感じに好きな文章も入れられます。

<br>
<center>
一日一回ポチしてね！<br>
↓　↓　↓　↓<br>
<ブログランキングのコード>
</center>

※ <br>は改行するコードです。<br>がないと改行されずに一列になります。