Seesaaブログ HTMLカスタマイズまとめ
Seesaaブログは無料プランでもカスタマイズ性の高いブログサービスです。
当サイトで以前Seesaaブログで行ったカスタマイズを一通り記事にしたので、まとめてみます。
現在はSeesaaブログを使用していないので、出来上がりのサンプルとしては表示テスト用のサイトを参照してください。
Seesaaブログの基本構造
Seesaaブログの基本構造を紹介した記事です。
他の記事の前に一読しておくとわかりやすいと思います。
見出しタグの最適化
見た目は変わりませんが、見出しタグはSEOに重要です。
検索エンジンにアピールできるよう、見出しタグをカスタマイズしました。
パンくずリスト
Seesaaブログのデフォルトのナビゲーションは記事の時系列でのつながり(次の記事、前の記事)を示すものだけです。
パンくずリストを追加することで、記事にカテゴリなど意味のある階層でのナビゲーションを追加することができます。
さらに検索エンジンに認識されるフォーマットで記述する事で、検索結果にも反映されます。
meta description
Seesaaブログのデフォルトのmeta descriptionはブログの紹介文になっています。
meta descriptionは検索結果の要約(スニペット)に使われることがあります。
一律にブログの紹介文が表示されるよりも要約は検索エンジンに任せてしまった方が適切な事が多いので、meta descriptionを記事ページでは表示しないようにしてみました。
続きを読むを設置
Seesaaブログでは本文に冒頭、追記にそれ以降を書けば、記事の一覧を表示するページで、記事の冒頭のみを表示することができます。
記事ごとに追記を使わないでいいように、自動で冒頭のみを表示するようにするカスタマイズです。
タグページをリッチに変更
Seesaaブログのシンプルすぎるタグページをカテゴリページのようにリッチに変更するカスタマイズです。
タグページにAdSense広告貼る場合は必須のカスタマイズです。
上記すべての変更を含んだHTML
上記すべての変更を含んだHTMLが以下です。
それぞれ貼り付けていただければ使用可能ですが、レイアウトを保つにはCSSの変更も必要となります。
記事HTML
全体HTML
CSSの変更
- h1 -> .blogtitle
- h2 -> .date
- h3 -> .title
- カテゴリ、過去ログページ用にh1:not(.blogtitle):not(.title)を追加(クラスを追加してそれに対して指定も可)
- 記事ページ用h2以降のタグにCSSを指定する場合はh2:not(.blogtitle):not(.title)もしくは.text h2などで指定
- .tag や .tag-bodyの削除