はてなブログのデザインカスタマイズ参考リンク集

はてなブログを使い出して約1年。デザインをちょこちょこいじってきましたが、わりと簡単にでき、自分でも実際に活用させてもらっているデザインカスタマイズ方法について列挙してみます。リンク先のブログ作者の方々にお礼申し上げます。

なお、一部の方法は有料サービス「はてなブログPro」のみ対応しています。ご了承ください。
参考：はてなブログPro - はてなブログ

不要部分を非表示に

これごちゃごちゃするからなくていいのに、と感じていたパーツを非表示にする方法です。

(4)記事一覧の「コメントを書く」非表示

トップページに記事一覧を表示させても記事毎にいちいち「コメントを書く」ボタンが表示されてしまうのをやめさせる方法。
はてなブログトップページでコメント欄を非表示にする（追記あり） - やがて煙になる日まで

(5)はてなキーワードリンク非表示

はてなブログProだと、はてなブログに自動的につく「キーワードリンク」をなくせますが、これはProユーザーになる前のエントリには適用されません。それを過去エントリも含めて実現する方法です。
はてなブログの自動で勝手につくキーワード下線とリンクを消す - AIUEO Lab2

以下は、スマートフォンでの表示について。

(6)スマホ不要部分非表示

はてなブログのスマートフォン表示から不要な要素を削除する方法 - またろぐ

(7)スマホプロフィール非表示

【はてなブログ】スマホ用ページ下部分のプロフィール（id）とかを非表示にしてみました - チップの日常

ボタン等の設置

今度は、ボタン等を増やしたり、見栄えをよくする方法。

f:id:yositeru:20160807132530j:plain

(1)見出しとヘッダーの変更

はてなブログProを使えばヘッダーを消せますが、これはPC版のみ。スマートフォンでも消せる方法がこちらにあります。他にもいろんなTipsがあるブログです。
はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 - Literally

(2)グローバルナビ

ブログタイトル下のナビゲーションボタン（カテゴリーやおすすめ記事へのリンク等で使用されることが多いです）の設置方法。
はてなブログのスマホ表示にグローバルナビゲーションを設置する - AIUEO Lab2

(3)ヨメレバ等のCSS

ヨメレバ／カエレバは、それぞれ本とモノを紹介する際、複数のアフィリエイトリンクを生成できるサービスです。これがあると、ブログ読者さんはブログ経由で本やモノを買うときお店を選ぶことができます。amazonならKindleですぐ読めるからとか、ポイントためてるから楽天がいいとか。
書籍紹介ブログパーツヨメレバ／商品紹介ブログパーツカエレバ
このリンクのデザインをカスタマイズする方法。
コピペ一発！はてなブログでカエレバ・ヨメレバをオシャレにカスタマイズ！ - いつ俺〜いつから俺ができないと錯覚していた？〜

(4)シェアボタン

エントリをSNS等にシェアするボタンのカスタマイズ。
コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズ - Yukihy Life
はてなブログシェア数付きSNSボタンカスタマイズで3D風ボタンコピペコードを追加です - Yukihy Life

(5)「コメントを書く」ボタン

はてなブログコメントを書くをカスタマイズしてみた - 100Buck$

その他

次の方法も参考にさせていただています。

PCからスマホ用画面

Chromeには、PCサイトの任意の部分を右クリックし「検証」を選ぶと、その部分のソースが見られます。この機能があるとCSSでデザインをいじるときに役立つのですが、それをPCのスマホ用画面でも見られるようにする方法。
PCからスマホ用ページの閲覧＆ソースを見る方法｜Chromeの拡張機能を使用 - チップの日常