ライブドアブログでSNSボタンを追加する方法等【カスタマイズ】

ライブドアブログの独自タグで追加する方法

livedoor Blog まとめサイトにある変数を利用する方法。
これはライブドアブログ限定の方法で、最も簡単だと思います。

Twitterボタンを追加したければ<$Twitter$>
はてなブックマークボタンは<$HatenaBookmark$>
Facebookボタンは<$FacebookButton$>で追加できます。

ボタンの表示方法は何種類か選べるので、好みのタグを探すと良いです。Google+1ボタンなども用意されています。

このタグを「ブログ設定」→「デザイン」→「デザインカスタマイズ」で追加したいページの追加したい場所に記入することで、簡単に追加できます。



うちのブログではこんな感じ。カスタマイズしまくりなので見づらいです。
これで記事ごとに自動的にSNSボタンを追加してくれます。

それ以外の方法で追加する（面倒です）

各記事の下にボタンを設置するため、「デザインのカスタマイズ」ページにて<$ArticleBody$>の上に各種タグを追加しました。記事ごとにURLやタイトルが違うので特殊な構文を用いる必要があります。

・はてなブックマークはこの記事を参考に設置。リンク先のページのコードをそのまま使ってます。
・Twitterはこの記事を参考に設置。
・FACEBOOKはこちらのページにてURLを<$ArticlePermalink$>とし、それぞれ好きなデザインを選択してGet Codeから作成。
・Google+1は対象URLを「<$ArticlePermalink$>」とします。出来上がったコードの表示がバグりますので、「<g:plusone size="medium" count="false" href="<$ArticlePermalink$>"></g:plusone>
」として設置

要するに、各記事のタイトルは「<$ArticleTitle  ESCAPE$>」、各記事のURLは「<$ArticlePermalink$>」とすることで自動的にボタンが正しく生成されます。

ちなみに、上の作業で出来上がったコードですが<$ArticlePermalink$>などの部分が違う文字にデコードされる場合が多いので、自分で正しく書きなおす必要があります。参照ページにも書いてあることですが。
これらの設定はライブドアブログ共通のものですが、FC2などの他のブログでは違う記述方法が必要となります。

ブログへの追加方法

後は出来上がったソースをブログを挿入することで各種ボタンの設置が可能となります。Google+１のみヘッダー内に記述が必要となりますのでそれも追加。デザイン→デザインカスタマイズから、設置したいページにソースを挿入します。このブログですと各記事のみ用いますので、編集するのは「個別記事ページ」となります。

・<$ArticleBody$>の上：記事タイトルの下に表示
・<IfHasArticleTags><$ArticleTagsListInternal$></IfHasArticleTags></div>の下：記事の最後に表示

以上のようにカスタマイズできますが、ライブドアブログは適用しているデザインによっては、タグの順序などが変わっている場合があるので色々試してみるといいです。

CSSでカスタマイズ

出来上がったコードを<div class="buttons"></div>等でくくることで、CSSでデザインの管理が出来ます。クラス名は適当でいいです。CSSのソースはこんな感じのを追加。非常にシンプルです。これですと右寄せで上下に20px分のスペースを追加して、記事を読みやすいようにしています。

.bottons{
   text-align: right;
   padding-bottom: 20px;
   padding-top: 20px;
}

個別記事のタイトルをカスタマイズ

ここで言うタイトルとはブラウザの上部に表示されるもので、HTML的に言うと<title></title>で囲まれた部分である。以前は「ブログタイトル　：：　各記事タイトル」と表示されていたが、これを「各記事タイトル : ブログタイトル」に変えたのである。この変更は非常に簡単だった。

1,ブログ設定→デザイン→デザインカスタマイズ→個別記事ページに行く
2,<title></title>に囲まれた部分を<title><$ArticleTitle ESCAPE$> : <$BlogTitle ESCAPE$></title>
に変更
3,「保存する」で完了。表示順も間の文字も自由に変えられるので好きなように。