.jetpack-lazy-image{display:none}ゲームと音楽と副業の「趣味でまったりお金を稼ぐ」ブログです。143どうも、ぶちくまです。アフィリエイト商品の管理とリンク生成がとても便利なRinker。AMPだと表示が大きく崩れたのでCocoon使用者限定にはなりますが、シンプルだけど使い勝手のいいデザインになりました。現在、「Rinker導入しようと思ったけどあきらめたぜ!」っていう、いかにも爽やかな記事を書いています(苦笑)結局あきらめられずに、大きなネックの一つだったAMPで表示が崩れないカスタマイズをしてみました。Cocoon限定です。(たぶん他のテーマでも大丈夫ですが、テーマCSSの影響を受ける可能性はあります)INDEXCocoonならAMPも楽々CSS編集できるCocoonはテーマで商品リンクができるようになったコメントに気づかず申し訳なかった。CSSで簡単にカスタマイズできるのです!これからの時代、ページ速度をGoogleも評価するようになるって話ですから、検索流入はAMP、そこからいかに離脱させずにサイト内を回遊してもらうか、というのが一つ、カスタマイズのポイントになってくると思います。Cocoonはテーマで商品リンクができるようになったなりましたねー、どんどん進化しますねー。Amazonと楽天商品リンクモバイル表示をカスタマイズ|CocoonCocoonの商品リンクが素敵にアップデートされたので、モバイル版の形式だけ少しカスタマイズしてみました。Yahooのリンクだけ少し大きいなと感じたので、それぞれ同じ大きさにして、あまりみない丸いボタン風にしてみました。簡単なコードにしたので、さらにカスタマイズを深めてください。buchikuma.xyz2018.09.02記事、書くよねー。いうわけで、ぶちくまはRinker卒業しました。コメントに気づかず申し訳なかった。SNS慣れしておらず、コメントがきていることに気づかず、せっかくのレスポンスに対応できずにすいませんでした。箇条書きリストの黒ぽちが消されていないAmazonボタンと楽天ボタンの間に空白があるなどなど(もっとあると思いますが)不具合もみられていました。空白についてはコメントでいただいたのですが、当方では再現されておらず。Rinkerが更新されるごとに、余計な余白がつくられたり。プラグインは更新のタイミングでCSSやり直さないといけないのでしんどいですね。一応、解説もしますから、色などの変更はご自由に行ってください。神明Amazon楽天市場Yahooショッピング他のコードが作用しているようだったら、優先度を上げるか、一度打ち消してからコード記入するといいかも。RinkerはAMP非対応なのでYahooのリンクにバリューコマースのLinkSwitchコードタグがのっかっていません。バリューコマースがリンクを認知できない。Yahooショッピングを楽しむためだけのリンクになります。今回のカスタマイズはあくまでもStyle.CSSの調整なので、Yahooショッピング時のアフィリエイトリンクをつくるためのものではないことをご了承ください。アフィリエイトの場合はID認識はAMPでもしてくれるので、少し利率が下がりますが、それでもよければもしも優先にすれば回避はできる。Yahooはバリューコマース独占なので利率の差が出るのは仕方がない。Yahoo!ショップは、ストア側に対して店舗経営しやすく配慮するなど優遇していることもあって、楽天ばりにショップ収益があるようになってきています。カスタマイズのポイントAMPに関しては、一応、モバイル専用なのであまりレスポンシブのことは考えずに構築しました。AMPは実は書き込める文字数に制限がありまして、誠に個人的な事情により、あまり凝ったデザインにはできない実情がありまして。シンプルな感じになってます。ホバー時のエフェクトとか入れたいなぁとは思ってるんだけどねぇ。ほら、人生引き算もうまく使わないと、みたいなところあるじゃないですか。いうことで(どういうことだ)背景色の変更やアイコンを使って少しだけ個性的なデザインにする一応、各ショップのリンク前に、アイコンを入れられるように、それらしいものは配置してみました。本当はAmazonのアイコン、使いたいんだけど、アソシエイト的にはNGらしいですね、残念。アソシエイトはロゴを勝手に使うとNG問い合わせて聞いてみたところ、返答がありました。https://affiliate.amazon.co.jp/tips/t3/a3/上記以外のロゴをご利用いただくことはお断りしています、とのこと。Fontawesomeのアイコン使ってもいいか訪ねてみたが、そちらは特に明言されず。アマゾン以外のアイコンは使ってもいいかと質問してみたけど、そちらは特に返答がなかったので、各々の判断でアイコンを使うといいでしょう。背景色は暖色系でまとめましたが、Rinker的にYahoo!は青みたいです。個人的にはYAHOOロゴの色が赤だからそのあたりをイメージして。あとは文字の大きさですかね。価格は少しだけ色を変えました。真っ赤だと派手なので、控えめなピンクに。画像はセンターに置くように調整しましたが、使用する画像によって多分崩れます。AMPはだいたい崩れるのでそういうものだと思ってあきらめてください(苦笑)とくに変更無ければプラグインからCSSコピペでもOKRinkerはプラグインにStyle.CSSがあるので、その純正コードをコピーして、そのままAMP用のCSSスタイルシートに貼ってもそんなに大きくは崩れないようです。スポンサーリンクコピペでOKなRinkerカスタマイズ冥土の土産にAMPじゃない、普通の方も置いていきます。こちらは特にCSSの制限はないので、少し回りくどい記述がおおいかもしれません。Rinkerのモバイル時のボタン配置をまっすぐ3行にRinkerのデザインで唯一耐えられなかったのが、小さめのスマホで見ると、ボタンと画像がごちゃつくこと。ある程度小さい端末で画面をみたときは、ボタンが縦に1列に並ぶようになっています。これをするために結構時間がかかってしまった。リンク生成も大変ではない。取得の際に検索用語つくったりとかは少し面倒。AMPデザインもCocoonなら準備されているし、Yahooリンクが収益にならないのは少しもったいない。おまけにCocoon商品リンクも比較してちょいといじりましたが、比較用のCocoon商品リンクも貼ってみましょうか。23:08時点)Amazonの商品レビュー・口コミを見るAmazon楽天Yahoo!ショッピングスポンサーリンクついでにWPアソシエイトポストについてもよく、Rinkerと比較されるWPアソシエイトポストですが、個人的にはRinkerよりも使いやすくて多用してました。(てへ)WPアソシエイトポストの方が使いやすい理由カスタマイズしやすかった(ただし更新後はあまり違いはない)デザインがすっきりしていたUIが好みだったと、意外にもデザイン面で惹かれたんですよね。使い勝手の良さそうな「利率表示」は、意外と使わない。いうか、まったく使わない。それでも、圧倒的にCocoonテーマの商品リンクの方が使い勝手が良かったので、順次張り替え作業してます。人知れずWPAPR2にも対応していた当サイト実は、AMPにおいても、WPAPをのせたコードを作成して、ほとんど遜色のない二つのプラグインを、意味もなく使い回していた当ブログ。くまいつか比較記事でも書こうと思ってたら、不要になってた(ガクブル)やろうと思ったことは、すぐに実行しないとダメですね。こんな感じでつくっていました。AMP用のCSSコード紹介(コピペ自由)自由にカスタムっちゃってください。auto;}こんな感じです。ブログ運営スポンサーリンクシェアするTwitterFacebookはてブPocketLINEコピーぶちくまをフォローするぶちくまぶちくま創作ベース関連記事Cocoon【Cocoon】ブログカードは回遊率をあげるためにシンプルが1番!WordPressの無料テーマ、Cocoonのカスタマイズ記事です。今回は、「ブログカード」という、リンクを貼るだけで記事のアイキャッチとタイトル、本文説明(snippet)を抜き出す便利な機能になります。目的は何より回遊率をあげること。ユーザーを求めている情報まで届けること。2018.06.08CocoonCocoonカスタマイズは初心者でも簡単にできる【おすすめ一覧】WordPress無料テーマ「Cocoon」の初心者でもできるカスタマイズ部とその方法をまとめてみました。見出しも本文だけではなく、「サイドバーウィジェット」「コメント」「関連記事」などもデザイン可能。ボタンやバッジ、ボックスデザインやCocoonおすすめ機能のカルーセルのCSS編集などを掲載しています。2018.06.07CocoonCocoonにテーマ変更するメリット【ありがとうSimplicity】Simplicityの作者、わいひらさんがCocoonという新しいテーマを提供してくれています。今回はCocoon導入を迷われている方に背中を押すメリットについてまとめてみました。広告戦略も簡単にできるので初心者におすすめのテーマとなっています。記事中の好きな場所に、ショートタグで簡単に広告挿入できるのも魅力的です。アフィリエイトタグも使えて、定型文入力はお手のものです。これを少し目立たせて存在アピールするカスタマイズを行いましたので共有投稿します。Cocoonのモバイルスライドインメニューボタンの改造記事になります。「サイドバー」のアイコンと文字を変えて、別の要素に切り替えて内容を示すというカスタマイズです。2018.06.30Cocoon【Cocoonを使ってブログ作り】サイトのテーマを決めないと大変なことにCocoonを使ったブログ作りを解説しています。今回はサイトのイメージを固めて、サイト全体のカラーリングについて解説しています。設計図を作ることで、ブレなく、統一感のあるサイトを作成することができます。マテリアルデザインとフラットデザインの特徴、メリット/デメリットについても。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。Cacheを導入Headをすっきりさせて読み込みを早くするお勧めのWPプラグインエックスサーバー利用者なら簡単にサイト高速化ができる方法を伝授!CDN導入のためにJetpackとCloudflareを使った感想オススメの記事CocoonのカスタマイズをするならCocoonカスタマイズは初心者でも簡単にできる【おすすめ一覧】サイト高速化の手引きブログ高速化のためにやった5つの方法|WordPressテーマはCocoon記事の検索プロフィールぶちくまぶちくま:白いもふもふの毛皮を被った医療系社畜兼ブロガー。Cacheを導入Headをすっきりさせて読み込みを早くするお勧めのWPプラグインエックスサーバー利用者なら簡単にサイト高速化ができる方法を伝授!CDN導入のためにJetpackとCloudflareを使った感想オススメの記事CocoonのカスタマイズをするならCocoonカスタマイズは初心者でも簡単にできる【おすすめ一覧】サイト高速化の手引きブログ高速化のためにやった5つの方法|WordPressテーマはCocoon記事の検索プロフィールぶちくまぶちくま:白いもふもふの毛皮を被った医療系社畜兼ブロガー。幻影戦争の装備・武器クラフトについて知りたい2019.12.062020.01.15幻影戦争に課金すべきか悩んだら読む記事「やめとけ」2019.11.222020.01.06ブレイドエクスロードの適正パーティーの組み方2019.11.012020.01.10アルカラストの効率的な育成手順【素材もないし金もない】2019.08.182019.12.16FFT(タクティクス)コラボをどう消化するか【幻影戦争】2019.12.27応援クリック大歓迎!人気ブログランキングにほんブログ村フォローボタンぶちくまをフォローするカテゴリーイラスト2ゲーム159FFBE幻影戦争9KHUx6TEPPEN12ぷよぷよクエスト4アルカラスト6アートオブコンクエスト18ゼノンザード10デュエルリンクス28ドラガリアロスト3ドラクエライバルズ1ハンドレッドソウル8ブラウンダスト12ブレイドエクスロード8ヴァルキリーアナトミア6最果てのバベル28ブログ52Cocoon19カスタマイズ2サイト高速化6Simplicity4Xeory2ブログ運営15WordPress5スパルタブログ論2収益化5副業のすすめ13ゲームライター6動画配信2読書2小説1漫画1音楽3リスニング2スポンサーリンクタイトルとURLをコピーしました。