サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
16/10/2021 7:17 pm
WordPressでいつもお世話になっております。
ありがとうございます。
不具合・カスタマイズ対象ページのURL： https://a-road-to-freedom.com/2596/?amp=1&__twitter_impression=true
相談内容：Twitterのリンクからブログを表示すると文字化けのように本来とは違う表示になってしまいます。
解決のために試したこと：googleで検索したのですが、解決方法が分からずこちらに辿り着きました。
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：
---------------------------------------------- サイト名：FIREへの道 〜The Road to FIRE〜 サイトURL： https://a-road-to-freedom.com ホームURL： https://a-road-to-freedom.com コンテンツ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/simple-blue/style.css WordPressバージョン：5.8.1 PHPバージョン：7.4.24 ブラウザ：Mozilla/5.0 (iPad; CPU OS 14_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/94.0.4606.76 Mobile/15E148 Safari/604.1 サーバーソフト：LiteSpeed サーバープロトコル：HTTP/1.1 エンコーディング：gzip, deflate, br 言語：ja-jp ---------------------------------------------- テーマ名：Cocoon バージョン：2.3.6.3 カテゴリ数：4 タグ数：125 ユーザー数：1 ---------------------------------------------- 子テーマ名：Cocoon Child バージョン：1.1.2 style.cssサイズ：845バイト functions.phpサイズ：203バイト ---------------------------------------------- Gutenberg：1 AMP：1 PWA：0 Font Awesome：4 Auto Post Thumbnail：0 Retina：0 ホームイメージ：/wp-content/uploads/2021/02/3FCBC9DE-B189-42A4-BC5B-AA2193DBE92F.png ---------------------------------------------- ブラウザキャッシュ有効化：1 HTML縮小化：1 CSS縮小化：1 JavaScript縮小化：1 Lazy Load：1 WEBフォントLazy Load：1 ---------------------------------------------- 利用中のプラグイン： AddQuicktag 2.6.1 Akismet Anti-Spam 4.2.1 AmazonJS 0.10 BackWPup 3.10.0 Blog Floating Button 1.4.10 Edit Author Slug 1.8.3 EWWW Image Optimizer 6.3.0 Favicon Rotator 1.2.10 Google XML Sitemaps 4.1.1 Invisible reCaptcha 1.2.3 LIQUID SPEECH BALLOON 1.1.5 SIMPLE BLOG DESIGN 1.0.3 SiteGuard WP Plugin 1.6.0 WebSub/PubSubHubbub 3.1.0 WP Fastest Cache 0.9.5 WP Multibyte Patch 2.9 Yoast Duplicate Post 4.1.2 ----------------------------------------------
----------------------------------------------
サイト名：FIREへの道 〜The Road to FIRE〜
サイトURL： https://a-road-to-freedom.com
ホームURL： https://a-road-to-freedom.com
コンテンツ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/simple-blue/style.css
WordPressバージョン：5.8.1
PHPバージョン：7.4.24
ブラウザ：Mozilla/5.0 (iPad; CPU OS 14_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/94.0.4606.76 Mobile/15E148 Safari/604.1
サーバーソフト：LiteSpeed
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja-jp
※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
16/10/2021 9:42 pm
ゆうさん
フォーラム上部の案内をご確認ください。
書き込みの前に以下の3点をご確認ください。
お問い合わせの際には、高速化を無効にしていただきますよう、お願い致します。
高速化が有効だと、確認が困難です。
ちなみに、Twitterからのリンクは、強制的にAMPページへのリンクになります。
Twitterからのリンクだから、画像の表示がおかしいのではなく。
AMPページだと画像が横長ではなく、正方形に近い形になっているみたいです。
なぜ、そうなってしまうのかは、高速化が有効であるため良く分かりません。
そして、私はAMPには弱いため、高速化を無効にしていただいても、分からない可能性が高いです。
しかし、高速化ほ無効にしていただければ、他の詳しい方がご確認くださる可能性は上がると思います。
crypto_college and わいひら reacted
Topic starter
16/10/2021 9:56 pm
早速返信いただきありがとうございます。
助言いただきありがとうございます。
高速化の設定を変更しました。よろしくお願いいたします。
----------------------------------------------
サイト名：FIREへの道 〜The Road to FIRE〜
サイトURL： https://a-road-to-freedom.com
ホームURL： https://a-road-to-freedom.com
コンテンツ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/simple-blue/style.css
WordPressバージョン：5.8.1
PHPバージョン：7.4.24
ブラウザ：Mozilla/5.0 (iPad; CPU OS 14_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/94.0.4606.76 Mobile/15E148 Safari/604.1
サーバーソフト：LiteSpeed
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja-jp
----------------------------------------------
テーマ名：Cocoon
バージョン：2.3.6.3
カテゴリ数：4
タグ数：125
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.2
style.cssサイズ：845バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：1
AMP：1
PWA：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/uploads/2021/02/3FCBC9DE-B189-42A4-BC5B-AA2193DBE92F.png
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：1
WEBフォントLazy Load：1
----------------------------------------------
利用中のプラグイン：
AddQuicktag 2.6.1
Akismet Anti-Spam 4.2.1
AmazonJS 0.10
BackWPup 3.10.0
Blog Floating Button 1.4.10
Edit Author Slug 1.8.3
EWWW Image Optimizer 6.3.0
Favicon Rotator 1.2.10
Google XML Sitemaps 4.1.1
Invisible reCaptcha 1.2.3
LIQUID SPEECH BALLOON 1.1.5
SIMPLE BLOG DESIGN 1.0.3
SiteGuard WP Plugin 1.6.0
WebSub/PubSubHubbub 3.1.0
WP Fastest Cache 0.9.5
WP Multibyte Patch 2.9
Yoast Duplicate Post 4.1.2
----------------------------------------------
サイト名：FIREへの道 〜The Road to FIRE〜 サイトURL： https://a-road-to-freedom.com ホームURL： https://a-road-to-freedom.com コンテンツ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/simple-blue/style.css WordPressバージョン：5.8.1 PHPバージョン：7.4.24 ブラウザ：Mozilla/5.0 (iPad; CPU OS 14_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/94.0.4606.76 Mobile/15E148 Safari/604.1 サーバーソフト：LiteSpeed サーバープロトコル：HTTP/1.1 エンコーディング：gzip, deflate, br 言語：ja-jp ---------------------------------------------- テーマ名：Cocoon バージョン：2.3.6.3 カテゴリ数：4 タグ数：125 ユーザー数：1 ---------------------------------------------- 子テーマ名：Cocoon Child バージョン：1.1.2 style.cssサイズ：845バイト functions.phpサイズ：203バイト ---------------------------------------------- Gutenberg：1 AMP：1 PWA：0 Font Awesome：4 Auto Post Thumbnail：0 Retina：0 ホームイメージ：/wp-content/uploads/2021/02/3FCBC9DE-B189-42A4-BC5B-AA2193DBE92F.png ---------------------------------------------- ブラウザキャッシュ有効化：1 HTML縮小化：0 CSS縮小化：0 JavaScript縮小化：0 Lazy Load：1 WEBフォントLazy Load：1 ---------------------------------------------- 利用中のプラグイン： AddQuicktag 2.6.1 Akismet Anti-Spam 4.2.1 AmazonJS 0.10 BackWPup 3.10.0 Blog Floating Button 1.4.10 Edit Author Slug 1.8.3 EWWW Image Optimizer 6.3.0 Favicon Rotator 1.2.10 Google XML Sitemaps 4.1.1 Invisible reCaptcha 1.2.3 LIQUID SPEECH BALLOON 1.1.5 SIMPLE BLOG DESIGN 1.0.3 SiteGuard WP Plugin 1.6.0 WebSub/PubSubHubbub 3.1.0 WP Fastest Cache 0.9.5 WP Multibyte Patch 2.9 Yoast Duplicate Post 4.1.2 ----------------------------------------------
17/10/2021 7:20 pm
おそらくその画像に、高さ（height）と幅（width）属性が設定されていないからだと思います。
画像の大きさに合わせて高さと幅を設定してください。
外部サーバーにある画像の場合、高さと幅は簡単に取得できないため高さ（height）と幅（width）属性が設定されていない場合は、固定の幅と高さで表示されます。
crypto_college reacted
18/10/2021 4:05 am
@yhira ありがとうございます。
バナー表示のサイズについて、違うサイズのバナー（320×50）にしてみました。
ですが、変わらずでした。また、装飾関係も全て取れてしまっています。うまく表示できるような方法があればいいのですが。
18/10/2021 6:30 pm
Yuu0808さん
バナー表示のサイズについて、違うサイズのバナー（320×50）にしてみました。
違うサイズにしてくださいということではないと思います。
おそらくその画像に、高さ（height）と幅（width）属性が設定されていないからだと思います。
とのことです。
高さ（height）と幅（width）属性を設定してくださいということだと思います。
例えば、AMPページでも正しく表示されていると思われる以下の画像ですが・・・。
以下のように、高さ（height）と幅（width）属性が設定されています。
ところが今回AMPページで正方形になってしまった以下の画像では、それらが設定されていません。
これに、高さ（height）と幅（width）属性を設定する必要があるというとこだと思います。
（HTMLを編集してください。）
（HTMLを編集してください。）
また以下の部分ですが・・・・
また、装飾関係も全て取れてしまっています。
具体的にどの部分なのか、ご提示いただきますようお願いしします。
管理者さん自身はどこかお分かりになるのだと思いますが。
他人から見る場合は、1つ1つ通常ページとAMPページを比較していかねばなりません。
申し訳ございませんが、回答者側にはそれは負担です。
負担軽減にご協力をお願いします。
そしてサイトのことを1番ご存知な管理者さん自身にご提示いただくのが、正確なのです。
（知らないものが見ても、分からないですし、見落としもあります。）
ちなみに、ぱっと見では、以下の装飾がされていないようでした。
通常ページ
AMPページ
これは以下のプラグインをご利用に思われます。
SIMPLE BLOG DESIGN 1.0
AMPページはCSSにサイズに制限もあるようですし、それに抵触した？
（styleタグっぽいんですよねぇ…。）
ちょっとこの辺りは私には分からないです。
crypto_college and わいひら reacted
18/10/2021 7:29 pm
mk2さんも書かれていますが、表示させたいimgタグに高さ（height）と幅（width）属性を設定してください。
「img height width」とでも検索すればいろいろ情報が出てくるかと思います。
crypto_college reacted
19/10/2021 12:32 pm
その SIMPLE BLOG DESIGN プラグインの設定の中に、「CSS をインラインにする」などの項目はあるでしょうか？
※ CSS を ＜style＞＜/style＞ の中に書くようにする設定です。
もし、そのような設定があれば、その項目を無効にします。
もし、そのような設定がない場合は、以下の 2 つの CSS を子テーマの amp.css に追加します。
① プラグインの大本の CSS 。
.sbd-inner-block-init dd,.sbd-inner-block-init dt,.sbd-inner-block-init>*{margin:1em 0 !important}@media screen and (min-width: 768px){.sbd-inner-block-init dd,.sbd-inner-block-init dt,.sbd-inner-block-init>*{margin:1.25em 0 !important}}.sbd-inner-block-init>:first-child{margin-top:0 !important}.sbd-inner-block-init>:last-child{margin-bottom:0 !important}.sbd-inner-block-init p{padding:0 !important}[class^=wp-block-sbd]{margin:0 0 1.5em}@media screen and (min-width: 768px){[class^=wp-block-sbd]{margin:0 0 2em}}.sbd-block-padding,.wp-block-sbd-definition-list.sbd-list-border,.wp-block-sbd-list .sbd-list-border,.wp-block-sbd-checkpoint-block .sbd-checkpoint-content,.wp-block-sbd-background-block-title,.wp-block-sbd-background-block{padding:1.25em !important}@media screen and (min-width: 768px){.sbd-block-padding,.wp-block-sbd-definition-list.sbd-list-border,.wp-block-sbd-list .sbd-list-border,.wp-block-sbd-checkpoint-block .sbd-checkpoint-content,.wp-block-sbd-background-block-title,.wp-block-sbd-background-block{padding:1.5em !important}}.sbd-bg-color.is-style-red{background-color:#ffe9e9}.sbd-bg-color.is-style-gray{background-color:#f5f5f5}.sbd-bg-color.is-style-yellow{background-color:#fffdeb}.wp-block-sbd-background-block{position:relative;background-color:#ffe9e9}.wp-block-sbd-background-block-title{position:relative;background-color:#ffe9e9}.wp-block-sbd-background-block-title.is-style-red .wp-block-sbd-heading:not([class^=is-style])::before,.wp-block-sbd-background-block-title.is-style-red .wp-block-sbd-heading.is-style-sbd-title-icon::before{color:#eb4141}.wp-block-sbd-background-block-title.is-style-red .wp-block-sbd-heading.is-style-sbd-title-strong p::first-letter{color:#eb4141}.wp-block-sbd-background-block-title.is-style-gray .wp-block-sbd-heading:not([class^=is-style])::before,.wp-block-sbd-background-block-title.is-style-gray .wp-block-sbd-heading.is-style-sbd-title-icon::before{color:#5ba6f0}.wp-block-sbd-background-block-title.is-style-gray .wp-block-sbd-heading.is-style-sbd-title-strong p::first-letter{color:#5ba6f0}.wp-block-sbd-background-block-title.is-style-yellow .wp-block-sbd-heading:not([class^=is-style])::before,.wp-block-sbd-background-block-title.is-style-yellow .wp-block-sbd-heading.is-style-sbd-title-icon::before{color:#33cb9c}.wp-block-sbd-background-block-title.is-style-yellow .wp-block-sbd-heading.is-style-sbd-title-strong p::first-letter{color:#33cb9c}.wp-block-sbd-heading>p{font-size:1.125em !important;font-weight:700 !important;line-height:1.5 !important}.wp-block-sbd-heading>*{line-height:1.5;margin:0 !important}.wp-block-sbd-heading,.wp-block-sbd-heading.is-style-sbd-title-icon{display:flex}.wp-block-sbd-heading::before,.wp-block-sbd-heading.is-style-sbd-title-icon::before{font-family:"sbd_icomoon";content:"";font-size:1.5em;margin-right:12px;flex:0 0 auto;color:#eb4141;line-height:1}.wp-block-sbd-heading.is-style-sbd-title-strong{display:block}.wp-block-sbd-heading.is-style-sbd-title-strong::before{content:none}.wp-block-sbd-heading.is-style-sbd-title-strong p::first-letter{font-size:1.65em;color:#eb4141}.wp-block-sbd-checkpoint-block{position:relative;background:#fafafa;box-shadow:0 2px 4px rgba(0,0,0,.22)}.wp-block-sbd-checkpoint-block .sbd-checkpoint-title{font-size:1.125em;background:#eab060;padding:.5em 1.5em;text-align:center;color:#fff;font-weight:700;line-height:1.5;margin-top:0;margin-bottom:0}.wp-block-sbd-checkpoint-block .sbd-checkpoint-title::before{margin-right:12px;font-family:"sbd_icomoon";content:"";font-weight:700}.wp-block-sbd-checkpoint-block .sbd-checkpoint-content{margin-top:0}.wp-block-sbd-checkpoint-block.is-style-sbd-checkpoint-orange .sbd-checkpoint-title{background-color:#eab060}.wp-block-sbd-checkpoint-block.is-style-sbd-checkpoint-blue .sbd-checkpoint-title{background-color:#5ba6f0}.wp-block-sbd-checkpoint-block.is-style-sbd-checkpoint-black .sbd-checkpoint-title{background-color:#000}.wp-block-sbd-checkpoint-block.is-style-sbd-checkpoint-red .sbd-checkpoint-title{background-color:#ff5546}.wp-block-sbd-checkpoint-block.is-style-sbd-checkpoint-green .sbd-checkpoint-title{background-color:#88b500}.wp-block-sbd-checkpoint-block.is-style-sbd-checkpoint-pink .sbd-checkpoint-title{background-color:#f19ec2}.wp-block-sbd-list{padding:0;counter-reset:sbd-ol}.wp-block-sbd-list .sbd-list{margin:0 !important;padding:0;list-style-type:none !important}.wp-block-sbd-list .sbd-list li{margin:.5em 0 1em;position:relative;line-height:1.5em}.wp-block-sbd-list .sbd-list li:first-child{margin-top:0}.wp-block-sbd-list .sbd-list li:last-child{margin-bottom:0}.wp-block-sbd-list .sbd-list-border{border:dashed 1px gray}.wp-block-sbd-list .sbd-list-noborder{border:none !important}.wp-block-sbd-list ul.sbd-list>li{padding:0 0 0 1.25em}.wp-block-sbd-list ul.sbd-list>li::before{position:absolute;content:"■" !important;color:#eab060 !important;left:0 !important;top:0 !important;transform:none !important;font-size:.6em !important;background-color:transparent !important}.wp-block-sbd-list ul.sbd-list>li::after{content:none}.wp-block-sbd-list ol.sbd-list>li{padding:0 0 0 2em}.wp-block-sbd-list ol.sbd-list>li::before{font-size:1em !important;position:absolute !important;left:0 !important;display:block !important;box-sizing:content-box !important;width:1.5em !important;height:1.5em !important;padding:0 !important;color:#fff !important;line-height:1.5 !important;text-align:center !important;background-color:#eab060 !important;border-radius:50% !important;content:counter(sbd-ol);counter-increment:sbd-ol;border:none !important;transform:scale(0.8) !important}.wp-block-sbd-list ol.sbd-list>li::after{content:none}.wp-block-sbd-list.is-style-sbd-list-orange ul li::before{color:#eab060 !important}.wp-block-sbd-list.is-style-sbd-list-orange ol li::before{background-color:#eab060 !important}.wp-block-sbd-list.is-style-sbd-list-blue ul li::before{color:#5ba6f0 !important}.wp-block-sbd-list.is-style-sbd-list-blue ol li::before{background-color:#5ba6f0 !important}.wp-block-sbd-list.is-style-sbd-list-black ul li::before{color:#000 !important}.wp-block-sbd-list.is-style-sbd-list-black ol li::before{background-color:#000 !important}.wp-block-sbd-list.is-style-sbd-list-red ul li::before{color:#ff5546 !important}.wp-block-sbd-list.is-style-sbd-list-red ol li::before{background-color:#ff5546 !important}.wp-block-sbd-list.is-style-sbd-list-green ul li::before{color:#88b500 !important}.wp-block-sbd-list.is-style-sbd-list-green ol li::before{background-color:#88b500 !important}.wp-block-sbd-list.is-style-sbd-list-pink ul li::before{color:#f19ec2 !important}.wp-block-sbd-list.is-style-sbd-list-pink ol li::before{background-color:#f19ec2 !important}.wp-block-sbd-definition-list.sbd-list-border{border:dashed 1px gray}.wp-block-sbd-definition-list.sbd-list-noborder{border:none !important}.wp-block-sbd-definition-list-dt{background-color:inherit !important;font-weight:700;padding:0 0 0 12px !important;border-left:solid 6px #eab060;margin:0}@media screen and (min-width: 768px){.wp-block-sbd-definition-list-dt{border-width:8px}}.wp-block-sbd-definition-list-dt.is-style-sbd-dt-orange{border-color:#eab060}.wp-block-sbd-definition-list-dt.is-style-sbd-dt-blue{border-color:#5ba6f0}.wp-block-sbd-definition-list-dt.is-style-sbd-dt-black{border-color:#000}.wp-block-sbd-definition-list-dt.is-style-sbd-dt-red{border-color:#ff5546}.wp-block-sbd-definition-list-dt.is-style-sbd-dt-green{border-color:#88b500}.wp-block-sbd-definition-list-dt.is-style-sbd-dt-pink{border-color:#f19ec2}.wp-block-sbd-definition-list-dd{font-weight:normal;padding:0 !important;border:none !important}.wp-block-sbd-table>table{min-width:100%;word-break:break-all;width:100%;border:none !important;background-color:#fff}.wp-block-sbd-table.sbd-table--scroll>table{overflow-x:scroll;-webkit-overflow-scrolling:touch;border-collapse:collapse;display:block}.wp-block-sbd-table.sbd-table--scroll>table td,.wp-block-sbd-table.sbd-table--scroll>table th{min-width:130px !important;max-width:200px !important}.wp-block-sbd-table.sbd-table--fixed td:first-child{position:sticky;left:-1px;z-index:9}.wp-block-sbd-table td,.wp-block-sbd-table th{font-size:max(0.8em, 12px) !important;vertical-align:middle !important;text-align:center !important;padding:.7em;border:#d2d2d2 solid 1px !important;background-color:#fff}.wp-block-sbd-table td a,.wp-block-sbd-table th a{display:inline-block;text-decoration:none;max-width:100%}.wp-block-sbd-table td a:hover,.wp-block-sbd-table th a:hover{opacity:.8;transition:.3s}.wp-block-sbd-table td a[target=_blank]:after,.wp-block-sbd-table th a[target=_blank]:after{content:none}.wp-block-sbd-table td img,.wp-block-sbd-table th img{margin-bottom:0}.wp-block-sbd-table td .sbd-table-btn,.wp-block-sbd-table th .sbd-table-btn{display:inline-block;padding:10px;border:0;border-radius:3px;box-shadow:0 -4px 0 rgba(0,0,0,.1) inset;text-align:center;color:#fff;font-weight:normal}.wp-block-sbd-table td .sbd-table-btn>a,.wp-block-sbd-table th .sbd-table-btn>a{color:#fff}.wp-block-sbd-table [class^=sbd-table-bg-]{position:relative;min-height:60px;display:flex;align-items:center;justify-content:center}.wp-block-sbd-table [class^=sbd-table-bg-]::after{content:"";position:absolute;font-size:50px;font-family:"sbd_icomoon";top:50%;left:50%;transform:translate(-50%, -50%)}.wp-block-sbd-table .sbd-table-bg-double-circle::after{color:rgba(235,65,65,.2);content:""}.wp-block-sbd-table .sbd-table-bg-circle::after{color:rgba(91,166,240,.2);content:""}.wp-block-sbd-table .sbd-table-bg-triangle::after{color:rgba(51,203,156,.2);content:""}.wp-block-sbd-table .sbd-table-bg-cross::after{color:rgba(234,176,96,.2);content:""}.wp-block-sbd-table .sbd-table-btn{background:#eab060 !important}.wp-block-sbd-table.sbd-table--btn-orange .sbd-table-btn{background:#eab060 !important}.wp-block-sbd-table.sbd-table--btn-red .sbd-table-btn{background:#eb4141 !important}.wp-block-sbd-table.sbd-table--btn-blue .sbd-table-btn{background:#5ba6f0 !important}.wp-block-sbd-table.sbd-table--btn-green .sbd-table-btn{background:#33cb9c !important}.wp-block-sbd-table.sbd-table--btn-gray .sbd-table-btn{background:#434343 !important}.wp-block-sbd-table-vertical td:first-child{background:#fdf7ef !important}.wp-block-sbd-table-vertical.sbd-table--header-orange td:first-child{background:#fdf7ef !important}.wp-block-sbd-table-vertical.sbd-table--header-red td:first-child{background:#ffe9e9 !important}.wp-block-sbd-table-vertical.sbd-table--header-blue td:first-child{background:#eef6fe !important}.wp-block-sbd-table-vertical.sbd-table--header-green td:first-child{background:#eafaf5 !important}.wp-block-sbd-table-vertical.sbd-table--header-gray td:first-child{background:#f5f5f5 !important}.wp-block-sbd-table-horizontal tr:first-child td{background:#fdf7ef !important}.wp-block-sbd-table-horizontal.sbd-table--header-orange tr:first-child td{background:#fdf7ef !important}.wp-block-sbd-table-horizontal.sbd-table--header-red tr:first-child td{background:#ffe9e9 !important}.wp-block-sbd-table-horizontal.sbd-table--header-blue tr:first-child td{background:#eef6fe !important}.wp-block-sbd-table-horizontal.sbd-table--header-green tr:first-child td{background:#eafaf5 !important}.wp-block-sbd-table-horizontal.sbd-table--header-gray tr:first-child td{background:#f5f5f5 !important}.sbd-table--scroll .scroll-hint-icon{width:100px;height:100px;border-radius:50%;background:rgba(0,0,0,.8);padding:30px 20px 20px;z-index:10}.sbd-table--scroll .scroll-hint-icon::before{width:30px;height:30px}.sbd-table--scroll .scroll-hint-icon::after{top:15px}.sbd-table--scroll .scroll-hint-text{line-height:1.25}.sbd-table--scroll-none .scroll-hint-icon-wrap.is-active .scroll-hint-icon{opacity:0}.sbd-table--scroll-hint-simple .scroll-hint-icon{width:175px;height:35px;border-radius:50px;padding:0 16px;display:flex;justify-content:space-between;align-items:center}.sbd-table--scroll-hint-simple .scroll-hint-icon::before{content:"";width:16px;height:14px;display:block;background-repeat:no-repeat;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDE8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIgZmlsbD0iI2ZmZiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==);opacity:0;background-size:40px;background-position:left}.sbd-table--scroll-hint-simple .scroll-hint-icon::after{position:relative;top:auto;left:auto;width:16px;background-size:40px;background-position:right;margin:0 !important;transition-delay:0}.sbd-table--scroll-hint-simple .scroll-hint-text{margin-top:0}.sbd-table--scroll-hint-simple .scroll-hint-icon-wrap.is-active .scroll-hint-icon:after,.sbd-table--scroll-hint-simple .scroll-hint-icon-wrap.is-active .scroll-hint-icon:before{opacity:1}.sbd-rate{text-align:center}.sbd-rate__star{color:#eab060}.sbd-rate__star .icon-star-off{color:#5d5d5d}.sbd-rate__num{font-size:.8em;line-height:1;color:#949494}
.sbd-text-bold{font-weight:bold !important}.sbd-text-red{font-weight:bold !important;color:#eb4141 !important}.sbd-text-bg-yellow{font-weight:bold !important;background-color:#ffffaf !important}
※ この CSS は、下記 URL の 114 行目から 115 行目のもの。
view-source: https://a-road-to-freedom.com/2596/
② スクロールヒントと呼ばれる内容の下記リンクの CSS 。
これらの変更後、表示はどうなるでしょうか？
This post was modified 3年前 4回 by Akira
crypto_college reacted
19/10/2021 1:03 pm
申し訳ないです。先程書いた以下の内容は、無視してください。
その SIMPLE BLOG DESIGN プラグインの設定の中に、「CSS をインラインにする」などの項目はあるでしょうか？
※ CSS を ＜style＞＜/style＞ の中に書くようにする設定です。
もし、そのような設定があれば、その項目を無効にします。
プラグインの 2 つの CSS を子テーマの amp.css に追加するとどうなるでしょうか？
crypto_college and わいひら reacted
21/10/2021 6:35 pm
また、問い合わせ欄もうまく設定できなかったため、プラグインを消すと文字だけが残ってしまうようになってしまいました。
これは、Contact Form 7のショートコードだと思われますが。
プラグインを無効にすれば、ショートコードも無効になってしまいますので、そのまま文字列として表示されてしまうのだと思います。
プラグインを無効にするのであれば、ショートコードも消す必要があるではないかと。
これは、AMPページに限らず、通常ページにも影響が出ているものと思います。
（確認はしていませんが。）
何となくですが、AMPページが必要かどうかもご検討なさった方が良いのかもしれないと、感じてしまいます。
crypto_college and わいひら reacted
21/10/2021 7:11 pm
プラグインの 2 つの CSS を子テーマの amp.cssの作業の方法、設定方法が分からずできませんでした。
amp.css に CSS を追加する方法は、2 つあります。
- WordPress 管理画面 → 外観 → テーマエディターより、テーマファイルで amp.css を選択し CSS を追加する。※ 添付画像
- FTP ソフトやサーバーのファイルマネージャーを使い、子テーマの amp.css に CSS を追加する。
また、問い合わせ欄もうまく設定できなかったため、プラグインを消すと文字だけが残ってしまうようになってしまいました。
Cocoon の AMP ページでは、Contact Form 7 は設置できません。設置するには PHP のカスタマイズが必要ですが、難易度は高いです。
もし、Contact Form 7 の設置が必要であれば、AMP 対応をおやめになるのがいいと思います。
This post was modified 3年前 by Akira
crypto_college and わいひら reacted
21/10/2021 8:33 pm
もし、エラーが出るページがContact Form 7のページだけであれば、該当ページのエディター画面で「AMPページを生成しない」にチェックを付けるのも一つの手かと思います。
crypto_college reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。