サイト全体に「COLORS(ブルー)」スキン適用中。

AMPにした場合のLINE友達登録BOXの表示が崩れることについて | Cocoonテーマに関する質問 | Cocoon フォーラム

書き込みの前に以下の3点をご確認ください。

  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示してください
  3. 該当部分のキャプチャ環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因がわからない不具合が出た場合のトラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 画面が真っ白になった際のエラーメッセージの確認方法 

フォーラムの内容は、CCライセンス(CC BY-ND 2.1)に準じていれば転載も自由です。

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク

[解決済] AMPにした場合のLINE友達登録BOXの表示が崩れることについて  

  RSS

tk4
 tk4
(@tk4)
Active Member
参加: 2週間 前
投稿: 6
2019年2月4日 19:03  

お世話になります。昨年末からこのcocoonを使わせて頂いています。

小規模な店舗サイトの運営をしているので、色々ネットで検索しながら参考にして作っています。(まだまだ完成には程遠いです)

すみません、AMPの事も実はあまり分かっていない初心者です。CSSもPHPも全く分らず、コピペだけで何とかしのいでいます。

ここに投稿していい案件なのかどうか迷いましたが、良く分からないので思い切って質問する事にしました。

AMPの設定をしてみたのですが、なぜかLINE友達登録BOXだけが縦長になってしまいます。もしかしたらテーマの設定とは全く別の理由かどうかも分からないのですが、宜しくお願いします。

一応スクリーンショットをお送りします。これだけでいいのかどうかも分かりませんが、宜しくお願いします。


tk4
 tk4
(@tk4)
Active Member
参加: 2週間 前
投稿: 6
2019年2月4日 19:05  

すみません。画像が一つ足りませんでした。


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 11か月 前
投稿: 1854
2019年2月4日 20:03  

AMPの設定をしてみたのですが、なぜかLINE友達登録BOXだけが縦長になってしまいます。

多分Lineの箇所は画像になっていると思います。その上で、imgタグにwidth="数値" height="数値" と画像の幅を高さが入ってないからだと思います。

そのLine画像はCocoon機能のモノではないと思います。実際のページを見ないと詳細な事をお伝えできませんが、上記通り、画像の幅・高さを指定すれば解消できるかと思います。

例として。width="100" height="20" などその画像の幅・高さ:数値を入れる感じです。

<img class="hoge" width="100" height="20" alt="hoge" src="画像のパス">

 

あと。

  1. 不具合・カスタマイズ対象ページのURLを提示してください

案内にあるとおり。実際の様子を見ないと具体的にお答えできない旨をご了承ください。

 

自身ではわからない、解決できない場合。

その箇所のソースコードを貼り付け、リンクを置いていただけますか。

  1. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw

分かる範囲、できる範囲はお伝えできるかもしれませんので。


わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 3657
2019年2月4日 20:50  

おそらく、画像が外部サイトのものが使われているからだと思います。
AMPでは外部サイトの画像は、縦横比幅を指定できないので、勝手に画像サイズが指定されてしまいます。
もし画像を自サイトにアップして利用できるのであれば、メディアに画像をアップロードして、その画像に対してリンクを貼ってください。

ただ、画像だけではどのように画像が利用されているのかはわからないので、問題が解消できない場合は、できれば案内にもあるように該当ページのURLを貼り付けていただければと思います。
ちょっと実物を見てみないと、詳しいことは分からないです。


tk4
 tk4
(@tk4)
Active Member
参加: 2週間 前
投稿: 6
2019年2月9日 16:18  

お世話になります。

大変失礼しました。フォーラムの使い方が出来てませんでした。すみませんでした。

改めてソースコードとリンクを貼っておきます。

https://notepad.pw/share/dx1j5gqzx

https://taka-sinkyu.com/

わいひらさんのおっしゃる通り、外部サイトの画像だとは思いますが、実はよくわかりません。宜しくお願いします。


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 11か月 前
投稿: 1854
2019年2月9日 18:50  
/n/line_add_friends/btn/ja.png" alt="友だち追加" width="232" height="72"

このように、画像に高さwidth="232" height="72" を入れたら良いと思います。

※画像の高さが、その大きさだったので。

https://notepad.pw/lh6gx1gz

 


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 3657
2019年2月9日 21:45  

かうたっくさんが書かれた方法が、最も手っ取り早いかも。

もしくは、その画像をWordPressのメディアにアップロードして、imgタグのURLをアップロードしたURLに変更するかだと思います。


tk4
 tk4
(@tk4)
Active Member
参加: 2週間 前
投稿: 6
2019年2月11日 15:39  

かうたっくさんの方法でうまくいきました。

ありがとうございました。


わいひら 件のいいね!
Share:
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
スポンサーリンク
わいひらをフォローする
おすすめサーバ
mixhost

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
〇アダルト・出会い系サイト可
△安定性にやや欠ける

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
△アダルト・出会い系サイト可(条件あり)
△開始したてなので運営能力は未知数(対応良)

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
○http/2(高速化プロトコル)に対応
〇アダルト・出会い系サイト可
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

Cocoon
  
動作中

ログイン または 登録 してください

タイトルとURLをコピーしました