2カラムのテーマです。リキッドレイアウト用コードも公開しています。
背景やヘッダ画像を設定することで印象がガラッと変化します。
テーマ適用イメージ
サイドバーを右側に表示させる
以下のソースコードをデザインCSSの最後に追記してください。
#wrapper { float: left; } #box2 { float: right; }
はてなダイアリーでよく見かけるリキッドレイアウトに変更する
以下のソースコードをデザインCSSの最後に追記してください。
左サイドバーにしたい場合はmarginとfloatを修正してください。
タイトル背景を透過させています。
制限事項:ヘッダ画像の表示位置がおかしくなるかもしれません。
#content, #blog-title, .breadcrumb, #top-editarea, #bottom-editarea { width: 90%; /* 80%〜95%の範囲を推奨 */ } #content, #blog-title, .breadcrumb { min-width: 800px; } #wrapper { float: left; } #blog-title { background: transparent; } .header-image-enable #blog-title-inner { background: no-repeat center; background-size: cover; } #main { margin-right: 300px; } .entry-content img, .entry-content iframe, .entry-content embed { max-width: 100%; } #box2 { margin-left: -300px; float: right; } .page-entry .pager-next a,.page-entry .pager-prev a, .page-archive .pager-next a, .page-archive .pager-prev a { width: 48%; } .page-index .pager-next a , .page-search .pager-next a, .pager, #wrapper { width: 100%; }
タイトルの背景を透過
以下のソースコードをデザインCSSの最後に追記してください。
#blog-title { background: transparent; }
ヘッダを上部に固定する(ついでにデザインも変更)
以下のソースコードをデザインCSSの最後に追記してください。
#globalheader-container { position: fixed; top: 0; background: rgba(0,0,0,0.8); color: #fff; } #container-inner { padding-top: 37px; }
フォントをゴシック体に変更する
以下のソースコードをデザインCSSの最後に追記してください。
body { font-family: Meiryo,sans-serif; }
フォントサイズや行間を変更する
以下のソースコードをデザインCSSの最後に追記してください。
/* font-size */ .entry-content { font-size: 80%; /* デフォルトは95% */ line-height: 2.0; /* デフォルトは1.9 */ }
背景設定時にコンテンツ部分を浮かす(影を付与する)
以下のソースコードをデザインCSSの最後に追記してください。
.entry, .hatena-module, .page-archive #main-inner, .pager-next a, .pager-prev a, .breadcrumb,.header-image-enable #blog-title-inner, .header-image-only #blog-title-inner, #blog-title { box-shadow: 0px 0px 8px #aaa; /* 影を付与 */ border-radius: 5px; /* 指定すると柔らかい印象に */ }
Summary
2013/6/6 | アーカイブ表示を修正しました。 |
---|---|
2013/10/18 | Zenback関連の修正。一部デザインを変更。 |
2014/3/3 | Archiveページのレイアウトを修正。pagerの一部を修正。 |