One Little Voice

Your voice makes us happy!

ブログのデザイン変更|一区切りついたので、お世話になったサイトやブログを紹介します!

f:id:twinkle-libra:20190522173204j:plain

 

こんにちは、デザインいじりすぎて肩こり悪化のcocoです。既にお気づきの方も多いと思いますが、ブログのデザインを5月末にいじりました(笑)今回の改修はかなり苦労しましたが、あちらこちらに素敵なブログさんがあるので大変助かっています。

そこで、有名なブログさんは多いのですが、ざらっと紹介していこうと思います。気になる方はこのままお読みください♡

 

 

ブログタイトルロゴの作成

hatchful.shopify.com

 

 タイトルロゴの制作には、Hatchfulさんを利用させていただきました。使用する際に費用は一切かかりませんし、日本語のページがあります。ロゴのバリエーションは海外の他のサービスに比べると少ない方ですが、おしゃれで洗練されたサンプルが多数用意されています。選んだサンプルロゴから、文字のフォントや背景色、ロゴに使う絵文字変更もできます。

 

ブログ背景色の変更

 私は作ったロゴをフリーソフト「PictBear」に読み込ませ、ロゴの背景色からスポイド機能で色番号(RGB)を取得。ここでこの背景色が「赤254、緑244、青232」であることがわかりました。

f:id:twinkle-libra:20190609152906p:plain


次に、以下のサイトで「RGB」から16進数のカラーコードへ変換。

 

www.peko-step.com

f:id:twinkle-libra:20190609153313p:plain

 

#fef4e8であることがわかったので、ブログのデザイン編集画面で背景色をロゴと統一しました。

f:id:twinkle-libra:20190609153456p:plain

 

グローバルメニューバーの作成

f:id:twinkle-libra:20190609153702p:plain

 グローバルメニューバーとは、上記メニューことです。スタイリッシュでおしゃれなグローバルメニューバーを作りたかったので、以下のブログさんを参考に、自分で色の設定を行いました。

 

www.yukihy.com

 

タイトルロゴの位置調整

 利用されているブログデザインにもよりますが、ブログのロゴとグローバルメニューバーの下が無駄に広がったり、画像が拡大されて表示されることがあります。そんなときの調整の仕方は以下のブログさんを参考にさせていただきました。

 

sprout-wings.hatenablog.com

 

 

記事のタイトルや見出しのフォント・背景色を変更する

記事のタイトルや見出しは↓とか(はてなブログではh1)

f:id:twinkle-libra:20190609154805p:plain

↓のことです(はてなブログではh3~h5) 

f:id:twinkle-libra:20190609154918p:plain

 

 

お洒落にしたかったので、以下のサイトさんを参考にさせていただきました_(._.)_

saruwakakun.com

 

記事に更新日付を表示させる

f:id:twinkle-libra:20190609155930p:plain

 ブログって鮮度が命なので、適度に古い記事も更新をかけないといけないもの。今使っているデザイン(http://blog.hatena.ne.jp/-/store/theme/8599973812292647360)では、記事の作成日しかデフォルトで表示されないので、更新日付を取得・表示させる対応を、以下のブログを参考に入れました。

 

www.tsubasa-note.blog

 

ただし、今はおかしな表示になっています。設定当初は日付(例:2019-06-09)だけが出て良かったんですが、最近はタイムスタンプまで表示されるようになってしまいました。また時間のあるときに改修します。

 

記事にSNSシェアボタンを表示させる

 ブログと言えば、スタイリッシュでおしゃれなSNSシェアボタン!ということで、これも以下を参考にさせていただきました。

f:id:twinkle-libra:20190609160151p:plain

www.daipanman.com

 

ただし、気を付けたいことが2点あります。

  1. Google+は2019年4月2日に既にサービスが終了となっています。htmlやCSSの設定から外すようにしてください。
  2. Font-awesomeのインポート設定に書かれている情報は古く、これを使うとロゴの絵文字が正常に表示されません。以下のブログに記載されている情報をご利用ください。

www.miscellaneous-notes.me

 

はてなブログから外部サイトへのリンクを別窓で表示

 私は「お問い合わせ」にGoogle Formsを利用しています。こういったものは今開いているページとは別ウィンドウで表示される方が好ましいと思い、以下のブログを参考に設定させていただきました。地味な設定ですが、比較的利用者には喜ばれる設定だと思いますので、ぜひ活用してみてください。

 

www.inside-shiina.com

 

最後に

 今回はブログデザインのカスタマイズで利用させていただいたブログ・サイトさんをご紹介いたしました。世の中に五万とあるブログ。この中で役に立つ情報を沢山発信されている方々に、改めて感謝しかありません。今後も利用させていただきたいです。どうぞよろしくお願い致します^^

 

本日も最後までお読みいただきありがとうございました。

皆様のお役に立ちますように☆