はてなブログ開発ブログ

はてなブログからの公式のお知らせを発信します。

スマートフォン用のデザイン設定に、ヘッダのロゴ色などを変更できる「アクセントカラー」を追加しました

はてなブログでは、スマートフォン用のデザイン設定に「アクセントカラー」設定を追加しました。デフォルトのスマートフォン表示で、ヘッダのロゴ色やリンク色を、15種類から選んで変更することができます。

アクセントカラーを青に変更したスマートフォン表示 アクセントカラーを赤に変更したスマートフォン表示
アクセントカラーをいろいろに変更した表示例

アクセントカラーの設定方法

以下の手順で、スマートフォン用の「アクセントカラー」を設定することができます。

  1. デザイン設定画面で「スマートフォン」タブを選択します
  2. アクセントカラー」を選択します
    「スマートフォン」タブの「アクセントカラー」設定
  3. 15種類からお好きな色を選択してください
  4. 変更内容は右のプレビュー欄で確認できます
  5. 「変更を保存する」をクリックすると、選択した色が反映されます

※注意事項

  • 上記の設定で変更されるのはスマートフォンの画面です。PCのデザインテーマには影響ありません
  • スマートフォン表示でも、広告のリンク色は変更できません
  • スマートフォンのデザイン設定で「レスポンシブデザイン」を選択しているときには反映されません

スマートフォン閲覧時のデザイン改善について

はてなブログでは、スマートフォン向けのデザイン変更やカスタマイズできる箇所の追加を、この5月から段階的に実施しています。これまで次のような機能追加を行ってきました。

現在、デフォルトのスマートフォン表示*1でも、先日のブログパーツや今回のアクセントカラーに続き、さらに多くのカスタマイズが可能になるよう、デザイン機能の改善を進めております。どうぞご利用ください。

*1:5月28日にリリースした「レスポンシブデザイン」のオプションを使用しない、はてなブログ共通のスマートフォン表示のことです。