はじめに
とにかく "シンプルであること"、これを本テーマの基本としております。
Hatena 自身の hatena/Hatena-Blog-Themes をベースに起こしました。
本文 1 カラム、サイドバーモジュール群は下部に 3 段組みのレイアウト前提で作成しています。
一応、導入にあたって、予めご注意いただいた方が宜しいかと思うこと、2 点。
1. ページャの左右を入れ替えています
ページャの各リンク、この左/右の関係に埋め込まれている意味が、ここでは逆転することになります。
"前" は「過去の記事」で "左" に、"次" は「新しい記事(またはページ)」で "右" にレイアウトしています。
はてなブログのスタンダードと異なるので、それに慣れ親しんだ方は戸惑うかもしれません。
これが困る場合は css を書き足してください。例として以下のような感じになると思います。以下のような css を、対象ブログの [ダッシュボード > デザイン] の [カスタマイズ] タブ にある [デザインCSS] に書いておけば、おそらく何時ものページャになるかと思います。;
.pager .pager-prev{float:left;text-align:left} .pager .pager-next{float:right;text-align:right} .pager .pager-prev a:after{content:none} .pager .pager-next a:before{content:none} .pager .pager-prev a:before{content:"«"} /* 左方向を指す任意のキャラクタ等を */ .pager .pager-next a:after{content:"»"} /* 右方向を指す任意のキャラクタ等を */
2. ヘッダ部のレイアウトは、トップページとそれ以外のページで大きく変わります
トップページでは、ブログタイトルを含んだヘッダは普通通りに大きく表示しますが、それ以外のページに遷移すると左上端に小さく表示するようにしています。
これは実世界で私たちが目にする本、という媒体でよく採られているページヘッダのレイアウトをイメージしてもらえると良いかと思います。実際、そんな意図をもってのレイアウトです。
なおこちらも、多くのサイトのように、トップページのヘッダは全てのページで同じにしたい、という方は、先述同様の手続きで [デザインCSS] に `#blog-title` の css を定義すると良いかと思います。
ちなみに、で、こちらのテーマの場合ですと以下のようになるかと思います。;
#blog-title{margin:0;padding:48px 0 2rem !important; border: none !important} #blog-title #blog-title-inner { display:block !important; text-align:center !important; } #blog-title #blog-title-inner #title { font-size:6.854rem !important; font-weight: bold !important; margin: 0 !important; } #blog-description{display:block !important;} #blog-description{font-weight:normal;font-size:.618rem;margin:0;padding:3px 0 42px}
おわりに
このテーマによって最終的に目指したレイアウトと言うのは、更に Javascript 等を組み合わせて使う事を想定しています。*1
勿論このままでも使えるようにしてます。
必要に応じて、付け足すことができるようなスタイルにできればと思っています。
導入の手続き等については、別途こちらに随時記載してみようかと考えています。よろしかったら。;
http://baqamore.hatenablog.com/
現時点では、導入によって変わるパーツは以下のようになっています。;
- サイドバーモジュールのプロフィールのレイアウト
- サイドバーモジュールの検索ボックスのレイアウト
- トップページ以外のページヘッダの内容
- エントリー日付の出力場所
- コメント日付の出力形式
- 検索ボックスに、Google カスタム検索 を使用してのレイアウト
以上です。
作業環境
% sw_vers ProductName: Mac OS X ProductVersion: 10.11.1 BuildVersion: 15B42