Wordpress

【JIN】Rinker使用時に上部に余白が出来てしまう (Gutenberg)

修正されていました

いつのまにか修正され、GutenbergでRinkerの余白が発生しなくなっていた。ただし、以前として上部に余白が出来てしまう仕様なので以下を追加すると無くなります。

/* rinker調節 */
.yyi-rinker-contents{
	margin-top:0em !important;
}

挿入場所

コードはCSSのため、例の如く「style.css」の中だ。以下の追加方法がある。

  • テーマエディター>Style.css
  • カスタマイズ>追加CSS
左:テーマエディター/右:追加CSS

以下修正済み

余白が出来てしまう原因

※修正済み まだ適用していない人のために残しています

Rinkerはとても便利なアフィリプラグインだが、GutenbergJINのテーマを利用している場合、上部に多めの余白が出来てしまう。今回はこの余白を無くすようにCSSに追加する。

Rinker 余白

これはJINが綺麗なレイアウトになるようにpaddingを調節しているからなのだが、GutenbergでRinkerを使用している場合、Rinker要素の上に<p>で以下のクラスが挿入される

<p class="wp-block-rinkerg-gutenberg-rinker gutenberg-yyi-rinkernone"></p>

この要素はRinkerの作り上自動挿入されるが、JINは<p>要素すべてに「padding-bottom:2rem」を追加するように作られているため、Rinkerの前には自動的に広めの余白となってしまう

コード

Rinker 余白削除後

JINの<p>のCSSを無効にすると、色々レイアウトが崩れてしまうため、今回はRinkerのみにJINのpadding-bottomを無効にする。コピペ可能。

/* rinker調節 */
.wp-block-rinkerg-gutenberg-rinker{
	padding:0em !important;
}
ゼノン

本来はこのように親CSSを強制的に捻じ曲げるコードは嫌われますが、Wordpressの仕様上、子テーマに書かないと更新が面倒なので強制変更しています。

ABOUT ME
ゼノン / Xenonhyx (管理人)
愛知県出身。趣味は自作PCとゲーム。 略歴:エンジニア兼マーケター→フリーライター→エンジニア

POSTED COMMENT

  1. かなえ より:

    聞かせてください!
    同じくテーマがJINで、Rinkerの上部に余白ができてしまうことに悩んでいたのですが、私はグーテンベルクではなく、クラシックエディターを使用しているので、上のコードだと特に変化はありませんでした。
    もし理由がわかれば、教えてもらえると嬉しいです!
    ブログ→https://kanaelife.com/

    • ゼノン / Xenonhyx (管理人) より:

      覗いてみました。(というかJIN側がGutenberg対応したのか本記事の余白は発生しなくなっていました)。ただ普通にRinkerは余白が発生してしまうので、以下コードをスタイルシートに入力すれば余白が無くなります。「yyi-rinker-contents」クラスでmargin制御していました。


      .yyi-rinker-contents{
      margin-top:0em !important;
      }

COMMENT

メールアドレスが公開されることはありません。