サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2018-03-27 11:28
PC表示で左右で異なる広告を表示させたいです。
※例えば左に楽天、右にa8など。
つまり、Simplicityテーマのウィジェットにあった（PC）ダブルレクタングル機能を、Cocoonでも利用したいです。
2018-03-27 13:27
スレ主さんのおっしゃる設定があると便利ですよね。
それから。ついでにココから便乗させていただきます。
- 分かる方教えてください。
広告ウィジェットに18個？？位ウィジェットをいれてますが、スクリプトが読み込まれないようでウィジェットのHTMLタグしか表示されません。
cocoon設定で入れた除外記事IDもウィジェットに反映しないようで手入力が必要だったり。
5時間ほどゴチョゴチョして…Cocoon設定で広告コードを入れるのが大前提？？？とやっと今思ってきたところです(ヽ''ω`)
ついSimplicity2の感覚が抜けずにいました。。。
もしかしてCocoon設定から広告コードを入れないとウィジェット内ADスクリプトは表示されない仕様。ってことであってますか？
それとも私の環境だけ表示されない状態でしょうか？※今はCocoon設定（広告コード1つのみ：複数の広告コードではない状態）で対応してます。
----------------------------------------------
サイト名：ビバ★りずむ
サイトURL： https://bibabosi-rizumu.com
Wordpressバージョン：4.9.4
PHPバージョン：7.1.4
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：0.3.3
----------------------------------------------
子テーマ名：Cocoon Child
バージョン： 0.0.2
----------------------------------------------
どなたかご回答、よろしくお願いします！
2018-03-27 22:23
つまり、Simplicityテーマのウィジェットにあった（PC）ダブルレクタングル機能を、Cocoonでも利用したいです。
これは僕も考えたんですが、
- 左右にコードを分けて入れられる
ということができる利点に対して
- PC広告ウィジェットに入力項目が2つ必要になるので邪魔（ダブルレクタングルフォーマット以外では使わないのに）
- もしくはダブルレクタングルウィジェットをもう一つ増やす必要がある
- コードが複雑になる
- コードの保守性が下がる
という難点の方が目立ったので、今回は採用を見送りました。
レスポンシブ広告ユニットで横長に広告を表示できるようになった以上、そこまで（左右パフォーマンスを分けて計測するほどの）必要性を感じなくなったというのもあります。
今のところは、PC広告ウィジェットのコード入力欄にダブルレクタングル用のコードを作成入力して使用していただくしかないかもしれません。
2018-03-27 22:28
もしかしてCocoon設定から広告コードを入れないとウィジェット内ADスクリプトは表示されない仕様。ってことであってますか？
確かにそうなってるかも。
以下のコードを子テーマのfunctions.phpに挿入すること、Cocoon設定のコード入力は不要になりますが、いろいろ正常動作しますでしょうか？
function is_ads_visible(){
//$ads_visible = is_all_ads_visible();
$post_ids = explode(',', get_ad_exclude_post_ids());
$category_ids = get_ad_exclude_category_ids();
//広告の除外（いずれかがあてはまれば表示しない）
$is_exclude_ids = (
//記事の除外
is_single( $post_ids ) || //投稿ページの除外
is_page( $post_ids ) || //個別ページの除外
//カテゴリの除外
(is_single() && in_category( $category_ids ) ) ||//投稿ページの除外
in_category( $category_ids ) //アーカイブページの除外
);
return is_all_ads_visible() &&
//get_ad_code() && //広告コードが挿入されている
!$is_exclude_ids && //除外ページでない場合広告を表示
is_the_page_ads_visible() && //ページで除外していない場合
!is_attachment() && //添付ページではない場合
!is_404() && //404ページではない場合
!is_search(); //検索結果ページで無い場合
}
2018-03-28 02:11
後から失礼します。
PC表示で左右で異なる広告を表示させたいです。
※例えば左に楽天、右にa8など。
テキストウィジェットかカスタムHTMLウィジェットで、Tableなどを使ってダブルレクタングルは設置できます。
以下は、ダブルレクタングルの設置例です。左は、336x280のAdSense ラージレクタングル広告、右は楽天のモーションウィジェットを設置しています。
https://www.blogging-life.com/cocoon/cocoon-auto-ads-setting/
例えば、以下の様な感じです。（上のページでは、センターリングなどをかけています。）
<table>
<tr>
<td>
左側のレクタングル広告コード
</td>
<td>
右側のレクタングル広告コード
</td>
</tr>
</table>
ご参考までに、上記設置方法について、記事を投稿する予定です。
2018-03-28 02:17
ダブルレクタングル用のウィジェットがあると便利かもしれませんが、上記のように比較的簡単にテキストウィジェットなど設定できるので、わいひらさんがお書きになられた様なトレードオフ（実現することと引き換えに加わる難点）を考慮すると、必要性はあまりないように私も思います。
PC広告ウィジェットに入力項目が2つ必要になるので邪魔（ダブルレクタングルフォーマット以外では使わないのに）
もしくはダブルレクタングルウィジェットをもう一つ増やす必要がある
コードが複雑になる
コードの保守性が下がる
また、AdSenseの場合は現在のCocoonの設定のようにレスポンシブの大きい広告も効果的だと思います。（サイトの種類やページ当たりの広告数などにもよります。）
Topic starter
2018-03-28 06:34
質問者です。
わいひらさん、ありがとうございます。
今のところは、PC広告ウィジェットのコード入力欄にダブルレクタングル用のコードを作成入力して使用していただくしかないかもしれません。
Chico Mさん、ありがとうございます。
テキストウィジェットかカスタムHTMLウィジェットで、Tableなどを使ってダブルレクタングルは設置できます。
↑コレコレー(´ε｀*人)笑！
ウィジェットがなくても、設置できる方法が知れたので感謝です！ありがとうございますm(_ _)m。
2018-03-28 12:53
少し調べてみました。以下、stackoverflowの投稿を添付致します。英語圏でも、テーブルをHTMLのレイアウトのために使うことは避けるべきだという意見があって、意見が分かれているようです。
https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html
ここでの論点やディスカッションを見る限り、明確にまずいというようなことには思えませんでした。（意見としてその様に思うということの論点は理解できますが、考え方などにもよるように思います。）
私は日本のサイトやHTMLの使い方や意見は良く存じません。お手数をおかけしますが、よろしければ、教えて下さい。よろしくお願い致します。
2018-03-28 19:04
table タグは、表を作成するためのタグです。広告は、表に含まれるデータではありません。また、table タグは、強調スニペットの生成にも使われるほど重要なタグです。
table タグの本来の使い方に反して、横並びにしたいがために使うものではありません。html と css は分離するというのが、基本中の基本です。
何かご参考になる情報はないかと探したところ、 Google の社員の方が書いた情報がありました。静的サイトのレスポンシブ対応を説明したものではありますが、 table タグの部分は全てのサイトで参考にできます。
How to convert a static html site to responsive
静的なHTMLサイトをモバイル対応サイトに変換する手順 （翻訳されたサイト）
ご参考にされた stackoverflow で賛成の意見を述べている方は、 css での指定が面倒だと感じているようですね。
2018-03-28 20:24
わいひらさんに
以下のコードを子テーマのfunctions.phpに挿入すること、Cocoon設定のコード入力は不要になりますが、いろいろ正常動作しますでしょうか？
私の環境で設定したcocoon設定・広告タブにある『広告コード』をカラにして、『マニュアル広告設定（自前で位置を設定）』にチェック・広告除外記事IDは投稿記事のみ2つ設定。
表示確認したところ、理想道理の挙動で完璧でした。ありがとうございました！
アップデートで修正案件でしたら？、アップデート後に追記コードを削除しますね。（コードが無いほうがスッキリするので）
あと、もう1つ。
細かい事ですが『cocoon設定』より『広告』に変な文字列が入ってます。
アドセンス広告に関する設定です。一応通常広告でも利用できるようにはなっています。 解説ページ
?>
バージョン：0.3.3・最新版0.3.6でも確認できる状態です。
Cocoon: ads-forms.php (lib/page-settings/ads-forms.phpの50行目あたり
ご確認お願いします。
2018-03-28 20:46
表示確認したところ、理想道理の挙動で完璧でした。ありがとうございました！
アップデートで修正案件でしたら？、アップデート後に追記コードを削除しますね。（コードが無いほうがスッキリするので）
動作確認していただきありがとうございます。
僕も、コードの入力/未入力で広告表示するべきではない（AdSenseコード以外もあるため）と思うので、次のバージョンで同様の設定にしたいと思います。
既に手元のファイルは修正ししました。
https://github.com/yhira/cocoon/commit/48d0fad292ce92a10544df45d2a3e830b746e59b
細かい事ですが『cocoon設定』より『広告』に変な文字列が入ってます。
こちらでも確認しました。
こちらの手元のファイルは修正したので次のバージョンで改善されると思います。
ありがとうございます！
https://github.com/yhira/cocoon/commit/abf9776def8399d1e5e82653df2c42f0c37d3420
simplist reacted
2018-03-28 20:53
HTMLの仕様を気にしないのであれば、ダブルレクタングルをテーブルでやるのも良いかもしれません。
Googleランキングの仕様的にもランキングに影響もしないと思います（HTMLが正確に書き込まれているよりもコンテンツを優先するので）。
ただ、テキストウィジェットでアドセンスをダブルレクタングル表示するときは、モバイル画面では横に並んでしまうのではないかと思います。
モバイル画面では、縦に二つ並べて表示するため、divをスタイリングしてダブルレクタングル表示したほうが良いかもしれません。
また、アドセンスを利用している場合は、ダブルレクタングル表示すると、メディアクエリを用いて、縦に並べて一つスタイルで非表示にする必要があります。
そのためにも、テーブルを使うとスタイリングが複雑になるという難点はあるかもしれません。
2018-03-29 01:22
Akiraさん、
お返事ありがとうございます。大変参考になりました。
仕様というのは仕様です。それをどう使うかというのは、さまざまです。道具は様々な使い方があります。適さない使い方もあると思いますが、本来の使い方でなくても、実用性が高いものもあります。
言葉やファッションでも同様のことが言えます。元来の意味、使い方でないものであっても、実用に適している場合は、一般化する場合もあります。
話を本題に戻すと、技術的に問題がある。不具合発生の原因となるなどの理由がある場合であれば、利用すべきでないと考えます。
利用する上での問題点、不具合、懸案事項が明確になければ、「利用するのはダメだ。」、「利用しても良い。」というのは、個々の意見でしかありません。どちらが正しくて、間違っているということでもないと思います。
HTML5では、tableは、レイアウト・エイドとして使うべきでないと記載されています。
Tables should not be used as layout aids. Historically, many Web authors have tables in HTML as a way to control their page layout making it difficult to extract tabular data from such documents. In particular, users of accessibility tools, like screen readers, are likely to find it very difficult to navigate pages with tables used for layout. If a table is to be used for layout it must be marked with the attribute role="presentation" for a user agent to properly represent the table to an assistive technology and to properly convey the intent of the author to tools that wish to extract tabular data from the document.
https://dev.w3.org/html5/spec-preview/the-table-element.html
概要として、テーブルをページレイアウトの作成に使用すべきでない理由として、「テーブルをページレイアウトの構成に使用する事例が過去に多くあるが、表で構成されたデータの抜き出しが難しくなる。テーブルをレイアウトに使用しているとスクリーンリーダーなどのアクセシビリティのツールでのページナビゲーションが困難になる。」ことを挙げています。
これは妥当な指摘だと思います。
ただし、これは記事下に設置するレクタングル広告の設置にテーブルを使用する話とは別です。（殆どと言って、関係のない話です。）
ルールを明らかに逸脱していたり、表示上の問題があるのであれば、使用すべきでないことは明確ですが、そのようなことには該当しないと思います。
道具や言葉をどのように利用するかは、使う側の自由、裁量に任せられているところもあります。広告を表示するのにテーブルを使うかどうかは、サイト運営者の判断だと思います。
2018-03-29 01:35
HTML5では、上記理由（テーブルをレイアウトエイドに使うべきでない）からテーブルタグでは、"align", "bgcolor", "border", "cellpadding", "cellspacing", "frame", "rules", "summary", "width" のAttribute（属性）がサポートされていません。
レイアウトに使う場合は、Attributeの役割をプレゼンテーション(role="presentation")にマークすべきなどの条件を設けています。
その上でルールを守って使用するのは、ユーザーの自由です。
使うべきか、使わないべきかという議論ではなく、仕様上で制限やルールを設けて、利用者の判断に任せるというのがHTML5のアプローチです。（ただし、テーブルをレイアウトエイドに使うべきでないとことは理由を付加して、明確に述べています。）
テーブルをレイアウトエイドに使用することと、記事下の広告設置にテーブルを使用することとは、直接的には関連性はあまりありませんが、ご参考までに追記します。
2018-03-29 01:48
わいひらさん、
フォローのメッセージありがとうございます。
検索上はコンテンツを優先するので、おっしゃる通り、全く関係ないと思います。
おっしゃる通り使い方、運用上の問題ですよね。
ただ、テキストウィジェットでアドセンスをダブルレクタングル表示するときは、モバイル画面では横に並んでしまうのではないかと思います。
おっしゃる通りテーブルでダブルレクタングルを設定したコードが含まれたウィジェットを、パソコンとモバイルで表示する場合は、工夫が必要になりますよね。（多分、かなり面倒になると思います。）
十分に御存知の通り、ダブルレクタングルのコードが含まれたテキストウィジェットをモバイルでは出力しないようにすることで、上記は回避できます。
SimplicityやCocoonその他、通常テーマでウィジェットを使用して記事下の広告を表示させる場合、パソコンとモバイルでウィジェットを分けるのは、ごく一般的なアプローチだと思います。
2018-03-29 14:50
ですね～
なんなら3カラムでもワンクリックでいけました(笑)
<div class="column-wrap column-3">
「アフィリエイトタグ」に登録したものを使えば自由自在ですね♪
2018-03-29 22:07
Cocoonは２カラムのタグが標準装備だよね
ワンクリックだよ
それだっ！
ビジュアルエディターをで2カラムを入力し、そのソースコードをコピーしてテキストウィジェットに入れて利用するのが一番手っ取り早そうですね。
レスポンシブスタイリング済みですし。
製作者が今更気づくとか(笑)
Chico M reacted
2018-03-30 23:32
上記方法を参考にして、PC用テキストウィジェットをつかって、2カラムタグをつかって広告を並列させたところ、Adsense（または楽天広告）２つ並列では同じ高さになるのですが、Adsenseと楽天を２つ並列すると添付のように右側が1行ずれてしまいます。
Adsenseと楽天２つ並列した場合は右側がすこし下にずれるの２つの画像を添付します。
2018-03-30 23:33
こちらはAdsenseを２つ並列したものです。
ずれを改善するためにはどうすればよいでしょうか？
2018-03-31 10:11
ワードプレス4.8からの仕様でテキストウィジェット内で<p>段落タグと<br>改行タグが自動挿入されるため表示がずれてしまったかと思い、「カスタムHTMLウィジェット」にて同様に2カラムタグをつかって広告を並列させたところ、やはりずれて表示されてしまいます。
2018-04-01 00:08
なるほど・・・確かに楽天の広告領域がAdsenseと違っているかもしれません。
ダブルレクタングルで違う広告をはろうと考えていましたが、ひとまずAdsense×２か楽天×２のどちらからでやってみようと思います。
2018-05-30 11:45
お世話になります。
ダブルレクタングルで例えば左にAdsense、右に楽天などを表示する場合、Adsense規約にひっかかるため広告そのものを非表示にすることはできますでしょうか？
広告ウィジェットであれば簡単に設定できるのですが、カスタムHTMLウィジェットを使った場合などは可能でしょうか？
2018-05-30 20:55
お世話になります。
お酒に関する記事の場合、規約にひっかかるため表示させないようにしたいのです。
現状はPC用広告ウィジェットでAdsenseコードをはってダブルレクタングル表示しているものを、Adsenseを表示させないように記事単位で指定しています。
Adsense＋Adsenseを例えばAdsense+楽天にして、広告ウィジェットのように記事単位で表示・非表示を設定したいです。
2018-05-30 22:09
わいひらさん
ご返信ありがとうございます。
広告ウィジェットで、<div class="column-wrap column-2">を使ってAdsenseとその他アフィリエイトをダブルレクタングルできればよかったのですが、やはり個別カスタマイズとなり、知識のない私にはハードルが高そうです。
現状のAdsenseダブルレクタングルで運用しようと思います。
2018-05-31 04:08
カスタムHTMLウィジェットがPHPを使えたか不明ですけど、CocoonのウィジェットではPHPを使えたと見た記憶があります。
記事単位でアドセンスを表示させないようにするなら、WordPressの分岐タグを使うとうまくいきますよ。
<?php if( !is_single('★') ) : ?>
<!-- ここはID★以外で反映するコード -->
<?php else: ?>
<!-- アドセンス以外のコード -->
<?php endif; ?>
1行目の★は投稿記事IDを書き込みます。ID確認方法ですが、カテゴリ毎したい場合、指定したい記事が複数ある場合、以下のあたりに書いてます。
https://bibabosi-rizumu.com/wordpress-if-single-category/#toc13
上記ページ以外なら WordPress 分岐タグ などで調べると編集方法が出てくると思います。
haineons reacted
2018-05-31 08:35
かうたっくさん
分岐タグを使う方法を教えていただきまして、ありがとうございます。
早速PHPウィジェットを使って、教えていただいたタグを使ったところ、思い通りに表示させることができました！ 本当に助かりました。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。