アメブロのヘッダー部の背景色や文字色を変える方法

  • アメブロのヘッダー部の背景色の変え方を知りたい。
  • アメブロのヘッダー部のブログタイトルや説明文の文字色を変え方を知りたい。

アメブロの新CSS編集用デザインで、ヘッダー部の「背景色」「ブログタイトルの文字色」「ブログ説明文の文字色」を変更するカスタマイズ方法です。

カスタマイズはブログデザインCSSの編集で行いますので、その方法がわからない場合は先にチェックしておいて下さい。

ヘッダー部の「背景色」「ブログタイトルの文字色」「ブログ説明文の文字色」を変更する、以下のようなコードをCSSの最後に追加します。

.skin-bgHeader {
  background-color: #ff9999; /* ヘッダー部の背景色 */
}
.skin-blogMainTitle {
  color: #ffffff; /* ブログタイトルの文字色 */
}
.skin-blogSubTitle {
  color: #cc0000; /* ブログ説明文の文字色 */
}

手順

上記コードを使ってアメブロのヘッダー部の背景色や文字色を変える具体的な手順は以下のようになります。

  1. 上記コードをコピー
  2. ブログデザインCSSを開いて末尾に貼り付ける
  3. 必要に応じて「ヘッダー部の背景色」「ブログタイトルの文字色」「ブログ説明文の文字色」に該当する色コード(#ff9999等)を変更する
  4. 表示を確認する(プレビュー)
  5. 編集内容を保存する
  6. アメブロの公開ページを開いて確認する
「色コード」がわからない場合は、こちらのサイト様などが参考になると思います。

反映されない場合

もし、「表示を確認する」では反映されるのにアメブロの公開ページを開いたときは反映されていない場合は、「Ctrl+F5(Windowsの各有名ブラウザ)」や「Control+R(MacのSafari)」で最新の状態を読み込んで再確認してみて下さい。

「表示を確認する」でも反映されない場合は、どこかで間違っているために修正が必要か、もしくは、当カスタマイズよりも前に既に適用済みのカスタマイズ内容との相性問題でコードの変更が必要な可能性が考えられます。

もしご自身での解決が難しい場合は、有料にて個別サポートを提供させて頂いておりますので、お気軽にお問い合わせ下さい(1件あたり3,000円~)。

【お問い合わせはこちらのフォームから】

関連記事

コメントを残す

メールアドレスが公開されることはありません。

ご覧いただきありがとうございます。どうぞお気軽にコメント下さい。ただし、コメントでのご質問の方は、記事内容に関することだけに限定させていただきます。ご了承下さい。