あ、そもそもですね。cssの問題ではなく、おそらくインラインでのstyle要素の利用がAMPでは不可のはずで、その結果、AMPのプラグインがその利用不可のタグと判断してごっそり削除しているようなのです。
なので、background-imageでなくimgタグでsrcにて参照すると表示されたという感じかと考えています。
以下の「サポートされる CSS」の中で許可されないスタイルとしてインラインのスタイル属性が記載されてます。
Case Shinjuku のサイトは、Snow Monkey ではなくオリジナルで、ブログカードのパッケージだけ利用、そして、AMP については AMP プラグインで対応している、ということであっていますよね？
その場合ですと、パッケージ側での対処ではなく、AMP 用の scss ファイルでブログカードの scss を import し、それを AMP 用のフックで読み込ませる、という処理が必要になります。
（AMP は CSS の容量制限がきついため、強制的に読み込ませるのではなくそのようなフローにしています）
下記参考にしてみてください。
Snow Monkey の公式サイトもカスタムタクソノミーを使っていますが、特に不具合は起きていないので、おそらく使用しているプラグインか、設定方法に問題があるのではという気がします。
「No Category Base」は結構扱いが難しいプラグインだと思いますので（というかパーマリンクをいじくるプラグインは基本的に扱いが難しい）、オフにしておいたほうが良いと思います。
カスタム投稿タイプやカスタムタクソノミーを定義したあとは、管理画面 > 設定 > パーマリンク設定を開いて（何も操作せずに）保存をおすとちゃんと表示されたりします。おまじない的にやってみられると良いかもしれません。
Codex のサンプルコードで定義されたということなので多分今回は問題ないのではと思うのですが、参考にされる記事によっては間違ったコードを紹介している場合があります。次の記事が詳しいです。
あー確かにそうですね。デフォルトで除外するようにしたほうが良い気がしますね。
Analytics のタグは単純に管理者のときは出力しない、とすれば良いと思うのですが、タグマネージャーは全然無知でして、もしご存知であれば教えてください！タグマネージャーも Analytics のタグと同じように、単純に管理者のときは出力しない、とすれば良いのですかね？
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','<tag_manager_id>');
これを出力したりしなかったり制御するみたいな。
ありがとうございます。
超絶わかりやすいです！
すごいUXの改善につながるのではないかと思いました。
現状では開くを押した時に閉じるが二行になってしまいます。
.c-drawer__toggle
width: 2.86957rem; にすると閉じるが横に並びました。
また、開いた時に右端に出てるMENUが閉じるに置き換わるとより感覚的に使いやすくなるのではないでしょうか。
もしくはメニューのしたにメニューを閉じるという項目があるとわかりやすいのではないか。
デザイン的には美しくないかもしれませんが、可能であれば、右側の余白にクリックでメニューが閉じますという表記があると無知な人にもわかりやすくなるのではないか。
今まで記号をタップするのが当たり前だと思っていましたが、
実際実装できてみると記号よりも圧倒的にわかりやすい気がします。
自分の想像を超えた実装ありがとうございます。
標準機能として、この機能の選択肢があると、いいのではないでしょうか。
サブメニューが開くことを知らない人もいると思うので、そういう層にも理解してもらえる。
そうですね、これは子テーマでの対応となります。
/snow-monkey/templates/view/content-post.php を /子テーマ/templates/view/content-post.php にコピーして、その中の
<div class="c-entry__meta">
<?php get_template_part( 'template-parts/entry-meta' ); ?>
</div>
を消して、
<?php
if ( get_option( 'mwt-display-profile-box' ) ) {
get_template_part( 'template-parts/profile-box' );
}
?>
の上に
<?php get_template_part( 'template-parts/entry-meta' ); ?>
ペーストしてみてください。
子テーマの CSS、もしくは「カスタマイザー > 追加 CSS」に下記の CSS を追加していただくとどうでしょうか？
@media (max-width: 1023px) {
.c-entries--rich-media .c-entries__item {
flex-basis: 100%;
max-width: 100%;
}
}
スマホメニューを開いた後、閉じるのが面倒なので、スクロールしたら、自動で閉じてほしい。
これは意図せぬ動作がおこりそう（例えば閉じたくないのに閉じちゃうとか）がありそうなので難しいと思います。スクロールするためにはメニュー部分以外の画面を触る必要がありますが、現状でも、閉じるボタンを押さなくてもメニュー部分以外の画面を触れば閉じるようになっていますので、そのままでも使い勝手的にはあまり差はないのかなと考えています。
スマホメニューでサブメニューをつくった時に、右側に出て来る↓開くマークがわかりづらいので、もっと左側に寄せるか？リテラシーが低い人でも開けるとわかるようにしてほしい。
デザインは調整の必要があると思いますが、次の CSS を子テーマや追加 CSS に追加していただければ、開く/閉じるという表記に変更できます。
#drawer-nav .c-drawer__toggle[aria-expanded=true] {
transform: none;
}
#drawer-nav .c-drawer__toggle .c-ic-angle-right:before {
content: '開く';
}
#drawer-nav .c-drawer__toggle[aria-expanded=true] .c-ic-angle-right:before {
content: "閉じる";
}
早速のお返事ありがとうございます！
「どんな画像がきても強制的に整えて表示」
なるほどです、確かに日々更新するブログではその方が便利かもしれませんね…
ただ、拡大したときに上下が切れてしまうのは、残念な感じはします。
サムネイルはトリミングされていてもいいけれど、拡大画像では全体を見せたいと思うのですよね…
その当たりがうまくいくといいなあとは思いつつも…
「Pure CSS ギャラリーを使用する」のチェックを外して、プラグイン「Photoswipe Masonry」を入れたら
大体思い通りのギャラリーになったので、ひとまずそれで対応しようと思います^^
ありがとうございました。
今手元では修正しました。リリースまで少々お待ちください。
目次という見出しの変更はプログラム上での変更になりますでしょうか。
そうですね。子テーマの functions.php に下記をコピペしてみてください。
add_filter( 'gettext', function( $translation, $text, $domain ) {
if ( 'inc2734-wp-contents-outline' === $domain && 'Outline' === $text ) {
return '「目次」以外のラベルを表示します！';
}
return $translation;
}, 10, 3 );
すみません！勘違いしていました！ご指摘の通り、hタグじゃないとダメということにしていたみたいです。なぜかというと、そうしないと見出しの「入れ子」ができないためです（h2, h3 となっていれば階層が判断できるが div だと階層が判断できない）。
ということで、div じゃなくてhタグを使って頂く必要があります。
※とりあえず、hタグ以外の場合は全部同じ階層として判定されるようにアップデートしたいと思います。
早速のご返信&ご回答ありがとうございました！！！！！
>「ホームページの設定」をせずに、
すみません、まさにそうでした…お騒がせして申し訳ありません。
投稿の記事一覧をトップページに載せようとしていて、
ウィジェットも設定できるみたいようだし
ホームページ設定しなくてもいいやって勘違いしていました(^^;)
リンクもありがとうございます！
（ちゃんと書いてあるのに申し訳ありません(><)）
>その中身の幅を slim な幅にあわせるのか
>slim 幅で配置されることになるのでやっぱり slim 幅ですかね
そうですね…slimですかね…
通常の固定ページにslimを使っていてタイトルが表示されている場合、
タイトルの幅よりコンテンツの幅が広くなるとなんだか変な気がします。
（想像しているところが違ったらすみません(^^;)）
ありがとうございます。
Elementorで見出しのパーツのhtmlの指定でh2だった箇所をdivに変更しました。
目次という見出しの変更はプログラム上での変更になりますでしょうか。
言われてみれば1カラムの場合はウィンドウ幅になったほうが良い気がしてきました。ちょっと検討しますね。
ちなみに、1カラム（silm）のときは、背景はウィンドウ幅になるとして、その中身の幅を slim な幅にあわせるのか、通常の幅にするのか、デザイン的にはどちらのほうがベターなんだろう…？みたいなのは気になりました。テキストウィジェットとか通常のウィジェットは slim 幅で配置されることになるのでやっぱり slim 幅ですかねー。
うーん、でも確かに PR ボックスの場合、フッター以外（サイドバーもかな…？）のウィジェットエリアでは .c-section__title のデザインになったほうが良さそうな気がしてきました。ちょっと検討します！
