atwiki-logo
  • 新規作成
    • 新規ページ作成
    • 新規ページ作成(その他)
      • このページをコピーして新規ページ作成
      • このウィキ内の別ページをコピーして新規ページ作成
      • このページの子ページを作成
    • 新規ウィキ作成
  • 編集
    • ページ編集
    • ページ編集(簡易版)
    • ページ名変更
    • メニュー非表示でページ編集
    • ページの閲覧/編集権限変更
    • ページの編集モード変更
    • このページにファイルをアップロード
    • メニューを編集
    • 右メニューを編集
  • バージョン管理
    • 最新版変更点(差分)
    • 編集履歴(バックアップ)
    • アップロードファイル履歴
    • ページ操作履歴
  • ページ一覧
    • ページ一覧
    • このウィキのタグ一覧
    • このウィキのタグ(更新順)
    • このページの全コメント一覧
    • このウィキの全コメント一覧
    • おまかせページ移動
  • RSS
    • このウィキの更新情報RSS
    • このウィキ新着ページRSS
  • ヘルプ
    • ご利用ガイド
    • Wiki初心者向けガイド(基本操作)
    • このウィキの管理者に連絡
    • 運営会社に連絡(不具合、障害など)
そっとプロジェクト@Wiki
  • ウィキ募集バナー
  • 目安箱バナー
  • 操作ガイド
  • 新規作成
  • 編集する
  • 全ページ一覧
  • 登録/ログイン
ページ一覧
そっとプロジェクト@Wiki
  • ウィキ募集バナー
  • 目安箱バナー
  • 操作ガイド
  • 新規作成
  • 編集する
  • 全ページ一覧
  • 登録/ログイン
ページ一覧
そっとプロジェクト@Wiki
  • 新規作成
  • 編集する
  • 登録/ログイン
  • 管理メニュー
管理メニュー
  • 新規作成
    • 新規ページ作成
    • 新規ページ作成(その他)
      • このページをコピーして新規ページ作成
      • このウィキ内の別ページをコピーして新規ページ作成
      • このページの子ページを作成
    • 新規ウィキ作成
  • 編集
    • ページ編集
    • ページ編集(簡易版)
    • ページ名変更
    • メニュー非表示でページ編集
    • ページの閲覧/編集権限変更
    • ページの編集モード変更
    • このページにファイルをアップロード
    • メニューを編集
    • 右メニューを編集
  • バージョン管理
    • 最新版変更点(差分)
    • 編集履歴(バックアップ)
    • アップロードファイル履歴
    • ページ操作履歴
  • ページ一覧
    • このウィキの全ページ一覧
    • このウィキのタグ一覧
    • このウィキのタグ一覧(更新順)
    • このページの全コメント一覧
    • このウィキの全コメント一覧
    • おまかせページ移動
  • RSS
    • このwikiの更新情報RSS
    • このwikiの新着ページRSS
  • ヘルプ
    • ご利用ガイド
    • Wiki初心者向けガイド(基本操作)
    • このウィキの管理者に連絡
    • 運営会社に連絡する(不具合、障害など)
  • atwiki
  • そっとプロジェクト@Wiki
  • ネットサービス
  • はてな
  • はてなブログ
  • デザインのカスタマイズ

そっとプロジェクト@Wiki

デザインのカスタマイズ

最終更新:2012年02月20日 18:10

sotto_project

- view
管理者のみ編集可

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


目次
  • CSSカスタマイズの基本資料
  • カスタマイズの注意点
    • CSSに全角日本語を使用すると正しく出力されない不具合
    • はてなダイアリーの時のようにデザインを管理画面で書いたCSS等をテーマとして管理できないの?
  • ブログテーマの配布
  • カスタマイズ事例
    • サイドバー
    • ブログタイトル
    • 文字フォント
    • はてなスター
    • コメント欄
    • ソーシャルメディア
  • 秀逸なデザインのブログ事例

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

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

カスタマイズの注意点

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

【追記】2012/7/11、修正されました
  • デザイン設定ページの「デザインCSS」内で日本語が書けない不具合を修正しました


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



imageプラグインエラー : 画像を取得できませんでした。しばらく時間を置いてから再度お試しください。
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

  • サイドバーが書き込めるようになった - KLE4cのとりあえず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








「デザインのカスタマイズ」をウィキ内検索
LINE
シェア
Tweet

[Amazon商品]


そっとプロジェクト@Wiki
記事メニュー


メニュー

  • トップページ
  • このサイトについて
  • 管理人へ連絡


特集記事

  • ストライクウィッチーズ特集
  • iPhone特集


アニメ

  • 東のエデン
  • イヴの時間
  • サマーウォーズ
  • 閃光のナイトレイド
  • ストライクウィッチーズ
  • 星を追う子ども

映画

ドラマ

  • SPEC

漫画

読書

  • 戦争を読む
  • 2010年夏の課題図書
  • 2009年秋の課題図書


ハードウェア

  • 使用マシン
  • 使用周辺機器

モバイル

  • iPhone
  • WindowsMobile
  • ウィルコム
  • 紙

ソフトウェア

  • 常用ツール
    • Opera
    • Chrome
  • スクリプト
    • JavaScript
    • 日本語プログラム言語「なでしこ」


ネットサービス

+ はてな
  • ダイアリー
  • ブックマーク
    • ブックマークレット
  • @wiki
  • google
  • twitter
  • 2ch
  • Read it Later
  • mixi2

ウェブ論


歴史

美術


政治

  • 政治/みんなの党

中国

  • ニュースチェック


  • プラグイン一覧
  • 編集ガイド
  • 未作成のページ


+ テンプレ
  • トップページ用
  • 個別ページ用
  • 頻用プラグイン

訪問者数合計 - 人
今日の訪問者数 - 人
昨日の訪問者数 - 人

ここを編集
記事メニュー2

更新履歴

取得中です。

出撃!魔女飛行隊: WW2ソ連軍女性パイロットたちの群像
サーニャのモデル、リディア・リトヴァクたち「魔女飛行隊」の実録がついに復刊!
→【特集ページ】


イヴの時間 act06:MASAKI [DVD]

ここを編集
人気記事ランキング
  1. ネットサービス/はてな/はてなブログ
  2. 読書/日本海軍の終戦工作
  3. ネットサービス/はてな/ブックマーク
  4. ネットサービス/Tumblr
  5. ネットサービス/はてな/はてなブログ/JavaScriptフリー
  6. 読書/八月十五日の神話
  7. 読書/名著で学ぶ戦争論
  8. 読書/特集/戦争を読む
  9. 読書/「自衛隊」無人化計画
  10. ネットサービス/はてな/はてなブログ/FAQ
もっと見る
最近更新されたページ
  • 192日前

    ネットサービス/はてな/ブックマーク
  • 198日前

    Markdownモード
  • 198日前

    メニュー
  • 198日前

    ソフトウェア/スクリプト
  • 4265日前

    読書/日米秘密情報機関 「影の軍隊」ムサシ機関長の告白
  • 4357日前

    トップページ
  • 4641日前

    読書/謀略の昭和裏面史
  • 4670日前

    読書/私とは何か―「個人」から「分人」へ
  • 4694日前

    読書/玉砕の軍隊、生還の軍隊
  • 4702日前

    読書/トレイシー
もっと見る
人気記事ランキング
  1. ネットサービス/はてな/はてなブログ
  2. 読書/日本海軍の終戦工作
  3. ネットサービス/はてな/ブックマーク
  4. ネットサービス/Tumblr
  5. ネットサービス/はてな/はてなブログ/JavaScriptフリー
  6. 読書/八月十五日の神話
  7. 読書/名著で学ぶ戦争論
  8. 読書/特集/戦争を読む
  9. 読書/「自衛隊」無人化計画
  10. ネットサービス/はてな/はてなブログ/FAQ
もっと見る
最近更新されたページ
  • 192日前

    ネットサービス/はてな/ブックマーク
  • 198日前

    Markdownモード
  • 198日前

    メニュー
  • 198日前

    ソフトウェア/スクリプト
  • 4265日前

    読書/日米秘密情報機関 「影の軍隊」ムサシ機関長の告白
  • 4357日前

    トップページ
  • 4641日前

    読書/謀略の昭和裏面史
  • 4670日前

    読書/私とは何か―「個人」から「分人」へ
  • 4694日前

    読書/玉砕の軍隊、生還の軍隊
  • 4702日前

    読書/トレイシー
もっと見る
ウィキ募集バナー
新規Wikiランキング

最近作成されたWikiのアクセスランキングです。見るだけでなく加筆してみよう!

  1. MadTown GTA (Beta) まとめウィキ
  2. R.E.P.O. 日本語解説Wiki
  3. シュガードール情報まとめウィキ
  4. SYNDUALITY Echo of Ada 攻略 ウィキ
  5. パズル&コンクエスト(Puzzles&Conquest)攻略Wiki
  6. ソードランページ @ 非公式wiki
  7. GTA5 MADTOWN(β)まとめウィキ
  8. 星飼いの詩@ ウィキ
  9. Merge Cooking 攻略 @ ウィキ
  10. ドラゴンボール Sparking! ZERO 攻略Wiki
もっと見る
人気Wikiランキング

atwikiでよく見られているWikiのランキングです。新しい情報を発見してみよう!

  1. アニヲタWiki(仮)
  2. ストグラ まとめ @ウィキ
  3. ゲームカタログ@Wiki ~名作からクソゲーまで~
  4. 初音ミク Wiki
  5. MadTown GTA (Beta) まとめウィキ
  6. 発車メロディーwiki
  7. 検索してはいけない言葉 @ ウィキ
  8. Grand Theft Auto V(グランドセフトオート5)GTA5 & GTAオンライン 情報・攻略wiki
  9. 機動戦士ガンダム バトルオペレーション2攻略Wiki 3rd Season
  10. オレカバトル アプリ版 @ ウィキ
もっと見る
全体ページランキング

最近アクセスの多かったページランキングです。話題のページを見に行こう!

  1. 参加者一覧 - ストグラ まとめ @ウィキ
  2. 参加者一覧 - MadTown GTA (Beta) まとめウィキ
  3. 魔獣トゲイラ - バトルロイヤルR+α ファンフィクション(二次創作など)総合wiki
  4. Lycoris - MadTown GTA (Beta) まとめウィキ
  5. FB777 - MadTown GTA (Beta) まとめウィキ
  6. ぶんぶんギャング - MadTown GTA (Beta) まとめウィキ
  7. 中国野菜 - アニヲタWiki(仮)
  8. エグザベ・オリベ - アニヲタWiki(仮)
  9. Kamito - MadTown GTA (Beta) まとめウィキ
  10. 警察 - MadTown GTA (Beta) まとめウィキ
もっと見る

  • このWikiのTOPへ
  • 全ページ一覧
  • アットウィキTOP
  • 利用規約
  • プライバシーポリシー

2019 AtWiki, Inc.