WEB関係

【JINカスタマイズ】サムネに重なるカテゴリー名をタイトル下に移動したい。が、やっと解決した。

元アフィ子
元アフィ子
こんにちは。WEB会社OLで働く元アフィ子(@motoahiko)です。

今の会社に勤めてやがて3年目になりますが、サイト構築に限っては全くの初心者です。
 
元アフィ子をご存知の方はお察しいただけると思いますが、このサイト・・・実は独断で勝手に始めているので、エンジニア側は一切関与してくれません😭
 
 
だから、WordPress設定から記事更新、画像作成まですべて私ひとり😭笑
 
そんな私が藁にもすがる思いでたどり着いたのが、こちらのWordPress(ワードプレス)テーマ「JIN」🐏だったんです。
 
 
みなさんご存知、アフィリエイターでもある「ひつじ🐏(@hituji_1234)」さんが作ったテーマだけあって“アフィサイト・SEOブログ向け”でとっっても使いやすい。

ちゃんと、ひつじさんに許可もらったからね。無断転載じゃないからね。

そしてカスタマイズ画面の説明も丁寧で分かりやすいです。
 
 
色んなブロガーさんがJINカスタマイズの方法についてまとめてくださっているので、なんとかサイト開設まで無事にたどり着きましたm(_ _)m

ありがとうございますm(_ _)m
 
 
でも、ただ1つ!!

どれだけJINの公式サイトを見ても、検索しても出てなかったこと・・・
 
それが「サムネ画像に重なるカテゴリー名を移動させる方法」です。

元アフィ子
元アフィ子

こんな感じでサイトTOPのサムネに重なるカテゴリー名がただただ邪魔だった。

元アフィ子
元アフィ子
アイキャッチ画像を文字入れして作り込んでいる!という人は絶対共感してくれるはず!!!

今回は、内密なルートを使い「カテゴリー名をタイトル下に持っていくコード」を入手したので、その方法を紹介しますね。
 


(ただ単にエンジニアの方に“ワイロ”という名の缶コーヒーを渡して、教えてもらっただけですw)

JINカスタマイズ画面で「コード追加」するだけ

まぁ〜“方法”と言いましても、ただコードをCSSに追加するだけなんですけどね。
 
無駄にもったいぶってすみません(笑)
 
 
記事一覧に表示される「サムネのカテゴリー名をタイトル下に持っていく手順」は以下の通りです。

1.外観からテーマを選択

まず、WordPressの管理画面から「外観」の「テーマ」を選択します。


2.JINテーマのカスタマイズ画面へ

テーマ一覧から、現在使用している「JIN」のカスタマイズを選択します。


3.追加CSSにコードを追加する

次に、カスタマイズ画面の一番下にある「追加CSS」を選択。


この「追加CSS」枠に(超内密なルートで手に入れた)下記コードを追加する。


 

↓コピーして貼り付ける↓

@media (min-width: 768px) { span.post-list-cat {top:auto!important; bottom:11px!important}}
@media (max-width: 767px){ span.post-list-cat {top:auto!important; bottom:7px!important}}

あとは、右上の「公開」ボタンを押すだけ。
 
ね?簡単でしょう?
 
これでサムネ画像の邪魔をすることなく、カテゴリー名が表示されるようになります。
 
【before】


 
【after】


※<トップページ設定>の<トップページの記事一覧選択>が「ベーシックスタイル」になっていると、反映されません。

ちなみに私の設定は、「マガジンスタイル(スマホ2カラム)」です☺️

たまにTwitterでもカスタマイズ方法を呟いてます

今回はTwitterだけではなく、記事でも紹介させていただきましたが、記事にするほどでもない些細な内容はTwitterで呟くことが多いです。

(まぢでどうでもいいようなことも呟きますが・・・)

どうか、お付き合いください🙇‍♀️w
 
今後は、きちんとWordPressのカスタマイズ方法や当サイトで使用しているテーマ設定など「お役立ちの情報」も公開していこうと思ってますので、気軽にフォローしてください!

POSTED COMMENT

  1. […] ブログカスタマイズ(JIN)カテゴリー名を画像下にhttps://gourmet-bito.com/jin-customize-category/ブログ記事を参考にさせて、頂きました。 […]

  2. リゾナイズ より:

    私が求めていたことがこの記事に全て書かれていました。
    カテゴリー名が左下に移動できて満足しております。
    ありがとうございました。

    >あとは、右上の「公開」ボタンを押すだけ。
    これに関しては事前に契約サーバー側の設定でWAFをオフにしておかないと
    「何かうまくいかなかったようです。時間を置いてもう一度お試しください」と表示され
    反映されないので注意が必要です。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です