はてなブログを使ってる人必見。カスタマイズ参考記事一覧

こんにちは、桃太郎です!

今回は私がお世話になったはてなブログカスタマイズの記事をご紹介します。

本当は自分でhtmlやcssを書いてカスタマイズしてみたいなぁって思ってるんですが、4、5年前にたった1年くらいしか勉強してなかったので、出来上がってるhtmlのどこを編集したらどうなるっていうのはなんとなくわかるんですが、自分で作成するのはちょっと無理かな…と。

というわけで、必死こいて探しまくったカスタマイズ記事をほぼ自分用みたいな所がありますが、ここに一覧としてまとめておきますw

といっても、もなかさん(@monakablog)が教えてくれたカスタマイズ記事でほとんどカスタマイズしましたが…w

こんにちは、桃太郎です! 今まで「Brooklyn」のレスポンシブで色々カスタマイズとかしていましたが、スマホのカスタマイズがなかなかうま...

スマホのカスタマイズはもなかさん(@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個ほど – つばさのーと

沢山のサンプルがあるのでどれにしようか迷いましたw

コピペで使えるのがありがたいですね。

ちなみに、上のブログはh3のみリセットのコードが載っていますが、コピーしてh4に書き換えると「中見出し」の見出しも変更できます。

あわせて読みたい

はてなブログの記事下に関連記事を表示する「あわせて読みたいG」 – 太陽がまぶしかったから

記事下に合わせて読みたいを追加する方法です。

パンくずリスト

コピペで簡単!はてなブログに『パンくずリスト』を導入してみた – 心はいつも悠々自適

パンくずリストはSEOにもいいみたいなので入れておきたいですね。

 サイドバーにオリジナルバナー

はてなブログのサイドバーにオリジナルバナーを貼る方法 – だがそれがいい

丁寧に解説されててとても分かりやすかったです!

しかも、通常の画像とカーソルを画像に合わせた時の画像を変えられるのでリンクがあると分かりやすいです。

上記の記事では画像サイズが300×200になっているので、変更したい場合はcssの

width:300px;
height:250px;

ここを、width(横)とheight(縦)の数値を変更してくださいね。

目次の表示・非表示

はてなブログの目次に表示・非表示の切り替えボタンをつけたよ – ボム君.com

今使っている目次のデザインで、シンプルに表示・非表示のボタンが設置できます!

簡単でコピペのみで設置でき、PC・スマホどちらも作動しました。※レスポンシブは分かりません。

スマホ表示

基本は最初に紹介したもなかさんのやつですが、一応ご紹介します。

目次・フッター・フッター見出し・検索ボックス・注目記事・上へ戻る

【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 – ひつじの雑記帳

量多いですねw

沢山お世話になりました^^

トップページ・記事表示

はてなブログのスマホデザインを一瞬でおしゃれにカスタマイズする方法 – いつ俺〜いつから俺ができないと錯覚していた?〜

スマホ表示はこの二つでほぼ出来ましたw

後は細かい設定だけでしたね。

レスポンシブじゃない人

ちなみにレスポンシブではなくて、スマホとPC表示を分けてる方は、PC表示とスマホ表示両方設定しないといけません。

私も結構同じものをスマホとPC表示両方に貼っています。

簡単だし、PC表示さえいじればいいのでずっとレスポンシブでやってましたが、スマホのデザインに凝りたかったので、レスポンシブ解除しました。

まとめ

この記事のカスタマイズ一覧は随時いいものが見つかり次第追加していきます。
はてなブログはカスタマイズが楽しいですね!
見やすくて自分にあったカスタマイズを見つけてください^^

 COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

スマホのレスポンシブをやめました!!

はてなブログ必見!簡単にh3見出しをh2に変更する方法

A8.netで自己アフィリやセルフバックが反映されない。原因と解決法は?

アクセス解析ツール【Ptengine】はアナリティクスよりも使いやすかった!

パソコンでサイトを見る時のスクロールはきちんとクルクルしてますか?(笑)

初はてなブックマーク新着エントリー入り!