サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2022年3月6日 20:00
お世話になります。
全く無知から作り上げているのですが、サイト内検索でPCからでは普通に検索してくれるのですが、iphone12(スマホは持っていないので試せていません)では、サイト内検索結果が半分切れた固定ページになってしまいます。レスポンステストでも同じような状態でして、色々調べてみたのですが、どうしても解決できそうにないので書き込みさせていただきました。
~サイトアドレス~
~テーマ情報です~
サイト名:親父が選んだ素人&AV女優100選
サイトURL: https://eros.oreno.cyou
ホームURL: https://eros.oreno.cyou
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/maple-cheshire-cat/style.css
WordPressバージョン:5.9.1
PHPバージョン:7.4.27
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36
サーバーソフト:LiteSpeed
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
追加テーマの内容です。検索後の不具合画面添え付けさせていただきます。検索結果がでてこないので、他の検索窓を設置すればうまくいくと思い、サンゴの窓というPHPを読み込ませてタグカテゴリーの検索窓を設置したのですが、不具合はこれ以前からだったので、必要であればコード追記いたします。以上よろしくお願いいたします。
Cocoon Child: スタイルシート
@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template: cocoon-master
Version: 1.1.3
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/************************************
/*新着記事一覧のタイトル固定ページカスタマイズ*/
.top-title01 {
display: flex;
align-items: center; /* 垂直中心 */
justify-content: center; /* 水平中心 */
font-size: 24px;
margin-bottom:1em;
}
.top-title01:before, .top-title01:after {
border-top: 1px solid;
content: "";
width: 3em; /* 線の長さ */
}
.top-title01:before {
margin-right: 1em; /* 文字の右隣 */
}
.top-title01:after {
margin-left: 1em; /* 文字の左隣 */
}
/* エントリーカード横に並べる */
.widget-entry-cards.card-large-image .a-wrap {
width:32.5%;
height:auto;
display: inline-flex;
}
@media screen and (max-width: 768px) {
.widget-entry-cards.card-large-image .a-wrap {
width:49%;
display: inline-flex;
}
}
@media screen and (max-width: 480px) {
.widget-entry-cards.card-large-image .a-wrap {
width:auto;
display: inline-flex;
}
}
.widget-entry-cards.not-default figure img {
padding: .5em;
}
.widget-entry-cards.card-large-image .a-wrap {
font-size: 95%;
text-align: left;
padding:.5em;
}
/* 記事一覧のタイトル */
.top-title01 {
display: flex;
align-items: center; /* 垂直中心 */
justify-content: center; /* 水平中心 */
font-size: 24px;
margin-bottom:1em;
}
.top-title01:before, .top-title01:after {
border-top: 1px solid;
content: "";
width: 3em; /* 線の長さ */
}
.top-title01:before {
margin-right: 1em; /* 文字の右隣 */
}
.top-title01:after {
margin-left: 1em; /* 文字の左隣 */
}
.top-title02{font-size: 20px;} /* カテゴリー一覧タイトル文字サイズ */
/* もっと見るボタン */
.more-button {
max-width: 300px;
margin: 0 auto;
}
.more-button a {
display: block;
margin:25px 0;
padding: 0.8em 1em;
border-radius: 2em;
color: #fff;
font-size: 16px;
font-weight: 700;
text-decoration: none;
background: #1967d2;
box-shadow: 0 5px 20px rgba(235, 160, 47, .5);
text-align: center;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity:1;
}
.more-button a:hover{
box-shadow:none;
transform: translateY(3px);
opacity:1;
}
/*フロント固定ページのタイトルを非表示 */
.home .article h1{display:none;}
/*フロント固定ページのの投稿日を非表示 */
.home .post-date{display:none;}
/*フロント固定ページの更新日を非表示*/
.home .post-update{display: none;}
/*フロント固定ページのシェアボタンを非表示*/
.home.page .sns-share{display: available;}
/*フロント固定ページのフォローボタンを非表示*/
.home.page .sns-follow{display: available;}
/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info{display: none;}
/*固定ページの日付非表示*/
.page .date-tags {
display: none;
}
/*サイトロゴのフォント変更-文字黒*/
.logo-header a span{
font-family: 'Avenir','Helvetica Neue';
font-weight: bold;
font-size:45px;
}
/*サイトロゴのフォント変更-文字白*/
.logo-header a span{
font-family: 'Avenir','Helvetica Neue';
font-weight: bold;
font-size:45px;
text-shadow:2px 2px 0 #333333, -2px -2px 0 #333333,
-2px 2px 0 #333333, 2px -2px 0 #333333,
0px 2px 0 #333333, 0 -2px 0 #333333,
-2px 0 0 #333333, 2px 0 0 #333333;
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/
}
/*834px以下*/
@media screen and (max-width: 834px){
/*必要ならばここにコードを書く*/
}
/*480px以下*/
@media screen and (max-width: 480px){
}
}
/*吹き出しの色の初期設定 */
.sb-id-15 .speech-balloon {
background-color: #FFDDFF; /* 吹き出しメイン部分の背景色 */
border: 2px solid #FF88FF; /* 吹き出しメイン部分の枠 */
color: #333; /* セリフの文字色 */
}
.sb-id-15 .speech-balloon::before {
border-right: 12px solid #FFABCE;/* 三角部分の枠色 */
}
.sb-id-15 .speech-balloon::after {
border-right: 12px solid #FFABCE; /* 三角部分の背景色 */
}
@media screen and (max-width: 480px){
.sb-id-15 .speech-balloon::before { border-right: 7px solid #FFABCE; /* スマホでの三角部分の枠色 */
}
.sb-id-15 .speech-balloon::after { border-right: 7px solid #FFABCE; /* スマホでの三角部分の背景色 */
}
}
/* 見出しカスタマイズ */
/* H2 */
.article h2{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}
/* H3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}
/* H4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}
/* H5 */
.article h5{
border-bottom:none;
padding: 0;
}
/* H6 */
.article h6{
border-bottom:none;
padding: 0;
}
/* 「ピンク系の見出し」 */
.entry-content h2 {
padding: 0.5em;/*文字周りの余白*/
color: #FFF4E1;/*文字色*/
background: #da70d6;/*背景色*/
border-left: solid 5px #ff1493;/*左線(実線 太さ 色)*/
}
.entry-content h3 {
padding: 0.5em;
background: #FFF0F5;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
}
.entry-content h4 {
padding: 0.5em 0;/*上下の余白*/
border-top: solid 3px #da70d6;/*上線*/
border-bottom: solid 3px #da70d6;/*下線*/
}
.entry-content h5 {
/*線の種類(二重線)太さ 色*/
border-bottom: double 5px #da70d6;
}
/*モバイルフッター戦消す*/
#navi-footer li {
border: none;
}
/*ヘッダーの文字と背景の色を変える*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
background-color: #FFFFFF;
color: #000000;
}
.logo-menu-button.menu-button{
background-color: #FFFFFF;
}
/*1023px以下でロゴを消す*/
@media screen and (max-width: 1023px){
img.site-logo-image{
visibility: hidden;
}
}
/*1023px以下でモバイル用のロゴ表示*/
@media screen and (max-width: 1023px){
.logo-menu-button.menu-button{
background-image: url( );
background-size: auto 35px;
background-position: center;
background-repeat: no-repeat;
}
/*768px以下でロゴの大きさ変更*/
@media screen and (max-width: 768px){
img.site-logo-image{
width: 140px;
margin: 2px auto 0;
}
/*スライドインメニューをカスタマイズ*/
.navi-menu-content{
left: auto;
right: 0;
background-color: rgba(30,124,209,0.5);
transform: translateX(101%);
}
.menu-drawer a{
font-size: 1.1em;/*文字の大きさ*/
color: #fff;/*文字の色*/
height: 3em;/*行の高さ*/
}
.menu-drawer a:hover{
color: rgba(255,255,255,0.7);
background-color: rgba(30,124,209,0);
}
@media screen and (max-width: 768px) {
.column-wrap{
flex-direction: row !important;
}
}
~ここまで~
追加 CSS
/*固定ページの日付非表示*/
.post-244 .date-tags,
.post-235 .date-tags,
.post-246 .date-tags {
display: none;
}
/*モバイル横揺れ強制*/
@media screen and (max-width : 767px){
html,
body {
overflow-x: hidden!important;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
~ここまで~
Topic starter
2022年3月6日 21:12
最初に書くべきでしたが、アダルトサイトです。申し訳ありません。不都合ありましたら、削除していただいて構いません。よろしくお願いいたします。
This post was modified 3年前 by kottyan
2022年3月6日 21:35
kottyanさん
ご提示いただいた環境情報は、途中で切れてしまっています。
最後はプラグイン情報で終わるはずです。
途中で切れてしまっているので分からない部分がありますが、もしかすると高速化が無効になっていないような気もします。
そのため、ソースの確認も難しいところがあります。
プラグインの確認等もできません。
今回のものは、iPhoneに限らず同事象が発生すると思います。
直接影響しているのは、以下の部分っぽいです。
.ranking-item-description { width: 100px; position: relative; }
ただ、これがどこにある何なのかまでは、分からないです。
(おそらく高速化が有効ですので。)
そして、今回の事象とは直接的に関係はないかもしれないですが、Syntax Errorなども複数出ています。
これも、高速化?が有効の為か、ソースが変な状態で確認は難しいです。
どこか一部分の間違いが、ソース圧縮でさらに広がっている可能性はありますが、現状のソース圧縮がされた状態では。良く分からないです。
(Scriptの圧縮?)
(Scriptの圧縮?)
そして、申し訳ないのですが、同居人がいるため、確認するのは隙をうかがう必要があり・・・。
この時間以降はちょっと難しい感じです。
この時間以降はちょっと難しい感じです。
わいひら reacted
Topic starter
2022年3月6日 22:48
早速の返信ありがとうございます。高速化切らせていただきました。見にくい状態で申し訳ありませんでした。コードもう一度貼らせていただきます。内容が内容だけに、また、お時間都合よい時でいいので、よろしくお願いいたします。
Topic starter
2022年3月6日 22:54
再度貼り付けます。やはりここまでしか記述がないので、私が消してしまったのでしょうか?
Cocoon Child: スタイルシート (style.css)
@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template: cocoon-master
Version: 1.1.3
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/************************************
/*新着記事一覧のタイトル固定ページカスタマイズ*/
.top-title01 {
display: flex;
align-items: center; /* 垂直中心 */
justify-content: center; /* 水平中心 */
font-size: 24px;
margin-bottom:1em;
}
.top-title01:before, .top-title01:after {
border-top: 1px solid;
content: "";
width: 3em; /* 線の長さ */
}
.top-title01:before {
margin-right: 1em; /* 文字の右隣 */
}
.top-title01:after {
margin-left: 1em; /* 文字の左隣 */
}
/* エントリーカード横に並べる */
.widget-entry-cards.card-large-image .a-wrap {
width:32.5%;
height:auto;
display: inline-flex;
}
@media screen and (max-width: 768px) {
.widget-entry-cards.card-large-image .a-wrap {
width:49%;
display: inline-flex;
}
}
@media screen and (max-width: 480px) {
.widget-entry-cards.card-large-image .a-wrap {
width:auto;
display: inline-flex;
}
}
.widget-entry-cards.not-default figure img {
padding: .5em;
}
.widget-entry-cards.card-large-image .a-wrap {
font-size: 95%;
text-align: left;
padding:.5em;
}
/* 記事一覧のタイトル */
.top-title01 {
display: flex;
align-items: center; /* 垂直中心 */
justify-content: center; /* 水平中心 */
font-size: 24px;
margin-bottom:1em;
}
.top-title01:before, .top-title01:after {
border-top: 1px solid;
content: "";
width: 3em; /* 線の長さ */
}
.top-title01:before {
margin-right: 1em; /* 文字の右隣 */
}
.top-title01:after {
margin-left: 1em; /* 文字の左隣 */
}
.top-title02{font-size: 20px;} /* カテゴリー一覧タイトル文字サイズ */
/* もっと見るボタン */
.more-button {
max-width: 300px;
margin: 0 auto;
}
.more-button a {
display: block;
margin:25px 0;
padding: 0.8em 1em;
border-radius: 2em;
color: #fff;
font-size: 16px;
font-weight: 700;
text-decoration: none;
background: #1967d2;
box-shadow: 0 5px 20px rgba(235, 160, 47, .5);
text-align: center;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity:1;
}
.more-button a:hover{
box-shadow:none;
transform: translateY(3px);
opacity:1;
}
/*フロント固定ページのタイトルを非表示 */
.home .article h1{display:none;}
/*フロント固定ページのの投稿日を非表示 */
.home .post-date{display:none;}
/*フロント固定ページの更新日を非表示*/
.home .post-update{display: none;}
/*フロント固定ページのシェアボタンを非表示*/
.home.page .sns-share{display: available;}
/*フロント固定ページのフォローボタンを非表示*/
.home.page .sns-follow{display: available;}
/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info{display: none;}
/*固定ページの日付非表示*/
.page .date-tags {
display: none;
}
/*サイトロゴのフォント変更-文字黒*/
.logo-header a span{
font-family: 'Avenir','Helvetica Neue';
font-weight: bold;
font-size:45px;
}
/*サイトロゴのフォント変更-文字白*/
.logo-header a span{
font-family: 'Avenir','Helvetica Neue';
font-weight: bold;
font-size:45px;
text-shadow:2px 2px 0 #333333, -2px -2px 0 #333333,
-2px 2px 0 #333333, 2px -2px 0 #333333,
0px 2px 0 #333333, 0 -2px 0 #333333,
-2px 0 0 #333333, 2px 0 0 #333333;
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/
}
/*834px以下*/
@media screen and (max-width: 834px){
/*必要ならばここにコードを書く*/
}
/*480px以下*/
@media screen and (max-width: 480px){
}
}
/*吹き出しの色の初期設定 */
.sb-id-15 .speech-balloon {
background-color: #FFDDFF; /* 吹き出しメイン部分の背景色 */
border: 2px solid #FF88FF; /* 吹き出しメイン部分の枠 */
color: #333; /* セリフの文字色 */
}
.sb-id-15 .speech-balloon::before {
border-right: 12px solid #FFABCE;/* 三角部分の枠色 */
}
.sb-id-15 .speech-balloon::after {
border-right: 12px solid #FFABCE; /* 三角部分の背景色 */
}
@media screen and (max-width: 480px){
.sb-id-15 .speech-balloon::before { border-right: 7px solid #FFABCE; /* スマホでの三角部分の枠色 */
}
.sb-id-15 .speech-balloon::after { border-right: 7px solid #FFABCE; /* スマホでの三角部分の背景色 */
}
}
/* 見出しカスタマイズ */
/* H2 */
.article h2{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}
/* H3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}
/* H4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}
/* H5 */
.article h5{
border-bottom:none;
padding: 0;
}
/* H6 */
.article h6{
border-bottom:none;
padding: 0;
}
/* 「ピンク系の見出し」 */
.entry-content h2 {
padding: 0.5em;/*文字周りの余白*/
color: #FFF4E1;/*文字色*/
background: #da70d6;/*背景色*/
border-left: solid 5px #ff1493;/*左線(実線 太さ 色)*/
}
.entry-content h3 {
padding: 0.5em;
background: #FFF0F5;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
}
.entry-content h4 {
padding: 0.5em 0;/*上下の余白*/
border-top: solid 3px #da70d6;/*上線*/
border-bottom: solid 3px #da70d6;/*下線*/
}
.entry-content h5 {
/*線の種類(二重線)太さ 色*/
border-bottom: double 5px #da70d6;
}
/*モバイルフッター戦消す*/
#navi-footer li {
border: none;
}
/*ヘッダーの文字と背景の色を変える*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
background-color: #FFFFFF;
color: #000000;
}
.logo-menu-button.menu-button{
background-color: #FFFFFF;
}
/*1023px以下でロゴを消す*/
@media screen and (max-width: 1023px){
img.site-logo-image{
visibility: hidden;
}
}
/*1023px以下でモバイル用のロゴ表示*/
@media screen and (max-width: 1023px){
.logo-menu-button.menu-button{
background-image: url( );
background-size: auto 35px;
background-position: center;
background-repeat: no-repeat;
}
/*768px以下でロゴの大きさ変更*/
@media screen and (max-width: 768px){
img.site-logo-image{
width: 140px;
margin: 2px auto 0;
}
/*スライドインメニューをカスタマイズ*/
.navi-menu-content{
left: auto;
right: 0;
background-color: rgba(30,124,209,0.5);
transform: translateX(101%);
}
.menu-drawer a{
font-size: 1.1em;/*文字の大きさ*/
color: #fff;/*文字の色*/
height: 3em;/*行の高さ*/
}
.menu-drawer a:hover{
color: rgba(255,255,255,0.7);
background-color: rgba(30,124,209,0);
}
@media screen and (max-width: 768px) {
.column-wrap{
flex-direction: row !important;
}
}
2022年3月6日 23:16
私が見る限り、検索結果ページは正常になったようです。
kottyan さんの PC で正常に表示されていたのは、「ヘッダー用コード」にお書きになった script タグが kottyan さんには出力されないためだと思います。
※ 「ヘッダー用コード」は、ログインしている管理者には出力されません。
それ以外の者には閉じられていない script タグが出力され、その結果サイト全体の HTML が壊れ、検索結果ページが正常に表示されなかったのだと思います(実は検索結果ページ以外も表示が崩れていました)。
This post was modified 3年前 2回 by Akira
わいひら reacted
Topic starter
2022年3月6日 23:25
Akiraさんありがとうございました。こちらのiphoneでも、検索できるのを確認できました。自分で招いた過ちで申し訳ありませんでした。丁寧な説明と対応ありがとうございます。仕事が休日でしかサイトは触れないので、少しずつプログラミングの勉強もしていきたいと思います。
Topic starter
2022年3月6日 23:27
検索見れるようになりました。他コードおかしいところは修正しますので、またご意見いただければ幸いです。全く無知なもので、申し訳ありません。よろしくお願いいたします。
2022年3月6日 23:36
子テーマの style.css にお書きの CSS で 1 箇所おかしな部分があったので、念の為に書いておきます。
最後の方にお書きの以下の @media が閉じていません。
/*768px以下でロゴの大きさ変更*/ @media screen and (max-width: 768px){
次の @media までのどこかに } で閉じる必要があります。
わいひら reacted
Topic starter
2022年3月7日 07:44
おはようございます。ご指摘ありがとうございます。仕事が終わったら、早速修正させていただきます。ややこしいサイトなのに対応して頂いてありがとうございます。
Topic starter
2022年3月7日 08:55
iPhoneから修正して閉じる }入れさせて頂きました。先程画面を見ると、pcでは、2カラム表示できているのですが、iPhoneから見ると、縦一列で並んで、[av女優]の方カード一覧が表記されなくなっているのですが、これも、コードがおかしいのでしょうか?色々申し訳ありません。
2022年3月7日 12:53
CSS が、さらにおかしくなっています。子テーマの style.css の全てを下記リンクの CSS にご変更ください。1 行目から最後の行まで全部変更します。
https://notepad.pw/share/2w84gdfb
カード一覧が表記されなくなっている
スマホでの見え方が正しいです。PC では見出しの下にカード一覧があるように見えているだけです。実際は、見出しの下にカード一覧はありません。見出しとカード一覧が別のブロックに入っているため、切り離されています。
ショートコードとブロックの使い方、その応用方法を確認されるのがいいと思います。
This post was modified 3年前 2回 by Akira
わいひら reacted
Topic starter
2022年3月7日 13:26
ありがとうございました。2列で綺麗に並ぶようになりました。カスタマイズは私には敷居の高い事だとよく理解できたので、当分今の状態で触らず、記事を書くことにします。また、じっくり貼って頂いた記事を読ませて頂き勉強させてもらいます。お忙しい中ありがとうございました?
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。