ブログ運営

CSSコピペするだけ!カエレバ・ヨメレバ・トマレバのデザインをカスタマイズ

こんにちは、こんばんわ。sumireです!^▽^

ブログで商品紹介記事で便利な「カエレバ」「ヨメレバ」「トマレバ」でアマゾンや楽天やホテル紹介などをする方が多いと思います。

ですが、デフォルトよりもっとブログデザインになじむデザインにしたい!

でもやり方がわからない…。

大丈夫です!CSSをコピペするだけで好みにカスタマイズすることができます!

そんな初心者の方にカスタマイズのやり方を解説します。

cssカスタマイズを設定する

まず、好きなデザインのcssをコピーします。

ブログパーツのデザインを公開している方がいますので、「カエレバ カスタマイズ」検索してみましょう。

ここでは私の使用しているブログテーマ「STORK」作成しているOPENCAGE様のサイトを参考にします。

[box class=”pink_box” title=”参考サイト”] [/box]

 

①公開されているcssをコピ-します。

 

②ワードプレスの管理画面で「外観」⇒「カスタマイズ」を選びます。

 

③カスタマイズから一番下にある「追加CSS」を選択します。

 

④追加CSSに先ほどコピーしたデザインものをコピペします。

これでCSS設定は完了です!

「公開」ボタンを押すのを忘れないようにしましょう。

 

「カエレバ」「ヨメレバ」「トマレバ」でブログパーツの設定

まずカスタマイズする前に、カスタマイズを反映させる用ブログパーツの設定の必要があります。

ここではカエレバで説明していきます。

 

①サイト右上の検索欄に紹介したい商品名を入れて検索してみましょう。

 

②目的の商品が見つかったら選び、ブログパーツを作りましょう。

 

③ブログパーツを下の画像の様にデザインの設定をamazlat風-2(cssカスタマイズ用)にします。

この設定でないとカスタマイズが反映されないので注意しましょう!

 

記事にリンクタグを挿入してみよう!

記事にカエレバ・ヨメレバ・トマレバのリンクタグを普通にコピペするだけで、自動でデザインをカスタマイズしてくれます。

[aside type=”warning”]

カエレバ・ヨメレバ・トマレバのリンクタグを挿入するときはテキストにコピペしましょう!

コピペした後はプレビュー画面でデザインを確認してみましょう。

 

私は最初、追加CSSにコピペするだけでデザインが変更できる仕組みが分からなかったので苦労しました;▽;

色んな親切なブロガーさんがデザインを公開していますので、お気に入りのブログパーツにカスタマイズしてみましょう!

私の解説は以上で終わりです。

是非、自分のブログのデザインに合わせたカスタマイズを楽しんでください!٩(ˊᗜˋ*)و