ゴリアテ | ゲーム・アニメのブログ

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

ゴリアテ | アニメ・ゲームブログ

アニメ・漫画・ゲームのレビューやグッズ等の紹介をしているブログです。メジャーなグッズから知られていないものまで幅広く取り扱っています。

【デザイン】はてなブログのテーマを自作してみた

はてなブログ

はてなブログCSS編集機能を使って自作テーマを作りました。

撫子と桜 - テーマ ストア - はてなブログ

公式サイトにテンプレート用のCSSが配布されてますので、それをデザイン編集からCSSに貼り付けてデザインを調整するのが主な作業です。 

f:id:tableturning:20150924202403p:plain

このデザインでは、CSSを触らなくても最初から完成されたみやすいデザインになっているというのがコンセプトです。

f:id:tableturning:20150924202639p:plain f:id:tableturning:20150924221501p:plain

どうせならスマートフォンにも対応できるようなレスポンシブなデザインにしたいと思いレスポンシブにも対応しました。

 

このテーマの特徴を大まかに説明したいと思います。

背景の浮いた感じをなくし、レイアウトを整頓

はてなブログとか普通のブログに良く見られるのが、背景の中にメインエリアだけが浮いたようなデザインです。公式テーマでは背景が派手で、余白が多く、サイドエリアも少し小さめになっています。

f:id:tableturning:20150924203416p:plain

しかし余白が広すぎるため、その分無駄なスペースができてしまい一画面に表示できる情報が少なくなってしまうという不満がありました。

またサイドエリアの区切りが分かりづらく、いまいち項目ごとの違いがはっきりしないのっぺりとした印象ができてしまいます。

上記の2点に加え、背景がはっきりとしているので背景だけが目立ちます。ここでは目立たせたいのは背景ではなく記事の内容ですのでそれを踏まえたデザインしました。

f:id:tableturning:20150924202403p:plain

サイドバーを左側に寄せて、記事の内容が写るメインエリアを右側に配置しました。人間は左から右へと視線が写るため左側の広告のクリック率が上がるとともに、人気記事が目に入るので価値のある記事をより多く見てもらえます。

またサイドエリアの横幅はアドセンス広告に適した300pxにしました。

また背景とブログの間にうっすらと影をつけて高級感を出してみました。これでのっぺりとした安っぽいデザインとはサヨナラです。

 

はてなブログの目次機能で目次を挿入すると綺麗にレイアウトされる

■ デフォルト

f:id:tableturning:20150925083854p:plain

■ テーマ使用時

f:id:tableturning:20150925083545p:plain

最近、はてなブログ[:contents]と入力すると目次が反映されるようになりました。

そのまま何もしないと文字が並ぶだけの大変、見辛い目次になってしまいますのでこのテーマでは目次用のCSSを設定して見やすくなるように調整しました。

見出しを設定した部分が自動的にレイアウトされる

f:id:tableturning:20150924220453j:plain

通常、見出しを設定すると黒い太字で強調されますが、それだけだと見難いので見出しを振ると見やすいレイアウトになるように調整しました。

 

サイドバーのまとまりを分かりやすくレイアウト

f:id:tableturning:20150924220832j:plain f:id:tableturning:20150924221021j:plain

今まで人気記事やカテゴリ一覧などのまとまりが分かりにくかったため、それぞれのエリアのタイトルに背景をつけ、枠を設定してまとまりを分かりやすく調整しました。記事のタイトルと見分をつきやすくため記事はピンク色の背景を使っています。

自由度の広がるレスポンシブデザイン

初期状態のスマートフォンの画面では、人気記事は5位までしか表示されません。

f:id:tableturning:20150924221358p:plainf:id:tableturning:20150924221501p:plain

人気記事は価値の高い記事が多くの人の目に留まる側面もあるため、本テーマでは10位まで表示することができるように設定しました。

まとめ

このブログで使われているのは、個人用に設定したテーマになります。配布用のテーマは別に制作しました。

f:id:tableturning:20150924215249p:plain

制作自体は2日で行いましたがデザイン案はかなり前に準備していたため実際はもっと時間がかかると思います。はてなブログは項目の順序など細かい制限が多く思い通りのデザインを作るのは難しかったです。

趣味程度ではじめた制作なので不具合などもあると思います。見つけ次第、修正したいと思います。

今回つまずいたのがレスポンシブデザインへの対応でした。

/*
Responsive: yes
*/

配布されたスタイルシートには上記のスマートフォン用のビューポート設定が記入していないため、スタイルシートのどこかに記入する必要がありました。てっきりビューポート設定は行われているとおもいこんでいた為に盲点でした。

今回のテーマ制作、割と楽しかったです。はてなブログでもここまでできるんだ、というのが実感できました。仕事とは関係ないデザインもたまにはいいですね。

当サイトは、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、 Amazonアソシエイト・プログラムの参加者です。
Copyright © 2015 golyat.jp All Rights Reserved.
当ホームページに掲載されている文章などの著作権は筆者に帰属しています。私的利用の範囲を超える著作物の複製や無断転載は法律で禁じられておりますのでご遠慮ください。