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

Yukihy Life

ゆきひーによる日常生活をアウトプットするブログ 映画・TOEIC・教育ネタとだいぶ物理とWeb制作

オシャレ・レスポンシブ・カスタム可能なはてなブログテーマ「Naked」リリース!

Web制作
スポンサーリンク

はてなブログの新しいテーマを作りました!ついに完成です!

テーマの概要

全体のデザイン

レスポンシブ対応のテーマ「Naked」を作成しました。

全体のデザインはこのようになっています。

f:id:ftmaccho:20160522025958j:plain

デモブログはこちら

theme-naked.hatenablog.jp

こちらでは、ブログ全体のデザインが見れるだけでなく、今後のカスタマイズ情報も更新していきます。興味のある方は、ぜひこちらも購読をお願いします。

インストールは、テーマストアからどうぞ(注:インストールをすると、デザインCSSの内容が破棄されます。必ずバックアップをとっておいてください。)

特徴としては

  • シンプルで使い易い
  • デフォルトのままでもオシャレ
  • 様々な背景色や背景画像に合う
  • レスポンシブ
  • フッターを作りこめる

といったところです。

PC(768pxより大きいサイズ)

f:id:ftmaccho:20160522061032j:plain

2カラムで、文章に集中しやすいように記事部分のみ背景を白にしました。

記事部分は横幅が最大620pxで、横幅300pxの広告を2つ並べて余白を入れることができます(レスポンンシブだと、スマホ表示で広告が2つ縦に並んでしまうので注意が必要ですが)。

サイドバーは横300pxでシンプルにまとまっているようにしています。

タブレット(768px以下のサイズ)

f:id:ftmaccho:20160522060725j:plain

Nakedはレスポンシブ対応しているので、ぜひレスポンシブにしてみてください。

タブレットサイズは1カラムで余白をたっぷり入れ、より読むことに集中しやすいレイアウトにしています。

この記事の下に書かれている自作フッター部分は、2カラムになるようにしています。

スマホ(680px以下のサイズ)

f:id:ftmaccho:20160522060311j:plain

iPhone6の横持ち以下のサイズになります。

iPhone5の横幅が320pxで、広告などは横幅300pxのものが多いため、それがキチッと入るように左右は10pxずつしか余白を入れていません。

そのため若干窮屈に見えますが、多くのブログパーツや広告をずれることなく表示することができます。

作成コンセプト

作成のコンセプトは、

  1. シンプルで使い易いこと
  2. 初期状態でも十分使えるほどおしゃれなこと
  3. 簡単に他の人と被らないようにカスタムできること
  4. 深くまでカスタマイズしたい人はどんどん改造できること

です。上ほど優先度を高くして、作っていきました。

現状、他のほとんどのテーマは1・2を満たしていますが、どうしても設定するテーマによって印象が統一されてしまい、同じテーマの中での差別化がしにくい印象がありました。

なのでそういったことを改善するために、3・4の部分を実現するにはどうしたら良いかを考え、その方のカスタマイズの意欲によってどこまでも改造できるようにしたいなと思い、作成しました。

デザイン詳細

ざっくりと概要を書いたので、ここからは具体的な使い方を書いていきたいと思います。

背景色・背景画像

今更ですが、このテーマの名前は「Naked」。意味は「裸」です。

初期状態ではグリーンの背景とという服を着ていますが、はてなブログの機能によって誰でも簡単に着せ替えができます。

やり方はデザイン設定の中の「背景画像」・「背景色」を指定するだけ。

f:id:ftmaccho:20160522033737p:plain

ヘッダーやフッター以外の部分を白・灰色・黒(とリンクの青)のみで作ることで、多くの色と合わせられるようにしました。

はてなデフォルトの壁紙を使った例です。濃い色に合わせやすいです。(一部、背景を画像にした際にデザインが崩れる可能性があります。どの画像でくずれるのか、またその対処を背景画像がアップになってしまうときの対処 - Theme Naked Blogに書いています。)

f:id:ftmaccho:20160522031901p:plain

f:id:ftmaccho:20160522032410p:plain

f:id:ftmaccho:20160522032455p:plain

f:id:ftmaccho:20160522032254p:plain

f:id:ftmaccho:20160522084104p:plain

壁紙でなく、単色でもかなりの色と合わせることができます。

f:id:ftmaccho:20160522032734p:plain

f:id:ftmaccho:20160522203057p:plain

f:id:ftmaccho:20160522032820p:plain

f:id:ftmaccho:20160522032909p:plain

こんな感じで様々な背景画像・背景色と合わせることができるため、コードをいじらなくても簡単に他の人と差別化することができます。

ご自身の画像をアップロードしたりして、いろいろと試してみてください。

コードが必要なカスタム

ここからはコードが必要な部分になります。

この記事に書こうかと思いましたが、それぞれが長くなり、今後コンテンツを増やしていく意味でも

theme-naked.hatenablog.jp

の中の「Nakedカスタマイズ」というカテゴリで紹介していこうと思います。

ここでは具体的にどんなことができるのかの説明にとどめます。

ヘッダーのメニュー

あらかじめCSSが組まれていることで、簡単かつ綺麗にヘッダーのメニューを組むことができます。

サイズが広いときにはグローバルメニュー。

f:id:ftmaccho:20160521181810p:plain

サイズが小さくなったらトグルメニューになります。

f:id:ftmaccho:20160521181901p:plain

詳細はこちらから

theme-naked.hatenablog.jp

フッターをつくりこむ

Nakedでは、はてなブログでは作りづらいフッターも、サイドバーの「カスタムHTML」感覚で作ることができます。

PC版

f:id:ftmaccho:20160522004307p:plain

タブレット版

f:id:ftmaccho:20160522004256p:plain

スマホ版

f:id:ftmaccho:20160521223738p:plain

それぞれ横幅は300pxに設定されており、より広告やブログパーツなどを入れやすくなっています。

詳細はこちらから

theme-naked.hatenablog.jp

コピーライトを表示

はてなブログProの方は、「ヘッダーやフッターを非表示」としている方もいると思いますが、そうするとフッター部分が少し物足りない印象になります。

コピーライトを表示しつつ、背景画像をうつすことで何となくブログ全体が締まるようにできます。

f:id:ftmaccho:20160522035308p:plain

詳細はこちら

theme-naked.hatenablog.jp

まとめ

以上が新しく作成したテーマ「Naked」の説明でした。

今後も新しいカスタマイズを追加していく予定ですので、よろしければご利用ください!!もし不具合などありましたら、教えてくださると助かります!

(注:インストールをすると、デザインCSSの内容が破棄されます。必ずバックアップをとっておいてください。)