サボログ×てんログ

※ブログ説明※

MENU
しばらく商品紹介、アプリ紹介多め!

デザイン変更完了!1周回ってシンプルなはてなデフォルトテーマへ

20190630184106

f:id:shironopoem:20190708124955j:plain

いつも来ていただきありがとうございます。

 

サボログ×てんログ運営のサボり(@kuronopoem)です。

 

最近ずっとカスタマイズをしていましたが、ちょっと久しぶりにテーマも変えてみました。

 

今まで何回も色んなはてなのテーマを試しましたが、最終的に行き着いたのは1周回ってはてなデフォルトテーマのSmoothでした。。。

 

 

久しぶりにテーマを変更しようと思った訳

先日、深夜3時半くらいに眠い目を擦りながら作業していた時のこと。

 

ふと、ブログのトップページを開くとデザインがガタガタに崩れていました。

 

何かやったっけ?みたいな感じで一瞬戸惑いつつも調べてみると、デザインテーマが勝手に変更されてました。

 

誰かがやったとかではなく、たぶん気づかない内に手が当たって変更してしまったっぽい(デザインテーマの最上部のデフォルトテーマであるSmoothに変更されていたからこの線が濃厚)。

 

最近カスタマイズをガチャガチャやっていましたが、夜に眠い目を擦りながら半分ボケた状態で作業していて、やってしまっていたみたいです。

 

直そうと思ったんですが、ちょっと他のテーマも見てみると意外とデフォルトのテーマ良いじゃん!ということに気付いてデフォルトテーマのままでいくことに決めました。

 

今まで、別のテーマを基準にカスタマイズ等していたので細かい調整が必要なところだけ直しましたが、概ねテーマ変更だけでいけました。

 

なぜあえてデフォルトテーマのSmoothにしたのか

表示幅が広い

サイドバーは欲しかったので、サイドバーが出ているテーマをチェックしてみました。

 

ほぼ全てのはてなで用意されているテーマを見て見ましたが、サイドバーが表示されているものは基本的に記事の表示幅が狭くなってしまうようでした。

 

私が前に採用していたReportもシンプルでカッコ良かったのですが、文字表示エリアが狭いのが唯一の難点でした。

 

文字表示エリアが狭くてあんまり良くないよなーとは認識しつつも、テーマ変更に伴う微調整等が面倒でそのまま使い続けていました。

 

冷静に考えたら文字表示エリアの広さってブログで一番重要だと言ってもおかしくないくらい大事な要素なんですよね。

 

記事を見に来て下さる人の9割以上は記事本文のみを見てサイドバーとか、他の項目はあんまり見ないし興味無いのが普通だと思うんですよね。

 

一番重要な記事本文の表示エリアが狭くて文字が読みにくい状態というのは完全に読者軽視だったなーと。

 

このご時世スマホユーザーも多い中、スマホで見ると画面拡大するか目を凝らさないと良く本文が見えないような状態でしたからね。。。

 

これを認識しつつ放置してたのがズボラ過ぎましたね笑。

 

今回変更したSmoothテーマですが、サイドバーが表示されているものの中でもトップクラスに文字表示エリアが広いです。

 

記事表示エリアが広いというのは、単純に本文が見やすいということで読者視点だと嬉しいはずです。

 

自分が自分の記事を読む時にも文字が見やすいので嬉しいです。

 

今はスマホ対応も完了したので、スマホからでも記事が見やすくなったはずです。

 

ちなみにスマホ版のみ左上の方にトグルメニューも付けてみました。

f:id:shironopoem:20190708133855p:plain

 

他のカテゴリーの記事が気になる方はそちらからどうぞ!

 

シンプルイズベスト

デザインは好き嫌いがあると思いますが、私は個人的にあんまりゴチャゴチャしてるよりはどちらかと言えばシンプルなデザインが好きです。

 

Smoothテーマはとてもシンプルです。

 

デフォルトテーマなので当然と言えば当然なんですが笑。

 

読者に余計な思考を挟ませることが無いので、見ていて疲れにくいと思いますし、記事内容が伝わりやすいのかなと。

 

むしろ自分でカスタマイズしたい

はてなのテーマって結構可愛らしいものやオシャレなものがあって親切なんですが、ネット上にはてなのカスタマイズ方法も多いですし、自分でカスタマイズすることもできるので、シンプルなデザインにしてしまって自分でカスタマイズすれば良いじゃんと思うようになってきました。

 

こういう思考になる人は、はてなよりもワードプレスが向いているような気がしています。

 

ただ、はてなははてなで読者システムやブクマなどの良い面もあるので、今のところは継続してはてなで運用しているという感じですね。

 

その他 チェックポイントをカスタマイズ

f:id:shironopoem:20190708232152p:plain

はてなブログってワンタッチで簡単に箇条書きリストを付けれるんですが、この箇条書きリストを付けると自動でチェックポイントの装飾が付くようにいじりました。

 

具体的な処理としては、チェックポイントはulタグにliタグが入れ子になっているんですが、このulタグにチェックポイント用のクラスを付加することで、cssで装飾されるイメージです。

 

グローバルメニューやもくじにもulタグが使われていて、そちらには装飾をしない工夫をするところが地味に難しくて時間を使いましたが(2時間くらいハマってた・・・)、何とか完成。。。

 

まとめ

これである程度一通りのカスタマイズをして満足したので、今後は記事に注力したり、他の作業をメインでやっていきます。

 

最近ブログにマンネリ化、飽きてきて更新がだるくなってきてたなーという人は、たまにテーマ変更をしてみると意外と新鮮な気持ちでまたブログをやり直せるのでオススメです。

 

合わせてのブログカスタマイズもHTML、CSS、javascript(jQuery)あたりをちょっと勉強すれば意外と簡単にできますので本で勉強してみるのもオススメです。

 

タグや属性の意味などを「知っている」だけでも全然違うと思います。

 

例えば、私が今回紹介したトグルメニューも最初は下に表示される要素と被ってしまって表示が汚くなっていたんですが、要素が重なった場合にトルグメニューの表示を最前面に出したいなー→要素の重なりの優先順位を指定するのはz-indexだったよな→「z-index 使い方」みたいな感じで検索。

 

こんな感じで知っているとWEBで調べる効率も上がります。

 

意外とハードルは高くないので、興味がある方は是非勉強してみましよう!

 

入門、初心者向けのやさしい本達↓

 

www.saborite.com

www.saborite.com

www.saborite.com