ブログを改装したので、一から作るブログテンプレートの作り方の一例を紹介

ブログのデザインを改装しました。

数ヶ月に一回しか更新のないどうしようもないブログですが、コーディング意欲を発散するのにはもってこいのオモチャです。

そんなブログでもいい加減更新しないとなぁと思ったので、今回はブログのテンプレートを作った時の個人的な手順を記事にしました。

デザインの話というより作業工程の話なので、「このブログのデザイン、センスねぇ…」と思った方も是非。

環境

  • ブログのプラットフォームには Ghost を使っています。
  • 大まかなデザインは Photoshop でやっています。
  • ロゴなどは Illustrator で作っています。
  • Atom というエディタでコーディングしています。
  • CSSはLESSで生成しており、Atom の less-autocompile というパッケージを使っています。

デザイン構想を Photoshop に起こす

HTMLのマークアップをしながらデザインを考えてもいいのですが、今回はキチンと Photoshop でのデザインを挟みました。

手書きのラフは作らなかった

Webデザインのやり方を調べるとノートなどに手書きのラフを書く、といったような手順を紹介している事が多いですが、今回は省きました。

長方形ツールで作った土台がラフと言えるかもしれません。

デザインラフ?

デザイン時に使った Photoshop の機能

  • 選択、移動、レイヤー、グループなどの基本的な物
  • 定規とガイド
  • シェイプツール(長方形ツールなど)
  • 文字ツール
  • レイヤーマスク

私はこれだけしか使いませんでした。

レイヤー構成

レイヤー構成

ヘッダー、ナビゲーション、フッターを固定し、コンテンツをグループ化してレイヤーの表示/非表示(目ん玉マーク)で切り替えています。

切り替え1 コンテンツだけ表示/非表示で切り替える。 切り替え2 Photoshop のファイルが一つで済むので扱いやすい。

まだ細部にはこだわらない

実際にWebページとして表示した時、どうしても Photoshop 上のデザインとの違いが出てしまうので、細部の調整はコーディングの時についでにした方が楽でした。

デザインの詰めが甘いとも言えますが、実際に動かしてみると気に入らなくてデザインが変わるという事も私には多いです。

その点も含めて「あまり細部にはこだわらない」体制で作業を進めました。(趣味の範疇だからというのもありますが)

ガイド

ガイドもこの程度しか引きませんでした。

追記

案の定デザインが変わりました。

スライスは使わなかった

最近ではCSSで色々とできるようになったのでスライスの出番が無いような気がします。

画像化が必要なところもCSSでの可変に応えられるように作るほうが美しいので、ザックリ切ってそのまま保存といったスライスは不要に感じます。

アイコンはWebフォントで管理、ヘッダーの湾曲の部分は横幅の可変でアンチエイリアスが掛からないようにSVG画像にしたため Illustrator での作業でした。

記事ページのパーツのデザインを忘れない

<h2><h3>などのデザインはしっかり決めていても、引用の<blockquote>や、文章中の<ul><code>なんかは忘れがちです。(私だけ?)

実際に使おうと思って「やべ!スタイル作ってねぇ!」って事もありました。

  • H2, H3...H6
  • pタグの余白や文字スタイル
  • blockquote
  • ul, li
  • hr
  • imgタグの装飾や余白、中央に寄せるかどうかなど
  • Youtubeなどの埋め込み動画用に iframe, object, embed
  • pre, code(テックブログなど)

以上の事を考えておけばひとまず大丈夫だと思います。

デザインを静的HTMLに起こす

作成したデザインをそのまま各々のプラットフォームに沿ったテンプレートファイルをコーディングしてテスト環境で実際に確認してもいいですが、個人的には一度静的HTML(.htmlファイル)でマークアップとCSSでのスタイリングを済まして、それを元にテンプレートファイルを作るほうが捗りました。

HTMLをマークアップする

コーディング作業はデザインやブログプラットフォームによって千差万別なのでなんとも言えないのですが、このブログでも採用している最近のマークアップの定石みたいなのはあるので一例としてご紹介します。

サイトヘッダー部分

<header role="banner">  
<h1>ブログタイトル</h1>  
<nav>  
<ul>  
<li>...グローバルナビゲーション...</li>  
</ul>  
</nav>  
</header>  

サイトコンテンツ部分

<main role="main">  
<article>  
<header>  
<h1>記事タイトル</h1>  
</header>  
<p>...内容...</p>  
</article>  
</main>  

コンテンツのブロックには<main>を使うのがスタンダードになってきました。

<section>に関しては使っているサイトと使っていないサイトがまちまちなので使うかどうかが難しいです。

セクションで分けている事を伝えてもそれを利用する機会が今は少ないので、私は明確な使用用途が出てきたら付けようかなと思っています。

サイトフッター部分

<footer>  
<p><small>コピーライト</small></p>  
</footer>  

コピーライトに<small>は定番ですね。

一度だけ<cite>も見かけましたが、マークアップに関しては基本的に「長いものには巻かれろ」でいいと思います。

asideタグに関して

人間には見てほしいけど機械には無視して欲しいブロックで私は使っています。

このブログだとシェアボタンの部分で使っています。

role属性に関して

発展途上の仕様なので難しいのですが、role="banner"role="main"はハッキリとした役割なので付けているサイトが多いですね。

role="navigation"はグローバルナビゲーションに付けるのか、ドキュメントの Next, Prev に付けるのか、両方に付けてもいいのかが悩ましいです。

私のブログではグローバルナビゲーションの重要度が薄いので記事のページャーにだけ付けています。

このブログだとこれらを設定してます。

  • charset
  • viewport
  • X-UA-Compatible
  • shortcut icon
  • apple-touch-icon
  • canonical
  • alternate rss
  • ogp関連(Ghostが勝手に付けてくれる)

CSSでスタイリングする

こここそ本当に千差万別なので言えることが少ないですが…。

CSSリセットや初期設定

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html{  
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{  
  color: @text-color;
  font-family: 'Helvetica', 'Meiryo', sans-serif;
  font-size: 16px;
}

body,  
h1, h2, h3, h4, h5, h6,  
p, ul{  
  margin: 0;
  padding: 0;
}

ul{  
  list-style: none;
}

a{  
  color: @link-color;
  text-decoration: none;
}
a:hover, a:active{  
  color: @link-color-active;
}

このブログではこんな感じになっています。

*{...}って良くないとは思うのですが、面倒なので使っちゃってます。(Bootstrapにも同じ記述あるし…)

html{text-size-adjust}はスマートフォンでのフォントサイズがうんぬんのやつです。
面倒なので説明は省きます。そのうちいらなくなりそう。

リセットはレイアウトで使う必要のありそうなbody, h1, h2, h3, h4, h5, h6, p, ul, aだけしています。

記事の内容に使う物は別途設定するのでCSSリセットからは省いています。

レスポンシブデザインでの設定

このブログでは二種類のレイアウトを@media (max-width: 768px){}でやりくりしています。
768px以下ではモバイル向けのデザインになります。

もっと詳細に分けたい時はスマートフォンを480px、タブレットの縦持ちを768px、デスクトップを1024pxの3種類で私は分類しています。

デザインを調整する

私は Google Chrome に付いてるデベロッパツールで調整しています。

最近はどのブラウザにも似たようなデベロッパツールが付いているので Chrome じゃなくてもいいかもしれません。

デベロッパツール

要素を選択するとその部分のスタイルが一時的にいじれるので調整できます。

デベロッパツール css

デベロッパツールで調整したスタイルをCSSファイルに書き写すという体制で作業をしています。

また、右上のアイコンからスマートフォンやタブレットを想定したテストを行えます。

モバイル版テスト

テンプレートの仕様に当てはめて完成

静的HTMLが完成したら各々のブログプラットフォームのテンプレートにして完成です。

結構大事なところを端折る形になってしまいますが、どのブログプラットフォームを使っているかで変わってしまうので省略します。(面倒なので勘弁してください)

Photoshopで作ったデザイン

ブログデザイン

完成したデザイン

ブログデザイン2

横幅や余白、文字の大きさなどが変わりました。

これらを変更した背景には記事タイトルの文字数による行数の変化や、多数の解像度への配慮などがあります。

ページャーに関してはデザイン自体が変わってしまいました。