こんにちは、nasustです。 はてなブログのカスタマイズなどの記事を毎回ググっていたので、まとめを作りました。 今後、新しいカスタマイズやテクニックを発見したら順次追加していきます。
- ソーシャルボタン
- 見出し
- 目次
- 文中で使える装飾テクニック
- 読者になるボタン
- パンくずリスト
- グローバルメニュー
- アフェリエイト・アドセンス
- 関連記事
- サイドバー
- その他のはてなブログカスタマイズ
- Markdown
- SEO・ブログ論
- 参考になるUX
- 素材
- 関連記事
ソーシャルボタン
- コピペで簡単！はてなブログのシェアボタンをカスタマイズ - NO TITLE
- おしゃれなシェアボタンをCSS＆Webフォントで作ってみた【はてなブログのPC＆スマホ用】 - 技術を磨くだいぱんまん
- コピペOK！読者になるボタンやSNSフォローボタンのカスタムCSS | OHAMAstyle
- はてなブログシェア数付きSNSボタンでさらにオシャレな吹き出しコードを追加です - Yukihy Life
- ガーリーなデザインのソーシャルシェアボタンのCSS はてなブログへコピペで使えます - Minimal Green
- コピペOK! 個性的なSNSボタン／シェアボタンのデザインまとめ | それからデザイン スタッフブログ
- cssで作るシェアボタンのデザインパターン36種類 - FOXISM
見出し
- コピペで簡単！CSSではてなブログの見出しをカスタマイズ！ - NO TITLE
- HTMLとCSSのコピペですぐに実装できる見出しデザイン14選 | UX MILK
- CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
- シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
目次
- はてなブログの公式目次機能にちょっとコードを足してグッと使いやすくするカスタム - Yukihy Life
- はてなブログの目次をシンプル＆おしゃれにカスタマイズ / サンプルCSS付き！ - THE LITTLE ESCAPE
文中で使える装飾テクニック
- 吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 - NO TITLE
- CSSで作る！魅力的な引用デザインのサンプル30（blockquote）
- ブログで蛍光ペンのような色の付いた下線を引く方法
- LINE風の吹き出し会話が簡単にできるCSSを作ってみた（はてなブログ） - 夜中に前へ
読者になるボタン
- コピペOK！読者になるボタンやSNSフォローボタンのカスタムCSS | OHAMAstyle
- はてなブログの読者登録ボタンの設置やカスタマイズ - NO TITLE
- 読者数表示あり！読者になるボタンのカスタマイズ方法 - あいすのブログ
パンくずリスト
- 【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました - 小さな星がほらひとつ
- はてなブログでGoogleにパンくずリストを認識させるカスタマイズ - 太陽がまぶしかったから
グローバルメニュー
- CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life
- CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）
- CSSでスマホ画面で横スクロールするレスポンシブ対応のメニューを作るカスタマイズ - Yukihy Life
アフェリエイト・アドセンス
- はてなブログで記事一覧ページにAdSenseを挟みこむカスタマイズ - naenote.net
- ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！ - Yukihy Life
- Google検索結果での星表示にも対応させたレビューのまとめ表示カスタマイズ - FOXISM
関連記事
サイドバー
- はてなブログで複数のサイドバーモジュールをタブメニューにして回遊率アップを狙うカスタマイズ - Yukihy Life
- 【はてなブログ】サイドバーの一番下にあるモジュールを固定する方法 - 明日こそ、定時
その他のはてなブログカスタマイズ
- ページトップへ戻るスムーズスクロール（jQueryなし） - IMUZA.com
- はてなブログを音読するボタン - hitode909の日記
- ブロガー必見！アイキャッチ画像を緊急で差し換える方法 - はてな村定点観測所
- パクられた感があるキャッシュサイトに対抗するやつ - すなばいじり
- はてなブログのプロフィールアイコン表示を丸くする - FOXISM
- はてなブログ向け「404 Not Found」のカスタマイズ方法【404エラー】 - 非アクティビズム。
Markdown
- はてなブログのMarkdownの書式まとめ - nasust blog
- はてなブログでよく使うMarkdown記法（＋はてなブログ記法）のまとめ - Noblesse Oblige 2nd
- ソースコードを色付けして表示する（シンタックスハイライト） - はてなブログ ヘルプ
SEO・ブログ論
- 検索エンジン最適化（SEO）スターター ガイド - Search Console ヘルプ
- 【保存版】Google Search Console（サーチコンソール）を使って、サイトを改善するためのガイド | SEO Japan – アイオイクスによる海外最新SEO情報ブログ
- バズ部
- 過去の記事を「地層」にしよう！ ブログの「初月率」を取得して改善に活かすには【小川卓のGoogleアナリティクスではてなブログ分析入門 第1回】 - 週刊はてなブログ
- 【保存版】だれでも簡単に検索流入記事を1位にさせる超具体的な方法 - かぜとなれ
- はてなブログSEO対策～記事タイトル・目次・見出し・内部リンクなど【保存版】 - ポジ熊の人生記
参考になるUX
- 多くのサイドバーが役に立っていない理由とは？ | UX MILK
- シェアされやすいソーシャルボタンのデザインとは？ | UX MILK
- アンダーラインと可読性：リンクをどのようにデザインするか？ | UX MILK
- 読みやすさのデザイン備忘録｜深津 貴之 (fladdict)｜note
- 「うわっ…はてなブログ、読みにくすぎ…！」最大の原因はコレ - オークニズム
- どのブログよりも分かりやすく読み手にやさしいサイトを作るために - LITERALLY
- フラットなUI要素は、目につきにくく確信を持ちにくい – U-Site
- レビューブログに使ってほしい はてなブログカスタマイズ その1：良い点・悪い点のリスト - FOXISM
- 改行のはなし - はてな編集部ブログ「編む庭」
素材
- Free stock photos · Pexels
- Beautiful Free Images | Unsplash
- おしゃれなフリー写真素材｜GIRLY DROP(ガーリードロップ)
- ぱくたそ-フリー素材・無料写真ダウンロード
- 写真素材なら「写真AC」無料（フリー）ダウンロードOK
関連記事
3 users
29 users
2 users
8 users
1 users
2 users
3 users
2 users
7 users
