itPocketFeedlyCopyどうも。家にいながら買い物が出来る、ということでネットショッピングをよく利用するという人はめちゃくちゃ多いです。そんな現代において「自身のサイトからリンク先で購入してもらえれば報酬」というのはかなりハードルが低いように感じますよね?(感じるだけw)そういった通販系物販アフィリエイトの形をさらにやりやすくしてくれるのが「カエレバ」というツールです。このブログにたどり着くぐらいですから、おそらく「カエレバ」というものが何かというのは、ご存知のことかと思います。提携済みの様々なショップへのアフィリエイトリンクを同時に貼り付けられる便利アイテムですね。今回は使い方とか詳しい話でも無く、CSSコードを載っける、とかいう話でも無くww使いこなし方として、ただ単にコードの記述の仕方についてのお話をしてみます。まとめオシャレなカエレバの正しい使い方さっきからオシャレ・オシャレと連呼しておりますが、完全に自己満足でのお話ですので、「何やこれ?」と思われる可能性もなきにしもあらずですが、そっとしておいてくださいまし。いうかそもそも、カエレバのCSSはそこら中で掲載されていますので基本的には参考にさせていただく、という形を取ることになるかと思います。僕自身もこちらのサイトを参考にさせていただいてます。...https://rough-log.com/4854なのでCSSコードを貼り付ける、ということは致しませんのでこちらのサイトさんで、どうぞ。いうこと書くべきじゃないんですが、「いかがでしょうか!?すごいオシャレになりましたね!」とか書いてあるサイトでボロボロに表示が崩れてるの見ると、もうちょっと何とかならんのか?と思ってしまいます...w上の参考にさせていただいたサイトさんでは、完全にレスポンシブ対応出来る記述の仕方(わかりやすいとこだとデバイス毎にwidthを%で指定したり)してらっしゃるのでかなり使いやすいです。僕が使ってるLuxeritasだと、コンテンツ幅が想定より少し小さくなるため、ボタン3つ横に並べるとなると修正が必要でしたのでLuxeritasユーザーが参考にさせて頂く場合は注意。このCSSをコードを基に、自分の好き勝手にアレンジするとこうなりました。2010-04-29AmazonKindle楽天ブックスこんな感じで好きなように出来るってことですね。画像が大きいということに後で気付く...まぁヨメレバはたぶんあんま使わんと思うのでとりあえず放置w改悪?聞こえませんな。2018-01-26Amazon楽天市場7netこんな感じです。使っているだけでそれで良い、という気持ちになれます。やっとこさ本題はここから。カエレバのCSSは...オシャレにしようとすればぶっちゃけて言うと、めちゃくちゃ記述が長くなります。上のサイトさんでも確か250行近かったんじゃ無いでしょうか?僕の場合はここから「トマレバ」の分はサイトのジャンル上使わんかな、と思って消したのとショップリンクの装飾も現状で提携してるものだけにして...。それでもジャスト200行ぐらいにしかなりませんでした。使っていく人なら良いけど、僕のように300記事以上書いてきてこれが3回目(笑)のカエレバ使用とかなると直接子テーマのスタイルシートに記述して毎回読み込ませるのはアホらしいと思いませんか?wだからこそ、結構シンプルな見た目を使っている人が多いです。この前笑ったのが、散々記事内ではボタンの装飾をグラデーションとかボックスシャドウ使いまくって「オシャレでしょう?お試しアレ」とか言ってた人が、普段遣いであろう記事下に貼ってあるカエレバの方はめちゃくちゃシンプルだったってことww僕としては、シンプルな見た目も好きだけど遊び心を持たせたかったので、記述を削ぐ、ということはしたくありませんでした。結局のところ何をするのか?というと非同期で読み込ませるのが一番手っ取り早いと思います。以前ご紹介したLuxeritas開発者るな様のやり方(この記事にリンク貼ってます)でも良いし、最近流行りの「prelord」でも良いです。カエレバを使う時だけ、CSSを読み込んでさらに非同期にしてしまえば読み込みスピードを落とすこと無く、オシャレ度を落とすこと無く、自己満足に浸れるという寸法。それを、Luxeritas使ってる場合だとクリック一発で設定できるようにすること編集したくなったらいつでも一括で編集出来るようにすることこの辺を目標に考えてみました。カエレバのCSSを作るとりあえず最初にやることは、見た目を確定させます。テストサイトでやっても良いし、Preview見ながらでも良いし、とにかくこだわっていじり倒します。僕も1時間ぐらいあれこれやった。「あんま詳しくないねん」という場合は別にコピペだけでも大丈夫です。ここでの作業はスタイルシートに書いててもおkです。いうかそれ以外にやりようがないw完成したら一応ここでメモ帳なり、FTPツール上でも良いので「kaereba-css」など名前を付けてバックアップをとっておきます。以降CSSを圧縮しますので万が一、なにがなんなのかわからん、となってしまった場合コメントアウトなど見ながら軌道修正するために置いておきます。バックアップが取れたら、スタイルシート上のカエレバ用CSSコードは消してしまってもいいです。実際に過去書いた記事にも使っている、という場合はまだ消さない方が無難。CSSを圧縮する見た目が確定したら、CSSを圧縮します。無駄な改行とかを無くしてちょっと軽量化します。別にそこまでこだわらないなら、飛ばしても構いません。作成」とかでググれば出てきますが、僕はこちらを使わせていただいてます。(スタイルシートの圧縮)で、この圧縮されたCSSをコピーして「kaereba-css.min.css」的な名前を付けてFTPファイルを新規作成して、お使いのテーマの子テーマ上にアップします。(Luxeritasだと「luxech」になります。)ロリポップだと、このように子テーマ階層まで進んでいって、この+が付いてるアイコンを押すと新規ファイルが作成出来ます。こんな感じでペーストするだけ。記事毎にCSSを読み込ませるファイルを作っただけだと、まだ読み込みはされません。rel~」を組み込ませるようにします。Luxeritas(バージョン3以上)だと定型文機能が使えますのでめちゃくちゃ作業が早いです。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の読み込みが開始される、というだけのものです。先頭の方に書いちゃうと意味無いのでカエレバを使う直前ぐらいにショートコードを記述するのがベターかと。わからん場合は、一番下に貼ってても読み込みは間に合います。'my_shortcode_kaereba');これを追記しても行けます。(テストサイトで動作確認済み)この場合だと[kaereba_css]と入力すれば良い、となります。URL書き換えないとサイトにアクセス(管理画面も)出来なくなりますので、完全に理解できた人以外は自己責任でお願いします...。アクセス出来なくなったら、お使いのサーバーのFTPツール上で追記内容消せば復旧します。わからんって場合は別の解決策もあります。class="js">って何やねんって方の為に一応説明しておくと、特にjsというクラス名に意味があるわけでは無く、scriptタグを<div>で囲うことでWordPressでもインラインにJavaScriptを埋め込めるようになるって、おばあちゃんに聞きました。実際パチンコブログの自動計算ツール系は全部埋め込んでますが動作は安定しています。rel~」と入れていっても良いですね。まとめ最終的に、JavaScriptを記事内に放り込む形になりますのでややこしくなってしまいました。わけわからん、って場合は別にCSSを圧縮したものを<style>タグで囲ってショートコードに登録して使っても良いです。最初はこれでやってました。ファイルで読み込ませた方がちょっとだけ早くなりました。直接インラインに埋め込んでしまうと、もし不具合あったり編集したくなった時に、全てを貼り替えなきゃいけなくなるというデメリットが出てきます。ショートコードとして登録しておくことで、ショートコードの中身を変更すれば全てに反映されるように出来るってことですね。CSSファイルとして持っておくと、キャッシュされるというメリットもありますし、編集したい時も外観>テーマからカエレバ用CSSを選択出来てハイライトもされてるので編集しやすいです。アホみたいに長くなりましたが、お付き合いありがとうございました。ボタンポチポチするだけバージョン】Nextアドセンスの自動広告(記事内とか)が表示されなくなった時の対処法Prevこちらの記事もどうぞ関連記事ロリポップサーバーのキャッシュ機能を使うならやっとくべきことロリポップのキャッシュ関連でもう1個。...アドセンスの自動広告を早速導入してみた結果...アドセンスの自動広告が使えるようになったそうで...。今回はグローバルナビに関するお話をば。コメントをキャンセル一部承認制を取っているため、コメント反映までお時間かかる場合ありますがご了承ください。名前の入力は必須です。入れないとエラーになりますので匿名の場合もお手数ですが「匿名」と入力ください。年齢:1987年生まれのおっさん。特徴:仕事は雑だが好きなことはマメ。「色々あったが、これからの人生なんとか真面目にがんばっていきたいな」と切実に思いながら焦らずじっくりとブログを書いています。