ライブドアブログカスタマイズの覚書

久しぶりにこのブログの管理ページにログインしましたら、コメントをいただいておりました。

だいこんさん、1ヶ月も気がつかないて申し訳ありませんでした。

このブログは私がライブドアブログを運営していて、他の人とは違うようにカスタマイズしたいと思ったのですが、そのやり方や方法を自分で忘れないように残そうと思ってはじめたものでした。

しかし私の中で、ライブドアブログのカスタマイズはこのくらいでいいかなあ、なんて思っていたので、このブログを更新することもほとんどない状態でした。

しばらく管理ページにログインもしていませんでした。

だいこんさん、本当にごめんなさい。

コメントでご質問いただいたことを大変遅くなりましたがお答えさせていただきます。

それでは本題に入ります。

だいこんさんのご質問は、「本文の上部にフリーエリアを設けるスタイルはどうすればいいのか？」というものでした。

私のライブドアブログのトップページにはブログの説明を記載しています。実はこれはプラグインのフリーエリアを表示させているのではありません。

ライブドア以外のブログサービス、例えばシーサーブログや269gなどでは本文の上部にフリーエリアを設定するプラグインがありますが、ライブドアブログにはありません。ライブドアブログのプラグインにも「フリーエリア」はありますが、本文への設定はできません。できるかもしれませんが、私はやり方をしりませんので、私は下記のような方法でトップページにブログの説明を記載しています。

テンプレートはライブドアブログのデフォルトのテンプレート「デフォルト2008（スカイ,3カラム）」で説明します。

この方法はトップページのHTMLに下記のタグと文章を記述し、スタイルシート(CSS)にも下記を追記することで表示しています。

<div class="topmain">
<p style="font-weight:bold;font-size:14px;color:#82a4d1;padding-bottom:
10px;">ライブドアブログカスタマイズの覚書へようこそ！</p>
<p class="topmain1"><strong>ライブドアブログカスタマイズの覚書
</strong>は、管理人”take”が、ライブドアブログを作成、そして、カスタ
マイズした方法を忘れないように、覚書として残すことを目的に作りましたが、これ
からライブドアブログをはじめたいという方や、ライブドアブログのカスタマイズに
興味があるという方にもお役に立つような内容にしたいという思いで運営していま
す。</p>
<p class="topmain1"><strong>ライブドアブログカスタマイズの覚書
</strong>が、あなたのライブドアブログの運営にお役に立てば幸いです。
</p>
</div>

.topmain{
	border:#dedede 2px dotted;
	font-size:12px;
	color:#666666;
	text-align:left;
	margin:10px 20px 20px;
	padding:5px 10px 10px;
}

.topmain1{
	line-height:180%;
}

.topmainと.topmainは、スタイルシート(CSS)に新たに追記します。

それではまずスタイルシート(CSS)に追記するので、ライブドアブログ管理画面からスタイルシート(CSS)を呼び出します。

ライブドアブログの管理画面は「新」「旧」ありますが、私は使い慣れている「旧」画面を利用しているので、これをベースに説明していきます。

＊【スタイルシート（CSS）】ファイルまでのアクセス方法は「カスタマイズ応用編では」を参考にしてください。

スタイルシート（CSS）ファイルのわかりやすい箇所、ここでは一番下にしましょう。一番下に下記の記述を加えてください。

＊コピペでもOKです。

.topmain{
	border:#dedede 2px dotted;
	font-size:12px;
	color:#666666;
	text-align:left;
	margin:10px 20px 20px;
	padding:5px 10px 10px;
}

.topmain1{
	line-height:180%;
}

「topmain」「topmain1」という名前は半角英数字なら他のものでも構いませんが、スタイルシート（CSS）ファイル内に同じ名前が使われていないかどうかは確認してください。

＊スタイルシート（CSS)の記述について詳しくお知りにないたい方は、「スタイルシート（CSS)について」カテゴリーをご覧ください。

また中身の記述についてもここでは詳しく触れませんが、「カスタマイズ応用編」カテゴリーを参考にして、色や枠線などを変更してみてください。

続いて「スタイルシート（CSS）」と同じ管理画面で、「スタイルシート（CSS）」の右側にある「トップページ」をクリックして「トップページ」のHTMLファイルを開いてください。

そこに下記のような記述をします。ここでは「ライブドアブログカスタマイズの覚書」の記述をそのまま掲載します。

＊コピペして後で内容を変更してください。

<div class="topmain">
<p style="font-weight:bold;font-size:14px;color:#82a4d1;padding-bottom:
10px;">ライブドアブログカスタマイズの覚書へようこそ！</p>
<p class="topmain1"><strong>ライブドアブログカスタマイズの覚書
</strong>は、管理人”take”が、ライブドアブログを作成、そして、カスタ
マイズした方法を忘れないように、覚書として残すことを目的に作りましたが、これ
からライブドアブログをはじめたいという方や、ライブドアブログのカスタマイズに
興味があるという方にもお役に立つような内容にしたいという思いで運営していま
す。</p>
<p class="topmain1"><strong>ライブドアブログカスタマイズの覚書
</strong>が、あなたのライブドアブログの運営にお役に立てば幸いです。
</p>
</div>

記述する場所ですが、これはあなたが選ばれたテンプレートによっても違ってくると思いますが、ここではライブドアブログのデフォルトのテンプレート「デフォルト2008（スカイ,3カラム）」で説明しています。

32から45行目に下記のような記述があります。空行も1行と数えてください。

<div id="content" class="hfeed">
<!-- ..... MainColumn ..... -->
<div id="main" class="column">
<div class="column-inner">
<div class="column-inner-2">
	<$IndexNavigator$>

<!-- ArticlesLoop Start -->
<!-- google_ad_section_start -->
<IndexArticlesLoop>
<$TrackBackAutoDiscovery$>
<div class="article-outer hentry">
<div class="article-outer-2">
<div class="article-outer-3">

ここの空いている行の間にHTMLを追記します。

<div id="content" class="hfeed">
<!-- ..... MainColumn ..... -->
<div id="main" class="column">
<div class="column-inner">
<div class="column-inner-2">
	<$IndexNavigator$>

<div class="topmain">
<p style="font-weight:bold;font-size:14px;color:#82a4d1;padding-bottom:
10px;">ライブドアブログカスタマイズの覚書へようこそ！</p>
<p class="topmain1"><strong>ライブドアブログカスタマイズの覚書
</strong>は、管理人”take”が、ライブドアブログを作成、そして、カスタ
マイズした方法を忘れないように、覚書として残すことを目的に作りましたが、
これからライブドアブログをはじめたいという方や、ライブドアブログのカスタマ
イズに興味があるという方にもお役に立つような内容にしたいという思いで運営し
ています。</p>
<p class="topmain1"><strong>ライブドアブログカスタマイズの覚書
</strong>が、あなたのライブドアブログの運営にお役に立てば幸いです。
</p>
</div>

<!-- ArticlesLoop Start -->
<!-- google_ad_section_start -->
<IndexArticlesLoop>
<$TrackBackAutoDiscovery$>
<div class="article-outer hentry">
<div class="article-outer-2">
<div class="article-outer-3">

このようにブログのトップページの本文の上に説明分が表示されるようになりました。