WordPressのテーマ「cocoon」を使っていて、livedoor 相互RSSが表示されない事態に陥った時の備忘録。
livedoor 相互RSSの表示＆AMP対応(cocoon)
高速化設定をONにして表示させるのと、AMPエラーを解消するべくググりまくりました！
高速化設定のHTML縮小化で相互RSSが表示されない
WordPressを始めたばかりで、設定をいろいろと変更していた時に、いつの間にか相互RSSが表示されていない事に気づく。高速化設定の「HTML縮小化」にチェックが入っていたのが原因と判明。ググると通常版コードではなく、iframe版だと「HTML縮小化」をONにしても表示が可能との事なので、コードを入れ替えたら無事に表示できました。
iframe版をカスタムして通常版と同様に表示可能
ここで問題が発生。それまで使っていたCSSが効いておらず、表示サイズがおかしい･･･。
さらにググって、iframeの表示を修正するべくカスタムHTMLに記載したiframe版コードを<div></div>で囲む。
クラス名は純正のblogroll-channelを流用し、CSSの方は「.blogroll-channel」にiframeを追加して「.blogroll-channel iframe｛｝」の形に。これで通常版と同じように表示できるようになりました。
相互RSSがAMPエラー
別の日の出来事ですが、設定をいじっている時にAMP対応も簡単にできるとの事で、さっそくONにしてみた。ところがAMPチェックをしてみると、エラーが･･･。よく見てみるとAMPの有効化のところに「※AMP対応するページは投稿・固定ページのみです」との注意書きがありました！そこで投稿URLで再びチェックしてみると、変わらずエラーが･･･。「HTMLに必須属性がありません」、詳細にはheightの値がNGらしい記載が。ググると、iframe版に直接heightとwidthを記載すればOKらしく、height＝”300″ width＝100%にしたところ、100%はNGって言われてしまい、最終的に記載したのが下記コード
<div class="blogroll-channel"> <iframe width="300" height="200" src="https://blogroll.livedoor.net/＊＊＊" allowtransparency="true"></iframe> </div>
ここで高さや幅を設定しても、CSSの方で修正されるので問題なし。
無事にAMP対応完了になりました。
コメント