読者です 読者をやめる 読者になる 読者になる

LIB

カナダと日本と韓国と、たまにオーストラリア。人生真っ盛りという意識で生活したい

初心者でもできた:はてなブログのカスタマイズで私がお世話になったサイトのまとめ

はてなブログを開設して2か月弱ですが、このサイトでこれまで行ってきたカスタマイズのまとめをしようと思います。

f:id:livingcanada:20170424170302p:plain

ブログ開設当初は、HTMLもCSSもほぼ全く分からない状態からのスタートでした。しかし、先人さんたちの知恵をお借りしてきたことで、初心者の私でも少しずつカスタマイズができるようになってきました。今でもまだ全然詳しくはないのですが、優秀なサイトと説明のおかげでブログのカスタマイズがセルフでできるようになり、楽しい日々を送っています。

ブクマさせてもらったサイトが多くなってきたので、これからカスタマイズを始めたいと考えている方のためにも、自身が後からまた確認しなおせるためにも、記録を残しておこうと思います。

今回は、実際に私が利用させてもらったサイトさんをご紹介します。

 

初期設定

niche.hateblo.jp

この記事を読みながら初期設定を行いました。何もわからない状態からでも、ニッチさんのブログにさえたどり着ければOK。きっとはてなブログが開設できます。

 

shiromatakumi.hatenablog.com

 サーチコンソールを入れることで、どの記事が検索されているのかや、どんなワードで検索されているのかがわかります。エラーが出てないかチェックもできます。

必須のツールだそうなので、よくわからないまま入れてみましたが、たまにチェックすると思わぬ発見があったりして面白いです。

 

psn.hatenablog.jp

グーグルアナリティクスって何?って状態でしたが、このやり方で設定を行いました。こちらも必須だということで入れてみましたが、入れて納得、これも必要です。

  

記事関連

記事タイトル

www.north-geek.com

デザインはシンプルなものが好きです。初心者なので基本的なことさえわからず、うまくいかない場合の対処法が書かれているのもありがたかったです。

 

見出し

shiromatakumi.hatenablog.com

見出しができるとブログが一気にそれらしくなりました。少し慣れてきて色んな見出しを試してみましたが、結局一番ベーシックなものに戻り、色の設定だけを少し変えました。

 

目次

kumoaozora.hatenablog.com

見出しのついた記事が2つ以上あると、自動で目次を作ってくれます。この記事のトップにも出ていると思います。シンプル&プロっぽい感じで気に入っています。

 

強調太文字を蛍光ペンにする

www.north-geek.com

カナダでは蛍光ペンは黄色が主流なので、その癖でイエローマーカーを使わせてもらっています。黄緑やピンクも可愛いです。

 

続きを読むボタン

georges.hatenablog.jp

現在ブログで使っている続きを読むボタンは、Georgeさんのものです。

はてなブログで開設することを決めたのは、この「急がば急いでまわれ!」がキッカケでした☆

 

www.ituore.com

続きを読むボタンを設置することで、トップページが少し軽くなること、記事が見やすくなることだけでなく、さらにグーグルからの評価がアップするらしいです。

 

グローバルメニュー

www.yukihy.com

グローバルメニューって、企業みたいなプロサイトにしかつけられないものだと思っていたので感動しました。Yukihyさんのサイトにはとてもお世話になっています。

 

記事下に関連記事を表示する

kakakakakku.hatenablog.com

色々試してみたのですが、現在のものはこのやり方でさせてもらいました。

サイトによって色々な表示のさせ方や置き方があるので、それぞれ見比べてみると雰囲気が変わるので面白いです。

 

「文中にアドセンスを入れる」を自動化する

uxlayman.hatenablog.com

毎回打ち込むのはメンドイと思う私にピッタリです。その他、サイドバーや他の場所に自動化して設置できるコードも書かれています。

 

SNSのシェアボタンをカスタマイズする

www.ituore.com

完全にコピペ利用させていただいています。記事の上下に置いていますがこのシェアボタンにカスタマイズがしたくて、検索して辿り着いたのが「いつ俺」さんでした。以降、オシャレで分かりやすいので、「いつ俺」さんにもよくお世話になっています。

 

サイドバーにSNSのフォローボタンを設置する

www.yukihy.com

フォローボタンがシンプルかつ可愛いので気に入っています。安定のYukihyさん☆

 

トップページに戻るボタン機能を設置

glory0301.hatenablog.com

以前は違うサイトさんからのものを使用していましたが、現在はこちらのものを使わせてもらっています。

画面をスクロールすると、右下の方に出てくる上向きの矢印です。このボタンを押すと一気に一番上まで戻ってくれます。便利ですね。

(このマークを見かけたことは何度もあったのですが、それまでは仕組みがわからず、なんだか怖くて触ったことがありませんでした(;'∀')へへ) 

ところで、トップに戻るボタンはfont awesomeからの記号だったんですね。それまでは、必死に上向き▲(三角)の記号を検索しまくっていたので、これも目からウロコでした。

font awesome:

fontawesome.io

 

スマホのデザイン

tsukuruiroiro.hatenablog.com

自分はほぼPCからしかブログを見ないのですが、ブログに遊びに来てくれる方のほとんどはスマホからのアクセスであるようです。そう考えると、スマホのカスタマイズはPC以上にとても大切ですね。

 

スマホの設定はまだあまりいじっていないので、今後ここに追加していこうと思います。

 

その他

カラーコード

www.colordic.org

 色のイメージがある場合はここから良さそうなのを選びます。

 

サイト内で使われている色を調べる

chrome.google.com

この色のコードって何だろう?って疑問に思うことはありませんか?そんな時におすすめなのが、この優秀なツールです。

これは気になったサイト内で使われている色に焦点を当てると、色コードを解析してくれるものです。Chromeに埋め込めるので、埋め込んでそのまま使っています。

知りたがりさんには、このツールはイチオシです☆

 

大切なこと

大切なことは、それぞれ「必ず動作を確認する」ことです。コードが生きていないのか、ブログのテーマが違うので合わないのかはわかりませんが、うまくできないことがちょくちょくあるからです。

うまくいくとメイン部分のコードは周りのコードと同じ色になります。

また、コードは決められた形のまま貼り付けないと正常通りに動作しないので、コピペしたときに貼り付けられた場所がズレてしまったら、他の周りにあるコードと同じ配列になるように整える必要があります。

わからない場合は、オリジナルサイトさんのコードを見ながら形を整えて、形状がオリジナルの完コピになるまで調整します。

それと、CSSを変更する前に記録を残しておくこともマスト。失敗経験多々ありです(;'∀') 

 

おわりに

 最近はCSSデザインにハマってきています。本屋さんに出かけては、CSSやHTMLについての本をチラ見することが趣味になりつつあります。数日前なんかは、カナダのとあるサイトで”ページのソースを表示”させて読んでいたら、文中に隠されたメッセージが浮き出てきて大興奮しました(*'▽')♪ 本気で勉強したいかもって思うほど楽しいです。

他にも思い出したり、新たに追加してカスタマイズに使わせてもらうことになったら、都度サイトのリンクを追加していこうと思います。