いさいの絵日記

解離性障害と付き合いながら絵で生計を立てる目指す絵描きのブログ

ブログカスタマイズの沼にハマりました。

ようこそ・・・カスタマイズの沼へ・・・

 

f:id:ishainon:20181116223741j:plain

 

 

こんばんわ、いさいです。

入院して以来より、ブログ更新をお休みしておりました。

心配してくださった方、本当にありがとうございます。

 

2日更新を休んでいたのにも関わらず、過去記事にスターを付けてくれた方、読者登録してくださった方が連日続いており、とても励みになりました。

本当に本当にありがとうございます!

 

 

カスタマイズしようとしたきっかけ

さて、更新をお休みしていた間のお話ですが、退院日以降、一念発起してブログのデザインカスタマイズを決行しておりました。

 

そのきっかけになったのが、何となく眺めていたGoogleアナリティクスの画面。

f:id:ishainon:20181116215111p:plain

数字はさておき・・・

いさいの日記を見てくださっている方の2/3の方々が、スマホなどのデバイスで閲覧されていることが分かりますね。

 

このブログを始めるにあたり、「まずは記事!兎に角記事!記事書け!」を念頭に置いておりましたので、デザインは後回しにしておりました。

 

まだまだ少ない数ですが、そろそろ見た目も無視できない時期かな~と思い、この度デザインカスタマイズに着手したわけであります。

 

 

カスタマイズコードを無料で公開している神さまたち

この記事では、この度のカスタマイズにおいて大変参考にさせていただいた記事をご紹介させていただきます。

いさいは、その昔ほんのちょっとだけHTML/CSSを独学で勉強しておりました。なので、そこまでコードをいじることに抵抗はなかったのですが、一から構築するのは無理です。

そこで、はてなブログのデザインに関して神がかっている情報を公開してくださっている神さまたちの記事を参考に、此度のカスタマイズを行いました。

 

PC表示でのカスタマイズ

元となるテーマは「innocent」

Innocent - テーマ ストア

moonnote.hateblo.jp

元々は、スマホにも適応できるレスポンシブデザインのものですが、PC版の見た目にはこちらを採用しました。

Simple is the Best を体現したとても美しいテーマです。

採用した決めてとなったのは、このメニュー下に表示できる、おすすめ記事の一覧を掲載する機能。

moonnote.hateblo.jp

いさいの日記では(PC表示)では、こうなっております。

f:id:ishainon:20181116224307p:plain

グッとオリジナル感が上がりましたよね!

しかもこのおすすめ記事は、記事の中で注目されているものを自動で掲載してくれています。詳しくは、公開されている製作者さまの記事をご参照ください。

 

色は統一感が出るように、そしてメリハリがつくように意識してみました。

 

まだ手つかずのところ(研究中のところ)が、メニュー内のカテゴリー選択部分・・・

雑記ブログなので、記事を書くたびにカテゴリーが増えてる気がするのですが、このテーマですと、はてなブログ公式のパンくずリストはうまく表示されても、サイドバーに表示させているカテゴリーのモジュール内は「タグ」のような見た目になっていますよね・・・

つい先ほど、このテーマを使用している方でカテゴリーを私の理想通りに階層化されているブログを発見したので、絶賛研究中です。

 

スマホ表示でのカスタマイズ

今回のカスタマイズで一番力を入れた部分です。

そしてはてなブログでのスマホ表示のカスタマイズには限度があり、PROにアップグレードすることで解除できますが、得られる恩恵は大きいです。

 

まず参考にさせていただいた記事。

hitsuzi.hatenablog.com

もう、ほんとに、有料級です。神さまです。ありがとうございます。スマホ表示でのほとんどの部分を参考にさせていただきました。

ただ、こちらの記事では情報が古いため、Font AwesomeなどのWebフォントを表示させるには調整が必要ですので、その点はお気を付けください。

 

そして、スマホ表示で記事を閲覧されている方はお気づきだと思いますが、ページ下にスクロールしても固定されるメニューバーを設置しました。

参考にしたのはこちらの記事です。

www.yukihy.com

スマホでは、いちいちスクロールしないとカテゴリーなどのメニュー、プロフィールなどの記事以外の情報が見られなかったのが、このメニューバーを設置することで痒いところに手が届くようになりました!

このカスタマイズをより私好みにアレンジしていた方の記事です。

english-apple-diy.hatenablog.com

そして、いさいのスマホ版でのデザインは最終的にこれで落ち着きました。

f:id:ishainon:20181116232317p:plain

私もカスタマイズコードをコピペで配置している内に、少しずつ自分色にアレンジすることができるようになり、今回のカスタマイズでもかなり満足いくものが出来たと思います。

 

まだまだ不十分なところ(カテゴリー部分)はありますが、ひとまずここで一度沼から這い上がりたいと思います(;´∞`)

 

 

おわりに

今回は、いさいの日記のカスタマイズにおいて参考にしてきた記事を紹介してきました。自分でデザインを構築できるって、すっごいかっこいいぞ・・・

そして、今の時代、カスタマイズコードを無料で公開してくださり、コピペだけでオッケーなんて・・・ほんと素敵な時代になりました。

みなさんもぜひ、この沼に遊びにいらしてください( ^ω^ )

ハマりますよ( ^ω^ )

 

それでは、また明日~