常日頃からアマゾンや楽天、ヤフーの通販にお世話になっている私ですが今回は、記事の中でお役に立てるようなものを紹介してみたくてアフィリエイトに挑戦いたしました。
ブログには「kattene」（カッテネ）をWordPressにインストールして調べた通りしましたが、うまく表示されなくてかなり困りましたが出来ました。
Cocoon（コクーン）style.cssを調べていくうちにこれだ！というものに出会いましたのでシェアーしておきたいと思います。お役に立てれば幸いです。
目次
「kattene」（カッテネ）のstyle.cssはこれだった！！
まず、WordPressに「kattene」をインストールして「有効化」をクリックしておきます。
次に「kattene」（カッテネ）cssコードが先か、ショートコードが先か・・・実際、初心者の私にはわかりません・・・どちらが先でも良いと思います。
ほぼ同時進行にやるのが一番良いと思います。
最後にアフィリエイト商品リングをはめていけば良いと思います。先に土台、型、ワクをつくっておけばあとはリンクやURLを貼るだけなので。
それで、インストールまでは簡単でした。それからググって調べたcssコードをあれこれと試しましたが「Kattene」がうまく表示されなくて困りました(´；ω；｀)
本当に何時間も格闘していましたが、結果的にこのコードが一番私のブログには合っていました。
WordPressの無料テーマCocoon（child）style.cssの最後の段落に、以下のコードを入れて「更新」してみると、すぐに「kattene」（カッテネ）が表示されました＼(^o^)／
今から詳しく手順を書いていきます。
かなり長いコードですが、がんばってコピペしてみてください。それでもうまく表示されなければ「消す」だけです。コードを張った範囲は最後の段落なのでわかりやすいですよ。
最初はドキドキしますが、慣れてくれば、間違えれば範囲を覚えておいて「消す」だけです。「更新」クリックもしっかり確認してくださいm(_ _)m
「Cocoon（child）」の「style.css」にコードを貼る手順
- １）WordPressの左の黒いタテ帯にあるダッシュボードと書かれた下にある「外観」にマウスを乗せれば出てくる「テーマエディタ」をクリック。
- ２）「Cocoon（child）」と「style.css」を確認。
- ３）始めからあるコードには触らず、コード記載の終わりの一番下の方に、続けて以下のコードを貼り付けました。
- ４）「更新」を忘れないようにクリックしました。
.kattene {
border: none !important;
border-radius: unset !important;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
background-color: #fafafa; /* 背景カラー */
font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
font-size: 16px;
height: auto;
line-height: 1.5;
margin: 36px auto !important;
padding: 12px 8px !important;
overflow: hidden;
width: 98% !important;
}
.kattene__imgpart {
background: #fff;
box-sizing: border-box;
min-width: 150px;
padding: 12px 0;
vertical-align: middle;
}
.kattene__imgpart img {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.kattene__title>a {
display: block;
padding: 5px;
color: #4392f1; /* タイトルのテキストカラー */
}
.kattene__description {
color: rgba(0,0,0,0.54); /* 説明文のテキストカラー */
font-size:0.7em !important;
padding: 0 5px;
}
.kattene__btns {
display: flex;
flex-wrap: wrap;
margin: 0 auto !important;
padding: 12px 5px !important;
position: initial !important;
}
.kattene__btns > div {
box-shadow: 0 6px 12px -5px rgba(0,0,0,.3);
border-radius: 8px;
}
@media screen and (min-width: 901px){
.kattene__btns > div {
width: 32.333% !important;
}
}
@media screen and (max-width: 900px) {
.kattene__imgpart {
width: 100%;
}
.kattene__title,
.kattene__description {
text-align: center;
}
.kattene__btns {
padding: 10px 5px !important;
}
.kattene__btns > div {
width: 99% !important;
margin: 3.5px auto !important;
}
}
/* 全ボタン共通 */
.kattene__btns a {
margin: 0 !important;
padding: 0 !important;
border-radius: 8px !important;
font-size: .8em !important;
line-height: 30px !important;
letter-spacing:0;
-webkit-box-shadow: none !important;
box-sizing: border-box;
box-shadow: none !important;
}
.kattene__btns a:hover {
background: #ffffff !important;
opacity: 1;
}
/* ボタンオレンジ */
.kattene__btn.__orange {
border: 2px solid #ff9901 !important;
}
.kattene__btn.__orange:hover{
color: #ff9901 !important;
}
/* ボタンブルー */
.kattene__btn.__blue{
border: 2px solid #007dcd !important;
}
.kattene__btn.__blue:hover{
color: #007dcd !important;
}
/* ボタンレッド */
.kattene__btn.__red {
border: 2px solid #c20004 !important;
}
.kattene__btn.__red:hover{
color: #c20004 !important;
}
/* ボタングリーン */
.kattene__btn.__green {
border: 2px solid #0BBD80 !important;
}
.kattene__btn.__green:hover {
color: #0BBD80 !important;
}
/* ボタンピンク */
.kattene__btn.__pink {
border: 2px solid #e1325b !important;
}
.kattene__btn.__pink:hover {
color: #e1325b !important;
}
/* WordPressで自動挿入されたPタグの余白を消す */
.kattene p {
margin: 0;
padding: 0;
}
.kattene {
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 3px;
padding: 10px;
padding-bottom: 5px;
margin-bottom: 1em;
box-sizing: border-box; }
.kattene div{
margin: 0;
}
.kattene__imgpart {
text-align: center; }
.kattene__imgpart img {
-webkit-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);
box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);
-o-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);
-ms-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);
margin: 0;}
.kattene__description {
font-size: 0.8em; }
.kattene .kattene__btns {
width: 100%;
margin-top: 0.5em; }
.kattene__btns:after {
display: block;
clear: both;
height: 0px;
visibility: hidden;
content: "."; }
.kattene__btns > div {
float: left;
margin-bottom: 5px; }
.kattene__btns .kattene__btn {
width: 100%;
padding-left: 0;
padding-right: 0;
}
.kattene__btns.__three > div {
width: 32.66667%; }
.kattene__btns.__three > div:not(:last-child) {
margin-right: 1%; }
.kattene__btns.__two > div {
width: 49.5%; }
.kattene__btns.__two > div:nth-child(odd) {
margin-right: 1%; }
@media screen and (max-width: 900px) {
.kattene__imgpart {
padding-bottom: 1em; }
.kattene .kattene__btns {
margin-top: 0.5em; }
.kattene__btns.__five > div {
width: 49.5%; }
.kattene__btns.__five > div:nth-child(odd) {
margin-right: 1%; }
.kattene__btns.__five > div:last-child {
margin-right: 0;
float: right; }
.kattene__btns.__four > div {
width: 49.5%; }
.kattene__btns.__four > div:nth-child(odd) {
margin-right: 1%; }
.kattene__btns.__one > div {
width: 50%;
margin-left: 25%; } }
@media screen and (min-width: 901px) {
.kattene {
display: table;
width: 100%; }
.kattene__imgpart {
display: table-cell;
width: 20%;
padding-bottom: 5px;
}
.kattene__infopart {
display: table-cell;
vertical-align: top;
position: relative;
padding-left: 10px;
width: 80%; }
.kattene .kattene__description {
margin-bottom: 4em;
}
.kattene__btns {
position: absolute;
bottom: 0;
box-sizing: border-box;
padding-right: 10px; }
.kattene__btns.__five > div {
width: 19.2%; }
.kattene__btns.__five > div:not(:last-child) {
margin-right: 1%; }
.kattene__btns.__four > div {
width: 24.25%; }
.kattene__btns.__four > div:not(:last-child) {
margin-right: 1%; }
.kattene__btns.__two > div {
width: 49.5%; }
.kattene__btns.__two > div:not(:last-child) {
margin-right: 1%; }
.kattene__btns.__one > div {
width: 49.5%;
float: right; } }
.kattene .kattene__btn {
appearance: none;
background-color: #54c0d1;
border: 0;
border-radius: 0;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
font-size: 1em;
-webkit-font-smoothing: antialiased;
font-weight: 600;
line-height: 1;
padding: 0.75em 0;
text-decoration: none;
transition: background-color 150ms ease;
user-select: none;
vertical-align: middle;
white-space: nowrap; }
.kattene__btn:hover, .kattene__btn:focus {
background-color: #439aa7;
color: #fff !important; }
.kattene__btn:disabled {
cursor: not-allowed;
opacity: 0.5; }
.kattene__btn:disabled:hover {
background-color: #54c0d1; }
.kattene__btn.__small {
padding: 0.55em;
font-size: 0.9em; }
.kattene__btn.__orange {
background-color: #FF9901;
-webkit-box-shadow: 0 5px 0 #cc7a01;
-moz-box-shadow: 0 5px 0 #cc7a01;
box-shadow: 0 5px 0 #cc7a01;
-o-box-shadow: 0 5px 0 #cc7a01;
-ms-box-shadow: 0 5px 0 #cc7a01;
margin-bottom: 5px;
border-radius: 3px;
text-align: center; }
.kattene__btn.__orange:hover {
background-color: #cc7a01; }
.kattene__btn.__orange i {
font-weight: bold; }
.kattene__btn.__orange i:before {
vertical-align: middle;
font-size: 1.2em;
margin-right: 0.2em; }
.kattene__btn.__blue {
background-color: #007dcd;
-webkit-box-shadow: 0 5px 0 #0064a4;
-moz-box-shadow: 0 5px 0 #0064a4;
box-shadow: 0 5px 0 #0064a4;
-o-box-shadow: 0 5px 0 #0064a4;
-ms-box-shadow: 0 5px 0 #0064a4;
margin-bottom: 5px;
border-radius: 3px;
text-align: center; }
.kattene__btn.__blue:hover {
background-color: #0064a4; }
.kattene__btn.__blue i {
font-weight: bold; }
.kattene__btn.__blue i:before {
vertical-align: middle;
font-size: 1.2em;
margin-right: 0.2em; }
.kattene__btn.__red {
background-color: #c20004;
-webkit-box-shadow: 0 5px 0 #9b0003;
-moz-box-shadow: 0 5px 0 #9b0003;
box-shadow: 0 5px 0 #9b0003;
-o-box-shadow: 0 5px 0 #9b0003;
-ms-box-shadow: 0 5px 0 #9b0003;
margin-bottom: 5px;
border-radius: 3px;
text-align: center; }
.kattene__btn.__red:hover {
background-color: #9b0003; }
.kattene__btn.__red i {
font-weight: bold; }
.kattene__btn.__red i:before {
vertical-align: middle;
font-size: 1.2em;
margin-right: 0.2em; }
.kattene__btn.__green {
background-color: #0BBD80;
-webkit-box-shadow: 0 5px 0 #099766;
-moz-box-shadow: 0 5px 0 #099766;
box-shadow: 0 5px 0 #099766;
-o-box-shadow: 0 5px 0 #099766;
-ms-box-shadow: 0 5px 0 #099766;
margin-bottom: 5px;
border-radius: 3px;
text-align: center; }
.kattene__btn.__green:hover {
background-color: #099766; }
.kattene__btn.__green i {
font-weight: bold; }
.kattene__btn.__green i:before {
vertical-align: middle;
font-size: 1.2em;
margin-right: 0.2em; }
.kattene__btn.__pink {
background-color: #e1325b;
-webkit-box-shadow: 0 5px 0 #b42849;
-moz-box-shadow: 0 5px 0 #b42849;
box-shadow: 0 5px 0 #b42849;
-o-box-shadow: 0 5px 0 #b42849;
-ms-box-shadow: 0 5px 0 #b42849;
margin-bottom: 5px;
border-radius: 3px;
text-align: center; }
.kattene__btn.__pink:hover {
background-color: #b42849; }
.kattene__btn.__pink i {
font-weight: bold; }
.kattene__btn.__pink i:before {
vertical-align: middle;
font-size: 1.2em;
margin-right: 0.2em; }（コード出典WordPress無料テーマCocoon）
上手く行かなくて何度もググっているうちに「プラグイン「Kattene」がうまく表示されません | Cocoon ...」という記事に巡り会いました＼(^o^)／
その中の回答で私も答えを頂きました。この場をお借りしてお礼申し上げます。「ありがとうございました」
ショートコードをブログに貼る
すぐに、ブログの投稿画面（編集画面）「カッテネ」のショートコードを貼りましょう！
私の場合は「ブロックエディタ」を使って「ビジュアルエディタ」（コードエディタではなく）投稿画面に貼り付けました。
ショートコード貼り付け手順
- １）新しい段落を取り、画面左上の「+」をクリックし「ショートコードマーク」【/】検索窓で「ショートコード」と入れるとすぐ出てきます。
- ２）「ショートコード」【/】をクリックして「ワクの中のワク内」に以下のコードをバシッと貼り付けましょう。
- ３）下書き保存をこまめにするといいそうです。
以下は「カッテネ」ショートコードです。このままコピーして「ワクの中のワク内」にバシッと貼り付けます。
コードの出典はWeb Food です。このコードを直接貼るのも良いですし、一度ノートに貼り付け、それからまた再度コピペするのも良いと思います。
アフィリエイトリングの取り方など詳しく知りたい方はナベトモ通信も簡単に教えています。
初心者の私も参考にさせていただきました、ありがとうございましたm(_ _)m
取得する商品によっては、アマゾン、楽天、ヤフーで十分だ、とか、本だったらKindle、audiobookのボタンも欲しいな、という風になってくると思います。
そんなときには、コードを削ったり（消したり）しなければいけなくなるので、その方法も詳しく載っています。
ショートコードを貼り付ければ「プレビュー」で何度も見直してアマゾンや楽天、ヤフーのボタンやワクが出ていれば成功です！
以下は自分のブログ記事より出典した画像です。「カッテネ」がパソコンのブログで表示された時です。
以下はiPhoneやスマホで表示された時です。
パソコンで見るときと、iPhoneやスマホで見る時と見せ方が変わるのですね。すごいです(ﾟдﾟ)！お陰様できれいなボタンの設置になり、見やすくなりました。
今回のまとめ
今回はWordPressの無料テーマCocoonで「kattene」（カッテネ）をうまく表示できるようになった私の実体験をシェアーさせていただきました(ﾟдﾟ)！
大きな流れ的な手順は、まず「kattene」プラグインをインストールし、有効化。
ブログ投稿画面に【/】（ショートコード）ワク内に「カッテネ」コードを張って、下書き保存。
「外観」⇒「テーマエディタ」を開いて、「Cocoon（child）」「style.css」に長いほうの「カッテネ」コードを最後の方に貼りました。
どちらからでも良いですし、私はほぼ同時進行していきました。
「更新」もしっかりクリックしました。記事投稿画面（編集画面）に戻ってプレビューで確認しながら「下書き保存」もしっかりしていきました。
記事が出来上がったら「更新」して「公開」します。今度はカエレバやヨメレバも挑戦してみたいなと思っています。最後までご覧いただきありがとうございました。
コメント