サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2018-08-19 12:38
はじめて書き込みさせていただきます。
今までSimplicityを使用させていただいておりましたが、この度Cocoonへの引き継ぎ作業を行っております。
これまでSimplicity（1.8.0）でカエレバ風の商品紹介ボックスを使っていたのですが、Cocoonでの引き継ぎを行ったところレイアウトが変わってしまったようで少し対処に苦しんでおります。
CSSは以下の通りです。
----------------------------------
.kaerebalink-box{text-align:left;
padding:8px;
margin-bottom:24px;
font-size:x-small;
zoom: 1;
overflow: hidden;
border: thin solid #cccccc;
}
.kaerebalink-box div.shoplinkiherb{display:inline;
margin-right:5px;
padding: 10px 0px 10px 0px;
background:#377401;
}
.kaerebalink-box div.shoplinkiherb a{color:#F7F8F9;
text-decoration:none;
display:inline-block;
padding: 0.9em 2.5em;
}
.kaerebalink-image{
float:left;
margin:0 15px 0 0;
}
.kaerebalink-image img{
border : none ;
box-shadow : none;
}
.kaerebalink-detail{margin-bottom:5px;}
.kaerebalink-info{line-height:120%;
zoom: 1;
overflow: hidden;
}
.kaerebalink-name{margin-bottom:10px;
line-height:120%;
font-size:16px;
}
.kaerebalink-link1{margin-top:10px;}
.kaerebalink-box div.shoplinkiherb{display:inline;
margin-right:5px;
padding: 10px 0px 10px 0px;
background:#377401;
}
.kaerebalink-box div.shoplinkiherb a{color:#F7F8F9;
background:#377401;
text-decoration:none;
display:inline-block;
padding: 0.9em 2.5em;
}
.kaerebalink-box div.shoplinkiherb a{color:#F7F8F9;
text-decoration:none;
display:inline-block;
padding: 0.9em 2.5em;
}
.kaerebalink-box div.shoplinkiherb a:hover{color:#FFFFFF; background:#377401;
}
----------------------------------
こちらのCSSを使うために投稿時には以下のような記述をしております。
----------------------------------
----------------------------------
記事のリンクはこちらです。
（現在はSimplicityに設定しています）
SimplicityではPC、レスポンシブ共に「画像が左側、商品名などが右側上、ボタンが右側下」というレイアウトで表示されており問題ないのですが、Cocoonで表示させるとレスポンシブ時に「画像が上、商品名などが下、ボタンがさらに下」というレイアウトになってしまいます。
こちらの結果は参考画像を添付させていただきますのでご確認をお願い致します。
Cocoonへの移行をしたいと考えているのですが、当方のページではこのリンクボックスを多用してしまっており、対応に苦慮しているというところです。
CSSなども素人に毛が生えた程度の知識で動作すればOKという考えで使っていましたので、何か修正ポイント等あれば教えていただければ幸いです。
Topic starter
2018-08-19 12:42
コードの部分がそのまま記載されてしまっておりました。
見苦しい状態で申し訳ありません。
正しくは以下の通りです。
<pre><code>
</code></pre>
2018-08-19 18:28
.booklink-box,
.kaerebalink-box,
.tomarebalink-box,
.amazon-item-box {
display: flex;
}
こちら一番下にでも貼り付けて試していただけますか？
あとSimplicityではなく、Cocoonで表示いただけたら、ローカルでソースを貼り付け確認する手間が省けるので、回答者さんが付きやすいと思います。
回答者さんがいなければ、全てCocoon作成者さんが、他の回答・不具合修正・カスタマイズ指南・そしてまた別でも指南…指南しなん…とけっこう大変になると思うので、ご協力お願いしますね❦
うまくいきますように
わいひら reacted
Topic starter
2018-08-19 18:55
かうたっく様
ご回答いただきありがとうございます。
早速示していただいたコードを利用してみました。
不慣れなゆえ、コードの貼り付けも見苦しいのにありがとうございます。
（2つ目の書き込みに至っては内容が間違いなので消して欲しいと管理者様に報告しました…）
試してみましたところ、見事にレイアウトが変わり画像が左側になりました！
少し思っていたものと違っていましたが、当面はこれで対応してみたいと思います。
SimplicityではモバイルでもPCでも同じような横長ボックス（画像1:テキスト3ぐらいの割合）だったのですが、今回のコードを使ったことによって画像1:テキスト1ぐらいですが左右に配置はされるようになりました。ありがとうございます！
もしお時間がありましたら上記のような横長ボックスにできる方法など指南いただければ幸いです。
なお、URLに関してはCocoonへ変更させていただきました！！！
こちらの記事の方がわかりやすいかもしれませんのでご参照くださいませ。
https://otokono-toushitsuseigen.com/archives/10303
2018-08-19 21:09
不慣れなゆえ、コードの貼り付けも見苦しいのにありがとうございます。
（2つ目の書き込みに至っては内容が間違いなので消して欲しいと管理者様に報告しました…）
そうなんですね…。私なんて書き込みが多いし不慣れがあり消えてしまいたい事なんてザラで。
※特に書き込みしだした頃を思い出すだけで泣けそうですが、誰も気にしないし、それが現実だと思って気にしないようにしております＾＾；
それより手間をおかけしたくない感じですかね。
もしお時間がありましたら上記のような横長ボックスにできる方法など指南いただければ幸いです。
なお、URLに関してはCocoonへ変更させていただきました！！！
具体的にどのようにしたいか。伝えるとそれに見合ったスタイルができると思います❦
どこをどのようにしたいか。横長ボックスのイメージがどんなものか。それをつたえれば良いと思います。
回答側と質問者さんのイメージが必ずしもイッチしないのもあるので、画像があれば伝わりやすいかもしれません。※こんな風にしたい的画像。
どんなサイズでどのように見ているかとか。全てをチェックしきれていない所もありまして。
Topic starter
2018-08-20 00:25
たびたびありがとうございます！！
こうやって丁寧に答えていただけるというのはすごくありがたいです…
あんまり自分の要望とか勝手をお伝えするのはダメなのかな～と思ってましたが、こんな優しくしていただけたら励みになります！
おっしゃっていただいたように、一旦Simplicityに戻してスマホで表示させたものを画像でキャプチャしましたのでご確認ください。
ちょっと画像がデカすぎる感じになってしまっているかもですが…
スマホでは概ねこのように表示されており、スッキリとして見やすくなっていました。
あとはmarginやpaddingで調整すべきところかもしれませんが、スマホビューの時だけレイアウトを変えるというのがどうも上手くできる自信がない次第です笑
是非お力をお貸しいただければと存じます ?
2018-08-20 15:27
/* スマホタブレットサイズに適応 */
@media screen and (max-width: 768px) {
/* 画像領域の幅指定min-widthの値を変更 */
.booklink-image, .kaerebalink-image, .tomarebalink-image, .product-item-thumb {
width: 100px;
min-width: 100px;
}
/* リンクの左（画像の右）に余白が欲しいとき */
.kaerebalink-info {
padding-left: 0.5em;
}
}
https://gyazo.com/0fc61fee42ef213f975003f4f4fef97f
- スマホのみに反映させたい場合
子テーマCSSの下にある@media screen and…の480px以内カッコ内{ここにコード}の項目に入れてもOKです。
/* 画像領域の幅指定min-widthの値を変更 */
.booklink-image, .kaerebalink-image, .tomarebalink-image, .product-item-thumb {
width: 100px;
min-width: 100px;
}
/* リンクの左（画像の右）に余白が欲しいとき */
.kaerebalink-info {
padding-left: 0.5em;
}
サーバー・プラグインなどのキャッシュがあればクリアにしてからご確認くださいね。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。