読者です 読者をやめる 読者になる 読者になる

hi-sun-na

絵の向上を目的としたお絵かき・絵日記ブログです。

hirona
ひろな

一言だけ

「Minimal Green」をピンク色にしたら、若干上手く表示されない部分があったので修正しました。

このブログのテーマは「Minimal Green」を使用させてもらってます。

design.syofuso.com

はてなブログを始めて一番最初に使ったテーマであり、今も使用しているテーマだからです。

結局見慣れたテーマが使いやすい!

澄風荘 (id:syofuso)さんが良い人だからっていうのもあります。

 

メインのブログはデフォルトのグリーンで使用していますが、こちらのブログはピンクで使用したいということで、澄風荘さんのブログにあった色をピンクにするというCSSコードを適用してみました!

design.syofuso.com

 

すると、綺麗なピンク色に!!!

すごい!

 

デザインができない私は、どこを何色にして、カラーコードはこれにして、marginはこれぐらい、paddingはこれぐらいと調整していくのが苦手です。一言でいえばめんどくさい。

 

でもこれなら自分がしたいピンク色に一気に設定できる!

すばらしい限りです!!!

 

しかし、問題発生!?カテゴリページで異変!

通常状態

f:id:asparadiary:20161007175731p:plain

ホバーした状態

f:id:asparadiary:20161007175830p:plain

どうやらCSSの設定が上手くいっていないらしいです。

デフォルトの「Minimal Green」の設定を見るに、この場合背景色がピンク、そして文字の色colorが白ということになります。しかし、なぜだか、文字色までピンクになり何も表示されてないようになっている。syofusoさんにいえばすぐ直し方を教えてくれるはず。。。だが、たまには自分で解決法を探ってみようかなとも思ったので、久しぶりにCSSを書いてみることに。

 

まずはデベロッパーツールで確認!

該当箇所を見るとこういうHTMLになっているらしい。

 <div class="categories">
<a href="http:///archive/category/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D">お絵かき</a>
</div>

div.categoriesの子要素としてaタグが入っているシンプルな形らしいです。

 

 

ちなみにだが、div.categoriesのaタグはトップページや各記事ページでも使われているみたいです。カテゴリページではピンク背景に白の文字、それ以外の箇所では白の背景にピンクというデザインになっているようです。(画像を参考に)ちょっとしたことだけどオシャレですね。こういう気遣いがデザイン力の差だと思います。私にはそこまでできない。

f:id:asparadiary:20161007211008p:plain

(トップではこう表示されている)

 

HTMLはこんな感じ。

<div class="entry-categories categories">
<a href="/archive/category/%E3%81%8A%E7%B5%B5%E3%81%8B%E3%81%8D">お絵かき</a>
</div>

 

こっちはclassにentry-categoriesが増えているだけみたいですね。

なんとなく構造がわかってきました。

ちなみに解決方法を調べてから気づきましたが、今回の場合entry-categoriesクラスは関係なさそうです。

 

おかしい部分はどこなのか?

HTMLの構造はわかったので、次はCSSから間違いを探ります。

「Minimal Green」をピンク色にカスタマイズするCSSのうち、カテゴリ部分を引用してみます。

/* カテゴリー */
.categories a {
border: 1px solid #E9546B;/* カテゴリーを囲む枠の色 */
color:#E9546B!important; /* カテゴリー文字の色 */
}
.categories a:hover {
color: #EDB4BD!important; /* カテゴリー文字の色ホバー */
background-color: #fff; /* カテゴリー枠の背景色 */
}
.categories a:visited {
color: #d35889!important;/* カテゴリー文字の色訪問済み */
}
.page-archive .categories a {
color: #fff; /* アーカイブページのカテゴリーの色 */
background: #E9546B!important;/* アーカイブページのカテゴリーの背景色 */
}

 

まとめて色を変更するCSSコード、ピンク、水色 - Minimal Green

 まず一番上の

.categories a {
border: 1px solid #E9546B;/* カテゴリーを囲む枠の色 */
color:#E9546B!important; /* カテゴリー文字の色 */
}

この部分について。

 

borderにピンクの枠線、そして文字色に同じピンク色という設定です。

color部分に!importantがついていますが、個人的あまり!importantは使わないようにしているので、少し緊張しますね。

 

CSSにはセレクタの詳細度というどちらを優先するかというポイントみたいなものがあるのですが、この!importantはすべてを覆す最強の詳細度を持つもので、トランプでいうジョーカーみたいなものです。

 

その分威力は強大なのですが、使いすぎるとのちのち変更が大変になってしまうので、私はあまり使わないようにしているのです。

ちなみに詳細度については、ドットインストールで私は勉強しました。

http://dotinstall.com/lessons/basic_css_v3/31708

ちなみにこんな記事もあるようです。

!importantはもう使わない!CSSの優先順位をおさらいしよう | アライドアーキテクツのクリエイターブログ

昔私が見た記事ではidさえ使わないですべてclassを使って設定するという人もいるようです。

 

次の行はこれ。

.categories a:hover {
color: #EDB4BD!important; /* カテゴリー文字の色ホバー */
background-color: #fff; /* カテゴリー枠の背景色 */
}
.categories a:visited {
color: #d35889!important;/* カテゴリー文字の色訪問済み */
}

 まぁこれはhover(マウスをのせたとき)とvisited(訪問したもの)のCSS設定なので今回はあまり関係ないですね。

 

そして最後のこれ。

.page-archive .categories a {
color: #fff; /* アーカイブページのカテゴリーの色 */
background: #E9546B!important;/* アーカイブページのカテゴリーの背景色 */
}

.page-archiveというのはどこについているクラスなのかというと、

どうやらbodyについているクラスらしい。

ちなみにこんな感じになっていました。

<body class="page-archive page-archive-category category-お絵かき">

 

background: #E9546B!important;となっているから背景は強制ピンクになっているということです。トップページや記事ページでのカテゴリ表示は背景が白、文字色がピンクになっていたのは、bodyにpage-archiveがついてなかったからです。

 

classにpage-archiveとcategoriesがついた子要素のaにだけ、

.page-archive .categories a {
color: #fff; /* アーカイブページのカテゴリーの色 */
background: #E9546B!important;/* アーカイブページのカテゴリーの背景色 */
}

という設定ですからね。

これで本来ならば、背景がピンク、文字色が白の表示になるはずです!

 

しかし、なぜこの設定で文字が白くならないだろうか?

詳細度を確認してみよう!

検索したら上の方に出てきたこちらのサイトを参考に確認してみます。

creator.aainc.co.jp

.page-archive .categories a {
color: #fff; /* アーカイブページのカテゴリーの色 */
background: #E9546B!important;/* アーカイブページのカテゴリーの背景色 */
}

 まずはこちらから。

クラスが2個、タイプセレクタが1個。

クラスは一つ10点、タイプセレクタは一つ1点だから、

10 * 2 + 1 = 21点

 

そしてもう一つの方はというと、

.categories a {
border: 1px solid #E9546B;/* カテゴリーを囲む枠の色 */
color:#E9546B!important; /* カテゴリー文字の色 */
}

 クラスが1個、タイプセレクタが1個だから、

10 * 1 + 1 = 11点

 

詳細度てきには.page-archive .categories aの方が21点で.categories aの方が11点だから、.page-archive .categories aのcolor:#fff;という文字色を白にする設定は優先されるはずです。

 

じゃあなぜ白くならないか?

諸悪の根源は!important

.categories a {
border: 1px solid #E9546B;/* カテゴリーを囲む枠の色 */
color:#E9546B!important; /* カテゴリー文字の色 */
}

colorの部分に注目!

CSS界のジョーカー!importantついています。

つまりは、.categoriesというクラスがついている子要素のaタグの文字の色はすべて#E9546B(ピンク)になります。

 

なぜ!importantを使っているのか?

はてなブログ歴またはCSSがあまり得意ではない私にはわかりませんが、なぜこんなに!importantを多用しているのか疑問だったりします。

 

私の中ではデザインCSSに書いたコードは選んだテーマの本来のCSSの上から上書きされるイメージで、別に!importantがなくてもいいような気がしてしまいます。

 

コードも部分的にしか見ていないので、ちゃんと理解しているわけではありませんので、もう少しはてなブログの仕様と!importantについて勉強していきたい所存であります。

 

それで直し方は?

単純にsyofusoさんのこの状態から、

/* カテゴリー */
.categories a {
border: 1px solid #E9546B;/* カテゴリーを囲む枠の色 */
color:#E9546B!important; /* カテゴリー文字の色 */
}

 !importantをなくして

/* カテゴリー */

.categories a {

border: 1px solid #E9546B;/* カテゴリーを囲む枠の色 */
color:#E9546B; /* カテゴリー文字の色 */
}

 こういうふうに変えるだけですね。

 

そうすれば、クラスにcategoriesだけがついた子要素のaタグ(つまりはトップページなどに使われているカテゴリ部分)は、背景が白、枠線がピンク色、そして文字色がピンクのカテゴリ表示になりますし、

f:id:asparadiary:20161007225540p:plain

(こういう表示)

.page-archive .categories aの方(つまりはカテゴリページの方)は、普通に優先度がクラス1つ分高いので、優先的に白色#fffが適応されるという具合です。

f:id:asparadiary:20161007225415p:plain

(こんな表示の仕方。)

上手くいったようです。

 

個人的には、backgroundの!importantもいらないのではないかと感じていますが、とりあえずあまりいじくるのはやめにしておきます。触ったはいいけど、結局時間だけ過ぎて何も変わっていないということがCSSをかいていると非常によく起こるので、やめます。やっぱりCSSは理解度がまだまだです。

.page-archive .categories a {
color: #fff; /* アーカイブページのカテゴリーの色 */
background: #E9546B!important;/* アーカイブページのカテゴリーの背景色 */
}

 まとめ

「Minimal Green」はピンク色で使ってもキレイ!

そして、やっぱりCSSは苦手ですね。

 

澄風荘 (id:syofuso)さん、

テーマを使用させてもらいありがとうございます。

またいつもスター、コメントありがとうございます。

 

追記

ふと他の方はどうしているのかと疑問に感じたので、調べてみました。

もしかしたら私だけが勝手に間違えてこんな記事を書いてしまったのではないかと心配になったからです。

検索したら、同じテーマで同じように色を変えて使っている人がいました。

feline3594.hatenadiary.jp

フィーライン・アイズの秋吉妙香 (id:feline3594)さん。
私もちょくちょく見に行くブログです。

 

ためしにカテゴリページを確認してみましょう!

f:id:asparadiary:20161008180936p:plain

デザイン・サイト運営 カテゴリーの記事一覧 - フィーライン・アイズ

 

あれ??直っている。

もしかして私だけの環境で背景色の色だけになっていたのかな?

ちゃんと文字の色が白になっているんですよね。

秋吉妙香さんが自分で直されたのかなと感じたので一応CSSも確認したいと思います。

 

CSSの確認!

f:id:asparadiary:20161008181426p:plain

 

.categories aのcolorの!importantをなくせば直ると私は考えましたけど、この方は別に!importantを外したわけではないようです。

じゃあなぜ白い文字になっているのか。。。

・・・・・

・・・

普通にcolor:が#fffで白色に設定されていましたね。

 

しかし、.cotegories aのcolorを!importantありで白色(#fff)にしてしまうと、クラスにcategoriesがついた子要素のaタグはすべて白色(#fff)になってしまいます。

 

そこで他の不具合を探ってみます!

f:id:asparadiary:20161008182151p:plain

【サイトカラー変更】勿忘草(わすれなぐさ)は空の色 - フィーライン・アイズ

 

【サイトカラー変更】勿忘草(わすれなぐさ)は空の色 - フィーライン・アイズ

こちらは実際の記事ページのところですね。

やはり文字色が白くなっていますね。

ホバーをすると書いてある文字はわかりますが。

この設定を秋吉妙香さんを意図的にしているのであれば、何も問題ないのですが、背景色と文字色を同一色にすると、隠し文字や隠しリンクがあるのではないかということで、検索順位が下がったりする可能性があります。

 

まぁこの場合枠線(border)がしっかり水色なので、リンクがあることはわかりそうですが、もし何もない余白をふとクリックして、別のサイトに飛ばされてウィルスにでもひかかったら嫌ですもんね。そういうことへの対策のため検索順位を下げるようです。

 

解決法は?

もう説明するほどのものでもないですが、もしこの場合直すなら、

.categories a {
    border: 1px solid #89C3EB;
    color:#fff!important;
}

こうじゃなくて、

.categories a {
    border: 1px solid #89C3EB;
    color: #89C3EB;
}

こうじゃないかな~と考えるのです。

 

ちなみにカラーコードの指定は個人的には小文字の方が好きだったりします。

#89c3eb ← こういう書き方の方が好きです。

って今関係ないですね。

 

終わります。

 

追記2

この記事について秋吉妙香 (id:feline3594)さんがブログで紹介してくれたようで非常に嬉しい限りなのですが、若干語弊がある書き方を自分がしてしまったのではないかということでここに意図を書いておきます。

feline3594.hatenadiary.jp

記事から引用させていただくと、

おかげ様で無事に不具合は修正できたんですが、

かなり手厳しく言われてしまったんですよね。

 という一文があったわけですが、

私は決して手厳しく言ったつもりではないんです。本当に!

 

でも、「別のサイトに飛ばされてウィルス」というのは、

「ええっ!」と驚きましたよ。

 これは私の表現、説明が悪かったです。

これは秋吉妙香さんのサイトにウィルスがあるかもしれないという意味でいったわけではなく、背景と文字色が同じだと、リンクがあるのにもかかわらずユーザにそれをわからない形でクリックさせる輩がいるから、それに間違われて検索順位が落とされたらもったいないなという思いで書きました。

 

秋吉妙香さんのサイトはちゃんとした良いサイトなので、もしそれが足を引っ張ていたならもったいないと思いました。

 

すみません。わかりづらい説明で。

 

最近だとYouTubeなどにもそういう透明なリンクをはって誤認クリックをねらった動画があります。ユーザ目線でみると、リンクをクリックした覚えもないのに、知らない間に別のサイトに飛ばされて、自分が必要もないソフトをダウンロードするように仕組まれていたら悲惨です。悪意のないソフトだったら問題ないですが、場合によっては悪意のあるソフトの可能性もあります。

 

本当にごめんなさい。

別にわるく言ったつもりはないのですが、もうちょっと表現をわかりやすく書くべきでした。不快な思いをさせて申し訳ないです。