カテゴリ表示をSTORKっぽくしてみた

ちょっとした不具合を直しただけ のはずが、気が付けば色んな所を手直し。

トップページだけ「カルーセルスライダー」なんてものをつけてみたんですが、
これもやっぱり、スマホからサイトに来た人への配慮。
(いちいちスクロールさせるより、こっちのが見やすいかなぁ と)

いまだに『スマホ対応』って、何が正解なのか よくわかんない

まぁ、自分のサイトだし、色々と試行錯誤するのも悪くないよね
ってことで、今日の本題。

目標としてるサイトで・・・

トップページにも「勝手に応援中」として、勝手にリンクを張ってるのですが、 『QuizKnock』(クイズノック)というサイトがありまして。

このサイトは、「東大王」等で活躍しているクイズ王、伊沢君が発起人を務め、仲間と共に立ち上げたもので、サイトだけに留まらず、TwitterやFacebook、Youtubeも使い、様々な出来事・物事について、「クイズ」を上手く絡めて発信しているメディアです。

やってる事や目的としている事が、当サイトでしたい事と非常に似通っていることもあって、同じ『クイズを扱うサイト』として参考になるし、目標にしている所の1つです。

ゆえに、良いと思ったところはパk・・・
まぁ「まんま同じ」ってのは流石にしないけど、『似たようなこと、やりたいなぁ』というのは、サイトを再開した時から考えていました。

「STORK」風のカテゴリ名表示

今回 やりたい「似たようなこと」ってのは、「QuizKnock」でも使われている有料テーマ『STORK(ストーク)』のように、サイトトップなど、(記事の)一覧表示をしているページで、サムネイル画像にカテゴリ名を載せること。

調べてみたら、こんな記事を発見

まさにやりたかった事 どんぴしゃで、早速 記事の通りに設定して確認を・・・
あれ? なんか表示がおかしい。

という事で原因を探ってみたのですが、サイトの環境によっては、そのまま設定するのはマズいかもしれないので、その辺を補足しておきたいと思います。

そのままでいい場合、ダメな場合

参照元の記事に書かれているのは「CSSの追記」だけなのですが、これだけで問題なく動く人もいれば、少し調整が必要になってくる人も出てくると思います。

参照元の記事で説明されてる通りの設定でOKなのは

  1. 個別記事の中でカテゴリ名を表示させていない
  2. 「カテゴリ」に階層をつけていない

この2つの条件を共に満たしているものだけ。

当サイトの場合だと、投稿ページ内で「記事下のメタ情報」としてカテゴリ名を表示させているし、カテゴリ自体も『サイト運営 > Luxeritas』という風に、階層をつけているものもある為、両方とも満たしていません。

「カスタマイザー設定」でどうにか出来るものはさておき、「カテゴリ」を階層で分けてるのは そのまんまって訳にはいかないので手直しが必要になってきます。
(※参照元のサイト環境では、「カテゴリ」を階層で分けていない)

解決方法

で、「カテゴリを階層で分けている人はどうしたらいいの?」って話になるのですが、解決は至って簡単。CSSの記述をちょっとだけ変えます。

具体的には、『#list』を頭につけるだけ。

「.meta a」 → 「#list .meta a」
「.fa-folder:before」 → 「#list .fa-folder:before」
「.meta a:hover」 → 「#list .meta a:hover」

このとき『#list』と『.(ドット)』の間は、必ず半角スペースを入れてください。 これで「一覧表示」に関わるページにのみ、このCSSが反映されるようになります。

まとめ

誤解されないよう、改めて書いておきますが、今回 参考にさせて頂いた記事の内容は やりたかった事の1つであったので、非常に感謝しております。

まぁ、環境が違えば設定も変わってくるのは当たり前の話だし、「っぽく出来れば良いなぁ」くらいの軽い願望だったので、それを考えりゃ想像以上で、だいぶ満足しています。

でも、これ以上「STORKっぽく」ってのは、色々と面倒そうなんで、パスで。

Posted by もっきー