※現在はブログテーマ「Cocoon」を使用しています（21.10.28～）
たった今、出来た事を覚え書きします。
ずっと変えたかった部分を変えることができたので、嬉しくてたまらない！
書かざるを得ない！！笑
長いカテゴリー名が、サムネイル画像の左上を覆ってしまう問題
トップページのアイキャッチ画像、左上にカテゴリー名のラベルが付いてるんですけど、スマホで見ると長いカテゴリー名が画像にカブってしまって、画像の内容がわからないという状態でした。
これをどう解消したらいいのか、ずっとわからなくて。
カテゴリー名を短くするというやり方以外に、例えばラベルの表示をもっと小さくするとかを模索していたんですけど、そもそもアイキャッチ画像の上に、記事カテゴリー名のラベルって、絶対に必要かな？っていうところに落ち着いたんですよね。
他のブログなんかを拝見しても、あったりなかったり。
私自身も、何か情報を得たくて検索したとして、該当の記事を閲覧している時にカテゴリー名を気にしているかな…？と。
確かにあったほうが、回遊率とかもあがるのでしょうけど。
それよりもタイトル&アイキャッチ画像の中の文字の方が、目を引くうえでは重要な気がします。
じゃあ、ラベル消したらええやん！ってなったんですけど。
ワードプレスの外観→カスタマイズ上で、設定できるところはなさそうです。
で、何かこうしてああしてやったらできるんちゃう？（ソースいじる系）と思ったんですけど、あまりカスタマイズの分野で需要のない話だったのか、どうしても目的の情報にたどり着かない…。
特定のカテゴリー名だけ非表示にするとか、カテゴリー名ごとにラベルの色を変えるとかの情報は出てきやすい。
こちらのブログで使用しているテーマは、Giraffeなんですけど。あんまりGiraffeのカスタマイズに関する情報ってないんですよね…。
Cocoonのカスタマイズに関する情報はわりと多いんですけど。
でも、Cocoonのフォーラムでこんな情報を見ました。
エントリーカードのアイキャッチ画像、カテゴリーの表示/非表示について | Cocoonテーマに関する質問 | Cocoon フォーラム
前段として、Cocoonでも設定上では、ラベルの非表示はできないこと。
CSSでの設定が必要になることはわかりました。
サムネイル画像左上に表示されるカテゴリーラベルの非表示設定 | Cocoonテーマに関する質問 | Cocoon フォーラム」
.cat-label {
display: none;
}
これをCSS編集に入れたらOK？？
やってみたけど、ダメでした。元に戻します。
カテゴリーのラベル、これはわかる。
Cocoonでは「.cat-label」だけど
ジラフでそれがどう表記されているのかがわからない。
超偶然なんですけど、昨日（2019.06.04）Cocoonの作者わいひらさんからのアナウンスで、カテゴリーラベルの表示/非表示を「PHPのフック処理」で出来る事がわかりました。
昨日の私に「PHPのフック処理」とか言っても？？？マークしか出てこない笑。
バックアップとって、PHPファイルにまんまソースをコピペしてみたけど、出来るわけがない（爆）。そもそもテーマが違いますし…。
ラベルを消したいだけなのに！
「スマホを落としただけなのに」的に悲痛な、私の心の叫び。
なんとなく、頭の中の線と線が…つながりそうで…つながらない。
要は、ジラフのテーマで書かれている
「アイキャッチの上に、カテゴリー名を表示する」といい部分さえ、なくなればいんじゃねーの？って思ったんですけどねぇ。それがわかんない！
丸一日、ああでもない、こうでもないとファイル見たり検索したりしたんですけど、わからない。
エックスサーバーのFTPのファイルとにらめっこ…。どこにその記述に関するものが入っているのか。
あ＝＝＝、わかんねぇ！！あきらめて、カテゴリー名を短くするか…。
ふと、神様のようにサルワカさんが目の前に現れた。
Googleクロームの機能「検証」！なるほど！
知りたい部分のソースやなんやらを確認して、そこから糸口が見つかるかもしれない！（昨晩、ふとんの中でスマホを見てて、これだ！って叫びたくなった）
これまでもクロームでなんかしてて、うっかり「検証」をクリックしたことは何度もある（右クリック間違え）。そのたび、右のウィンドウになんかずらーっと英語が出てきて、ウワッウワッ！となったことは何度もある笑。
今朝から、「検証」してみた！
ここを消したいっていうサムネ画像上のラベルで、右クリック→検証を見てみる。
カテゴリー名のラベルが、白文字・緑のラベルだから、なんとなくこの辺で表示に関することを言っているのはわかる。
共通して
「.category_info 」って書いてある。
これが自分のブログの、いったいどこのファイルに潜んでいるのかはわからない。
だけど、今まで見てきた情報によると、この指定を「表示しない」というやり方はCSS編集で出来るのではないか…？！
イチかバチかでCSS編集
やりたいのは
ブログテーマ自体で指定されている
「カテゴリー名ラベルを表示する」を
「やっぱ表示しなくていい」に変えること。
Cocoonのフォーラムを参考にして、WordPressダッシュボード→外観→CSS編集に入れてみる。
.category_info {
display: none;
}
ディスプレイ（見せる）→なくせ（none）という素人解釈でいけるのかっ？！
素人が初めて自力でCSSを書いてみた（？）結果
やったー！！できた！できたよぉ！！｡･ﾟ･(ﾉД`)･ﾟ･｡
「CSS」を「書いた」をいうレベルの話じゃないかもしれないですが、自力で答えにたどり着いたこの「快感」！
身体に何かが走りましたよ！（アドレナリン？）いや～～～、この感じは忘れたくないですねぇ。
一年前、今頃の私は
「WordPress？なんか文字ずら見たことある。ドメイン？サーバー？？」だった私がここまで成長しました（自画自賛）。
実は他にもいろいろと手を加えたいところが、い～っぱいあるのですが、まずは記事だ記事！とやってきて一年。
たいして記事数もないですが、ちまちまと手を加えていければいいなーって思ってます！
以上、興奮の現場からでした。
コメント