カテゴリーラベルのカスタム方法を教えてほしい



  • アイキャッチの画像の左上に張られる「カテゴリーラベル」がありますが、この位置を左上ではなく右上に移動させたいと考えています。

    ●やりたい事
    ・カテゴリーラベルの位置を右上に変更したい。

    解決策をお教えいただけますと幸いです。よろしくお願い致します。


    WordPressのバージョン :
    ご利用のサーバー名 :
    PHPのバージョン :
    OS :
    ご利用のブラウザ :
    該当サイトのURL :



  • mat様

    初めまして!JIN運営チームのりょうたです。

    カテゴリーラベルですが、
    表示される箇所は

    ・記事一覧
    ・関連記事
    ・ピックアップコンテンツ

    とございますが全てのカテゴリーラベルを右上に移動させるという認識でお間違い無いでしょうか?
    「ここだけ右上に!!」という指定箇所等ございましたら、仰っていただければその箇所のみのカスタマイズ方法(追加CSSを使います)を
    お伝えできます。

    上記、ご確認の上ご連絡ください!
    宜しくお願いします!



  • カテゴリーラベルのカスタム方法を教えてほしいで@ryotaが発言 :

    記事一覧
    ・関連記事

    りょうた様

    ご返信が遅くなり申し訳ございません。
    右上に移動させたいカテゴリーラベルは「記事一覧」と「関連記事」になります。

    よろしくお願い致します。



  • @mat さん

    こんにちは!
    ご連絡いただきありがとうございます。

    いただいた内容で以下にソースコードを記載しておりますので
    WordPressの管理画面より「外観」→「カスタマイズ」→「追加CSS」の一番上に
    そのままコピペで貼り付けてみてください。

    /*カテゴリーラベルを右上に変える*/
    /*タブレット・PC*/
    @media screen and (min-width: 768px){
    
    	/*関連記事(2カラム,3カラムの時,スライドスタイル)、記事一覧(1カラム・2カラムの時)*/
    	.post-list-mag .post-list-item .post-list-inner .post-list-meta .post-list-cat, .post-list-mag3col .post-list-item .post-list-inner .post-list-meta .post-list-cat, .post-list-mag3col-slide .post-list-item .post-list-inner .post-list-meta .post-list-cat{
    		left: auto;
    		right: 11px;
    	}
    	/*関連記事・記事一覧(ベーシックスタイルの時)*/
    	.post-list.basicstyle .post-list-item .post-list-inner .post-list-cat{
    		left: auto;
    		right: 8px;
    	}
    }
    
    /*スマホ*/
    @media screen and (max-width: 767px){
    
    	/*関連記事(2カラム・3カラムの時)*/
    	.post-list-mag .post-list-item .post-list-inner .post-list-meta .post-list-cat, .post-list-mag3col .post-list-item .post-list-inner .post-list-meta .post-list-cat, .post-list-mag .post-list-item .post-list-inner .post-list-meta .post-list-cat{
    		left: auto;
    		right: 7px;
    	}
    	/*関連記事(スライドスタイルの時)*/
    	.post-list-mag3col-slide .post-list-item .post-list-inner .post-list-meta .post-list-cat{
    		left: auto;
    		right: 5px;
    	}
    	/*記事一覧・関連記事(ベーシックスタイル)*/
    	.post-list.basicstyle .post-list-item .post-list-inner .post-list-cat{
    		left: auto;
    	    right: -6px;
    	}
    	/*記事一覧(1カラム表示の時)*/
    	.post-list-mag-sp1col .post-list-item .post-list-inner .post-list-meta .post-list-cat{
    		left: auto;
    		right: 9px;
    	}
    }
    

    「/**/」で囲われているものはそのコードが何をしているのかを表示させているものです!
    このコードがどんなコードだったかを思い出す時に便利ですので、
    消さずに残しておくと後々役に立つかと思います!

    もし不具合等が出れば遠慮なく仰ってください!



  • @ryota
    ありがとうございます。無事に問題が解決できました。