すみくにぼちぼち日記

メキシコ生活や欧米旅行記、語学、大学、美術館について

はてなブログのテーマSmoothのデザインが変わった?-スマートフォン用デザイン上部にブックマークが現る

ブログのデザインであるブログのテーマ。

はてなブログでも多くのテーマが存在ます。このブログのテーマは「Smooth」というテーマなのですが、少し前からスマホ用の画面の上側にブログタイトルとはてなブックマークボタンが現れるようになりました。

 f:id:k-heki:20210401111644p:plain

 

はてなブログのテーマSmoothのデザインが変わった?-スマートフォン用デザイン上部にブックマークが現る

はてなブログ全体のデザインが変更されたのか、「Smooth」というテーマのデザインが変更されたのかはわからないのですが、ある日突然スマホ用のブログ画面の上部にブログタイトルとはてなブックマークボタンがずっと現れるようになりました。

 

f:id:k-heki:20210521065251j:image

上の写真の矢印の部分が今回加わったブログタイトルとはてなブックマークボタンです。この部分がスクロールしてもずっと現れるのです。

ブログの読み手としてはブログのタイトルがずっと表示されているので、どんなことが書かれている記事なのかが分かりやすくなった変更かなと思います。また、すぐにブックマークできるので、その点でも使いやすさがアップしました。

一方で、通常、ブログのデザインが少し変わったとしても、ブログを書く際には何の問題もないのですが、このブログに関しては、デザインを色々カスタマイズしており、今回のデザイン変更によって、これまでカスタマイズした部分を少し変更する必要が出てきました。

 

見出しのアンダーラインの変更

はてなブログ 見出し編集

まず初めに、ブログの見出し部分のアンダーラインの形を変更しました。

元々大見出しには上の写真のように、左端が矢印のようになったアンダーラインを使っていたのですが、今回のデザイン変更によって、下の写真のように、シンプルなアンダーラインにしました。

 

f:id:k-heki:20210521065251j:image

理由は、ブログのタイトルがずっと記事のタイトルがブログ上部に表示され、その最初の文字とアンダーラインの左端の飾り部分が重なってしまい、見づらくなってしまったからです。

実は、自分でもこういうデザインの変更を行ったときのやり方がよくわかっていないので、この変更を行うだけでかなりの時間を要しました。

トグルメニューの位置を変更

f:id:k-heki:20201002114500p:image

このブログのスマホ用の画面の右上には、トグルメニューという、折り畳み式のメニューを設定しているのですが、このトグルメニューの位置も変更しました。

元々メニューは上の写真のように、ブログの一番右上に設置していました。

 

f:id:k-heki:20210521065440j:image

ですが、今回新しくなったデザインでは、右上に、はてなブックマークボタンが常設されているので、トグルメニューをクリックすると、はてなブックマークのページに飛ぶようになってしまったのです。

 

f:id:k-heki:20210521065851j:image

この誤作動を回避するために、トグルメニューをメニューの右上からタイトルの下へと移動させました。

この移動も、自分でトグルメニューを設置しているにもかかわらず、なかなかうまくできず、とても時間がかかりました。

ブログのデザインを固めてから1年ほど、デザインをいじることはなかったので、デザインの変更時に入力したコードの意味などを完全に忘れてしまっていたことが、今回の変更でよくわかりました。

今後はもう少しこまめにデザインについてチェックして、コードの意味などを確認していきたいなと思いました。

 

はてなブログのデザインカスタマイズでおすすめな記事一覧はこちら

sumikuni.hatenablog.com

 

終わりに

このブログでははてなブログのテーマ「Smooth」のスマホ版のデザインが変わったことと、デザイン変更に伴い実施したことをご紹介しました。

デザインの変更はブログ初心者にとってとても難しいことなので、色々大変だったのですが、今回の変更で自分のブログのデザインを見返す機会となり、良かったなと思いました。

 

※ブログ毎日更新を365日続けた話はこちら

sumikuni.hatenablog.com

 

ブログランキング・にほんブログ村へにほんブログ村