導入から半年、AMPページの見た目をようやく改善！【プラグイン「AMP」カスタマイズ】

以前からいじりたくて仕方がなかったAMPページの見た目。
昨日までの連休中に手を入れまして、ようやくマトモな見た目になりました！

【2017.12.21追記】
現在はAMPページの表示は停止しています。
以下の記事は全てAMPページの運用中に書いたものです。

この記事の目次

AMP＝急速に普及してきているウェブページの高速表示方法
ただ入れただけでは見た目が…をようやく改善！
OPENCAGE社さんのページを参考にfunctions.phpにコードを記述！
- AMP表示が有効かは「AMPテスト」ページでチェックを
あとがき

AMP＝急速に普及してきているウェブページの高速表示方法

モバイル端末でウェブページを高速表示させる方法として急速に広まりつつあるAMP。

このブログのテーマ「ストーク」自体はAMP表示に対応していませんが、それでも、「AMP」というプラグインを有効化するだけでAMP表示が可能になるので、当ブログでも今年の年明けから本格導入しています。

過去記事
最近ブログに加えた変更点あれこれ。SSL化、AMP化、アドセンス表示減少

AMP表示がGoogleにキャッシュされると、検索結果でもリンク先がAMP表示であることを示す印が入ります。

検索の表示順位にもいい影響があるとかないとか？？
導入半年で、今や私のブログでも15％ほどがAMPページへのアクセスです。

アクセスアップに効果があるかは今のところは正直微妙ですが、なんせGoogleが推している機能。
先々のことを考えると、ブログ運営者としては今のうちから是非とも導入しておきたいところです。
（そう思って私も今年から入れています。）

ただ入れただけでは見た目が…をようやく改善！

ただ、この「AMP」プラグインを利用したAMP表示。
高速表示することが最優先の造りなので、初期設定のままだと見た目が冴えないのが難点でした。

なんせ、

・フォントは全部無機質な明朝体だし…。
・見出しは太字になっているだけだし…。
・色付きの枠（この囲ってるやつです）は表示されないし…。
・リンクカードもちゃんと表示されないし…。
・画像の横に文字が勝手に回り込むし…。
・アドセンスは表示されないし…。（入れてるページ自体少ないけど）
・記事下のカテゴリー別の最新記事なんてフォントサイズがデカすぎるし…。

などなど、ひどいもんでした。
（その時のスクリーンショットは撮ってないのでお見せできないのが残念ですが(^^;）

AMPページへのアクセスが増えるにつれて、
「見にくい（醜い）ページですいません…。」
という申し訳ない気持ちも大きくなってきていました。

それらの一切合切をキレイにしましたよ〜！
~~実物は以下のページをどうぞ。~~
→現在AMPページの表示は停止しています。

OPENCAGE社さんのページを参考にfunctions.phpにコードを記述！

とはいえ、これは全部自分でやったわけではもちろんなく、参考にさせていただいたページもあります。
このブログのテーマ・ストークをリリースしているOPENCAGE社さんの以下の記事です。

プラグイン「AMP」で吹き出しデザイン用CSSを適用する方法 | OPENCAGE

弊社テーマ「アルバトロス」「ハミングバード」「ストーク」を使っている方でWordPressプラグインの「AMP」にてAMP対応されている方向けの記事です。弊社テーマではショートコードを使い、簡単に吹き出しを表現すること...

OPENCAGE

AMPプラグインで記事下にSNSボタンを追加する方法 | OPENCAGE

弊社テーマ「アルバトロス」「ハミングバード」「ストーク」を使っている方でWordPressプラグインの「AMP」にてAMP対応されている方向けの記事です。 AMPプラグインはブログに簡単にAMPを導入できる反面、SNSボ...

OPENCAGE

上の2つの記事にあるとおり、functions.phpにAMP用のCSSを記述することによって、AMPページを通常のページとほぼ同じ見た目にすることに成功しました。

実際にfunctions.phpに書き足したコードを以下に公開してみますと…。
（メチャクチャ長いです。興味ない方はザッと流してくださいm(_ _)m）

13行目のコンテンツ＆クレジット表示は各自の環境に応じて書き換えてください。

// AMP（※WPプラグイン版）のときにSNSボタンを記事下に表示
function content_for_social_button($content){
if (is_amp_endpoint()) {
$url_encode=urlencode(get_permalink());
$twitter = '<a href="//twitter.com/share?text='.urlencode(the_title( "" , "" , 0 )).'&url='.$url_encode.'"><span class="text">Twitter</span></a>';
$facebook = '<a href="//www.facebook.com/sharer.php?src=bm&u='.$url_encode.'&t='.$title_encode.'"><span class="text">Facebook</span></a>';
$line = '<a href="//line.me/R/msg/text/?'.$title_encode.'%0A'.$url_encode.'"><span class="text">LINEで送る</span></a>';
$social = "<div class='share amp'>";
$social .= "<h2>この記事をシェアする</h2>";
$social .= "<span class='twitter snslist'>" . $twitter . "</span>";
$social .= "<span class='facebook snslist'>" . $facebook . "</span>";
$social .= "<span class='line snslist'>" . $line . "</span>";
$social .= "</div><br><hr><div class='bottomcredit'><a href='//●●●.com/blog/'>ブログのトップページへ</a><br><a href='//●●●.com/blog/about/'>当ブログについて</a> ｜ <a href='//●●●.com/blog/profile/'>プロフィール</a> ｜ <a href='//●●●.com/ask/'>お問い合わせ</a><br>©Copyright2017 <a href='//●●●.com/blog/'>●●●</a> All Rights Reserved.</div>";
$content .= $social;
return $content;
} else {
return $content;
}
}
add_filter( 'the_content', 'content_for_social_button');
// AMPプラグインにCSSを追加する
add_action( 'amp_post_template_css', 'xyz_amp_additional_css_styles' );
function xyz_amp_additional_css_styles( $amp_template ) {
?>
/*CSSここから*/
body {
font-family: "Lato", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-family: Arial,Helvetica,"游ゴシック",YuGothic,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
font-size: 105%;
line-height: 2;
color: #333;
background: #fff;
padding-bottom: 0px;
}
.content {
padding: 16px;
overflow-wrap: break-word;
word-wrap: break-word;
font-weight: 400;
color:  #333;
}
h1.title {
margin: 10px 0 0 0;
font-size: 25px;
line-height: 1.4;
font-weight: 700;
color: #333;
}
.title {
margin: 0px 0 0 0;
font-size: 16px;
line-height: 2;
font-weight: normal;
color: #333;
}
.f_serif{
font-family: Georgia,serif;
}
.f_meiryo{
font-family: "メイリオ", sans-serif;
}
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a {
text-decoration: none;
}
h1, .h1 {
font-size: 1.3em;
font-weight: bold;
line-height: 1.333em;
}
h2, .h2 {
font-size: 21px;
border-left:8px solid #ff9000;
padding: .5em 0 .5em .7em;
margin-top: 2em;
line-height: 1.5em;
}
h3, .h3 {
font-size: 20px;
border-left:5px solid #ff9000;
padding: .5em 0 .5em .8em;
margin-top: 1.9em;
line-height: 1.5em;
}
h4, .h4 {
font-size: 1.2em;
font-weight: 700;
}
h5, .h5 {
font-size: 1em;
font-weight: 700;
line-height: 2em;
letter-spacing: 1px;
}
.share.amp .snslist{
width:31%;
margin:0 1% 15px;
display:inline-block;
text-align:center;
font-size:82%;
font-weight:bold;
}
.share.amp .snslist a{
display:block;
padding:1em 0;
width:100%;
border-radius:0.3em;
color:#fff;
text-decoration:none;
}
.share.amp .snslist.twitter a{
background: #00acee;
box-shadow: 0 3px 0 #0092ca;
}
.share.amp .snslist.facebook a{
background: #1f6aba;
box-shadow: 0 3px 0 #2c4373;
}
.share.amp .snslist.line a {
background:#25af00;
box-shadow:0 3px 0 #219900;
}
.linkcard {
font-size: .94em;
margin : 10px 0 30px 0;
padding: 3% 4%;
border-radius:4px;
border: 1px solid rgba(165, 165, 165, 0.5);
background:#fff;
}
.su-box {
border-radius:4px;
border: 1px solid rgba(165, 165, 165, 0.5);
margin: .5em 0 2em 0;
}
.su-box-title{
padding: .5em .8em;
font-size: .94em;
}
.su-box-content{
padding: .5em .8em;
font-size: .94em;
}
.su-box-content p{
font-size: .94em;
margin-bottom: 0;
}
.supplement{
background:lightyellow;
font-size: .94em;
padding: 3% 4%;
margin: 1.5em 0 2em;
border-radius:4px;
border: 1px solid rgba(165, 165, 165, 0.2);
}
.supplement p:last-child{
margin-bottom:0;
}
.supplement.normal{
background:lightyellow;
padding: 3% 4%;
margin: 1.5em 0 2em;
border-radius:4px;
border: 1px solid rgba(165, 165, 165, 0.2);
}
.supplement.warning{
background:pink;
padding: 3% 4%;
margin: 1.5em 0 2em;
border-radius:4px;
border: 1px solid rgba(165, 165, 165, 0.2);
}
.supplement.boader{
border: 1px solid rgba(165, 165, 165, 0.5);
}
.yellowbox {
padding:22px 20px 0px;
border:solid 1px #fffacd;
background-color:#ffffe0;
margin:20px 0 20px 0;
font-size: 16px;
border-radius:4px;
}
.redbox {
padding:22px 20px 0px;
border:solid 1px #ef5350;
background-color:#ef9a9a;
margin:20px 0 20px 0;
font-size: 16px;
border-radius:4px;
}
.graybox {
padding:22px 20px 0px;
border:solid 1px #ccc;
background-color:#f3f3f3;
margin:20px 0 20px 0;
font-size: 16px;
border-radius:4px;
}
.alignleft, amp-img.alignleft {
margin-right: auto;
display: block;
float: none;
clear: left; 
}
.aligncenter, amp-img.aligncenter {
margin-right: auto;
margin-left: auto;
display: block;
clear: both; 
margin: 0 0 2em;
}
amp-iframe {
max-width:100%;
margin: 0 0 20px 0;
}
ul,li {
padding: 0 0 0 16px;
}
.toc_title {
font-weight: 700;
}
#toc_container li:before{
content:none;
}
#toc_container{
padding:0;
min-width: 90%;
margin: auto;
background: #fff;
background: rgba(255, 255, 255, 0.5);
border: 0px solid #eee;
}
#toc_container p.toc_title{
margin-bottom: .5em;
}
#toc_container ul{
margin: 0;
}
#toc_container li a{
display: block;
padding: 0;
border-top: 0px dotted #ddd;
}
#toc_container li li a{
padding-left: .3em;
}
#toc_container li .toc_number{
margin-right: .3em
}
.adsense {
text-align:center;
}
ul.meta {
font-size: 0;
color: #fff;
margin: 0;
padding: 0;
}
.bottomcredit {
text-align:center;
font-size: .9em;
}
/*CSSここまで*/
<?php
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

// AMP（※WPプラグイン版）のときにSNSボタンを記事下に表示

function content_for_social_button($content){

if (is_amp_endpoint()) {

$url_encode=urlencode(get_permalink());

$twitter = '<a href="//twitter.com/share?text='.urlencode(the_title( "" , "" , 0 )).'&url='.$url_encode.'"><span class="text">Twitter</span></a>';

$facebook = '<a href="//www.facebook.com/sharer.php?src=bm&u='.$url_encode.'&t='.$title_encode.'"><span class="text">Facebook</span></a>';

$line = '<a href="//line.me/R/msg/text/?'.$title_encode.'%0A'.$url_encode.'"><span class="text">LINEで送る</span></a>';

$social = "<div class='share amp'>";

$social .= "<h2>この記事をシェアする</h2>";

$social .= "<span class='twitter snslist'>" . $twitter . "</span>";

$social .= "<span class='facebook snslist'>" . $facebook . "</span>";

$social .= "<span class='line snslist'>" . $line . "</span>";

$social .= "</div><br><hr><div class='bottomcredit'><a href='//●●●.com/blog/'>ブログのトップページへ</a><br><a href='//●●●.com/blog/about/'>当ブログについて</a> ｜ <a href='//●●●.com/blog/profile/'>プロフィール</a> ｜ <a href='//●●●.com/ask/'>お問い合わせ</a><br>©Copyright2017 <a href='//●●●.com/blog/'>●●●</a> All Rights Reserved.</div>";

$content .= $social;

return $content;

} else {

return $content;

}

add_filter( 'the_content', 'content_for_social_button');

// AMPプラグインにCSSを追加する

add_action( 'amp_post_template_css', 'xyz_amp_additional_css_styles' );

function xyz_amp_additional_css_styles( $amp_template ) {

/*CSSここから*/

body {

font-family: "Lato", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif;font-family: Arial,Helvetica,"游ゴシック",YuGothic,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;

font-size: 105%;

line-height: 2;

color: #333;

background: #fff;

padding-bottom: 0px;

}

.content {

padding: 16px;

overflow-wrap: break-word;

word-wrap: break-word;

font-weight: 400;

color: #333;

}

h1.title {

margin: 10px 0 0 0;

font-size: 25px;

line-height: 1.4;

font-weight: 700;

color: #333;

}

.title {

margin: 0px 0 0 0;

font-size: 16px;

line-height: 2;

font-weight: normal;

color: #333;

}

.f_serif{

font-family: Georgia,serif;

}

.f_meiryo{

font-family: "メイリオ", sans-serif;

}

h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a {

text-decoration: none;

}

h1, .h1 {

font-size: 1.3em;

font-weight: bold;

line-height: 1.333em;

}

h2, .h2 {

font-size: 21px;

border-left:8px solid #ff9000;

padding: .5em 0 .5em .7em;

margin-top: 2em;

line-height: 1.5em;

}

h3, .h3 {

font-size: 20px;

border-left:5px solid #ff9000;

padding: .5em 0 .5em .8em;

margin-top: 1.9em;

line-height: 1.5em;

}

h4, .h4 {

font-size: 1.2em;

font-weight: 700;

}

h5, .h5 {

font-size: 1em;

font-weight: 700;

line-height: 2em;

letter-spacing: 1px;

}

.share.amp .snslist{

width:31%;

margin:0 1% 15px;

display:inline-block;

text-align:center;

font-size:82%;

font-weight:bold;

}

.share.amp .snslist a{

display:block;

padding:1em 0;

width:100%;

border-radius:0.3em;

color:#fff;

text-decoration:none;

}

.share.amp .snslist.twitter a{

background: #00acee;

box-shadow: 0 3px 0 #0092ca;

}

.share.amp .snslist.facebook a{

background: #1f6aba;

box-shadow: 0 3px 0 #2c4373;

}

.share.amp .snslist.line a {

background:#25af00;

box-shadow:0 3px 0 #219900;

}

.linkcard {

font-size: .94em;

margin : 10px 0 30px 0;

padding: 3% 4%;

border-radius:4px;

border: 1px solid rgba(165, 165, 165, 0.5);

background:#fff;

}

.su-box {

border-radius:4px;

border: 1px solid rgba(165, 165, 165, 0.5);

margin: .5em 0 2em 0;

}

.su-box-title{

padding: .5em .8em;

font-size: .94em;

}

.su-box-content{

padding: .5em .8em;

font-size: .94em;

}

.su-box-content p{

font-size: .94em;

margin-bottom: 0;

}

.supplement{

background:lightyellow;

font-size: .94em;

padding: 3% 4%;

margin: 1.5em 0 2em;

border-radius:4px;

border: 1px solid rgba(165, 165, 165, 0.2);

}

.supplement p:last-child{

margin-bottom:0;

}

.supplement.normal{

background:lightyellow;

padding: 3% 4%;

margin: 1.5em 0 2em;

border-radius:4px;

border: 1px solid rgba(165, 165, 165, 0.2);

}

.supplement.warning{

background:pink;

padding: 3% 4%;

margin: 1.5em 0 2em;

border-radius:4px;

border: 1px solid rgba(165, 165, 165, 0.2);

}

.supplement.boader{

border: 1px solid rgba(165, 165, 165, 0.5);

}

.yellowbox {

padding:22px 20px 0px;

border:solid 1px #fffacd;

background-color:#ffffe0;

margin:20px 0 20px 0;

font-size: 16px;

border-radius:4px;

}

.redbox {

padding:22px 20px 0px;

border:solid 1px #ef5350;

background-color:#ef9a9a;

margin:20px 0 20px 0;

font-size: 16px;

border-radius:4px;

}

.graybox {

padding:22px 20px 0px;

border:solid 1px #ccc;

background-color:#f3f3f3;

margin:20px 0 20px 0;

font-size: 16px;

border-radius:4px;

}

.alignleft, amp-img.alignleft {

margin-right: auto;

display: block;

float: none;

clear: left;

}

.aligncenter, amp-img.aligncenter {

margin-right: auto;

margin-left: auto;

display: block;

clear: both;

margin: 0 0 2em;

}

amp-iframe {

max-width:100%;

margin: 0 0 20px 0;

}

ul,li {

padding: 0 0 0 16px;

}

.toc_title {

font-weight: 700;

}

#toc_container li:before{

content:none;

}

#toc_container{

padding:0;

min-width: 90%;

margin: auto;

background: #fff;

background: rgba(255, 255, 255, 0.5);

border: 0px solid #eee;

}

#toc_container p.toc_title{

margin-bottom: .5em;

}

#toc_container ul{

margin: 0;

}

#toc_container li a{

display: block;

padding: 0;

border-top: 0px dotted #ddd;

}

#toc_container li li a{

padding-left: .3em;

}

#toc_container li .toc_number{

margin-right: .3em

}

.adsense {

text-align:center;

}

ul.meta {

font-size: 0;

color: #fff;

margin: 0;

padding: 0;

}

.bottomcredit {

text-align:center;

font-size: .9em;

}

/*CSSここまで*/

<?php

}

いろいろ足していったらこんなに長くなってしまいました(^^;

上のコードを書くことによって、

・通常のページとほぼ同じ見た目になるようにした。（27行目以降・CSSの追加）
・SNSシェアボタンの下にフッター表示（ブログトップやプロフィールなどへのリンク、著作権情報など）を入れた。（13行目・コードの追加）

といった変化を加えています。

「これはこのためのコードです」みたいな解説の文字も一切入れてないですし（入れてたらAMP表示のエラーが出たので消しました(^^;）、見せられるようなキレイなコードの書き方でもないですが、AMP表示を導入している方（特にストーク使いの方）の参考に少しでもなればと思い、貼っておきます。

functions.phpはコードの書き方を1つでも間違えると一瞬でブログが真っ白になってしまうので、手を加える際は必ず事前にバックアップを取ってすぐに元に戻せるようにしてからいじって下さいね！
（私も上のコードを書いていた時に、13行目の「’」を「”」にしただけで真っ白になって冷や汗をかきました（汗））