『応用した使い方』 : ブログの使い方ガイド

サイドカラムにFacebookの「いいね！」ボックスを掲載する

ブログのサイドカラムに"Facebook 「いいね！」ボックス"を掲載させる方法をご紹介いたします。

１．Facebook 「いいね！」ボックスの設定を行う

※ facebook公式の編集サイトで設定を行います。

・ファンページに行って上部右側にある「ファンページを編集」を押す

・「マーケティング」を押して『ウェブサイトに「いいね！」ボックスを追加』を押す

・表示させたい要素やWidth(横幅)を設定する

・「いいね！」ボックスを掲載する為のソースコードを取得する
上記の設定が終わったら「Get Code」を押すとソースコードが表示される

２．ブログにFacebook 「いいね！」ボックスを設定する

※この設定はlivedoor Blogです。
ブログ設定の「ブログパーツ」から、"フリーエリア"を使って上記で取得したソースコードを設定して下さい。
掲載完了した「いいね！」ボックスを確認しながら、表示レイアウトを微調整して下さい。
　・横幅(width)の微調整する
　・高さ(height)を好みの長さに設定する

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

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

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>は、背景画像が設定さているかの条件タグ

背景画像を変更する

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

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

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

タイトル画像を掲載してみよう！

ブログの顔ともいえる"タイトル画像"の掲載設定を説明致します。

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

使用する独自タグ：
・<$BlogHeaderImageUrl$> ：タイトル画像の表示タグ
・<$BlogHeaderImageWidth$> ：タイトル画像の横幅指定タグ
・<$BlogHeaderImageHeight$> ：タイトル画像の高さ指定タグ
※「独自タグ」については「独自タグについて」をご覧ください。

導入方法

・ヘッダー画像を表示させたい場所に<$BlogHeaderImageUrl$>という独自タグを挿入する。

<div class="blog-title-outer"<IfBlogHeaderImageUrl> style="background-image:url(<$BlogHeaderImageUrl$>);"</IfBlogHeaderImageUrl>>

※<IfBlogHeaderImageUrl>は、タイトル画像が設定さているかの条件タグ

・タイトル画像の横幅を指定する場合

<div class="blog-title-outer"<IfBlogHeaderImageUrl> style="background:url(<$BlogHeaderImageUrl$>) no-repeat left top;width:<$BlogHeaderImageWidth$>px;"</IfBlogHeaderImageUrl>>

・ブログ画像の縦幅を指定する場合

<div class="blog-title-outer"<IfBlogHeaderImageUrl> style="background:url(<$BlogHeaderImageUrl$>) no-repeat left top;height:<$BlogHeaderImageHeight$>px;"</IfBlogHeaderImageUrl>>

タイトル画像を変更する

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

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

詳しくは「かんたんタイトル画像について」をご覧ください。

livedoor Blog	ロケタッチ	ロケタッチグルメ
livedoor クリップ	livedoor PICS	livedoor
Cure