デザインCSSを記述する

デザインカスタマイズ
この機能は開発者向けの設定です。利用上の注意をお読みになり、自己責任でのご利用をお願いします。

f:id:hatenablog:20200416164952p:plain:w400

デザイン編集「カスタマイズ」タブの「デザインCSS」では、ブログにCSSを記述できます。

概要

「デザインCSS」では、ブログに適用されたデザインテーマとは別に、追加のCSSを記述できます。初期状態では以下のように、テーマやシステム設定があらかじめ入力されています。これらの後にCSSを記述してください。

/* <system section="theme" selected="smooth"> */
@import "/css/theme/smooth/smooth.css";
/* </system> */

/* <system section="background" selected="default"> */
/* default */
/* </system> */

既存のデザインテーマを使わず、ゼロからブログのCSSを記述する場合は、上記をすべて削除し、CSSを入力してください。独自のデザインテーマを作成するには「はてなブログテーマ制作の手引き」を参照してください。

注意事項

  • Sass(SCSS)などのCSSメタ言語には対応しておりません。
  • スマートフォン表示ではデザインCSSの設定はできません。
  • はてな利用規約で禁止されているカスタマイズ（広告やヘッダ・フッタを非表示にする等）は行わないでください。
    • これらを非表示にするには、有料プランへの加入をご検討ください。
  • デザインCSSに入力できる文字数の制限は64KiBになります。

はてなブログの仕様変更履歴

デザインCSSは開発者向けの設定です。将来のはてなブログの仕様変更によって、記述した内容が予告なく正常に動作しなくなることがあります。

デザインCSSが影響をおよぼす可能性が高い箇所の変更履歴をまとめました。もしご自身のブログでこれらの箇所がうまく表示されなくなったら、デザインCSSの記述をご確認ください。

  • 2021/8/16 [スマートフォン] ヘッダ画像の表示領域を変更
  • 2021/7/12 [PC・レスポンシブデザイン] ヘッダー「読者になる」の表示位置を変更
  • 2021/7/12 [スマートフォン] ヘッダ画像、ブログタイトル、ブログのひとこと説明、「読者になる」の表示位置とデザインを変更
  • 2021/7/6 [PC・レスポンシブデザイン・スマートフォン] プロフィール（PCではサイドバー「プロフィール」モジュール）に「このブログについて」リンクを新設
  • 2021/7/5 [PC] 以下のテーマのヘッダーのデザインを変更
    • Bordeaux
    • Navy Blue
  • 2021/7/5 [PC] 以下のテーマにおいてヘッダーのスクロール時の挙動を変更
    • Arrow
    • Evergreen
    • Pink pharmacy
    • Skull wings
    • Patchwork
    • Donut
    • Novel
    • Airmail
    • Wideboard
    • Darkroom
    • Terminal
    • ヨミカキ by kanahei
    • Reach
  • 2021/7/5 [PC] 以下のテーマの背景画像の位置を変更
    • Pray
  • 2021/5/27 [PC・レスポンシブデザイン・スマートフォン・AMP] Amazon商品紹介機能で貼り付けられた商品内容を変更
  • 2021/5/17 [スマートフォン] 記事ページにおけるヘッダの内容を変更
  • 2021/5/11 [スマートフォン・AMP] 記事タイトル、記事本文見出しのサイズ・スペーシング・コントラストを変更
  • 2021/3/17 [スマートフォン・AMP] フォントファミリを変更