108円古本せどり専門!主婦せどらーのせどりで楽しく豊かな生活♪

ヤフオク&アマゾンの「108円古本せどり」で生活するアラフォー主婦の「せどりで豊かな生活」実録ブログ♪せどりの収益で購入した商品などをご紹介しています。

プラグイン設置

PS Auto Sitemap 文字色の変更・簡単設定方法【主婦ブログカスタマイズ(7)】

2018/03/30

PS Auto Sitemapの色を変えたい…!

こんにちは、四足ワラジ主婦のmanoです。

今日は、前回記事「PS Auto Sitemap」で作った

サイトマップの色を変える方法

について、書いてみたいと思います。

 

[スポンサーリンク]

 

プラグインのソースをいじります

色を変えるには、プラグインのソース(設計図にあたるコード)をいじらないといけないんですが、

パソコン苦手な主婦でもわかるカンタンなやり方

を図入りで説明しますので、ぜひやってみて下さい!

 

やり方自体はそんなに難しくありませんので、思い切ってチャレンジしてみましょう(^^♪

 

【事前準備】

※web用カラーチャートより、自分の使いたい色のコードを選んで、メモ帳に貼り付けておく。

色のコードとは、「#1e90ff」のような、英数字6文字のことです。

【参考サイト】

原色大辞典ー色の名前とカラーコードが一目でわかるWEB色見本

 

【変更操作】

1. 「ダッシュボード」⇒「プラグイン」⇒「インストール済みプラグイン」⇒「PS Auto Sitemap」を選択

ps-auto-sitemap2-2

 

2. 「プラグイン編集」画面右側の「プラグインファイル」一覧より、自分が選んだサイトマップの種類を選択する。

ファイル名の最後が「.css」のファイルです。

ps-auto-sitemap2-3

 

※私が選んだのは「索引」(ps_auto_sitemap_index.css)でしたので、こちらを参考にご説明します。

 

3 画面左側に表示されているソースの上にカーソルを置き、キーボードのショートカットキー「Ctrl」+「A」を押して、ソース全体を選択

  ⇒右クリックで「コピー」

  ⇒メモ帳に「ペースト」で貼り付けて、名前を付けて保存。

元ソースは大事ですので、絶対になくさないように、パソコン上に専用フォルダを作って保存してください。

 

4. 3で保存したメモを「別名保存」で、カスタマイズ用ファイルを作成する。

ファイルの名前はなんでも良いですが、カスタマイズしたものだとわかるような名前にしてください。

 

ここから、カスタマイズ用ファイルの中の文字色コードを変更していきます。

 

5. 上から順番に見ていって、「#」マークのついている記述を一つ探す。

 

6. 「#」の横の英数字を【事前準備】で用意した色番号に書き換える。

ps-auto-sitemap2-4-2

 

7. メモを保存して、全体を「コピー」

  ⇒「ダッシュボード」に戻り⇒「プラグイン編集」の編集画面を「全体選択」してから「ペースト」

[スポンサーリンク]

 

8. 編集画面下部の「ファイルを更新」ボタンを押して、反映させる。

ps-auto-sitemap2-5-2

 

8. サイトマップを表示してみる。⇒色が変更されてます(^^♪

ps-auto-sitemap2-6

 

ちなみに、元のマップ表示はこちらでした。

11-sitemap-sakuin-2

 

9. 変更した箇所が希望の色に変更されてたら、次の「#」を探す。

 

10. 上記作業の繰り返し

 

操作としては、以上です!

 

かならず一つづつやること!

作業をする時は、必ず

上からひとつづつ書き換え⇒反映

で、実際の表示を確認しながら操作して行ってください。

 

もしうまくいかないときは、

ソースを元に戻してから次へ進む

ということを徹底して下さい。

 

絶対に、

うまくいっていない箇所をそのままにして次に進まない

でくださいね!

 

オリジナルのソースに該当箇所がない時は

それから、今回「索引」を例にして変更しましたが、他の種類で

ソースの中に同じような記述がないマップ

もあると思います。

 

その場合は、先ほどの「索引」のソースを参考に、記述を付け足してみて下さい。

例えば、「シンプル」の場合

#sitemap_list li a {

の下が

text-decoration: none;

となっていて、これは「装飾なし」の意味になります。

ps-auto-sitemap2-7-2

 

なので、先ほどの「索引」のソースを参考に、記述を

color: #b22b3a;

に変更して、ファイルを更新

ps-auto-sitemap2-8-2

 

すると、無事色が変更されました!

ps-auto-sitemap2-10

 

ちなみに、デフォルトは青色でした。

2-sitemap-simple-2

 

このような感じで、各マップによって多少の違いはありますが、

先ほどの「索引」で変更したコードと同じ記述があればそこを変更

記述がない場合はコードを付け加える

という作業を繰り返していけばOKなので、ぜひチャレンジしてみて下さい。

 

そして、万が一操作が上手くいかなかった時は、

必ずオリジナルの記述に戻す

ことを忘れないでくださいね!

 

それでは、今回の記事が読んで下さったあなたのお役に立てば嬉しいです。

最後まで読んで頂きありがとうございました。manoでした!

 

★おススメ無料電子書籍★記事下

 

 

▼▼▼【Amazonベストセラーランキング1位】を獲得した

電子書籍を無料プレゼント中!

だいぽん-自由な人生を手に入れる教科書

せどりを含め、ネットビジネスで稼ぐための大事な考え方が身につきます。
そして、「なぜ今まで稼げなかったのか、稼ぐためにはどうしたら良いのか」が分かるようになりますよ!(^^)/

ランキング


【人気ブログランキング】
この記事がお役に立ちましたら、ポチっと押して頂けると励みになります♪

問い合わせ


★記事を読んでの疑問や質問、せどりに関するお悩みなどがありましたら、
「問い合わせフォーム」よりお気軽にご連絡ください!
24時間以内に100%お返事致します(^^♪

-プラグイン設置
-, ,