【LION BLOG】RinkerをCSSでカスタマイズしてみた。【コピペでOK】

【LION BLOG】RinkerをCSSでカスタマイズしてみた。【コピペでOK】

この記事の通りするとRinkerのデザインがこうなります。

[PCから見たビフォーアフター]

rinkerデザイン ビフォー

rinkerデザイン アフター

[スマホから見たビフォーアフター]

rinkerデザイン ビフォー

rinkerデザイン アフター

大きな特徴は、タイトルの文字が小さくなりボタンが縦並びになる事です。

これによってボタンが大きく目立ちクリック率が上がります。

Rinkerカスタマイズ方法

簡単なカスタマイズ方法が二通りあります。

追加CSSでカスタマイズする

ソースコードを見た時、カッコ悪くなるけど一番手軽な方法です。

WPの管理画面から[外観]-[カスタマイズ]-[追加CSS]の画面にいきここのフォームに下記のCSSコードをコピペします。

(CSS)

これだけです。

スタイルシートでカスタマイズする方法。

たぶん一番メジャーな方法。

ただ、子テーマで編集しないとアップデートした際、消えるので注意。

[外観]-[テーマ編集]-[スタイルシート]の画面を開き

スタイルシートのフォームの一番下にでも下記のCSSを突っ込んでおけばOKです。

(CSS)

ボタンの色を変更する方法

CSSをよく見ると

この項目があります。

この[#6桁の文字]に好きな色のHTMLコードを入れればボタン、文字の色を変更することが出来ます。