アウトドア関連サイトとかも作ってます。
livdoorブログでは、カスタム・デザインの機能により、ブログの「見た目」と「レイアウト」のカスタマイズが可能になっています。
このページでは、livedoorブログのカスタマイズ方法を基礎から紹介しています。
また、livedoorブログではアフィリエイトも可能となっているのでいろいろなASPに登録すれば、広告収入で小遣い稼ぎができます。
livedoorブログでは、「カスタム」機能により、「見た目」や「レイアウト」を変更することが可能になっています。
カスタマイズには、「CSS」のカスタマイズ(見た目の変更)と「htmlテンプレート」のカスタマイズ(レイアウトの変更)があります
以下のステップでカスタマイズが可能になります。
ライブドアブログにログイン後、「ブログの設定/管理」―＞「デザインの設定」に移動します。
まずは、現在自分が使っている(もしくは、これからベースとして使おうと思っている)デザイン名を覚えておきます。
次に「スタンダード」−＞「カスタム」デザインを選択します。そこで、｢テーマの読み込み｣で先程のデザイン名を選択します。
どうでしょう。下にずらっと「CSS｣の定義が出て来ましたね。
「CSSってなーに？」という方は「CSSでスタイリッシュなホームページ」を、ご覧ください。
CSSは、「カスタム」デザインを選択したときに最初に出てくる画面(テーマの読み込みの下)にありますので、見た目を変えたい場合、ここを編集して変更を行います。
ブログは、「HTMLテンプレート」と呼ばれるテンプレートにそって、htmlファイルを構築します。
livedoorブログでは、「カスタム」の画面上にある｢HTMLテンプレート編集機能｣から変更を行うことが出来ます。
「HTMLテンプレート編集機能」に移動すると、トップページ、個別ページなどの各ページごとに「HTMLテンプレート」の編集ができるようになっています。
「CSS」及び「HTMLテンプレート」を変更したときは、ブログの「再構築」を行わなければ、変更が反映されません。
「ブログの設定/管理」―＞「Blogの再構築」(右側のメニュー)からブログの再構築を行ってください。
以降の章では、これをもとに実際にいくつかのカスタマイズ事例を紹介します。
livedoorブログは、残念ながら、検索エンジンに最適された「HTMLタグ」構造になっていません。(断言してしまいました。。)
「ライブドアブログ」をハックしました。
まずは、Googleなどで重要視される<title>や<Hx>系のタグがどこに使われているかです。
当然ブログのタイトルが入ってます。
タイトルバナーに表示されているブログのタイトルが入ってます。
なんと「日付」が入ってます。
こんなに重要なタグを日付に使うなんてもったいない限りです。
ライブドアブログ担当者は、日付で検索する人が多いと思っているのでしょうか。
各記事のタイトルが入ってます。h2とh3入れ替えたいところです。
ブログのタイトル+カテゴリ名が入ってます。
タイトルバナーに表示されている「プチビジネス？」が入ってます。
またしても、「日付」が入ってます。。。言葉がありません。
各記事のタイトルが入ってます。
ブログのタイトル+記事名が入ってます。
タイトルバナーに表示されているブログのタイトルが入ってます。
「日付」が入ってます。
記事のタイトル、｢この記事へのトラックバックurlxxx｣｣が入ってます。トラックバックアドレスをh3にしてどうすんだ？
このブログのタイトルが入ってます。
タイトルバナーに表示されているブログのタイトルが入ってます。
「日付」
各記事のタイトルが入ってます。
これらを眺めて、変更するとすれば、「日付」のタグ(デフォルトはh2)をもっと重要度の低いタグに変更し、「記事のタイトル」のタグ(デフォルトh3)をもっと重要度の高いタグにするということでしょう。
変更方法ですが、ライブドアのデザインのカスタム機能をつかい、h2とh3のタグの入れ替えを行います。
｢CSS｣と｢HTMLテンプレート｣の両方でh2とh3を入れ替えれば、現在のフォーマットを崩さずに入れ替えられると思います。(すべての「HTML｣(トップ、個別など)で変更するのを忘れないように)
ライブドアブログは、標準状態ではトップページだけに「サイドバー」があるため、個別記事や、カテゴリー毎のページに行くとサイドバーが消えてしまい、ページ間移動が面倒になってしまいます。
そこで、ちょっとライブドアブログを「ハック」してみましょう。
「ブログ」ページのレイアウト を変更するときには、｢HTMLテンプレート編集機能｣を使います。
投稿された記事は、このテンプレートにしたがってHTMLファイルとして整形されます。
今回、各ページ自身のレイアウトの変更(サイドバーをつけるという変更)が問題ですので、｢HTMLテンプレートの編集機能｣をメインで使用することになります。
｢カスタム｣デザインを選択した画面の上の方にあるリンクから｢HTMLテンプレートの編集｣ウィンドウを開きます。
今回は、トップページと同じように他のページ(個別記事、カテゴリ別アーカイブ、月別アーカイブ等)にサイドバーをつけるということなので、トップページがどのようになっているか見てみることにします。
レイアウトの問題なので、<div>タグを中心に見ていったら以外と簡単に理解できました。と、思っていたら、
livedoor Blog開発日誌 July 16, 2004を発見。
サイドバー部分を plugin.js として静的に書き出す処理も追加いたしました。
これにより、個別記事部分では
<script language="JavaScript" src="<$BlogUrl$>plugin.js"></script>
と記述する事で常に最新のサイドバーの情報を個別記事に挿入出来るようになります。
ありがたいことです。
これだけハックできれば後は、簡単です。
他のページの｢HTMLテンプレートの編集｣を開いて、トップページの形と同じように<div>タグを配置して、上であやしいと書いてあるラインを
にして埋め込むだけです。
具体的には、まず編集したいテンプレートを｢HTMLテンプレートの編集｣から開きます。
最後にブログの再構築をして終了です。
と思ったら、私の場合、個別記事で、サイドバーが下方向にずれるという現象に見舞われました。
今度は、スタイルの問題なので、「CSS」の定義をいじる必要がありそうです。
みてみると、個別記事にあるコメントを入れるtextareのところで、id=text というのがあります。
「CSS」の定義で「#text」を見ると「width=500px」となっています。この幅が大きすぎるのが問題なようです。
これを減らせば何とか収まります。
以上です。
ブログを書きはじめて思ったのですが「過去に書いた記事」にたどり着くのがすごく面倒なんですね。
まず、
トップページには、最近の記事のタイトル一覧しか載せられていません。
さらに、
月別やカテゴリー別のページには、記事タイトル一覧がありません。
つまり過去の記事に到着するのは、
という感じだと思われます。
つまり、「検索エンジン経由」以外の人は、｢たくさんの記事の羅列」から興味のある記事を「目視で探してる」のです。
「カテゴリー別」や「月別」の画面で記事タイトルリストを表示させれば、少なくとも興味のあるカテゴリ内にどのような記事があるかわかるようになり、ユーザビリティの向上になるはずです。
まず「カスタムデザイン」の「HTMLテンプレート」で「カテゴリー別」を確認します。
記事毎のタイトルは、以下のループ部分で書き込まれているのが分かります。
この内容から、記事タイトルリストをリンクとして書き出すのは、
早速、これをサイドバーを個別記事にも付けるで作成した<div class="links">のdivブロック内の適当な所に書いて、再構築を行えば完了です。
少しは、見やすくなったでしょうか？