デザインCSSを記述する

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

デザイン編集「カスタマイズ」タブの「デザイン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に入力できる文字数には制限があります。

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

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

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

• 2021/5/27 [PC・レスポンシブデザイン・スマートフォン・AMP] Amazon商品紹介機能で貼り付けられた商品内容を変更
• 2021/5/17 [スマートフォン] 記事ページにおけるヘッダの内容を変更
• 2021/5/11 [スマートフォン・AMP] 記事タイトル、記事本文見出しのサイズ・スペーシング・コントラストを変更
• 2021/3/17 [スマートフォン・AMP] フォントファミリを変更