一昨日からブログテンプレート改造作業続いております。

昨日あたりまでは、「このブログチョット変だな？」程度で済んでいたと思うのですが、本日夕方辺りからは再構築の終わっていないページはページ頭のバナーまわりが盛大に崩れております。

大変見づらい状況が続いておりますが、もうしばらくご勘弁下さいませ。

主な改造点を挙げておきます。
ブログを改造してみたい、SEOを考えてみたい人は、以下参考にしてみて下さい。

  1. h1タグをつけた（笑）
    以前改造した時があまりに無知だったと云う事で(；´ω｀)
    h1タグが無いのにh2以下のタグは多数存在すると言うふざけた構成になっていました。
  2. メタタグにdescriptionが無かったので付けてみた。
    これも気が付いていなかったのですが、メタタグのdescription部分、Livedoorブログにはないんですね。トラックバックに付くサマリーみたいなのをここに表記したかったのですが、やり方が解らなかったので適当につけました。（まだ不完全）
  3. バナー周りを大幅に修正
     今までGIF画像のツギハギだらけと言う無茶な作りにしすぎていました（笑）
    ごく普通の作りに戻った、という感じです。
  4. リンクの色を変更
    このブログの大元はBluelineと云う名前のテンプレートだったのですが、コレの標準のリンクの色が結構薄く、手前のモニタではとてもキレイな色なのですが、モニタによってはかなり薄くて見難いらしいのです(´Д｀；)
    ちゅ～ワケで雰囲気を壊さない程度にリンクの青色を濃い目に変更。
  5. 記事内のリンクに下線を付けた。
    やっぱリンクに下線は必要でしょ、と考え、メインの記事内のリンクには下線が付くようにしました。あと、リンクは自動で太字になる設定も試したのですが、FireFox側で表示が汚くなる為、一時的に断念。
  6. カレンダー
    役に立たないLiveDoorのカレンダー、今回の改造で捨ててしまおうと思っていたのですが、いつのまにかキチンとリンクを追っかけてくれるように改良されていましたので、残す事にしました（笑）
  7. <$TrackBackAutoDiscovery$>を外してみた
    月間アーカイブとカテゴリーアーカイブから、HTML内部に記述されるRSS情報を消してみました。ひょっとしたら「それやっちゃダメ」な行為かもしれません。でもRSS情報って、TOPページと個別記事以外では必要ないよね...？
  8. スタイルシートでfloat: right、leftを使う事を覚えたので、試して見ました。
     面白いですね、コレ。
    tableタグ使わなくても左右に文章分けれたり、別のdivタグの中に無理矢理食い込ませたり出来て、実験していると飽きません（笑）
  9. h2タグの構成変更
     単なる日付にh2タグが付いているのはもったいないと感じたので、ブログの記述部分や、カテゴリページではカテゴリー名にh2タグを付けるように変更しました。
  10. メインの文章の行間を広げた
    メインの文章の行間を広げました。ほんの少しですが（笑）

    まぁ、自分で読みやすい程度の行間にしたのですが、少し違和感があるのでその内変更するかも。
    ちなみに普通のブログより文字を大きくしてるのは私の好みです。私は難しい文章を読むとき文字が小さいと頭痛くなる人なので(´Д｀；)
    んで、変わりにサイドバーの行間は狭くなっています。まぁ、自分好みという事です(；´ω｀)

  11. コメント、トラックバック周りの文字の調整
    文字の大きさを12pxに。投稿者と投稿内容に段差をつけて、境目を解りやすくしたつもりです。
  12. リンク数を減らす為にnofollow属性を使用
     ブログ内、ページ内共々、あまりリンク数が多いと検索エンジンは嫌うと言う事で、リンクタグにnofollow属性を多用しました。しかし、nofollow属性を使用すると、その先のリンクを検索エンジンが辿ってくれなくなる可能性が高いので、重複しているリンク中心に。
  13. 噂のグーグルタグの導入。
    アチコチのサイトで見かける、グーグルに拾って欲しい記事部分を

    ＜－－　ｇｏｏｇｌｅ＿ａｄ＿ｓｅｃｔｉｏｎ＿ｓｔａｒｔ 　－－＞
    で囲うモノです。（上は全角で表記してますがもちろん半角で使うのですよ！）
    他にも
    ＜！－－ｇｏｏｇｌｅｏｎ：ｉｎｄｅｘ－－＞
    なる表記をasahi.comにて発見。他所で見かけた事の無い記述ですが、効果あるかも？　とついでに各所に仕込んで見ました。

  14. Livedoorの広告の表示方法変更
    アチコチのブログを見て回って、Livedoorブログのてっぺんに表示される広告やカテゴリ表記をdivタグでくくる技を発見したので、マネしてみました。具体的な効果は不明。H1タグより前にあり、しかもブログ内容とは無関係のテキスト量を減らす効果があるので、恐らく対検索エンジン向けに意味あるのだろう。
  15. カテゴリ、月別アーカイブを昇順に
     コレが最大の改造点かもしれません。
    HTMLを編集して日記の降順昇順を変更したい - livedoor ナレッジ 知識、知恵のカタマリ
    H1タグを使っていなかった事、この記事を発見した事が今回のテンプレート改造のきっかけです。
    Livedoorブログは過去記事を昇順降順で変更する事が出来ず、私も困っていた人のひとりですので、大変助かりました。
    ちなみにjavascriptで強引にブラウザ上でソートする技なので、javascriptがオフになった状態では機能しません。

    作者の方はテンプレートによりカスタム内容が変わるとおっしゃっておりますが、ブログの一日分のブロックが「fullbody」という名のdivタグで囲まれているなら、そのまま使用して大丈夫なようです。

とりあえず、古いほうから順番に読んで欲しい記事って結構あるので、カテゴリと月別アーカイブは昇順（古い記事の方が上）に変更しました。

しかし、これだけHTMLの記述が滅茶苦茶でも、動画エンコや音ズレ系のキーワードではGoogle、Yahoo共にかなり上位に検索表示されていましたので、HTML構成はそんなに厳しく考えなくても良いかもしれませんね（＾_＾;

困った点

  1. IE（インターネットエクスプローラー）とFireFoxの、これでもかと云う位の表示の違い１paddingとmargin
    なんなんですかね、コレ(´Д｀；)
    WEBデザイナーの人、本当に尊敬しますわ。

    スタイルシートの記述の  padding、margin、どっちも指定したブロックの内側や外側に隙間を作る為のモノなんですが、IEとFireFoxで何で挙動が違うんでしょう。
    現在もFireFoxで見るとメインコンテンツとサイドバーが6pxほど高さがズレていますが、ドコを弄れば治るのか解っていません（笑）

    また、ギリギリの大きさに設計してスタイルシート組むとFireFoxで表示させるとサイドバー落ちが度々発生。

  2. IE（インターネットエクスプローラー）とFireFoxの、これでもかと云う位の表示の違い２フォントの大きさ
    フォントの大きさでsmallとか、x-smallとか使用すると、これまたIEとFireFoxで表示される大きさが違いますね(´Д｀；)
    全部pxで統一する事にしました。
    しかも、FireFoxの表示フォントは2px飛ばしなのか、11pxとか奇数サイズを指定すると一回り小さなフォントで表示されるようです。

    ブログ内のフォントの大きさはなるべく14,12,10pxを指定するようにしました。

    2007.10.24追記
    上記問題について、MovableType幼稚園さん、小粋空間さんで詳しく解説されておりました。特にMovableType幼稚園さんのこのページで、各種情報がまとめられていて勉強するには最適です。

  3. IE（インターネットエクスプローラー）とFireFoxの、これでもかと云う位の表示の違い３Googleアドセンスの表示
    336X280サイズのグーグルアドセンスが4段広告になった時だけ、FireFoxはとても小さな読みにくい表示に変わっちゃいますね。。。
    何とかしたくて色々スタイルシートをいじるも効果なし。

    気になって他の様々なサイトをめぐって見ると、確認したサイト全てで336X280サイズの4段表示は小さい文字だったので、修正は諦めました。

  4. IE（インターネットエクスプローラー）とFireFoxの、これでもかと云う位の表示の違い4太字リンクの表示
    スタイルシートのfont-weightをいじって、リンク部分を自動的に太字にしたり下線付き、下線無しとか設定できるのですが、「太字・下線アリ」の状態にするとFireFoxでの表示が、下線まで太くなってとても汚いです(´Д｀；)

    指定するフォントを選択すれば解消されるらしいので、後日実験して取り入れることにします。

 今後の課題

  1. 各種ブックマーク追加ボタンをとりつけてようと思っています。
    ついでに人気ブログランキングのボタンの配置位置もまた変えてみようかと。。。
  2. LiveDoorブログ内にある、意味不明なタグ群の取捨
    <div class="comblogbodybottom"></div>とか、<div id="linkstop"></div>とか、何も入っていないdivタグ、あれ何なんですかね？スタイルシートをみても「｛｝」と何もなしで囲ってあるだけのヤツ。
    謎過ぎます(´Д｀；)

    その内もう1個Livedoorアカウント取って、そっちで実験してみて、安全なら取り払ってしまおうと思ってます(；´ω｀)

あっちも、こっちも、と改造していくうちに、いつまで経っても終わらない感じがしてまいりました(´Д｀；)

申し訳ありませんが、もうしばらくお見苦しい状態が続きます

その他、覚書き
padding:0px 0px 0px 0px;内側に隙間を作る
margin:0px 0px 0px 0px;外側に隙間を作る
/* Padding、marginの数値は上、右、下、左*/
コレ、何度調整しようとしてもスグ忘れる(´Д｀；)
物覚えが悪くなって来たものだ。。。

最後に
このブログのテンプレートのメニューバー部分はMovableType備忘録さんのテンプレートを参考にさせて頂いております。
このブログの大元のテンプレートはライブドアブログのBlueline（デザインの設定→シンプル の現在2ページ目にある）を使用しています。