独自タグ : ブログの使い方ガイド

"いいね！""はてブ""twitter"等の外部連携ボタンを設置する

いつもブログをご利用いただきありがとうございます。

Facebookの「いいね！」ボタンやGoogle+の「+1」ボタン等を設置できる独自タグを追加いたしました。
この独自タグを使うことで、外部の各サービスとの連携を簡易に行うことができます。

【外部連携用ボタン表示独自タグ】

Facebook

以下をコピーしてお使いください。

<$Facebook$>
<$FacebookButton$>
<$FacebookBox$>

Google+1

以下をコピーしてお使いください。

<$GooglePlusOneSmall$>
<$GooglePlusOneMedium$>
<$GooglePlusOneTall$>
<$GooglePlusOne$>

Twitter

以下をコピーしてお使いください。

<$Twitter$>
<$TwitterHorizontal$>
<$TwitterVertical$>
<$TwitterEn$>
<$TwitterHorizontalEn$>
<$TwitterVerticalEn$>

はてなブックマーク

以下をコピーしてお使いください。

<$HatenaBookmark$>
<$HatenaBookmarkVertical$>
<$HatenaBookmarkSimple$>

Evernote

以下をコピーしてお使いください。

<$Evernote$>
<$EvernoteJp$>
<$Evernote16$>
<$Evernote22$>
<$Evernote32$>
<$Evernote36$>
<$EvernoteVertical$>

【設置方法】
このブログの個別記事ページ内記事ヘッダー部分にも、各ボタンを設置いたしました。このブログのボタン設置を例に、設置方法をご紹介します。

ブログ管理画面＞ブログ設定＞デザイン＞デザインカスタマイズから、各ページのHTMLソースを編集することができます。

個別記事ページのHTMLソースのうち、ヘッダー部分に関する内容を記述した部分に、各タグを記述します。
（下の画像ではテキストエディターを用いて編集しています。）
coding_sample

変更した内容を保存すれば、完了です。

上記の例の他、各ボタンはご希望の場所に設置することが可能です。

また、カスタマイズに便利な独自タグをこの他にも多数用意しています。
デザインテンプレート/タグ一覧

Facebookの"いいね！"等を設置して自分の記事を広める

"Facebookの「いいね！」"等をブログに設置し、記事を評価してもらいつつ広めてもらい、
OGP機能を使って記事の情報をきちんと公開する事で、更なる流入効果を上げる方法をご紹介いたします。

■"Facebookの「いいね！」"を設置する

使用する独自タグ：

<$Facebook$>
<$FacebookButton$>
<$FacebookBox$>

タグごとに掲載される表示タイプ：

設置方法

ブログ管理画面＞ブログ設定＞デザイン＞デザインカスタマイズから、
各ページのHTMLソースを編集することができます。

設置したい場所に掲載用の独自タグを記述します。※設置例です

<ul class="article-post2">
　<li class="article-tool-box" style="padding-top:8px;">
　　<$HatenaBookmark$>
　　<$TwitterHorizontal$>
　　<$FacebookButton$>
　</li>
</ul>

変更した内容を保存すれば、完了です。

※上記の例の他、各ボタンはご希望の場所に設置することが可能です。

■記事の情報を外部サービスに公開する

使用する独自タグ：
・<$OGP$> ： HTML 上に「ウェブページの情報」を、meta 要素として記述する為のタグ
※「独自タグ」については「独自タグについて」をご覧ください。

・<$OGP$>のタグを使用する事でブログに組み込まれるソース

<meta property="og:type" content="blogやarticle">
<meta property="og:title" content="ブログや記事のタイトル">
<meta property="og:description" content="ブログや記事の説明">
<meta property="og:url" content="ブログや記事のURL">
<meta property="og:image" content="ブログアイコン（管理画面で設定）">
<meta property="og:site_name" content="livedoor Blog">

他のプログラムからブログの情報を読み込めるように公開する

<$OGP$> という独自タグを全てのデザインテンプレートの<head>～</head>の間に記述してください。
また、今回組み込まれる「"og:○○"」を有効にする為、
<html>タグ内に属性追加として『xmlns:og="http://ogp.me/ns#"』を記述して下しさい。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" xmlns:og="http://ogp.me/ns#">
～～～～～
～～～～～
<head>
　<$HeadSectionCommon$>
　<title><$BlogTitle ESCAPE$> - livedoor Blog（ブログ）</title>
　<$OGP$>
</head>

記事に個別の説明をつける

記事の説明（description）においては、特に何も設定しない状態だと記事の冒頭が説明として用いられます。
しかし、 [ 記事を書く/編集＞トラックバックの送信＞概要 ] に別途の説明内容を入力し投稿することで、記事ごとに og:description を指定することができます。

同一カテゴリの最新記事リストを載せよう

投稿した記事に関連した記事のリストを掲載できる機能の設定を説明致します。

livedoor Blogには、カテゴリ設定した記事に同じカテゴリに登録された最新の記事のリストを簡単に掲載できる機能がありますので、
今回はそれを使って同一カテゴリの記事リストの設置を行ってみましょう。
※テンプレートによってはデフォルトでこの機能が備わっておりますので、
　下記で説明する導入作業を行う必要が無い場合があります。

使用する独自タグ：
・<$RelatedArticles$> ：「同一カテゴリの記事リスト」の表示タグ
※「独自タグ」については「独自タグについて」をご覧ください。

導入方法

・<$RelatedArticles$>という独自タグをテンプレートに記述する。

<$ArticleBody$>
　<IfArticleBodyMore>
　<a name="more"></a><div class="article-body-more"><$ArticleBodyMore$></div>
　</IfArticleBodyMore>
　</div>
　<$RelatedArticles$>
</div>

掲載設定を変更する

テンプレート側のカスタマイズで「同一カテゴリの記事リスト」の表示対応が完了していれば、管理画面で掲載内容の設定が行えます。

「管理画面」>「ブログ設定」>「基本設定」>"個別記事に同一カテゴリの記事リスト"
で下記の設定が行えます。

・リストを表示させる/表示させないの選択
・表示させるカテゴリ番号の選択
・リストに掲載させる記事の件数

告知や最新情報を載せよう！

ブログに来られた方にお知らせや最新の情報等を掲載できるメッセージ機能の設定を説明致します。

livedoor Blogには、ブログの概要や目次、自己紹介など好きな情報を簡単に更新できる機能がありますので、
今回はそれを使ってメッセージボードの設置を行ってみましょう。
※第五世代テンプレート以降ではデフォルトでこの機能が備わっておりますので、
　下記で説明する導入作業を行う必要はありません。

使用する独自タグ：
・<$MessageBoard$> ：「メッセージボード」の表示タグ
※「独自タグ」については「独自タグについて」をご覧ください。

導入方法

・<$MessageBoard$>という独自タグをテンプレートに記述する。

<div class="column-inner">
　<div class="column-inner-2">
　　<$MessageBoard$>
　　<$IndexNavigator$>

導入例

・twitter

・ブログロール　※livedoor BlogRoll

メッセージを変更する

テンプレート側のカスタマイズで「メッセージボード」の表示対応が完了していれば、管理画面で掲載内容の設定が行えます。

「管理画面」>「ブログ設定」>「基本設定」>"メッセージボード"
で掲載したい内容を掲載/更新します。
つまり内容の変更が管理画面上で行えますので、常に最新のお知らせを掲載する事ができます。

背景画像を設定してみよう！

ブログのデザインそのものともいえる"背景画像"の掲載設定を説明致します。

livedoor Blogには、ブログテンプレートの画像を簡単に入れ替える事ができる機能ありますので、
今回はそれを使ってブログの背景画像の設置を行ってみましょう。
※第五世代テンプレート以降ではデフォルトでこの機能が備わっておりますので、
　下記で説明する導入作業を行う必要はありません。

使用する独自タグ：
・<$BlogBackgroundImageUrl$> ：背景画像の表示タグ
※「独自タグ」については「独自タグについて」をご覧ください。

導入方法

・<$BlogBackgroundImageUrl$>という独自タグをテンプレートに記述する。

<body class="default_2010 index"<IfBlogBackgroundImageUrl> style="background-image:url(<$BlogBackgroundImageUrl$>);"</IfBlogBackgroundImageUrl>>

※<IfBlogBackgroundImageUrl>は、背景画像が設定さているかの条件タグ

背景画像を変更する

テンプレート側のカスタマイズで「かんたん背景画像変更」の対応が完了していれば、管理画面で画像の設定が行えます。

「管理画面」>「ブログ設定」>「基本設定」>"かんたん背景画像"
でブログのテンプレートとして表示させたい画像を指定/変更します。
つまり画像の変更が管理画面上で行えますので、簡単にブログの模様替えが行えるようになります。

詳しくは「かんたん背景画像について」をご覧ください。