この世の果てブログ

読む、観る、買う、行く、食う、寝る、遊ぶ、試す、記す、残す、愛でる、捨てる、生きる

当ブログの本文デザインに施したカスタマイズの記録（2014年11月24日時点）

【Sponsored Link】

俺自身が読みやすいように、という基準で自己満足的デザインカスタマイズをあれこれ施した。方法の説明などはスタイルシートのソースを見てもらえばわかると思うし、記述自体が正確で最善である自信がまるでないので割愛。

デザインのテーマは「紙質感のテクスチャ・（ウェブ版は）要素のセンタリング・ベースはグレー・アクセントにブルー・ちょっとピンク」。ウェブ版とスマートフォン版で異なるので、その都度分けて記録。


見出し

大中小の3パターン作成。

ウェブ版

f:id:the-world-is-yours:20141124112001p:plain

スマートフォン版

f:id:the-world-is-yours:20141124112005p:plain

引用

ウェブ版

グレーの紙のテクスチャをバックにした。引用符が左上に自動で入る。右下にも入れるパターンも試してみたが、ちょっとごちゃついたのでやめた。
f:id:the-world-is-yours:20141124112000p:plain

スマートフォン版

スマートフォン版ではさすがにうるさくなるので紙質感のテクスチャは使わない。薄いグレーバックと引用符のみ。
f:id:the-world-is-yours:20141124112003p:plain

書籍の目次用装飾

ウェブ版

バックは引用と同じものを使用。「目次」の頭に特殊文字の鉛筆マークが挿入される。
f:id:the-world-is-yours:20141124111959p:plain

スマートフォン版

引用同様、こちらもスマートフォン版はグレーのバックのみ。
f:id:the-world-is-yours:20141124112004p:plain

強調・注意書き

以前は強調したい段落や注意書きも全部まとめて引用ブロックで装飾という、無知丸出しなことをしていたが、今回は専用の装飾ブロックを作成。

ウェブ版

f:id:the-world-is-yours:20141124111958p:plain

スマートフォン版

f:id:the-world-is-yours:20141124112007p:plain

文章ハイライト

手間はたいして変わらないのでレッドとブルーも作ってみたが、主にイエローを使用、時々レッド。ブルーは使うことあるのだろうか。

ウェブ版

f:id:the-world-is-yours:20141124111957p:plain

スマートフォン版

f:id:the-world-is-yours:20141124112006p:plain

Amazon・iTunes商品紹介リンク

ウェブ版のみ。はてなブログのデフォルトデザインをスタイルシートで装飾。紙質感のバックや丸角など。iPhoneアプリのアイコンも少し大きく表示されるように修正。Amazon や iTunesストアなどの小さなアイコンを、リンク前に自動で挿入。
f:id:the-world-is-yours:20141124111955p:plain
f:id:the-world-is-yours:20141124111954p:plain

リンク先説明用装飾

ウェブ・スマートフォン共通。当初は文字のみだったが、昨日読んだ以下の記事に触発されて、はてなブログで利用可能なアイコン絵文字フォントを組み込んだ。

リンク はてなブログで標準的に利用可能なアイコン絵文字フォント一覧 - 太陽がまぶしかったから

f:id:the-world-is-yours:20141124111953p:plain

テーブル

ウェブ版のみ。枠線をブルーの破線にして、テーブル全体をセンタリング。
f:id:the-world-is-yours:20141124112002p:plain


以上。参考になるかどうは分からないが、デザインサンプル用のエントリーへのリンクを。

リンク デザインサンプル用エントリー - この世の果てブログ


一応、基本書というか参考書として以下のものを手元に置いておいた。Kindle版もある。

単行本

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。

Kindle

HTML5＋CSS3の新しい教科書　基礎から覚える、深く理解できる。

HTML5＋CSS3の新しい教科書　基礎から覚える、深く理解できる。