浮きぐさ暮らし

猫飼い転妻の備忘録と雑記

はてなのブログテーマを「マテリアルぽっぷ」に変更!

f:id:ukigusagurasi:20180815220040p:image

こんにちは。藤間です!

 

はてなのブログテーマを「lnnocent」から「マテリアルぽっぷ」に変更してみました!

 

以前の「lnnocent」もシンプルで好きだったのですが、どうしても流行り?のブログカード式にしてみたく、思い切ってガラッとリニューアルです。

 

自分用メモに使用したカスタマイズなども載せておきます。

 

ビフォーアフター

f:id:ukigusagurasi:20180815203224j:plain
f:id:ukigusagurasi:20180815203236j:plain
←Before After→

結構変わってますね!

 

画像が大きくなり、導入部分やはてなスターの表示がなくなったことで、すっきりしました。

いい意味で、はてなブログぽくないかな?

サイドバーが設置可能になった事でテーマ変更を決定

スマホや縦にしたタブレットだとサイドバーが無くなってしまったように見えますが・・・

f:id:ukigusagurasi:20180815203250j:image

PCだったりタブレットを横向きにすればサイドバーが出てきます。

 

このサイドバー、マテリアルぽっぷが出た当初は無かったんです。

 

以前に1度マテリアルぽっぷを使おうとしたことがあったのですが、サイドバーが出ないとわかり使用を断念しました。

しかし、何の気なしににテーマストアをうろうろしていると

2018/07/13:
・PC版 TOPページの表示を記事2カラム+メニューに変更できるカスタマイズコードをデモブログに追加しました。

と、アップデート情報があるじゃないですか!

 

ブログカード式でサイドバーありだと「ZENO-TEAL」か「UnderShirt」が候補だったんですが、マテリアルほっぷの見た目が気になっていたのでこのアップデートは神アプデです!

カスタマイズ内容

ブログテーマ変更でカスタムした事と、参考サイトを載せておきます。

 

demo-mamegoro.hatenablog.com

demo-mamegoro.hatenablog.com

まずは一覧表示にするなどの基本設定と早速サイドバーを設置しました。 

 

サイドバーの設置はコピペで一発です。

難しいことは一切なし!

 

demo-mamegoro.hatenablog.com

demo-mamegoro.hatenablog.com

次に速攻で色の変更をして、次にプロフィール周りを変更しました。

ブログタイトルにバナーなどは試しましたが、ちょっと手間取ってしまったので一時的に断念。

 

色の変更はコピペ一回で数カ所がいっきに変更可能なので、とても簡単でした。

逆に細かく指定して色変更したい場合には、CSSをいじれないとちょっと難しいかも知れません。

 

設定自体は簡単だったのですが、イメージ通りの色を選ぶのにめちゃくちゃ悩みましたw

配色を決めるのにとても参考になったのはこちらです。

ironodata.info

好きな色ひとつから、色々な組み合わせを表示してくれます。

どういう色を使えば、どういった雰囲気になるのかが視覚的にすぐわかるので、ブログカスタマイズに限らずデザインなどの参考になりますよ!

その他のカスタマイズ

今回のテーマ変更に限らず、前テーマからも使わせて頂いているカスタマイズをまとめてみました。

難しいことはせず、コピペで出来るものばかりなので是非ご参考にどうぞ〜!

 

ukigusagurasi.hatenablog.com

おわりに

テーマ変更をするとそれまでのCSSが消えてしまいます。

細かい設定などは調べて直したりしてちょっと時間を取られますが、ブログデザインは特にいじらなくても素敵です。

 

「HTMLとかCSSはよくわからない」という人でも、テーマを選ぶだけですぐにおしゃれな見た目になるので、マテリアルぽっぷおすすめですよー!