サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2018年5月5日 17:28
こんにちは。
CTA（Call to Action）ウィジェットを使ってアフィリエイト先に飛ばしたいのですが、どうやればいいのでしょう？
「CTAボタンURL」にアフィリエイトタグを入れてみたのですが、どこにも飛びませんでした。 やり方が間違っているのはわかったのですが、どうすればいいのかわからず質問させてください。
見た目としては下の画像のような形で、ボタンを押すとアフィリエイトしたいサイトに飛ぶようにしたいです。ランキングウィジェットの右の赤いボタンだとアフィリタグも可能なので、それと同じだとありがたいです。
https://gyazo.com/c0d9c9a2c65611cb837e9c16fdc1cd1a
お忙しい中恐縮ですが、ご教示お願いいたします。
2018年5月5日 20:36
とりあえず、以下のファイルでアップデートした上で、
https://github.com/yhira/cocoon/archive/master.zip
CTAメッセージ入りの1番下にアフィリエイトタグを入力し、CSSで、ボタン化のスタイリングを行えばできるかと思います（※CTAボタンURLには何も入力しない）。
デフォルトで用意されているボタンスタイルを使用する場合は、以下のclassの使い方でスタイリングできるかと思います。
https://wp-cocoon.com/button-style/
ASPによっては、タグ改変ができないケースもあるかもしれませんが、そういう場合はデベロッパーツールなどでCSSを見て、それを子テーマで使うなどする必要があるかもしれません。
Topic starter
2018年5月5日 23:09
わいひらさん、早速ありがとうございます。
上記ファイルでアップデートしようとしたところ、次のようなエラーが出て失敗しました。
https://gyazo.com/e59e60e10f94902926418fc298b63e98
ダウンロードして、テーマの新規追加したのですが、この方法が間違っているのでしょうか。
https://wp-cocoon.com/theme-auto-update/
この説明は読みましたが、FTPとかほとんど使ったことないので、WPの管理画面の外での作業が必要なら、これから勉強しないといけないレベルです。すみません。
2018年5月6日 10:50
これから勉強しないといけないレベルです。
『サーバー名 FTPソフト』などでFTPソフトの設定を検索してそれが出来たら、もらったzipファイルを解凍。
- 左のPC側が『cocoon-master』フォルダを右クリックでアップロード
- 右サーバー側のパスは（domain.com/public_html/）wp-content/themes
themesフォルダ内の『cocoon-master』フォルダが見える階層にPC側からアップロードして上書きする感じです。
https://wp-cocoon.com/downloads/#toc5
「/wp-content/themes」ディレクトリにアップして「cocoon-master」を上書きアップロードしてください。
その下に画像があるのでチェックしてください。
PC側（左）から『cocoon-master』フォルダをアップロードすればOKです。
エラーなどで困った時に焦りながら初めてFTPソフトを使う方も多いですが、WordPressで運営するならFTPソフトの使い方を知ってる方が安心ですよ＾＾
Topic starter
2018年5月6日 16:55
かうたっくさん、丁寧に教えてくださってありがとうございます。
コアサーバーを利用していますが、Zipファイルを解凍しないでもアップロードでき、FTPの上書きまではできたようです（エラーも出ず更新時間がアップデートされているので）。ありがとうございます！
ウィジェットの設定までやったのですが、ボタンが表示されません。
https://gyazo.com/66fedbd988c82a8d9b9a644008921358
表示されてるもの
- CTAボックスタイトル：dアニメストアで無料登録するにはこちら
- CTAメッセージ：dアニメストア公式サイトはこちら（ASPでタグの中で改変が認められている自由テキスト）。これをクリックすると指定サイトにちゃんと飛びますが、本来ここは平文で表示させたい。
表示されないもの
- ボックスとボックスタイトル
https://wp-cocoon.com/cta/
ウィジェトの各項目はこの記事と上記わいひらさんからの回答にしたがって設定しています。
タイトル：dアニメストアで無料登録するにはこちら
CTA見出し：空欄
CTA画像：空欄
CTAメッセージ：ASPのタグ（自由テキスト部分”dアニメストア公式サイトはこちら”）
CTAボタンテキスト：dアニメストア公式サイトへ
CTAボタンURL：空欄
CTAボタン色：赤色
これだけでは「赤いボタンないに白抜きでボタンテキストを表示させ、そのボタンを押すとサイトに飛ぶ」設定としては不足なのでしょうか？
わいひらさんがおっしゃる「CSSで、ボタン化のスタイリングを行えばできる」は、「子テーマの追加CSSに次の記事で紹介されているクラスの記述を追加しないとボタンの表示はされないよ」、という意味なのでしょうか。
https://wp-cocoon.com/button-style/#toc20
あと何をすればボタンが表示されるのかがわかりません。
たびたび申し訳ありませんが、この次にやるべきことをご教示いただけませんでしょうか。
2018年5月6日 22:22
例えば、赤いボタンで表示するのであれば、リンクに以下のようにクラスを追加します。
<a class="btn btn-red btn-l">ボタンテキスト</a>
aタグに「class="btn btn-red btn-l"」を追加するといった感じです。
どうしても、アフィリエイトタグを改変したくない場合は、以下のように書いても良いかもしれません。
<div class="ranking-item-link">
アフィリエイトタグ
</div>
Topic starter
2018年5月6日 23:34
わいひらさん、
細かくご教示いただきありがとうございます。
両方のパターン試してみましたが、ボタンをクリックしても飛ばなかったり、表示が望む形で表示されません。
このサイトにも貼られているランキングウィジェットの右の赤いボタンのようにならないのは設定まだどこか間違ってるでしょうか？
https://gyazo.com/f177f3da07a678277f7f28dc05d0f425
〜〜〜
１）<a class="btn btn-red btn-l">ボタンテキスト</a>を使うパターン
https://gyazo.com/6ed79a064b19757b7b6a2bbe1b448901
ボタンは表示されるが、ボタンを押しても何も起こらない（指定サイトに飛ばない）
ボタンテキスト設定で入力したテキストがボタンに表示されない
ボタンの”下”にタグがリンクで表示され、これをクリックすると指定サイトに飛ぶ
（設定）
タイトル：dアニメストアで無料登録してアニメを見てみる
CTA見出し：空欄
CTA画像：空欄
CTAメッセージ：<a class="btn btn-red btn-l">ボタンテキスト</a>の後にASPのタグを記載。
CTAボタンテキスト：dアニメストア公式サイトへ
CTAボタンURL：空欄
CTAボタン色：赤色
１−１）上記１）のうち（設定）のこれだけ変えたもの
CTAメッセージ：<a class="btn btn-red btn-l">ボタンテキスト</a>の”前”にASPのタグを記載。
（タグとクラスの順番を入れ替え）
https://gyazo.com/9c011e0a1d68e3b64a8c0791afa4d4de
ボタンは表示されるが、ボタンを押しても何も起こらない（指定サイトに飛ばない）
ボタンテキスト設定で入力したテキストがボタンに表示されない
ボタンの”上”にタグがリンクで表示され、これをクリックすると指定サイトに飛ぶ
２）
アフィリエイトタグ
のパターン
https://gyazo.com/e5cd4ff11cbe7ef9f1f2537d0ca9a48e
ボタンが表示されず、
ウィジェットの背景のグレーがあたかもボタンのように見えるが、テキストはセンタリングされない
（設定）
タイトル：dアニメストアで無料登録してアニメを見てみる
CTA見出し：空欄
CTA画像：空欄
CTAメッセージ：ASPのタグを上記divで挟む（自由テキスト部分”dアニメストア公式サイトへ”）
CTAボタンテキスト：”空欄”
CTAボタンURL：空欄
CTAボタン色：赤色
１のパターンだとボタンは表示されるがそこから飛ばすことができず
２のパターンだと指定したテキストから指定したサイトに飛ぶがボタンが表示されない
状況です。
何度も申し訳ありませんが、まだどこか間違ってるでしょうか？
2018年5月7日 00:33
①違います。アフィリエイトリンクのAタグにクラスを付加するんです。
②こっちは、タグが不十分だったみたいです。とりあえず①お試してください。
それでもうまくいかないようであれば、、できれば案内にもあるように、実際のページのURLを提示していただけると助かります。
Topic starter
2018年5月7日 01:25
あ、そうか。すみません。ありがとうございます。
断片的にかじって基本的な土台の知識がないので、クラスの付加の仕方自体よくわかってなくて。中に入れるんですね。
ボタンとボタンテキストまで表示されるようになりましたが、ボタンを押してもサイトには飛ばず、何も起こりません。
https://www.vod-best-selection.net/vod-recommend/d-anime-store/payment-term-credit-card/
飛ばしたい先は、上記ページのランキングウィジェットのdアニメストアで飛ぶのと同じ先です。
ウィジェットの設定はこれです
https://gyazo.com/e8827cb7b81285685cbd69a0d8cabd85
遅い時間にご回答ありがとうございます。
2018年5月7日 01:34
違うんです。こんな感じでclassを付け加えます。
<a href="https://t.afi-b.com/visit.php?guid=ON&a=YYYY-XXXXXXX&p=ZZZZZZZ" target="_blank" rel="nofollow" class="btn btn-red btn-l">dアニメストア公式サイトへ</a><img alt="" src="https://t.afi-b.com/lead/YYYY/ZZZZZZZ/XXXXXXX" style="border:none;" width="1" height="1">
Topic starter
2018年5月7日 10:50
わいひらさん、
お忙しい中初心者の質問にお付き合いいただいてすみません。
具体的なご教示ありがとうございます。
できました！
ボタン表示されボタンをクリックすると指定サイトに飛べました。
すごく嬉しいです、ありがとうございます！
https://gyazo.com/0b387f45e2c0e534bac41e61e4610b85
https://gyazo.com/4d474ca71601a800e2b8440f7be3be35
最低限やりたいことはできたのですが、見た目の点でもう少しできるのなら、
次の４つができるようにしたいです。
1) ウィジェットタイトルの位置をセンタリングする
2) ウィジェット背景のグレーを白にする
3) CTA見出しをセンタリングする
4) CTA見出のフォントサイズ、色を変える
https://gyazo.com/c0d9c9a2c65611cb837e9c16fdc1cd1a
(これに近づけたい）
これはカスタマイズで変更できるものでしょうか。
できるとしたら、どこを触ればいいのでしょうか。
変更対象を教えていただければ自分で勉強してやってみたいと思います。
どうしてもわからない時はまた別途質問させていただきたいですが、まず自分で勉強してやってみようと思います。
2018年5月7日 12:35
call-to-actionウィジェット以外のウィジェットに入れてやった方がCSSが短く済むような気がしますが。背景色とか。
これはカスタマイズで変更できるものでしょうか。
できるとしたら、どこを触ればいいのでしょうか。
おそらくCSSだけで変更できそうです。
変更対象を教えていただければ自分で勉強してやってみたいと思います
変更対象の範囲がわかりませんけど、以下の感じですかね？
- ブラウザの検証画面（要素の検証・デベロッパーツールなどで沢山ヒットします。）でウィジェットエリア特有のid・class属性（名前）を指定してセンタリング・必要であればwidthを指定
- 『dアニメ・・・見てみる』の文字列前にアイコンフォントを入れて、フォントを太く
- dアニメストア公式サイトへの領域にある・アイコンフォント > を消す・角丸にする下ボーダーを太く・ボックスシャドーをいれる
- 赤い領域の白地の文字のフォントサイズを変更
- そのbeforeにアイコンフォント〇＞をいれる
これでほんのり近づきそうです。
2018年5月7日 20:34
それだったら僕も、わざわざCTAウィジェットでやらなくても、テキストウィジェットでやった方が手っ取り早いかと思います。
Topic starter
2018年5月7日 22:22
かうたっくさん、わいひらさん
テキストウィジェットでできました！
https://gyazo.com/35e3b866d6828ad0253ad45917218651
ここまでいろいろ教えていただいたおかげで、今回はすぐにできました。
またいろいろアドバイスありがとうございます。
装飾はこれから勉強して少しずつ試していこうと思います。
今のところ最低限やりたいことができるようになり、とても感謝しております。ありがとうございます！
2018年5月8日 12:00
テキストウィジェットでできました！
CocoonのPC用とモバイル用ウィジェットを入れてるみたいですが、もっと下にある『テキスト』というウィジェットで良いと思いますよ。
CSSを勉強するにも答えがないとシンドイかと思うのでPC用をウィジェットのみに反映するスタイルを気まぐれですが作りました。
#pc_text-3 {
width: 80%;
margin: 0 auto 38px;
}
#pc_text-3 .main-widget-label {
text-align: center;
font-weight: bold;
}
#pc_text-3 .main-widget-label span:before {
font-family: FontAwesome;
content: "\f07b";
padding-right: 5px;
}
#pc_text-3 .btn {
background-color: #d30000;
border-radius: 33px;
border: none;
border-bottom: 6px solid #870000;
padding: 15px;
box-shadow: 2px 3px 20px 0px #6c030324 inset;
}
#pc_text-3 a:before {
font-family: FontAwesome;
content: "\f105";
}
#pc_text-3 .btn:after {
content: "";
}
#pc_text-3 .external-icon {
display: none;
}
PC用ウィジェットに入れてるはじめの文字列はspanタグで囲ってあげる：<span>文字</span＞。PC用ウィジェットだけに反映するので、要素の検証画面でHTMLを見てどこがどう反映するか確認しながらが良いかと思います。
WordPress投稿画面の下書き『テキストに張り付け』練習用として。
※編集内容：.external-iconに#pc_text-3 追加、NotePadに再編集、ソースが表示されたものを削除
上に書いた装飾をやったつもりですが、抜けてる部分などもあるかもです。
ゆっくり勉強がんばってください！
わいひら reacted
2018年5月8日 19:21
うまくいったようでよかったです！
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。