デザインテーマ「Monolithic」（For はてなブログ）、出来ました。

Monolithic

Download now!

Monolithic - テーマ ストア

2人は決して離れません。

一体となったメインカラムとサイドバーは、まるでブラウザ上に浮かんだ一枚岩。それらは、いかなるウインドウサイズでも離れることはありません。浮かぶ石板のような表現は、引用部やAmazon商品紹介でも現れます。

モノクロームで、シックです。

白と黒を基調としたデザインに、背景はアルミニウムをイメージしたカラー。ワンポイントであしらったスカイブルーは、インジケーターのように見る者の目を引きつけます。

アイキャッチ画像

「DUDE」にインスパイアされたアイキャッチ画像を搭載しました。オリジナルな画像を設定すれば差別化が容易です。導入方法はカスタマイズの節で説明します。

tsukuruiroiro.hatenablog.com

適切なマージン

TeXのような使い心地を目指しました。「見たまま記法」で見出しの前に空行を入れる必要は、もうありません。見出しを挿入するだけで、空行1行とまったく同一のマージンが見出しの上に確保される*1ので、レイアウトに関する思考から解放されます。

e-words.jp

米国スタンフォード大学のDonald E. Knuth氏によって開発された、文書を印刷するための組版システム、またはそれを実現するソフトウェア。TEXとも表記する。フリーソフトウェアとして無償で提供されている。文書の中にマークアップ言語を記述することで、高品質に印刷できる。

レスポンシブデザイン

レスポンシブデザインに対応しています。画面サイズ320 pxの初代iPhoneでさえもコンテンツ幅300 pxを維持するので、固定幅のブログパーツの導入に便利です。

PC (1024 px-)

基本のデザインです。600 pxのメインカラムと300 pxのサイドバーで構成されます。ウインドウサイズを広げた場合は背景が広がります。

タブレット(768 px-1023 px)

メインカラムは372 pxと狭目ですが、タブレットでもサイドバーが見やすい2カラム構成です。

スマートフォン(-767 px)

サイドバーが下に回って一枚岩が維持されます。メインカラムとサイドバーともに画面サイズに従って横幅やマージンが可変します。

カスタマイズ

アイキャッチ画像の導入

デザイン > カスタマイズ > ヘッダにあるタイトル下に以下のコードを入力します。

<div class="title-banner"></div>

月の画像が挿入されたはずです。

好きな画像に変えてみましょう。デザイン > カスタマイズ > デザインCSSに以下のコードを参考に入力してみてください。

.title-banner {
  padding-top: 38.461538%;  /* Height / Width * 100% */
  background-image: url(画像URL);
}

画像URLは表示させたい画像のURLに、38.461538という値はコメント（/*と*/の間）の式で算出した画像の縦横比に置き換えてください。

カスタマイズは、無限大。

有彩色を1つしか使っていないので、どんなカスタマイズにも合うでしょう。もしかしたら、Monolithicそのままのデザインで一貫させたい人もいるかもしれません。そういう人のためにカラーコードを記しておきます。

ブラック

#000

ホワイト

#fff

シルバー

#f8f8f8

スカイブルー

#6bf

シャドー

#808080

おことわり

すべての環境でテストできているわけではないので、レイアウト崩れ等の不具合が生じる可能性があります。その場合はコメント等でご報告ください。できる限り対応いたします。デザインやコーディング上のアドバイスなども歓迎いたします。

世界一やさしい ブログの教科書 1年生

*1:h3-h5のみ