livedoorブログのカスタマイズ方法

アウトドア関連サイトとかも作ってます。

livdoorブログでは、カスタム・デザインの機能により、ブログの「見た目」と「レイアウト」のカスタマイズが可能になっています。

このページでは、livedoorブログのカスタマイズ方法を基礎から紹介しています。

また、livedoorブログではアフィリエイトも可能となっているのでいろいろなASPに登録すれば、広告収入で小遣い稼ぎができます。

livedoor ブログのカスタマイズ方法:メニュー

livedoorブログのカスタマイズの基礎

livedoorブログでは、「カスタム」機能により、「見た目」や「レイアウト」を変更することが可能になっています。

カスタマイズには、「CSS」のカスタマイズ(見た目の変更)と「htmlテンプレート」のカスタマイズ(レイアウトの変更)があります

以下のステップでカスタマイズが可能になります。

以降の章では、これをもとに実際にいくつかのカスタマイズ事例を紹介します。

ページトップに戻る

HTMLタグの変更によるキーワードSEO

livedoorブログは、残念ながら、検索エンジンに最適された「HTMLタグ」構造になっていません。(断言してしまいました。。)

「ライブドアブログ」をハックしました。

まずは、Googleなどで重要視される<title>や<Hx>系のタグがどこに使われているかです。

トップページ

カテゴリ別ページ

個別記事ページ

月別アーカイブ

これらを眺めて、変更するとすれば、「日付」のタグ(デフォルトはh2)をもっと重要度の低いタグに変更し、「記事のタイトル」のタグ(デフォルトh3)をもっと重要度の高いタグにするということでしょう。

変更方法ですが、ライブドアのデザインのカスタム機能をつかい、h2とh3のタグの入れ替えを行います。

「CSS」と「HTMLテンプレート」の両方でh2とh3を入れ替えれば、現在のフォーマットを崩さずに入れ替えられると思います。(すべての「HTML」(トップ、個別など)で変更するのを忘れないように)

ページトップに戻る

サイドバーを個別記事にも付ける

ライブドアブログは、標準状態ではトップページだけに「サイドバー」があるため、個別記事や、カテゴリー毎のページに行くとサイドバーが消えてしまい、ページ間移動が面倒になってしまいます。

そこで、ちょっとライブドアブログを「ハック」してみましょう。

「ブログ」ページのレイアウト を変更するときには、「HTMLテンプレート編集機能」を使います。
投稿された記事は、このテンプレートにしたがってHTMLファイルとして整形されます。

今回、各ページ自身のレイアウトの変更(サイドバーをつけるという変更)が問題ですので、「HTMLテンプレートの編集機能」をメインで使用することになります。

「カスタム」デザインを選択した画面の上の方にあるリンクから「HTMLテンプレートの編集」ウィンドウを開きます。

今回は、トップページと同じように他のページ(個別記事、カテゴリ別アーカイブ、月別アーカイブ等)にサイドバーをつけるということなので、トップページがどのようになっているか見てみることにします。

<div id="container">
<div id="banner">
タイトル表示
</div> (banner を閉じてる)
<div id="content"> (これが記事のスペースをあらわすdivタグ)
<div class="blog">
<!-- Loop Start -->
ブログの記事がループで書かれる
<!-- Loop End -->
</div> (blog を閉じてる)
</div> (content を閉じてる)

<div id="links"> (これが記事サイドバーのスペースをあらわすdivタグ)
<$PluginList$> (これがサイドバーの中身だと思われる。あやしい)
ライブドアの宣伝アイコン等
</div>(linksを閉じている)
</div>(containerを閉じている)

レイアウトの問題なので、<div>タグを中心に見ていったら以外と簡単に理解できました。と、思っていたら、

livedoor Blog開発日誌 July 16, 2004を発見。

サイドバー部分を plugin.js として静的に書き出す処理も追加いたしました。
これにより、個別記事部分では
<script language="JavaScript" src="<$BlogUrl$>plugin.js"></script>
と記述する事で常に最新のサイドバーの情報を個別記事に挿入出来るようになります。

ありがたいことです。

これだけハックできれば後は、簡単です。

他のページの「HTMLテンプレートの編集」を開いて、トップページの形と同じように<div>タグを配置して、上であやしいと書いてあるラインを

<script language="JavaScript" src="<$BlogUrl$>plugin.js"></script>

にして埋め込むだけです。

具体的には、まず編集したいテンプレートを「HTMLテンプレートの編集」から開きます。

「HTMLテンプレート」の編集

最後にブログの再構築をして終了です。

と思ったら、私の場合、個別記事で、サイドバーが下方向にずれるという現象に見舞われました。

今度は、スタイルの問題なので、「CSS」の定義をいじる必要がありそうです。

みてみると、個別記事にあるコメントを入れるtextareのところで、id=text というのがあります。

「CSS」の定義で「#text」を見ると「width=500px」となっています。この幅が大きすぎるのが問題なようです。

これを減らせば何とか収まります。

「CSS」の編集

以上です。

ページトップに戻る

カテゴリー内の記事一覧を載せる

ブログを書きはじめて思ったのですが「過去に書いた記事」にたどり着くのがすごく面倒なんですね。

まず、
トップページには、最近の記事のタイトル一覧しか載せられていません。

さらに、
月別やカテゴリー別のページには、記事タイトル一覧がありません。

つまり過去の記事に到着するのは、

という感じだと思われます。

つまり、「検索エンジン経由」以外の人は、「たくさんの記事の羅列」から興味のある記事を「目視で探してる」のです。

「カテゴリー別」や「月別」の画面で記事タイトルリストを表示させれば、少なくとも興味のあるカテゴリ内にどのような記事があるかわかるようになり、ユーザビリティの向上になるはずです。

まず「カスタムデザイン」の「HTMLテンプレート」で「カテゴリー別」を確認します。
記事毎のタイトルは、以下のループ部分で書き込まれているのが分かります。

<CategorizedArticlesLoop>
<$TrackBackAutoDiscovery$>
<!-- 日付タグを書く処理 -->
<IfDateChanged><h2 class="date">
    <$ArticleDate$></h2></IfDateChanged>
<div class="blogbody">
<!-- nameを定義しているので、記事へのリンクで後で利用 -->
<a name="<$ArticleId$>"></a>
<!-- タイトルは、$ArticleTitle ESCAPE$ だということが判明 -->
<h3 class="title"><$ArticleTitle ESCAPE$></h3>
<!-- ここ移行で文書やコメントの処理をしてる -->
省略
</div>
</CategorizedArticlesLoop>

この内容から、記事タイトルリストをリンクとして書き出すのは、

<div class="sidetitle">記事一覧</div>
<div class="side">
<CategorizedArticlesLoop>
<$TrackBackAutoDiscovery$>
<div class="sidebody"><a href="#<$ArticleId$>">
   <$ArticleTitle ESCAPE$></a></div>
</CategorizedArticlesLoop>
</div>

早速、これをサイドバーを個別記事にも付けるで作成した<div class="links">のdivブロック内の適当な所に書いて、再構築を行えば完了です。

少しは、見やすくなったでしょうか?

ページトップに戻る