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

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

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

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

2015.08.07

テーマ

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

参考

はてなブログテーマ「Innocent」を公開しましたMoonNote

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

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

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

参考

はてなブログの CSS 編集を Dropbox で高速化しようMoonNote

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

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

参考

はてなブログをカスタマイズしてる人向け。jQueryの読み込みを速くするためにコードを変えてみたNO TITLE

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

Innocent限定のカスタマイズ

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

参考

はてなブログテーマ「Innocent」のカスタマイズ(ナビゲーションバー編)MoonNote

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

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

参考

はてなブログテーマ「Innocent」のカスタマイズ(続きを読むボタン編)MoonNote

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

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

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

参考

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

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

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

参考

はてなブログのグローバルメニューをカスタマイズ!Font Awesomeでアイコン画像を表示してみたいつも向かい風

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

見た目の変更

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

参考

はてなブログのフォントをLIGっぽくカスタマイズする方法おかろぐ

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

見出しの変更

参考

コピぺでOK!CSSのみで記事タイトルのデザインをおしゃれにする方法15【はてなブログカスタマイズ】North-Geek

参考

コピペでOK!CSSのみで見出しをおしゃれにする方法10選【はてなブログカスタマイズ対応】North-Geek

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

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

参考

コピぺでOK!CSSのみで強調太文字のデザインを蛍光ペン風にする方法10色【はてなブログカスタマイズ対応】North-Geek

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

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

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

参考

画像でなくcssで背景をつけてブログ記事を一気に読みやすくする方法Yukihy Life

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

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

参考

はてなブログデザインカスタマイズ | タイトル・画像のセンタリング・サイドバーや見出しなどYukihy Life

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

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

参考

【CSS】プロフィール欄をちょっとおしゃれにカスタマイズです。【html】えむしてっく

参考

【CSS】読者になるボタンをちょっとおしゃれにカスタマイズ【html】えむしてっく

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

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

TOPに戻るボタンを追加

参考

はてなブログにTOPに戻るボタンを追加する方法TASK NOTES

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

パンくずリストの表示

参考

はてなブログでGoogleにパンくずリストを認識させるカスタマイズ太陽がまぶしかったから

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

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

参考

はてなブログのシェア数付きソーシャルボタンカスタマイズでフラットボタンのコピペコードを追加です。(vol2)Yukihy Life

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

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

コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズYukihy Life

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

参考

コピペOK!読者になるボタンやSNSフォローボタンのカスタムCSS急がば 急いでまわれ!

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

参考

【CSS】急がば急いで回れ、さんのSNSボタンの着替えを作りましたえむしてっく

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

参考

はてなブログに11種類から選べるSNSフォローボタンをコピペ+αで実装するカスタマイズいつ俺〜いつから俺ができないと錯覚していた?〜

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

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

参考

サイドバーにTwitterのタイムラインを埋め込んでみた【はてなブログ】わたしのみち

参考

一瞬で出来た!Instagramの写真をはてなブログのサイドバーに表示する方法いつも向かい風

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

参考

はてなブログの公式目次機能にちょっとコードを足してグッと使いやすくするカスタムYukihy Life

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

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

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

参考

はてなブログで記事下に関連記事を出すカンタンな方法ボクココ

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

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

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

参考

はてなブログの Amazon 商品紹介をちょっぴり改善するカスタマイズMoonNote

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

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

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

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

参考

「アプリーチ」をCSSでカスタマイズ iPhoneアプリとAndroidアプリを同時に紹介できるブログパーツYukihy Life

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

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

参考

【CSS】コピペするだけ!押した事がわかるエフェクト付きののヨメレバ・カエレバ・トマレバえむしてっく

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

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

参考

【CSS】コピペするだけ!シンプルなデザインのヨメレバ・カエレバ・トマレバえむしてっく

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

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

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

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

参考

はてなブログ無料版でトップページ(表紙)に記事一覧を表示させる方法【Javascriptで転送(リダイレクト)】広汎性発達障害の女がたまに毒を吐くブログ

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

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

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

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

参考

はてなブログテーマ「Innocent」に「おすすめ記事リスト機能」を追加しましたMoonNote

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

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

最後に

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

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

コメントを残す