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

  • M

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

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

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

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

    0
  • administrators

    mat様

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

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

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

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

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

    1
    M
     1 件の返信
  • M

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

    記事一覧
    ・関連記事

    りょうた様

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

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

    1 1 件の返信
  • administrators

    @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;
	}
}

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

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

    1
    M
     1 件の返信
  • M

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

    1