庭を歩いてメモをとる

おもしろいことや気になることのメモをとっています。

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

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

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


不要部分を非表示に

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

説明用ダミー

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

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

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

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


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

ボタン等の設置

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

f:id:yositeru:20160807132530j:plain

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

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

(2)グローバルナビ

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

(3)ヨメレバ等のCSS

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

その他

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

PCからスマホ用画面

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

サイトマップ送信

Google検索に自分のサイトを見つけてもらいやすくするには「サイトマップ」をGoogleに送信するのですが、そのサイトマップファイル名についてのTips。
はてなブログのサイトマップは「sitemap_index.xml」だった件 - いつもマイナーチェンジ!



今後も、参考になる情報があれば随時追加できればと思っています。


(広告)