はてなブログを使ってる人必見。カスタマイズ参考記事一覧
こんにちは、桃太郎です！
今回は私がお世話になったはてなブログカスタマイズの記事をご紹介します。
本当は自分でhtmlやcssを書いてカスタマイズしてみたいなぁって思ってるんですが、４、５年前にたった1年くらいしか勉強してなかったので、出来上がってるhtmlのどこを編集したらどうなるっていうのはなんとなくわかるんですが、自分で作成するのはちょっと無理かな…と。
というわけで、必死こいて探しまくったカスタマイズ記事をほぼ自分用みたいな所がありますが、ここに一覧としてまとめておきますｗ
といっても、もなかさん（@monakablog）が教えてくれたカスタマイズ記事でほとんどカスタマイズしましたが…ｗ
了解です( ´∀｀)
— もなか@はてなブログヮー (@monakablog) 2017年8月2日
直接お教えしても良いんですが宣伝させてくださいwwhttps://t.co/VYQyXD9z6N記事表示
わかんなかったら聞いて頂いていいですよー！
スマホのカスタマイズはもなかさん（@monakablog）のブログを見て頂いた方が分かりやすいと思います。
カスタマイズ
ブログテーマは「Brooklyn」を使用しています。
PC表示、スマホ表示と分かれていますが、わたしがPC表示の時に参考にさせていただいた場合は「PC表示」、スマホ表示で参考にさせていただいた時に「スマホ表示」で掲載しています。
なので、レスポンシブ対応の分もあればスマホ非対応の分もあります。
気になる分は見てみて下さい^^
PC表示
ヘッダー画像
ヘッダー画像の周りに余白が入ってしまったのでこちらを参考に設定しました。
【ブログカスタマイズ】はてなブログのヘッダー画像の余白を非表示にする方法 - 月無ことのは日記
わたしのヘッダー画像は1000×500です。
グローバルメニュー
グローバルメニューはこちらを使用させていただきました。
CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life
こちらのグローバルメニュー、わたしはカテゴリを沢山並べるという方法で使用したくなかったので少し変更しました。
変更の仕方はまた別記事にまとめます。
プロフィール
プロフィールを大きくしたかったので、
はてなブログカスタマイズ！プロフィールを目立たせてアピール！ - One step at a time
を参考に変更しました。
わたしなりに修正しているので別記事にまとめました。
Twitterをサイドに埋め込む
サイドバーにTwitterのタイムラインを埋め込んでみた【はてなブログ】 - わたしのみち
サイドバーにツイッターを埋め込めるみたいなので、早速やってみました。
サイドバーにタブメニューを追加
サイドバーのタブメニューをインデックス風デザインにするCSS
タブメニューの方がすっきりしますよね。
SNSシェアボタン
コピペ一発！はてなブログのSNSシェアボタンをめっちゃオシャレにカスタマイズ！ - いつ俺〜いつから俺ができないと錯覚していた？〜
どう頑張っても「はてブ」のボタンが下にずれてしまってたんですが、このシェアボタンのみ綺麗に作動しました。
カエレバ
ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！ - Yukihy Life
こちらを使用させていただきましたが、PCでずれが発生してしまいましたのでこちらを参考に修正しました。
ヨメレバ、カエレバで表示のずれをCSSで修正する方法 - ミニマム コラム
見出し
コピペでどうぞ。はてなブログ用見出しカスタマイズをとりあえず25個ほど - つばさのーと
沢山のサンプルがあるのでどれにしようか迷いましたｗ
コピペで使えるのがありがたいですね。
ちなみに、上のブログはh3のみリセットのコードが載っていますが、コピーしてh4に書き換えると「中見出し」の見出しも変更できます。
あわせて読みたい
はてなブログの記事下に関連記事を表示する「あわせて読みたいG」 - 太陽がまぶしかったから
記事下に合わせて読みたいを追加する方法です。
パンくずリスト
コピペで簡単！はてなブログに『パンくずリスト』を導入してみた - 心はいつも悠々自適
パンくずリストはSEOにもいいみたいなので入れておきたいですね。
サイドバーにオリジナルバナー
はてなブログのサイドバーにオリジナルバナーを貼る方法 - だがそれがいい
丁寧に解説されててとても分かりやすかったです！
しかも、通常の画像とカーソルを画像に合わせた時の画像を変えられるのでリンクがあると分かりやすいです。
上記の記事では画像サイズが300×200になっているので、変更したい場合はcssの
width:300px; height:250px;
ここを、width（横）とheight（縦）の数値を変更してくださいね。
目次の表示・非表示
はてなブログの目次に表示・非表示の切り替えボタンをつけたよ - ボム君.com
今使っている目次のデザインで、シンプルに表示・非表示のボタンが設置できます！
簡単でコピペのみで設置でき、PC・スマホどちらも作動しました。※レスポンシブは分かりません。
スマホ表示
基本は最初に紹介したもなかさんのやつですが、一応ご紹介します。
目次・フッター・フッター見出し・検索ボックス・注目記事・上へ戻る
【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳
量多いですねｗ
沢山お世話になりました^^
トップページ・記事表示
はてなブログのスマホデザインを一瞬でおしゃれにカスタマイズする方法 - いつ俺〜いつから俺ができないと錯覚していた？〜
スマホ表示はこの二つでほぼ出来ましたｗ
後は細かい設定だけでしたね。
レスポンシブじゃない人
ちなみにレスポンシブではなくて、スマホとPC表示を分けてる方は、PC表示とスマホ表示両方設定しないといけません。
私も結構同じものをスマホとPC表示両方に貼っています。
簡単だし、PC表示さえいじればいいのでずっとレスポンシブでやってましたが、スマホのデザインに凝りたかったので、レスポンシブ解除しました。
まとめ
この記事のカスタマイズ一覧は随時いいものが見つかり次第追加していきます。
はてなブログはカスタマイズが楽しいですね！
見やすくて自分にあったカスタマイズを見つけてください^^
