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

HoLo's LIFE.zip

就職を機にブログを立ち上げました。

ブログデザインを変えてみた。

Intro / はてなブログはデザインが充実している。

 はてなブログを始めるにあたって、まず悩んだことが「ブログデザインはどうしようか。」でした。ブログをあまりしたことがなかったので、はてなブログのHTML/CSSを弄れる機能を見つけたときは胸が躍ったものです。

 さらに、ユーザー制作のデザインを公開・インストールができるというのも素晴らしい。テーマ ストア - はてなブログで見漁っているだけでも、とても心躍りました。私自身もいづれはテーマ制作に挑戦してみたいですね。WordPressのような感じなのでしょうか。

 現在はじっくりデザインを練る時間がないので、随分と先の話になりそうです。

 

 

使用させて頂いているテーマ

  さて、テーマストアからこちらのテーマを選ばせていただきました。

Minimal Green - テーマ ストア

 決め手はなんといっても、白と緑を基調にしているという点ですね。さらにレスポンシブにも対応しており、iPadでの表示も確認したところ非常に綺麗な対応具合でした。

 こちらのテーマはGitHubでも公開してくれているようで、時間を見つけてじっくりと読ませていただきたいと思います。また、こちらのテーマをカスタマイズする上での詳しい方法や注意点、アドバイスなど詳しく記載してあります。いづれも上記URL先に記載がありますので、興味のある方は是非覗いてみてください。

 

実装したデザイン

 作者様がカスタマイズを認めてくださっているということで、私自身いくつかHTML/CSSを弄らせていただきました。

簡単なところ。

 ごくごく簡単なところとして、投稿日を囲んでいる円を線でつなげてみました。

f:id:holosline:20170226082324p:plain

なんとなくの思い付きでしたが、なかなかお洒落になったかと思います。

 #contentにborder-leftを実装しているだけなので、ウィンドウ幅が狭まればテーマのレスポンシブ動作に対応しきれずデザインが崩れてしまいます。ですので、デザインが崩れる幅になれば線が消えるように実装しました。

 

 また、他にはパン屑リストの導入や、marginの調整などです。

 

メニューバーの設置

 本テーマ作者様が紹介してくださっているグローバルメニューを実装しようかと考えたのですが、そこまでのカテゴリ量にする予定はありません。ですので、レスポンシブ対応の、要素数が少なくても問題ないメニューバーを、ブログタイトル下部に設置いたしました。

 

f:id:holosline:20170226082716p:plain

 

 

 こちらのメニュー文字にカーソルを合わせますと、

 

f:id:holosline:20170226082829p:plain

 

このように、下線が引かれるというアニメーションを実装いたしました。ページをスクロールすると、メニューバーが追随してくるようにもなっております。

 また、タブレット端末、スマートフォンで表示しますと、ハンバーガーアイコン(「三」みたいなアイコン)が表示され、それをタップすることでメニューが表示されるようになっております。

 これらの機能の実装は、

llc-beready.com

こちらのページを参考にさせていただきました。とても分かりやすく書いてくださっているので、自身のページに実装するためのカスタマイズがやり易かったです。

 

 余談ではありますが、「はてなブログはHTMLの埋め込みができる」ということは知っていたのですが、javascriptの埋め込みまでできるのですね……。カスタマイズの幅が本当に広くて、考えるだけで楽しくなってきます。

 

じっくり腰を据えて書きたくなる自由度の高さ

 思いの外、デザイン周りを好きに弄れるのでとてもびっくりしました。

 現在はPythonを勉強している最中なのですが、本日はついついCSSに浮気してしまいました。タブレットスマートフォン向けサイトを未だ扱ったことがなかったので、上記サイト[llc.beReady]様の記事は本当に勉強になりました。CSS3のtransformでゴリゴリ動かすのが好きなので、ハンバーガーアイコンのアニメーションなんかは心躍りましたね。

 とにかく、とても楽しい時間を過ごすことができました。