テーマ: "Irrégulière" 公開

Breadcrumbs

 是非使ってあげて下さい。気に入ったら★でもこっそり押してって下さい。作者が喜びます。

★ 目標 - 可視性の高い黒基調のデザイン

 黒基調の背景でありながら、長文であっても読みやすく、適度にシンプルなデザインを目指しました。
 自分は横幅が狭いのが嫌いなので、記事部分の横幅を長めにとって、縦にびよ〜んとならないようにしました。


 名前の由来は 電子辞書で適当にかっこよさそうな言葉を探 「不規則な」「整っていない」と言った意味のフランス語です。つまり、このデザインです。
 デザイン登録名は文字化けするのでアクサンを抜きました (Irreguliere)。

★ カスタマイズ

ex1. モジュール差し替え

 注意書きの通りモジュールははてなの仕様上、自動的に差し替わってしまう。
 例えば「antenna」モジュールを付加させたい場合は「ページのフッタ」を編集。

</div>

<div class="sidebar">
	<hatena name="profile" template="hatena-module" moduletitle=":: Profile">
	<hatena name="calendar2" template="hatena-module" moduletitle=":: Calendar">
	<hatena name="section" template="hatena-module" moduletitle=":: Recent entries">
	<hatena name="comment" template="hatena-module" moduletitle=":: Recent comments">
	<hatena name="antenna" template="hatena-module" moduletitle=":: Antenna">
</div>

 <div class="sidebar"> 〜 </div> 間にモジュールを挟み込む。「template="hatena-module"」を指定した方が良い。削除の場合は該当するモジュールの行を消せばよい。
 モジュール一覧は はてなモジュール一覧 - はてなダイアリーのヘルプ を参照。

ex2. Breadcrumbs (ページナビゲーション)

 ページナビゲーションについては ページナビゲーションを表示する(パンくずリストモジュール) - はてなダイアリーのヘルプ を参照。このデザインでは日記タイトルの下に表示される (今日の画像参照)。
 削除したい場合は「ページのヘッダ」より

<hatena name="breadcrumbs"> 

 を削除。表示を任意の位置に戻したい場合は「スタイルシート」の

/* Breadcrumbs */
.breadcrumbs {
	position:	absolute;
	top:		150px;
	left:		70px;
	font-size:	90%;
}
.breadcrumbs a {
	text-decoration:	none;
}

 を削除。

★ 動作確認

★ 変更履歴

  • v.1.0α - 了
  • v.1.1α - モジュール「calendar2」「section」「comment」との親和性向上
  • v.1.2α - モジュール「profile」との親和性向上。細かいデザイン修正
  • v.1.3α - 沢山のモジュールとの親和性向上。h4 タグ画像化。h5 タグ修正。他、細かいデザイン修正
  • v.1.4α - 横幅見直し
  • v.1.5 - 「calender2」の本日の背景色を変更。広告対応。とりあえず正式リリース


 それにしても既にレベルの高いテーマがどんどん出ています。これは勝てるわけない!