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プラグインエラー : ご指定のURLはサポートしていません。png, jpg, gif などの画像URLを指定してください。
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
  • スクリプト

ネットサービス

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

ウェブ論


歴史

美術


政治

  • 政治/みんなの党

中国

  • ニュースチェック


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


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

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

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

更新履歴

取得中です。

出撃!魔女飛行隊 (学研M文庫)
サーニャのモデル、リディア・リトヴァクたち「魔女飛行隊」の実録がついに復刊!
→【特集ページ】


イヴの時間 act06:MASAKI [DVD]

ここを編集
人気記事ランキング
  1. 読書/中国抗日軍事史
  2. about
  3. 読書/玉砕の軍隊、生還の軍隊
もっと見る
最近更新されたページ
  • 630日前

    Markdownモード
  • 3217日前

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

    トップページ
  • 3593日前

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

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

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

    読書/トレイシー
  • 3654日前

    読書/名著で学ぶ戦争論
  • 3654日前

    読書/エリア51
  • 3736日前

    読書/人間はガジェットではない
もっと見る
人気記事ランキング
  1. 読書/中国抗日軍事史
  2. about
  3. 読書/玉砕の軍隊、生還の軍隊
もっと見る
最近更新されたページ
  • 630日前

    Markdownモード
  • 3217日前

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

    トップページ
  • 3593日前

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

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

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

    読書/トレイシー
  • 3654日前

    読書/名著で学ぶ戦争論
  • 3654日前

    読書/エリア51
  • 3736日前

    読書/人間はガジェットではない
もっと見る
人気Wikiランキング

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

  1. アニヲタWiki(仮)
  2. ゲームカタログ@Wiki ~名作からクソゲーまで~
  3. 初音ミク Wiki
  4. Grand Theft Auto V(グランドセフトオート5)GTA5攻略wiki
  5. 検索してはいけない言葉 Wiki
  6. Fate/Grand Order @wiki 【FGO】
  7. 機動戦士ガンダム バトルオペレーション2攻略Wiki 3rd Season
  8. みんなで決めるゲーム音楽ベスト100まとめwiki
  9. 機動戦士ガンダム EXTREME VS.2 XBOOST wiki
  10. ニコニコMUGENwiki
新規Wikiランキング

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

  1. マージマンション @ ウィキ
  2. ポンボール攻略まとめwiki
  3. maŸUkoまとめ @ ウィキ
  4. 高校野球 予想スレ 集計サイト
  5. CoC便利なばらまきサイト
  6. ウイニングポスト9 2022 系統確立特化@wiki
  7. officialMoonRabbit @ ウィキ
  8. 神真都Q@ ウィキ
  9. FF14事件簿wiki
  10. つりライフ 〜ゆるゆる釣りRPG〜 攻略 @ ウィキ
  • このWikiのTOPへ
  • 全ページ一覧
  • アットウィキTOP
  • 利用規約
  • プライバシーポリシー

2019 AtWiki, Inc.