読者です 読者をやめる 読者になる 読者になる

cBlog

Tips for you.

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

Monolithic

f:id:cruller:20160922155152p:plain

Download now!

Monolithic - テーマ ストア

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

f:id:cruller:20160914210206p:plain

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

 

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

f:id:cruller:20160914210653p:plain

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

 

アイキャッチ画像

f:id:cruller:20160914211156p:plain

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

tsukuruiroiro.hatenablog.com

 

適切なマージン

f:id:cruller:20160914215050p:plain

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

e-words.jp

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

 

レスポンシブデザイン

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

PC (1024 px-)

f:id:cruller:20160914212543p:plain

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

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

f:id:cruller:20160914212933p:plain

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

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

f:id:cruller:20160914213242p:plain

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

 

カスタマイズ

アイキャッチ画像の導入

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

<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年生

 

*1:h3-h5のみ

広告