ヘッダー部のCSSで既製レイアウトのスタイルを上書きする

以前「既製レイアウトでもナビゲーションの文字色を変える」などという記事を書いてしまいましたが、「ヘッダー部を編集」でCSSを記述すれば、簡単に既製レイアウトのスタイルを上書きできることに気がつきました。

 

今まで気がつかなかったのが情けないのですが、書いてしまったものも何かの参考にはなるでしょうから、それはそのままにして、CSSで同様の内容を実現する方法を紹介しておきます。

 

「設定」→「ヘッダー部を編集」 を開いて、次のコードを記述します。

このCSSはナビゲーションの1階層目の文字色を赤くするコードです。

※CDATAはJimdoが勝手に付加します。

 

<style type="text/css">
/*<![CDATA[*/
<!--
#mainNav1 li a
{
  color: red;
}
-->
/*]]>*/
</style>

こんな感じになります。

jQueryを使う方法よりずっと簡単です。

 

以前の記事にも書きましたが、全てのレイアウトでこの方法が有効ではないので注意してください。
(無料版の左上角のレイアウト他多くのレイアウトで問題のないことを確認しています。)

詳しく調べていませんが、うまくいかないレイアウトについては、ナビゲーションのidが異なっているはずです。

このような場合は、ブラウザでソースの表示を行い、idやclassを探して上記コードの"mainNav1"を変更します。

 

コメント: 4 (ディスカッションは終了しました。)
  • #1

    タイカービングgulaap (金曜日, 27 5月 2011 19:45)

    最近jimdoをはじめました。
    ホームページすらはじめてなのに悪戦苦闘しています。
    ナビゲーションの文字色変更をしたく、こちらに来ました
    やってみましたが、ブルーのままで(><)
    ブラウザで表示を行い・・・・と書いてありますが
    よくわかりませんでした。
    白文字にしたいのですが 方法ありますか?

  • #2

    liyuan (土曜日, 28 5月 2011 10:25)

    ホームページ拝見いたしました。
    私も試してみましたが、タイカービングgulaapさんが使われているレイアウトでは文字色を変更することができませんでした。
    ソースの中身も見たのですが、今のところ解決方法が見つかりません。
    CSSが実際に展開される位置や順番の問題だと思うのですが、これはレイアウトによって決まってしまうようです。Jimdoのお手軽さと引き換えになっている部分であり、どうしようもないところです。Pro版以上ならカスタマサポートに要望を出せば検討してもらえるかもしれません。
    お役に立てず申し訳ありません。

  • #3

    my-exp (水曜日, 06 7月 2011 21:43)

    はじめまして。いつも参考にさせていただいております。
    liyuanさんに質問することではないのかもしれませんが、是非ご教授いただきたいことがあります。

    当方IE8を使用しておりますが、scriptを貼り付けた際に自動でコード部分を「<!--」で括られますが、このままだと

    ①IEのステータスバーに「実行しましたが、ページでエラーが発生しました。」となりscriptが実行されない箇所(この場合、「<!--」のコードを解除するとscriptが正常に動作する。)

    と、

    ②「<!--」を解除しなくてもscriptが正常に動作する箇所
    があります。

    どういうときに「<!--」を解除する必要があるのかをご存知でしたらご教授ください。


    P.S.
    liyuanの本ページでも私のブラウザでは、「実行しましたが、ページでエラーが発生しました。」と表示されています。

  • #4

    liyuan (木曜日, 07 7月 2011 03:19)

    本当ですね。
    私はChromeとIE8を使っていますが、確かにこのページはIE8ではエラーになりますね。
    時間のあるときに詳しく見てみます。