はてなブログカスタマイズが全て分かるまとめ
こんにちは、nasustです。 はてなブログのカスタマイズなどの記事を毎回ググっていたので、まとめを作りました。 今後、新しいカスタマイズやテクニックを発見したら順次追加していきます。
ソーシャルボタン
- コピペで簡単!はてなブログのSNSシェアボタンをカスタマイズ | SHIROMAG
- http://www.daipanman.com/entry/2015/07/05/080000
- コピペOK!読者になるボタンやSNSフォローボタンのカスタムCSS
- はてなブログシェア数付きSNSボタンでさらにオシャレな吹き出しコードを追加です - Yukihy Life
- ガーリーなデザインのソーシャルシェアボタンのCSS はてなブログへコピペで使えます - Minimal Green
- コピペOK! 個性的なSNSボタン/シェアボタンのデザインまとめ | それからデザイン スタッフブログ
- cssで作るシェアボタンのデザインパターン36種類 – FOXISM
見出し
- コピペで簡単!CSSではてなブログの見出しをカスタマイズ! | SHIROMAG
- HTMLとCSSのコピペですぐに実装できる見出しデザイン14選 | UX MILK
- CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
- シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50
目次
- はてなブログの公式目次機能にちょっとコードを足してグッと使いやすくするカスタム - Yukihy Life
- http://kimix.hatenablog.com/entry/custom-index
文中で使える装飾テクニック
- 【はてなブログ】吹き出しで会話形式にするのをめっちゃ楽にしてみた | SHIROMAG
- CSSで作る!魅力的な引用デザインのサンプル30(blockquote)
- ブログで蛍光ペンのような色の付いた下線を引く方法
- LINE風の吹き出し会話が簡単にできるCSSを作ってみた(はてなブログ) - 夜中に前へ
読者になるボタン
パンくずリスト
- 【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました - 小さな星がほらひとつ
- 【利用不可】はてなブログでGoogleにパンくずリストを認識させるカスタマイズ - 太陽がまぶしかったから
グローバルメニュー
- CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life
- https://saruwakakun.com/html-css/reference/nav-drawer
- CSSでスマホ画面で横スクロールするレスポンシブ対応のメニューを作るカスタマイズ - Yukihy Life
アフェリエイト・アドセンス
- はてなブログで記事一覧ページにAdSenseを挟みこむカスタマイズ | ブログ実験室naelab
- ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ! - Yukihy Life
- Google検索結果での星表示にも対応させたレビューのまとめ表示カスタマイズ – FOXISM
関連記事
サイドバー
- はてなブログで複数のサイドバーモジュールをタブメニューにして回遊率アップを狙うカスタマイズ - Yukihy Life
- 【はてなブログ】サイドバーの一番下にあるモジュールを固定する方法 - 明日こそ、定時
その他のはてなブログカスタマイズ
- ページトップへ戻るスムーズスクロール(jQueryなし) - IMUZA.com
- はてなブログを音読するボタン - hitode909の日記
- ブロガー必見!アイキャッチ画像を緊急で差し換える方法 - はてな村定点観測所
- パクられた感があるキャッシュサイトに対抗するやつ - すなばいじり
- はてなブログのプロフィールアイコン表示を丸くする – FOXISM
- はてなブログ向け「404 Not Found」のカスタマイズ方法【404エラー】 - 非アクティビズム。
- ブログにあらゆる外部コンテンツを埋め込めるWebサービス「Iframely」の使い方 | Takumon Blog
- ブログ記事内にカード型のリンクを貼る方法3選 | DevelopersIO
Markdown
- はてなブログのMarkdownの書式まとめ - nasust life blog
- はてなブログでよく使うMarkdown記法(+はてなブログ記法)のまとめ - Noblesse Oblige 2nd
- ソースコードを色付けして表示する(シンタックスハイライト) - はてなブログ ヘルプ
SEO・ブログ論
- SEO スターター ガイド: 基本 | Google 検索セントラル | Google Developers
- 【保存版】Google Search Console(サーチコンソール)を使って、サイトを改善するためのガイド |SEO Japan by アイオイクス
- バズ部
- 過去の記事を「地層」にしよう! ブログの「初月率」を取得して改善に活かすには【小川卓のGoogleアナリティクスではてなブログ分析入門 第1回】 - 週刊はてなブログ
- 【保存版】だれでも簡単に検索流入記事を1位にさせる超具体的な方法 - かぜひぴBLOG
- はてなブログSEO対策~記事タイトル・目次・見出し・内部リンクなど【保存版】 - 羆の人生記
参考になるUX
- 多くのサイドバーが役に立っていない理由とは? | UX MILK
- シェアされやすいソーシャルボタンのデザインとは? | UX MILK
- アンダーラインと可読性:リンクをどのようにデザインするか? | UX MILK
- 読みやすさのデザイン備忘録|深津 貴之 (fladdict)|note
- http://www.okuni.me/entry/hatenablog-hard-to-read-cause
- http://tsukuruiroiro.hatenablog.com/entry/photoshop-design
- フラットなUI要素は、目につきにくく確信を持ちにくい – U-Site
- レビューブログに使ってほしい はてなブログカスタマイズ その1:良い点・悪い点のリスト – FOXISM
- 改行のはなし - はてな編集部ブログ「編む庭」
- アンダーラインと可読性:リンクをどのようにデザインするか? | UX MILK