ブログ収益化の基本！？オシャレな「カエレバ」を使いこなすでござる、の巻
どうも。
家にいながら買い物が出来る、ということでネットショッピングをよく利用するという人はめちゃくちゃ多いです。
そんな現代において「自身のサイトからリンク先で購入してもらえれば報酬」というのはかなりハードルが低いように感じますよね？（感じるだけｗ）
そういった通販系物販アフィリエイトの形をさらにやりやすくしてくれるのが「カエレバ」というツールです。
まぁこのブログにたどり着くぐらいですから、おそらく「カエレバ」というものが何かというのは、ご存知のことかと思います。
提携済みの様々なショップへのアフィリエイトリンクを同時に貼り付けられる便利アイテムですね。
今回は使い方とか詳しい話でも無く、CSSコードを載っける、とかいう話でも無くｗｗ
使いこなし方として、ただ単にコードの記述の仕方についてのお話をしてみます。
オシャレなカエレバの正しい使い方
さっきからオシャレ・オシャレと連呼しておりますが、完全に自己満足でのお話ですので、「何やこれ？」と思われる可能性もなきにしもあらずですが、そっとしておいてくださいまし。
というかそもそも、カエレバのCSSはそこら中で掲載されていますので基本的には参考にさせていただく、という形を取ることになるかと思います。
僕自身もこちらのサイトを参考にさせていただいてます。
![CSSコピペでOK！カエレバ・ヨメレバ・トマレバをまとめてカスタマイズ[ver2]](https://ksukelife.com/wp-content/uploads/luxe-blogcard/b/bfa27139c4913c13ffc32439af1787fb.png)
https://rough-log.com/4854なのでCSSコードを貼り付ける、ということは致しませんのでこちらのサイトさんで、どうぞ。
あんまりこういうこと書くべきじゃないんですが、「いかがでしょうか！？すごいオシャレになりましたね！」とか書いてあるサイトでボロボロに表示が崩れてるの見ると、もうちょっと何とかならんのか？と思ってしまいます…ｗ
上の参考にさせていただいたサイトさんでは、完全にレスポンシブ対応出来る記述の仕方（わかりやすいとこだとデバイス毎にwidthを％で指定したり）してらっしゃるのでかなり使いやすいです。
ただ僕が使ってるLuxeritasだと、コンテンツ幅が想定より少し小さくなるため、ボタン3つ横に並べるとなると修正が必要でしたのでLuxeritasユーザーが参考にさせて頂く場合は注意。
このCSSをコードを基に、自分の好き勝手にアレンジするとこうなりました。
こんな感じで好きなように出来るってことですね。これがヨメレバの方。少し画像が大きいということに後で気付く…まぁヨメレバはたぶんあんま使わんと思うのでとりあえず放置ｗ
改悪？聞こえませんな。( ﾟдﾟ )
こっちがカエレバ↓
こんな感じです。
使っているだけでそれで良い、という気持ちになれます。
まぁやっとこさ本題はここから。
カエレバのCSSは…
オシャレにしようとすればぶっちゃけて言うと、めちゃくちゃ記述が長くなります。
上のサイトさんでも確か250行近かったんじゃ無いでしょうか？
僕の場合はここから「トマレバ」の分はサイトのジャンル上使わんかな、と思って消したのとショップリンクの装飾も現状で提携してるものだけにして…。
それでもジャスト200行ぐらいにしかなりませんでした。
ガンガン使っていく人なら良いけど、僕のように300記事以上書いてきてこれが3回目（笑）のカエレバ使用とかなると直接子テーマのスタイルシートに記述して毎回読み込ませるのはアホらしいと思いませんか？ｗ
だからこそ、結構シンプルな見た目を使っている人が多いです。
この前笑ったのが、散々記事内ではボタンの装飾をグラデーションとかボックスシャドウ使いまくって「オシャレでしょう？お試しアレ」とか言ってた人が、普段遣いであろう記事下に貼ってあるカエレバの方はめちゃくちゃシンプルだったってことｗｗ
僕としては、シンプルな見た目も好きだけど遊び心を持たせたかったので、記述を削ぐ、ということはしたくありませんでした。
カエレバ高速仕様
結局のところ何をするのか？というと非同期で読み込ませるのが一番手っ取り早いと思います。
以前ご紹介したLuxeritas開発者るな様のやり方（この記事にリンク貼ってます）でも良いし、最近流行りの「prelord」でも良いです。
カエレバを使う時だけ、CSSを読み込んでさらに非同期にしてしまえば読み込みスピードを落とすこと無く、オシャレ度を落とすこと無く、自己満足に浸れるという寸法。
さらにそれを、
- Luxeritas使ってる場合だとクリック一発で設定できるようにすること
- 編集したくなったらいつでも一括で編集出来るようにすること
この辺を目標に考えてみました。
カエレバのCSSを作る
とりあえず最初にやることは、見た目を確定させます。
テストサイトでやっても良いし、Preview見ながらでも良いし、とにかくこだわっていじり倒します。僕も1時間ぐらいあれこれやった。
ただ「あんま詳しくないねん」という場合は別にコピペだけでも大丈夫です。
ここでの作業はスタイルシートに書いててもおｋです。というかそれ以外にやりようがないｗ
完成したら一応ここでメモ帳なり、FTPツール上でも良いので「kaereba-css」など名前を付けてバックアップをとっておきます。
以降CSSを圧縮しますので万が一、なにがなんなのかわからん、となってしまった場合コメントアウトなど見ながら軌道修正するために置いておきます。
バックアップが取れたら、スタイルシート上のカエレバ用CSSコードは消してしまってもいいです。実際に過去書いた記事にも使っている、という場合はまだ消さない方が無難。
CSSを圧縮する
見た目が確定したら、CSSを圧縮します。無駄な改行とかを無くしてちょっと軽量化します。
別にそこまでこだわらないなら、飛ばしても構いません。
「min css 作成」とかでググれば出てきますが、僕はこちらを使わせていただいてます。→CSS Minifier (スタイルシートの圧縮)
で、この圧縮されたCSSをコピーして「kaereba-css.min.css」的な名前を付けてFTPファイルを新規作成して、お使いのテーマの子テーマ上にアップします。（Luxeritasだと「luxech」になります。）
ロリポップだと、このように子テーマ階層まで進んでいって、この+が付いてるアイコンを押すと新規ファイルが作成出来ます。
こんな感じでペーストするだけ。
記事毎にCSSを読み込ませる
ファイルを作っただけだと、まだ読み込みはされません。
記事毎に読み込ませるために、JavaScriptを使って「link rel～」を組み込ませるようにします。
Luxeritas（バージョン3以上）だと定型文機能が使えますのでめちゃくちゃ作業が早いです。
<div class="js"><script type="text/javascript">var delaycss=document.createElement("link");delaycss.rel="stylesheet",delaycss.href="【ここにURL】.min.css",document.head.appendChild(delaycss);</script></div>「ここにURL」としている部分は「/wp-content」からCSSファイルまでたどってきた階層に書き換えてください。サブディレクトリで運用してる場合は先頭に付け足し必要！
これを定型文登録＞「ショートコード」タブ＞新規作成＞Contents欄に貼り付けて、ラベルとショートコードに任意の名前を付けるだけで済みます。
後はカエレバ使っている記事にショートコードを入れていけば非同期でCSSの読み込みが行われるということです。
この記述は単純にこのコードが読み込まれると同時にCSSの読み込みが開始される、というだけのものです。
なのであんまり先頭の方に書いちゃうと意味無いのでカエレバを使う直前ぐらいにショートコードを記述するのがベターかと。まぁよくわからん場合は、一番下に貼ってても読み込みは間に合います。
もしLuxeritasじゃない場合は、function.phpに、
function my_shortcode_kaereba($atts, $content=null) {
return '
<div class="js"><script type="text/javascript">var delaycss=document.createElement("link");delaycss.rel="stylesheet",delaycss.href="【ここにURL】.min.css",document.head.appendChild(delaycss);</script></div>
';
}
add_shortcode('kaereba_css', 'my_shortcode_kaereba');これを追記しても行けます。（テストサイトで動作確認済み）
この場合だと［kaereba_css］と入力すれば良い、となります。URL書き換えないとサイトにアクセス（管理画面も）出来なくなりますので、完全に理解できた人以外は自己責任でお願いします…。もしアクセス出来なくなったら、お使いのサーバーのFTPツール上で追記内容消せば復旧します。
もしよくわからんって場合は別の解決策もあります。後述。
＜div class="js"＞って何やねんって方の為に一応説明しておくと、特にjsというクラス名に意味があるわけでは無く、scriptタグを＜div＞で囲うことでWordPressでもインラインにJavaScriptを埋め込めるようになるって、おばあちゃんに聞きました。
実際パチンコブログの自動計算ツール系は全部埋め込んでますが動作は安定しています。
もしインラインにJavaScriptはちょっと…という場合は個別にヘッドタグに「link rel～」と入れていっても良いですね。
まとめ
最終的に、JavaScriptを記事内に放り込む形になりますのでややこしくなってしまいました。
もしわけわからん、って場合は別にCSSを圧縮したものを＜style＞タグで囲ってショートコードに登録して使っても良いです。
最初はこれでやってました。
ファイルで読み込ませた方がちょっとだけ早くなりました。
直接インラインに埋め込んでしまうと、もし不具合あったり編集したくなった時に、全てを貼り替えなきゃいけなくなるというデメリットが出てきます。
なのでわざわざショートコードとして登録しておくことで、ショートコードの中身を変更すれば全てに反映されるように出来るってことですね。
ただCSSファイルとして持っておくと、キャッシュされるというメリットもありますし、編集したい時も外観＞テーマからカエレバ用CSSを選択出来てハイライトもされてるので編集しやすいです。
アホみたいに長くなりましたが、お付き合いありがとうございました。