ページ毎にデザインを変更する [So-net ブログカスタマイズ]

ちょっとブログの改造中なのでネタを。WordPress なんかで使われている「body クラス」を使ったページデザインのカスタマイズです。

WordPress では body 要素にページ毎に異なるセレクタが追加され、CSS でカスタマイズ出来るようになっていますがこれと似たようなことを So-net ブログでやってみようというものです。

So-net ブログのページの種類

以下は So-net ブログの主なページの種類です。全てを追加する必要はないですが、index と article は入れておくといいと思います。今、記事ページを読んでいるなら トップページ を見ていただくとレイアウトが違うのがわかると思います。

  • archive(月日別表示)
  • article(記事単独のページ)
  • category(カテゴリ表示)
  • index(トップページ・インデックス)
  • search(検索ページ)
  • tag(タグ検索ページ)

body 要素にページの種類に応じたセレクタを追加する

So-net ブログの変数 page_name を使って body 要素にページの種類に応じたセレクタを追加します。ハイライトされてないと見づらいので GitHub あたりで言語を RHTML に設定して編集した方がいいかもしれません。

HTML

page_name<% if %> を使ってページ判定をします。セレクタ名の接頭辞は pagename_ にしています。以下のコードには改行が入っていますが、<%--%> が直前または直後の改行コードを取り除きます。<% /if %> の中の # 〜 部分はコメントなので無くてもかまいません。

<body class="
<%- if:page_name eq 'archive' %>pagename_archive<% /if # page_name eq 'archive' -%>
<%- if:page_name eq 'article' %>pagename_article<% /if # page_name eq 'article' -%>
<%- if:page_name eq 'category' %>pagename_category<% /if # page_name eq 'category' -%>
<%- if:page_name eq 'index' %>pagename_index<% /if # page_name eq 'index' -%>
<%- if:page_name eq 'search' %>pagename_search<% /if # page_name eq 'search' -%>
<%- if:page_name eq 'tag' %>pagename_tag<% /if # page_name eq 'tag' %>">

出力例(一度に全ては出力されません)。

<body class="pagename_archive">
<body class="pagename_article">
<body class="pagename_category">
<body class="pagename_index">
<body class="pagename_search">
<body class="pagename_tag">

<% if %>〜<% /if %><% else %> を併用したり、<% unless %>〜<% /unless %> を使うことで否定条件を作り出すことも出来ます(「トップページ以外」や「記事ページ以外」など)。

CSS

例えば「記事ページのときだけ記事ペインのサイズを最大にしたい」といった場合は以下のように書きます(実際にはサイドバーなどのスタイルも変更する必要があります)。

.pagename_article #main{
  float:none
}
.pagename_article #main,
.pagename_article .articles{
  width:100%
}

特定のカテゴリの記事だけセレクタを追加したい

カテゴリ名を出力する <% article_category.name %> を使います。このタグはテンプレート HTML 内では使えないので記事ペインで使います。ぱっと思いつく方法を以下に二つほど。

  • カテゴリ名で <% if %> 条件を作成し、要素の属性に任意の文字列を出力する
  • 要素の属性にカテゴリ名を出力する

どちらも欠点がありますがどちらもカテゴリ名を変更すると面倒です。また、カテゴリ名が日本語だと2番目の方法はあまりおすすめ出来ません(Unicode でなんとかできると思いますが)。

HTML

<% if:article_category.name eq 'カテゴリ名' %> を使った例です。カテゴリ名が「写真」の場合に div.articles にセレクタを追加します。カテゴリ名は日本語でも判別出来ます。記事ペインの HTML に「未分類」のサンプルが載っているのでそちらを参考に。セレクタを複数追加する場合はセレクタ名がくっつかないように半角スペースが入るようにします。

<div class="articles
<%- if:page_name eq 'article' -%>
<%- if:article_category.name eq '写真' -%>
 articlecategory_photo
<%- /if # article_category.name eq '写真' -%>
<%- /if # page_name eq 'article' %>">

記事ページでカテゴリが「写真」の場合に div.articles にセレクタが追加されいます

<div class="articles articlecategory_photo">

趣味で写真を公開されている方なら大きな写真を表示したいということもあると思うので写真のカテゴリだけ widthmax-width などで大きな写真を表示出来る専用のレイアウトを作ってみると面白いかもしれません。

おまけ)特定のカテゴリの記事だけページの背景を変えたい

「明るいテンプレートを使っているけど写真のカテゴリだけ背景を暗くして写真を目立たせたい」という方がいるかもしれないのでおまけです。

上の <% if:article_category.name eq 'カテゴリ名' %> では単純にセレクタ名を出力しましたが、普通に HTML を書いても大丈夫です。記事ペインはデフォルトだと div#main 以下にあるため上の階層にある body 要素などに直接セレクタを追加したりすることは出来ません。JavaScript を使う方法もありますがページが重たくなる可能性があります。なので途中でスタイルを上書きしてしまいましょう。

記事ペインの <% if:page_name eq 'article' %> 内にこんな感じで書きます。

<% if:article_category.name eq 'カテゴリ名' %>
<style>
body{
  background-color:#000;
  color:#fff;
}
</style>
<% /if %>

外部スタイルシートを読み込ませてもいいかもしれません。

<% if:article_category.name eq 'カテゴリ名' %>
<link rel="stylesheet" href="style.css" />
<% /if %>