はてなブログカスタマイズ備忘録改訂版

スポンサーリンク

この記事は2017.02.28現在のものです。
ひとまずカスタマイズが落ち着いたので、紹介する順番なども変更しています。

今まで使っていたテーマと同じ作者の新しいテーマに変えてみたので、別にエントリーをあげました。
以前のカスタマイズ備忘録は下のリンクからどうぞ。

はてなブログカスタマイズ備忘録

2015.08.07

テーマ

以前はBlankというテーマを使っていました。
今回は同じ作者のInnocentというテーマに変えました。

そのままでもシンプルで使いやすいですし、カスタマイズもしやすいのでオススメです。

スポンサーリンク

サイトの読み込みをはやくするためにしたこと

CSSの編集をDropboxで高速化する

CSSをちょっと手直ししたいだけなのにいちいちダッシュボードから編集するのって面倒ですよね。
それを解消してくれるのがこちらの方法。
カスタマイズというよりはTipsですね。
普段からDropboxを使ってる方なら簡単に真似できると思います。

jQueryの読み込みをはやくする

読み込みをはやくする方法はいくつかありますが、今回はこちらの方法にしてみました。

Innocent限定のカスタマイズ

Innocentにナビゲーションバーを設置する

Innocentでナビゲーションバーを設置する方法です。
コピペで簡単にできます。

Innocentの続きを読むボタンを変更

現在はトップページを一覧表示にしているので、続きを読むボタンを使うことはほぼないのですが、8番のアイコンを表示するカスタマイズを施しています。

現在は普通にトップページが表示されていますので、続きを読むのボタンも確認していただけると思います。

InnocentおよびBlankでパンくずリストの ”>” を正しい位置に表示する

公式ではないパンくずリストを使っている場合、予期しないところにまで記号が入ってしまうため、それを回避する方法です。

Innocentのナビゲーションバーにアイコンを表示する

Innocentを例に紹介してくれてますが、他のテーマでももちろん使えます。
トップカテゴリにはそのカテゴリにあったアイコンを、サブカテゴリには矢印のアイコンを付けることによって、スマホでも見やすくなっていると思います。

スポンサーリンク

見た目の変更

英字フォントをGoogle Fontsへに変更

こちらを参考にGoogle Fontsの「Quicksand」を導入しました。
ブログタイトルの文字も少し大きくしたらいい感じになりました。

見出しの変更

こちらの記事を参考にエントリーやサイドバーの見出しをいろいろ変更しています。
id:northgeekさんのサイトはシンプルですごく好みです♪

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

bタグを使って文字を強調したときに蛍光ペンでマーカーを引いたように見せるカスタマイズです。
今はグレーにしていますが、時々色を変えるかもしれません。

アクアマリンに変えました。

CSSで囲み線をつけて文章を強調する

こちらを参考に注意書きを細い枠で囲むようにしました。

トップ画面でのフッターを消去

トップ画面でのフッターが表示されるのが邪魔なので、こちらを参考に表示を消しています。

プロフィール欄をちょっとおしゃれに

こちらのプロフィールと読者ボタンをまんま使わせていただきました。
動きが面白いので、いろいろ遊んでみてくださいね♪

ちょっと便利なカスタマイズ

TOPに戻るボタンを追加

色をサイトに合わせた以外はまんまコピペですw

パンくずリストの表示

公式でもパンくずリストが表示できるようになりましたが、こちらの方がカテゴリの階層化ができたり、見た目がコンパクトになったりと便利なので、引き続きこちらを使っています。

シェアボタンとフォローボタン

どちらも今までと見た目を少し変えていますがやってることは今までと全く一緒です。
できればシェアボタンもモノトーンに変えたいなぁ。

いままでフォローボタンはこちらのゆきひーさんのを使っていましたが、今回プロフィールとなじませるために違うのに変えました。

新しく導入したのはこちら。

見た目はこちらでお着替えしました。

サイドバー用のフォローボタンをもう一つ

Instagramのフォローボタンも欲しかったので、TwitterとInstagramのウィジェットの間にフォローボタンを入れました。
見た目は最初に導入したフォローボタンに合わせてます。

ウィジェットの貼り付け方は以下のエントリーを参考にさせていただきました。

公式の目次機能をちょっと便利に

こちらを参考にクリックしたら目次が表示されるようにしました。

目次の枠の色を変えて更に見やすくしました。

サイドバーの関連記事を記事下に表示する

これはシンプルでいいですねー。
見た目をサイドバーと合わせてあげれば、スマホで見たときも違和感がないですし。
いままではあわせて読みたいGを使っていたんですが、こちらの方がシンプルで好みです。
設置も簡単ですしね。

スポンサーリンク

商品やアプリを紹介するあれこれのカスタマイズ

はてなブログの商品紹介の表示をちょっとだけ変えてみる

いままではカエレバとヨメレバを使っていたんですが、テーマを変えるたびに表示が崩れるのが気になったのと、表示をシンプルにしたいというのがあって、公式の商品紹介に変えてみました。
リンクの色は変えていませんが、Amazonのアイコンが表示されるようにしています。

ただ、これ1つ難点があって、楽天の商品にもAmazonのアイコンが表示されてしまうんですよね(;´∀`)
はてなさん、標準で使えるアイコンに買い物かごのアイコンを追加して下さい。
お願いします!

現在はリンクの色も変えています。
このカスタマイズ、楽天どころか食べログやぐるなびの店舗紹介にもAmazonのアイコンが表示されてしまいます。
楽天はカエレバに変更、食べログについてはサイトからの貼り付けだと表示が気に入らないので、ぐるなびのサイトから貼れるものはサイトから貼り付け、ぐるなびのサイトに掲載されていない店舗は、HPがある場合のみ店舗HPにリンクを貼るよう修正しました。
随時Amazonのリンクもカエレバ・ヨメレバに移行します。
はてなの公式の機能でAmazonの商品しか紹介しない方には、表示もきれいですしいいカスタマイズだと思います。

アプリーチの見た目を変更

スマホアプリの紹介をする時はアプリーチというサイトからコードを引っ張ってきているので、こちらを参考に表示をカスタマイズしました。

ヨメレバ・カエレバ・トマレバのカスタマイズ

こちらもid:mshitechさんのカスタマイズです。
構造にflexboxを採用しているため、幅が変わってもデザインが崩れません。
見た目はAmazonやアプリーチに合わせてるので、シャドーやposted with~の背景部分の色は消してます。

もっとシンプルなのがいい方は、こちらもあります。

楽天からリンクを引っ張ってきたものから、順次こちらに変えていく予定です。

導入していたけどはずしたもの

下の2つは表示が重くなったり、URLが変わってしまって気持ち悪かったためやめてしまいました。

トップページに記事一覧を表示させる

私のエントリーは長いのが多く続きを読むを使っても見た目があまりスッキリしないので、こちらを参考にトップページに記事一覧を表示させるようにしました。

現在は通常の表示に戻しました。

これ、トップページからアーカイブページにリダイレクトするスクリプトを仕込んでいるだけなので、SEO的には評価がよろしくないかも(私は気にしてないのでどーでもいいですw)ということと、ブックマークがアーカイブページになってしまうのと、表示件数を50件から変更できないというデメリットがあるので、使う時は自己責任でお願いします。

Innocentのヘッダー下におすすめ記事リストを追加する

幅いっぱいに表示かつ、タイトルを一行で表示するようカスタマイズしています。
スマホだと見えないので、ぜひPCかタブレットでチェックして見てくださいね。

表示が遅くなったり、見た目がごちゃついてしまうのが嫌で結局外してしまいました。

最後に

やっつけでカスタマイズしたので、見た目に納得がいっていないところも多々ありますが、その辺はちょこちょこ手直ししていこうかなぁと思っています。
Innocentのテーマを使っている間は随時こちらに追記していきますのでよろしくお願いします。

カスタマイズはこれでだいたい形になったかなと思うので、変えるとしたら見た目があまり変わらず表示がはやくなるものに入れ替えるぐらいだと思います。
あとは久しぶりにGoogleアドセンスと格闘してみようかなと思ってます。
相変わらず表示される気配はありませんが…。

スポンサーリンク

\当サイトオススメのテーマ/

\当サイトおすすめのサーバー/

コメントを残す

ABOUTこの記事をかいた人

1年半ぶりにはてなブログからWordPressに戻ってきました。 現在、働く3児の母/スプラトゥーンウデマエB帯/へっぽこポケモントレーナー(Not ポケモンGO)

詳しいプロフィールはこちらからどうぞ。→https://love-2nd.net/about