引きこもりライター.com

ライター活動に美ボディ作り、料理などが趣味な、引きこもりEVERYDAY。

MENU

はてなブログを初心者ながら、テーマ『ZENO-TEAL』でカスタマイズしました

スポンサーリンク

f:id:hikikomori-writer:20170917123056j:plain

今週は原稿よりも、ブログカスタマイズに集中しすぎている辰巳です。はてなブログ初心者ながら手探りで作業を始めて、先日終わりましたー!(秋田犬はネタです)

これまでブログは「なんとなく必要かな?」くらいにしか思っておらず、ほぼ更新もせずに放置していました。

ですが、先日所属していたWEB媒体が「完全になくなって記事が全削除される」と聞いたり、「辰巳まみ。をより多くの人に知ってもらったりするにはブログは不可欠」というお話をしていただくことがあって

ブログ、ちゃんとしたい……!

という想いが沸々と湧いてきまして、重い腰をあげてみました。

おすすめテンプレートは『ZENO-TEAL』

ブログのイメージを作るため、テーマは慎重に選びました。最終的には『ZENO-TEAL』を選びましたが、それ以外では下記のテーマと悩んだ形です。

Yumekawa

f:id:hikikomori-writer:20170917123136j:plain

Yumekawa - テーマ ストア

これの水色カスタマイズに惹かれたのですが、少し女の子らしいことと「仕事のことも書くことを考えるとポップすぎるかな?」と感じて、選びませんでした。

カスタマイズもとても丁寧に解説されている作成者さまのブログがあり、初心者にも優しいテーマだと思います。 

f:id:hikikomori-writer:20170917123228j:plain

ブログカスタマイズ カテゴリーの記事一覧 - Yumekawa

f:id:hikikomori-writer:20170917123300p:plain

デザインテーマ「Minimal Green」のカスタマイズの手引 - Minimal Green

Minimalism

f:id:hikikomori-writer:20170917123329j:plain

Minimalism - テーマ ストア

とってもシンプルなテーマで私好みだったんですが、シンプル過ぎるのも寂しい印象になるような気が……。またシンプルが故、広告が目立ってしまいますし、画像もキレイじゃないものを入れていると浮いて見えるように感じたので、今回はやめました。

ただシンプルなため、初心者でもデザインをカスタマイズしやすいので「CSSとかマジで分からん……」という方が初めて挑戦するにはピッタリかもしれません。

f:id:hikikomori-writer:20170917123354j:plain

シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 - ひつじの雑記帳

カスタマイズにおいて参考にしたサイト一覧

今回ブログをカスタマイズするにあたり、参考にしたサイトやページをずらっとご紹介しますね。

f:id:hikikomori-writer:20170917123503j:plain

はてなブログのテーマを「ZENO-TEAL」にしてリニューアルしました。 - CameraStory

先日秋田でお会いしてから仲良くしていただいている、ツルタさんのブログです。

『ZENO-TEAL』を使ってカスタマイズをされておられ、特に「ここカスタマイズしたい!」というのを項目ごとに画像を使ってリンク先とともに紹介してくださっているので、初心者の私は食い入るように何度も読み返したほど! 本当にお世話になりました。

f:id:hikikomori-writer:20170917123550j:plain

CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life

常にはてなブログも進化しているので、以前のコードでは上手に表示されないことも……。そんなときに検索すると、いつも出てくるのがYukihyさんのブログ。「このコードで思い通りにならない」と思ったら、一度覗いてみるといいですよぉ〜!

f:id:hikikomori-writer:20170917123656j:plain

HTML,CSS カラーコード一覧表 | 背景色や文字色の設定

ブログのイメージを決める要素の1つである色選びのためにも、カラーコード表は欠かせませんでした。

「どれがいいかなぁ?」といろんな色を試しまくって、今のカラーに決めたくらい。カラーコード表でいいと思っても、実際ブログで使ってみると微妙だったりするので、妥協せずに選ぶの大事です。

【2017.09.17追記】

f:id:hikikomori-writer:20170919014222j:plain

上記のご指摘をいただいたので、サイズ変更しました。

参考にしたのは、

はてなブログ 文字の大きさの変え方 (ブログ名、タイトル、本文) - 【Fレシピ・Fライフ】、、Fってなに? 。デザインCSSに貼るだけだったので、10秒あれば出来ました!

カスタマイズをする前に準備しておくといいもの

実はブログのカスタマイズ自体は、そこまで時間かからず終わったんです。じゃあ、何に時間がかかったか。それは、グローバルメニューやカテゴリの設定やプロフィールの作成! 

「事前に準備しておけばよかった……」とかなり後悔したので、これからカスタマイズされる方向けに準備しておくといいものをまとめておきますね。表示したい項目に合わせて、作成しておくと作業効率がグンっと上がります!

ブログ上に表示する、グローバルメニューの項目

f:id:hikikomori-writer:20170917123720j:plain

ブログ下に表示する、フッターの項目

f:id:hikikomori-writer:20170917123748j:plain

”プロフィール”を記載しているページ

”このサイトについて”を記載しているページ

お問い合わせページ

上記の項目を準備するために参考にさせてもらったのは、染谷さんのブログです。

f:id:hikikomori-writer:20170917123822j:plain

染谷が考えるコンテンツマーケティングとは | 染谷昌利公式ブログ

上から順番にノート片手に棚卸し。ブログのためだけでなく、ライターやフリーランスの方だったら一度読んだ方がいいです! 自分の”これから”に悩んでる方には特にオススメ♡

初心者がはてなブログをカスタマイズするには、根気が大事!

今回ブログのカスタマイズが完成するのに要した時間は、5日間。

実はブログのカスタマイズを思い立ったときに「やってあげるよ?」という神みたいな方が降臨したので、お願いしたんですよ。そしたら、ものの数時間で終了! 「やったぁー!」と開放感に包まれていたのですが、あとから色々と問題点が……。

特に頭を抱えたのが、「変えたい!」と思ってもどこをイジったらいいのかが分からないこと。

「これでは毎回ブログをイジりたいときにお願いすることになってしまう……」と危機感を抱き、やってもらったのにコードを一旦全部削除。一から自分で作り直した結果、5日間もかかってしまいました…。笑

上手くいかなかったからこそ、愛着も湧く

正直上手くカスタマイズできなくて、めっちゃイライラしたし、半べそかきながらPCに向かったりもしてました。

f:id:hikikomori-writer:20170917123857j:plain
f:id:hikikomori-writer:20170917123930j:plain

メニューの色が上手くいかなかったりとかさ……。

でも時間はかかったけれど、自分でカスタマイズしていくことでコードに「/*SNSシェアボタン*/」などと自分なりの目印を入れておく方法を発見したり、自分の入力するコードで変化していくブログを見て「今後もブログを良くしていこう!」という気持ちが生まれたんですよ(今まで抱いたことなかった)。

それに上手くカスタマイズいったときの爽快感は最高です←単純。 

 

誰かに任すのは簡単だけど、自分でやったからこそ得られたことはいっぱいあるなと思っています。もちろん分からないことはいっぱい出てきますし、そんなときは人に頼るのは全然OK。

でも初心者だからこそ、まずは自分でやってみる方が成長につながるし、今後のブログ運営にとってもいいなと気づけました。「みんな、すごい頑張ってカスタマイズされたんだなぁ」と、すべてのブログに尊敬の念を抱くレベルにまでなってます。

ブログを放置しっぱなしの方も多いと思いますが、カスタマイズが完成すると毎日ページ覗くのが楽しみになりますよ! 台風も来てますし、この連休をブログカスタマイズTIMEにしてみてはいかがでしょうか?