ネットサービス/はてな/はてなブログ/デザインのカスタマイズ - そっとプロジェクト＠Ｗｉｋｉ

はてなブログのデザインのカスタマイズ

---

目次

---

CSSカスタマイズの基本資料

• HTML構造 - tikeda's blog
  • 11/7時点でのHTML構造。CSSカスタマイズの参考資料。
• はてブロのCSSメモ Aero編 - 癒しの光源
• はてなブログのデザインテーマ別表示領域一覧 - 正衛門

カスタマイズの注意点

CSSに全角日本語を使用すると正しく出力されない不具合

【追記】2012/7/11、修正されました

• デザイン設定ページの「デザインCSS」内で日本語が書けない不具合を修正しました

---

• アクセス解析機能を強化しました - はてなブログ開発ブログ

Okome おこめ

はてなブログ せっかく招待いただいたのではじめてみたんですけど 予想を上回るβっぷりにびっくりしてます http://okome.hatenablog.com/　 とりあえず管理画面のCSSいじくれるところに.profile-description {display:none;} を追加で同じ文章が二つ表示されてる状態からは脱しましたが ここに日本語で説明文とか入れるととたんに CSS読まなくなるというのに気がつくまでに時間がかかったりしました （2011/11/22 10:19:20）

link

CSSに全角日本語を使用すると正しく出力されない不具合が発生しております。近日中に修正予定です。ご不便をおかけして申し訳ございません。

---

• 「デザイン設定」「デザインCSS」に /* ブログタイトル */ #title a{color:#3d88ff;} って感じで全角のコメントを…｜フィードバック｜はてなブログ (beta)

はてなダイアリーの時のようにデザインを管理画面で書いたCSS等をテーマとして管理できないの？

したいです

---

• はてなダイアリーの時のようにデザインを管理画面で書いたCSS等をテーマとして管理できるようにしてほしいです。｜フィードバック｜はてなブログ (beta)

ブログテーマの配布

• theme.hatenablog.com
  • 非公式ブログテーマ置き場作った - Uedayworks::HatenaBlog
  • 非公式ブログテーマ置き場 - Ueday::HatenaBlog
• 140字以上書けないブログテーマ作った - Ueday::HatenaBlog
• ブログテーマ作った - Ueday::HatenaBlog
• 物書きのための非公式ブログテーマ - nitro_idiot's diary
  • 縦書き表示。「最新のGoogle Chrome、Safari、IE9で縦書きで表示され、Firefox、Opera、IE6-8では横書きで表示されます」

カスタマイズ事例

• はてなブログのデザインカスタマイズに挑戦！ - masabossa's diary
• CSSを弄ってみる - 4sk :: blog :: (beta)
• はてなブログのデザインを少しだけいじくったのでCSSをさらしてみる - algonrithmのはてなブログですか？
• はてブロカスタマイズ - murmure

• グローバルヘッダの文字色を変える - Ueday::HatenaBlog
• 背景色をランダムにする - 笨倪併笳｡笊ｹ笨・http://r7kamura.hatenablog.com/entry/2011/11/18/220757
  • ランダムに画像を表示
• 水平線まで何ピクセル？ - 笨倪併笳｡笊ｹ笨・http://r7kamura.hatenablog.com/entry/2011/11/12/045548
  • 水平線や見出しにCSSのbefore擬似要素で装飾
• はてなブログの広告を薄くする方法 - $takc923-
  • はてなブログの広告を目立たなくする方法 - $takc923-

サイドバー

• 「サイドバー編集機能」を追加しました - はてなブログ開発ブログ

• module.hatenablog.com
  • 非公式ウィジェット置き場作った - Uedayworks::HatenaBlog

• サイドバーが書き込めるようになった - KLE4ｃのとりあえずHatenaBlogテスト日記
• サイドバー編集機能の安定した使い方 - flandlescarlet's diary【はてなblogマスターへの路】
• はてなブログサイドバーにカテゴリ一覧を自動表示する - カワイイはつくれる
• 「Zenback」をはてなブログのサイドバーに組み込む方法 - nanapi Web
• サイドバー編集機能良い - hitode909の日記
  • はてなスターをユーザーアイコンにするCSS
• ブログ勝手に改造計画。 - Web Days（´ω｀）
  • サイドバーのプロフィールに、「ブログの説明文」とは別の文章を表示させる方法、など。
• 履歴を作ってみた。 - Web Days（´ω｀）
  • サイドバーに、最近の記事一覧を表示するスクリプトを設定。Chromeでは動作しているが、Operaでは動作しない。
• はてなブログ (新ブログ) にGoogle Analyticsを設定する 設定は一度でOK - A Way of Code
• はてなブログでRSSアイコンを設置する方法 - Banguardサイト
• はてなブログにFacebookのRecommendations Barを設置する - sessanの日記

• ブログのサイドバーの必要性 - ARTIFACT@はてブロ

ブログタイトル

• はてなブログで、ロゴタイトルを設定したい - MoloTech Blog
• はてなブログのタイトルにWeb Fontを使う - Sun Rise

文字フォント

• デコもじ使うとユルくておもろい - kyabana's blog
• 外部ドメインにあるwebfontを使う - tikeda's blog
• Aldrich - Ueday::HatenaBlog

はてなスター

CSSをすごく頑張って書いていただくしかないです。そのうちテンプレート編集できるようにしたいです。

---

• スターがもっと目立つようにタイトルの横に出すにはどうしたらいいですか｜フィードバック｜はてなブログ (beta)

• はてなスターにユーザーアイコンつける - hitode909の日記
• 〔ライフハック〕はてなスターを肉にしませんか？ - nikuriaのブログ
• はてなスターの位置が上下にずれる - 泡沫
• スターボタンの表示を前のに戻す・アイコン表示編 - Quilt
  • ユーザーアイコン表示を無効にする

コメント欄

• コメントをTooltipのように表示するCSS - tikeda's blog
• コメント欄を消す - Ueday::HatenaBlog

ソーシャルメディア

• はてなブログにFacebookコメントを表示する - chris4403's blog

• Zenbackいれてみた、けど入らなかったよ。 - @kaoritter ブログ はてな支店
• 「Zenback」をはてなブログのサイドバーに組み込む方法 - nanapi Web

---

秀逸なデザインのブログ事例

• くらげごはん。
  • Webでの文字のレイアウトについて - 2011年に試してみたこと - - くらげだらけ（くだくらげのBLOG）
  • いま，見ておきたいウェブサイト：第78回　Mercedes-Benz - the new A-Class - 2012，くらげごはん。，Homeless Hotspots｜gihyo.jp … 技術評論社

はてなブログでCSSを弄り倒すとここまで来るのかという例。WebKit系ブラウザ推奨。: トップ - くらげごはん。 - bit.ly/xOOZBj 記事は縦書きで書いてあってもはや料理雑誌状態→ bit.ly/HdMemO

— ぷにぷになかざんさん (@Nkzn) 3月 29, 2012

はてブロに用意されてるテーマが少ないのはきっと「JSとCSS使えるようにしてやったんだから自前でおもろいサイト作ってみろや」という運営側からのメッセージなのではないかと考えさせられる程度にはくらげごはんすごい。 kurage.hatenablog.com

— ぷにぷになかざんさん (@Nkzn) 6月 3, 2012

---