無料ブログ比較でござる
ホーム ＞ 無料ブログ ＞ ブログ比較 ＞ livedoor ブログ

【livedoor ブログ】-テンプレートカスタマイズ - 無料ブログ

livedoor ブログのテンプレートカスタマイズの紹介！defaultのテンプレートを使って簡単なカスタマイズの方法を解説してます。Google Adsenseの貼り付け位置、アクセス解析の設置位置など実際に使用しているソース（タグ）も公開してます！

 テンプレートカスタマイズ

livedoor ブログ（ライブドアブログ）のテンプレートのカスタマイズについて、ちょっと紹介。それほどHTMLに詳しくない自分が出来る程度のカスタマイズです。初心者向けの内容になってます。Google AdSense広告、アクセス解析などの設置場所、見出しタグの見直し、記事ごとに「編集」リンクをつけて記事を編集しやすくする方法など紹介してます。

※defaultのテンプレートを使用してます。

下記のテンプレートは現在、このサイトの運営日記に使用してるlivedoorBlogです。⇒はじめよう！快適ネット生活（livedoor Blog）　※最近また変更しました（05/06/17）、来月ぐらいには、このページを完成させます。暫くお待ちください！

●テンプレート変更内容

  1. 言語指定<lang="ja">
  2. メタタグ<meta>挿入（サイト説明・キーワード）
  3. Google AdSense広告設置
  4. アクセス解析ツール設置
  5. 見出しタグの変更
  6. 記事に「編集」リンクを設置

●色分けの説明

・青色のタグ は変更・挿入したタグ

・ピンク色のタグ は、コメントタグ。これは、ちょっとしたメモするときに使うタグで、画面には表示されない。

・赤色のタグ は、livedoor独自のタグ。このタグはそれぞれに決まったデータが挿入されるようになってる。変数みたいなもの。下記に変数と値の対照表を作成してるので参考にして下さい。

トップページ、テンプレート

テンプレートイメージ
上部（ヘッダー）
左側 右側
下部（フッター）

▲ページの先頭に戻る

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
<meta name="keywords" content="ブログ,Blog,アフィリエイト,代理店,お小遣い,アクセスアップ,SEO,対策,ホームページ,初心者,パソコン,情報,インターネット,生活,楽しく,便利,お得,解説,PC" />
<meta name="description" content="ブログ、アフィリエイト、アクセスアップにまつわるニュースや、お得な情報など主に紹介！その他、ホームページ運営で気が付いた事や、失敗談、ちょっと気になる事なんかも掲載してます。" />
 <link rel="stylesheet" href="<$CSSUrl$>" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<$RSSUrl$>" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$AtomUrl$>" />
<IfFoafUrl>
<link rel="meta" type="application/rdf+xml" title="FOAF" href="<$FoafUrl$>" />
</IfFoafUrl>
<title><$BlogTitle ESCAPE$></title>
</head>
<body>
<!-- ↓アクセス解析タグ -->
<SCRIPT LANGUAGE="JAVASCRIPT"><!--
var ID="*********";
var AD=0;
var FRAME=0;
// --></SCRIPT>
<SCRIPT LANGUAGE="JAVASCRIPT" SRC="http://j1.ax.xrea.com/l.j?id=*********"></SCRIPT>
<NOSCRIPT><A HREF="http://w1.ax.xrea.com/c.f?id=*********" TARGET="_blank"><IMG SRC="http://w1.ax.xrea.com/l.f?id=*********&url=X" BORDER="0"></A></NOSCRIPT>
<!-- ↑アクセス解析タグ -->
<!-- HEADER -->
<a name="top"></a>
<div id="container">
<div id="banner">
<h1 class="blogtitle"><a href="<$BlogUrl$>" accesskey="1"><$BlogTitle ESCAPE$></a></h1>
<h2 class="description"><$BlogDescription$></h2>
</div>
<div id="content">
<div class="blog">
<!-- ↓ココから Google AdSense ブログのタイトルの下に表示 -->
<script type="text/javascript"><!--
google_ad_client = "pub-****************";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_channel ="**********";
google_color_border = "FF4500";
google_color_bg = "FFEBCD";
google_color_link = "DE7008";
google_color_url = "E0AD12";
google_color_text = "8B4513";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!-- ↑ココまで -->
<!-- Loop Start -->
 <IndexArticlesLoop>

<$TrackBackAutoDiscovery$>
<IfDateChanged><div class="date"><$ArticleDate$></div></IfDateChanged>

<div class="blogbody">
<a name="<$ArticleId$>"></a>
<h3 class="title"><$ArticleTitle ESCAPE$></h3>
<div class="main">
<$ArticleBody$>  <IfArticleBodyMore><span class="main-continues"><a class="acontinues" href="<$ArticlePermalink$>">続きを読む</a></span></IfArticleBodyMore><br clear="all">
</div>
<div class="posted">Posted by <$ArticleAuthor$> at
<a class="aposted" href="<$ArticlePermalink$>"><$ArticleTime$></a>
<IfArticleAllowComment>│<a class="aposted" href="<$ArticlePermalink$>#comments">Comments(<$ArticleCommentCount$>)</a></IfArticleAllowComment>
<IfArticleAllowPing>│<a class="aposted" href="<$ArticlePermalink$>#trackback">TrackBack(<$ArticlePingCount$>)</a></IfArticleAllowPing>
<IfArticleCategory>│<a class="aposted" href="<$ArticleCategoryUrl$>"><$ArticleCategory ESCAPE$></a></IfArticleCategory>│<a class="aposted" href="http://blog.livedoor.com/cms/article/edit?id=<$ArticleId$>" Target="_blank">編集</a></div>
<IfFirstArticle><$Advertise$></IfFirstArticle>
</div>

</IndexArticlesLoop>
<!-- Loop End -->
 <div class="pagetop"><a class="aposted" href="#top">このページの上へ▲</a></div>
</div>
</div>

<div id="links">
<!-- ↓ホームページ登録ドットコム -->
<div>
<a href="http://www.hptouroku.com/cgi-bin/affiliates/clickthru.cgi?id=******"target="_top">
<img src="http://www.hptouroku.info/images/accessup14.gif"alt="検索エンジン登録代行/上位表示でアクセスアップ！" border=0></a>
<br><font size="-1"><a href="http://www.hptouroku.com/cgi-bin/affiliates/clickthru.cgi?id=bzifimd6"target="_top">検索エンジン登録代行・検索エンジン上位表示でアクセスアップ！ 1980円～！</a></font>
<font size="-1">★只今、最高3,000円のキャシュバックキャンペーン中！無料で登録できるリンクスタッフになって広告を掲載するだけです！詳細はホームページ登録ドットコムで確認して下さい！お薦めです！</font>
</div>
<!-- ↑ホームページ登録ドットコム -->
 <$PluginList$>
<div class="powered">
<a href="<$LDBlogUrl$>"><img src="<$LDBlogLogo$>" width="117" height="28" border="0" alt="livedoor Blog"></a>
</div>
<div class="syndicate">
<a href="<$RSSUrl$>">Syndicate this site (XML) </a>
</div>

<!-- checkers -->
 <table cellspacing="2" cellpadding="0" width="117" border="0" align="center" class="checkers">
<tr>
<td width="1%"><img src="http://blog.livedoor.com/img/usr/cmn/icon_cks.gif" width="30" height="25" border="0" hsapce="3" alt="このBlogをチェッカーズに追加"></td>
<td width="99%"><a href="<$AddCheckers$>" target="_blank">このBlogを<br>チェッカーズに追加</a></td>
</tr>
</table>

<table cellspacing="2" cellpadding="0" width="117" border="0" align="center" class="checkers">
<tr>
<td width="1%"><img src="http://image.blog.livedoor.com/img/usr/cmn/icon_br.gif" width="30" height="25" border="0" hsapce="3" alt="このBlogをリーダーに追加"></td>
<td width="99%"><a href="<$AddBlogReader$>" target="_blank">このBlogを<br>リーダーに追加</a></td>
</tr>
</table>

</div>
<div id="footer"></div>
</div>
</body>
</html>

▲ページの先頭に戻る

テンプレート変数対照表

テンプレート変数対照表
<$BlogUrl$> ブログアドレス（トップページ）
<$BlogTitle ESCAPE$> ブログ名
<$BlogDescription$> ブログ説明
<$TrackBackAutoDiscovery$>
<$ArticleDate$> 記事日付
<$ArticleId$> これはリンクするときにリンク先を直接記事に指定する時に利用します。
例：「<a href="http://#<$ArticleId$>"></a>」
<$ArticleTitle ESCAPE$> 記事タイトル
<$ArticleBody$> 記事本文
<$ArticleAuthor$> ID
<$ArticlePermalink$> 記事固定アドレス、記事にリンクしてもらう時に使うアドレス。各記事の個別アドレス。パーマリンクと呼ばれています。
<$ArticleTime$> 記事の投稿時間
<$ArticleCommentCount$> 記事に書き込みされたコメント数
<$ArticleCategoryUrl$> カテゴリのアドレス
<$ArticleCategory ESCAPE$> カテゴリ名
<$ArticleId$> 記事の編集ID、これを各記事指定して置くと、編集画面を簡単に表示させる事が出来る。ログインしていないと表示されません。
<$Advertise$>
<$PluginList$>
<$LDBlogUrl$>
<$LDBlogLogo$>
<$RSSUrl$>
<$AddCheckers$>
<$AddBlogReader$>
<$CSSUrl$> スタイルシート（CSS）アドレス

▲ページの先頭

Yahoo!ブックマークに登録