secret investment

元秘書アラサー主婦の資産運用ブログ

はてなブログのカスタマイズで本当に役立ったブログのご紹介①

f:id:secretinvestment:20180619021157p:image

はてなブログをカスタマイズしました。

 

まだまだ完成には程遠いですが、枠組みとしては一旦完了です。

 

2日で行ったカスタマイズ

  • 全体のデザイン
  • 文字の装飾や行間、大きさ
  • 見出しとタイトル
  • メニューバーの追加
  • 過去記事の更新

こんな感じです。

他にもあるかもしれませんが、ざっと思いつくものを挙げてみました。

 

今回初めてはてなブログのカスタマイズをして思ったこと。

 

ITの世界って奥が深い…!

 

なにが大変だったって、説明ブログは巷に色々溢れているのですがどのブログが設定上合うのか、自分にも出来るのかを見極めるのが1番苦労しました。

 

中にはちょっとややこしく説明し過ぎているものやコードのコピペが出来ないもの、いざ設定したけど変化がなかったものなどもありました。

 

なので、これからはてなブログをカスタマイズしたいと思う方のためにどのブログが分かりやすく役立ったかをご紹介してみたいと思います!

 

役立つ神ブログをご紹介

  • 全体のデザイン

ほとんどこちらのブログにお世話になりました。コピペするだけで素敵なデザインに早変わりです。

はてなブログカスタマイズ カテゴリーの記事一覧 - いつ俺〜いつから俺ができないと錯覚していた?〜www.ituore.com

コピペするだけでも充分ですが、私は細かいところに少しだけこだわりをもちたくてここからまたちょこっとカスタマイズを加えました。

 

例えば文字の色とか線の種類とか。

 

それも一部は丁寧に説明&コピペを用意してくれています!!神。

 

まずはこれだけでも雰囲気がだいぶ変わるので是非。

 

  • 文字の装飾や行間、大きさ

装飾は色の変更に苦労しましたが分かってしまえば簡単でした。

↑ この蛍光ペン風なのがカスタマイズの成果です

強調表示の太字に蛍光ペン風のラインをつける方法【はてなブログ カスタマイズ】 - 思考は現実化するwww.thoughts-make-things.com私が今回悩んだのが、蛍光ペンの色。

黄色   「252,252,84,0」

緑色   「102,255,204,1」

青色   「102,204,255,1」

ピンク色 「255,153,255,1」

分かってしまえば簡単なのですが、設定する過程で1つ問題が発生。

 

ブログでは上記の数字を変えれば色の変更可能と書いてあるものの、どれも色が濃すぎる気がして納得できず。

 

どうしたら上記以外の色に変更が出来るのかが分からない。この問題を解決するための検索に無駄に時間がかかりました(T-T)

 

結局、この番号をWEBカラーチャートの英語に置き変えても対応できるということ判明し無事に薄いピンクに変更できました!

WEB色見本 原色大辞典 - HTMLカラーコード

設定自体はとても簡単です。

 

で、蛍光ペンだけだと太字が使えなくなってしまうので、斜体を太字に変更するための設定は同じブロガーさんでこちらの記事を参考にさせていただきました。

強調表示の「斜体」を強調表示の「太字」に変える方法【はてなブログ カスタマイズ忘備録(8)】 - 思考は現実化するwww.thoughts-make-things.com次に行間と大きさ。

 

次。

  • 文字の装飾や行間、大きさ

はてなブログはそのままの状態だと行間が空き過ぎ&文字が小さ過ぎという問題があります。

 

でも、とても簡単な設定でこの問題をクリアにすることができます!

nomado.hatenadiary.com

yumasty.hatenablog.com

☆☆☆☆☆

今日はここまでです!このブロガーの方々のおかげで初心者の私にもカスタマイズできたので参考になれば嬉しいです。 

 

  • 見出しとタイトル
  • メニューバーの追加
  • 過去記事の更新

 

については「はてなブログのカスタマイズで本当に役立ったブログのご紹介②」で書いていきたいと思います。

 

では☆