PS Auto Sitemapの色を変えたい…！
こんにちは、四足ワラジ主婦のmanoです。
今日は、前回記事の「PS Auto Sitemap」で作った
サイトマップの色を変える方法
について、書いてみたいと思います。
プラグインのソースをいじります
色を変えるには、プラグインのソース（設計図にあたるコード）をいじらないといけないんですが、
パソコン苦手な主婦でもわかるカンタンなやり方
を図入りで説明しますので、ぜひやってみて下さい！
やり方自体はそんなに難しくありませんので、思い切ってチャレンジしてみましょう(^^♪
【事前準備】
※web用カラーチャートより、自分の使いたい色のコードを選んで、メモ帳に貼り付けておく。
色のコードとは、「#1e90ff」のような、英数字6文字のことです。
【参考サイト】
原色大辞典ー色の名前とカラーコードが一目でわかるWEB色見本
【変更操作】
１. 「ダッシュボード」⇒「プラグイン」⇒「インストール済みプラグイン」⇒「PS Auto Sitemap」を選択
２. 「プラグイン編集」画面右側の「プラグインファイル」一覧より、自分が選んだサイトマップの種類を選択する。
ファイル名の最後が「.css」のファイルです。
※私が選んだのは「索引」（ps_auto_sitemap_index.css）でしたので、こちらを参考にご説明します。
３ 画面左側に表示されているソースの上にカーソルを置き、キーボードのショートカットキー「Ctrl」+「A」を押して、ソース全体を選択
⇒右クリックで「コピー」
⇒メモ帳に「ペースト」で貼り付けて、名前を付けて保存。
元ソースは大事ですので、絶対になくさないように、パソコン上に専用フォルダを作って保存してください。
４. ３で保存したメモを「別名保存」で、カスタマイズ用ファイルを作成する。
ファイルの名前はなんでも良いですが、カスタマイズしたものだとわかるような名前にしてください。
ここから、カスタマイズ用ファイルの中の文字色コードを変更していきます。
５. 上から順番に見ていって、「＃」マークのついている記述を一つ探す。
６. 「＃」の横の英数字を【事前準備】で用意した色番号に書き換える。
７. メモを保存して、全体を「コピー」。
⇒「ダッシュボード」に戻り⇒「プラグイン編集」の編集画面を「全体選択」してから「ペースト」。
８. 編集画面下部の「ファイルを更新」ボタンを押して、反映させる。
８. サイトマップを表示してみる。⇒色が変更されてます(^^♪
ちなみに、元のマップ表示はこちらでした。
９. 変更した箇所が希望の色に変更されてたら、次の「＃」を探す。
１０. 上記作業の繰り返し。
操作としては、以上です！
かならず一つづつやること！
作業をする時は、必ず
上からひとつづつ書き換え⇒反映
で、実際の表示を確認しながら操作して行ってください。
もしうまくいかないときは、
ソースを元に戻してから次へ進む
ということを徹底して下さい。
絶対に、
うまくいっていない箇所をそのままにして次に進まない
でくださいね！
オリジナルのソースに該当箇所がない時は
それから、今回「索引」を例にして変更しましたが、他の種類で
ソースの中に同じような記述がないマップ
もあると思います。
その場合は、先ほどの「索引」のソースを参考に、記述を付け足してみて下さい。
例えば、「シンプル」の場合
#sitemap_list li a {
の下が
text-decoration: none;
となっていて、これは「装飾なし」の意味になります。
なので、先ほどの「索引」のソースを参考に、記述を
color: #b22b3a;
に変更して、ファイルを更新。
すると、無事色が変更されました！
ちなみに、デフォルトは青色でした。
このような感じで、各マップによって多少の違いはありますが、
先ほどの「索引」で変更したコードと同じ記述があればそこを変更
記述がない場合はコードを付け加える
という作業を繰り返していけばOKなので、ぜひチャレンジしてみて下さい。
そして、万が一操作が上手くいかなかった時は、
必ずオリジナルの記述に戻す
ことを忘れないでくださいね！
それでは、今回の記事が読んで下さったあなたのお役に立てば嬉しいです。
最後まで読んで頂きありがとうございました。manoでした！
コメント