既製レイアウトでもナビゲーションの文字色を変える

この記事を読む前に「ヘッダー部のCSSで既製レイアウトのスタイルを上書きするを読んでください。より簡単な方法が書いてあります。(2010/07/01 加筆)

既存レイアウトでもjQueryを利用すれば一部の内容だけを変更することはできます。

例として、ナビゲーションの1階層目と2階層目の文字色を赤くする方法を紹介します。

 

まずはJimdoでQueryを使うための準備をご一読ください。

 

次に「設定」→「ヘッダー部分を編集」を開き、以下のこのコードを貼り付けてください。

JimdoでQueryを使うための準備に書いてあるコードも一緒に書いてあるので、まだヘッダー部に何も書いてなければ、まとめて貼り付ければOKです。

<script type="text/javascript" src="http://www.google.com/jsapi">
</script>

<script type="text/javascript">
//<![CDATA[
google.load("jquery","1.4");
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
(function($) {
 $(function() {
   $("#mainNav1 li a").css("color","red");
   $("#mainNav2 li a").css("color","red");
 });
})(jQuery);
//]]>
</script>

注意点としては、全てのレイアウトでこの方法が有効ではないということです。
(無料版の左上角のレイアウト他多くのレイアウトで問題のないことを確認しています。)

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

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

 

独自レイアウトのCSSで色を付ける場合と比較して若干処理が遅いので、一瞬元の色が表示されてから色が変わるように見えることがあります。

 

以上です。

 

以前からjQueryの記事は書いていましたが、もっとも簡単で有用な例を挙げていませんでした。反省です。

ではまた~

無料ホームページ
無料ホームページ
コメント: 1 (ディスカッションは終了しました。)
  • #1

    seenlab (水曜日, 08 2月 2012 08:24)

    勉強になります。