photohibi

カメラと写真と日々。毎週水曜日 & 日曜日に更新。

カメラと写真と日々を綴るブログphotohibi(フォトヒビ)。毎週水曜&日曜に更新。たまに不定期更新もします。


【お知らせ】スマホ版のデザインをリニューアルしました。はてなブログのカスタマイズ参考になる記事もご紹介!

こんにちは。te23 (@te23_photohibi) です。

f:id:teppex0412:20190706193715j:plain

 

先日、スマホ版のブログデザインをリニューアルしました。一応デザインをやっている身として見た目にはこだわりたい!という想いがありながら、HTMLやCSSの知識が皆無だったため後手後手に回ってしまっていました(笑)

 

 

 

 

 

 

参考にさせていただいた記事

コーディングやプログラミングを一から勉強していては何年かかるか分からないので、今回はこちらのサイトを参考にさせていただきながらアレンジを加えてリニューアルしました。

 

hitsuzi.hatenablog.com

 

リニューアルのポイント

細かいことを含めたら結構大掛かりでしたが、今回は特に以下の4つのポイントを意識しました。

 

ポイント①  ヘッダーまわりを充実させる

ポイント② フォントを変えて読みやすく

ポイント③ スライダーを導入して華やかに

ポイント④ 回遊性を高める

 

詳しく解説していきます。

f:id:teppex0412:20190706193721j:plain

 

 

ポイント①  ヘッダーまわりを充実させる

ページのTOPであるヘッダーは、ブログのイメージを左右する重要な部分です。ここがしっかりしていると、ブログ全体がきちんと作られている感が出ますのでしっかりと押さえておきたいポイントでした。

今回はひつじの雑記帳で紹介されているものをほぼそのまま使わせていただき、トルグメニュー(ハンバーガー)、ロゴ、読者になるボタンを付けました。

 

ポイント② フォントを変えて読みやすく

文字のサイズや行間は、文章の読みやすさにも影響してきます。記事タイトルや見出しなど、文字周りをすっきりとさせることで読みやすくなるようにしました。

 

ポイント③ スライダーを導入して華やかに

ヘッダーの下に画像のスライダーを付けることで、一気に質の高そうなブログに見えるようになります(笑)画像がスライドすることで見た目が華やかになりますし、視覚的に訴えかけられるのでコンテンツも分かりやすくなったと思います。

 

ポイント④ 回遊性を高める

ヘッダーのトルグメニューやスライダーを導入し、各カテゴリーの記事一覧ページにリンクさせました。いろいろなページへの動線を用意することで、回遊性が高まると同時にコンテンツが充実している感も出すことができました。

 

 

 

 

 

 

 

 

コーディングは楽しい

慣れない作業ということもあり、かなり時間がかかってしまいましたが、記事を参考にしながら少しずつ進めていきました。

めちゃくちゃ丁寧にまとめてくださっているので、まったくの素人である僕でもなんとかなりましたひつじの雑記帳筆者さまに感謝です。本当にありがとうございます!

 

しばらく作業していると少しずつコツがつかめてきて、だんだん楽しくなってきました(笑)ついつい時間を忘れて没頭、おかげでしばらく寝不足の日々が続きました。ひとつコードを追加するたびにダイナミックに変化していくし、どんどん見映えが良くなっていくのは快感ですね(人の力を借りまくってますが w)

コーディング、ちょっとハマりそうです(笑)

 

まとめ -もうちょい勉強したい-

少しずつ知識を増やしていって、恥ずかしくないレベルまで到達できたらこのブログでもカスタマイズに関するカテゴリを増やせたらいいなぁなんて考えています。

とりあえずですが、プログラミングをしている友人からオススメされた本は買いました。ココロが折れるまでは頑張って勉強してみようと思います!(笑)

それでは、また。