wordpress: サムネイルの左上に表示されるカテゴリー名を消す

プログラミング
スポンサーリンク




こんにちは、おみです。

cocoonを使用している場合、サムネイル の左上にはデフォルトでカテゴリー名が表示されています。

カテゴリー名が短い場合は問題ないですが、長すぎるとサムネイルの文字を隠してしまい、邪魔になる事が多々あります。

この問題の解決方法を、備忘録として残しておきます。

※筆者はcocconを使用していますので、cocoon以外はやり方を見るだけではできないかもしれません。 できなかった場合は、仕組みを見て自分用にやり方を変えてみてください。

スポンサーリンク

やり方

①管理者ページを開き、「外観」→「カスタマイズ」→「追加CSS」を選択する

② 下記のソースを記述し、「公開」をクリックで変更を反映する。

.cat-label {
 display: none;
 }

反映後

仕組み

サムネイル左上のカテゴリー名は、下記のHTMLソースにより表示されています。

(ページのHTMLソースの確認方法、HTMLの読み方はここではフォローしません。)

(例1) <span class="cat-label cat-label-11">python</span>
(例2) <span class="cat-label cat-label-22">kotlin</span>

これは、

 spanタグは”cat-label”と”cat-label-nn”の2つのクラスに属している

という意味になります。

ということは、カテゴリー名を表示するspanタグのうち全てのタグに指定されているであろうクラス名”cat-label”を指定し、非表示にしてやればサムネイルの上に表示されなくなります。

この設定は、cssで設定してやればいいので、

.cat-label {
 display: none;
 }

を追加CSSに記載すれば、表示されなくなります。

おすすめの書籍

私がHTMLやCSSの勉強に使用している書籍は、こちらになります。

スラスラわかるHTML&CSSのきほん 第2版

おすすめできる点

・htmlやcssの基本をしっかり学ぶ事ができる。

この本は、名前の通りhHTMLとCSSの基本を学ぶ事ができる書籍です。そのため、初心者が抑えておくべき基本的な内容をしっかり理解する事ができます。

・webサイトの公開方法など、初心者がつまづきやすいポイントもわかりやすく解説されている

初心者がプログラミングに挫折する要因として、わからない事がなかなか解決できず、頭がパンクして諦めてしまうことも原因の一つだと思いますが、この本はそんな挫折しやすい部分位ついても分かりやすく解説されています。

・レスポンシブデザインについて学ぶ事ができる

レスポンシブデザインとは、画面のサイズに依存せず、最適なwebページを表示する仕組みのことです。 近年では、PCだけでなくスマホやタブレット、はたまたゲーム機など、様々な画面サイズの端末からwebページへのアクセスがあります。 そんな時代に、PCでないとうまく表示されないwebページを作成するのは時代遅れです。また、Googleもモバイル対応済みのwebページの検索順位を引き上げると発表しているので、アクセス数を稼ぐにはレスポンシブデザインにすることは必須条件です。

・比較的やすい

技術書で2000円台前半は安いです。実質無料です。買いです。

 

せっかくWordPressでブログを書いているなら、この機会にHTMLやCSSについても、詳しく学んでみませんか?

コメント

タイトルとURLをコピーしました