Snow Monkey v10 で、内包する Basis もアップデートしました。チェックボックスの HTML 構造は下記に変更になりました。
<label>
<span class="c-checkbox">
<input type="checkbox" class="c-checkbox__control">
<span class="c-checkbox__label">...</span>
</span>
</label>
ちなみに、これまで JS を使って無理くりどのブラウザにもデザインを適用するようにしていましたが、そこまでする必要性も減ってきていると思うので、最新版では、レガシーブラウザにはデザインが反映されず（ブラウザデフォルトのデザインになる）、モダンブラウザには Basis のデザインが反映されるようになっています。
こんな感じでどうでしょう？
add_filter(
'the_excerpt',
function( $description ) {
$meta_description = get_post_meta( get_the_ID(), 'wp-seo-meta-description', true );
return $meta_description
? $meta_description
: $description;
}
);
ぐわーインフィード広告ってそういう挙動になっちゃうんですね…。Google さんがクラス名か何かで判定して良い感じに見た目調整してくれるのだと思っていました…。
えっと、もうすぐ v10 をリリースするので、それにあわせて「インフィード広告はリッチメディア/パネルにだけ表示」に変更しましょうか。テキストレイアウトのときに広告を入れたいというニーズはほとんどないと思いますので…。
お急ぎであればひとまず CSS で非表示にするか、アップデートリリースまでインフィード広告は無効化されるのが良いかなと思います。ご不便おかけしてすみません、ご報告めちゃ助かりました。
.c-entries--text .c-entries__item:nth-child(3) {
display: none;
}
あ、なるほど！
下記の CSS に置き換えるとどうでしょうか？ background-size: cover; を追加しました。
.c-drawer li:last-child a {
background: url(https://www.atto.space/wp-content/uploads/2020/03/atto-linetuika01.jpg);
margin:10px;
height: 160px;
max-width: 100%;
overflow: hidden;
text-indent: -1000%;
white-space: nowrap;
width: 220px;
background-size: cover;
}
キタジマさん
ご返信ありがとうございます。
CSSは下記の記述で、サイズの大きい画像を入れると、
.c-drawer li:last-child a {
background: url(https://www.atto.space/wp-content/uploads/2020/03/atto-linetuika01.jpg);
margin:10px;
height: 160px;
max-width: 100%;
overflow: hidden;
text-indent: -1000%;
white-space: nowrap;
width: 220px;
}
下記の様に 枠からはみ出て
画像のすべてが表示されないのですが、
CSSにどの様に記述すればイイですか？
すいません、お手数をおかけしますが
教えていただけると助かります。
よろしくお願いいたします。m(__)m
iPhone などの高画質な端末だと、実際のピクセルサイズよりディスプレイの密度が詰まっているので、表示したいサイズの2倍程度の大きさの画像を使うと良いかもしれません。
例えば、
height: 160px;
width: 240px;
で表示したいのだとしたら、CSS はこのままで、使う画像のサイズを横480x縦320でつくるイメージです。
Rocket Martueさん
キタジマさん
ありがとうございます＾＾
CSSでやってみたのですが、画像をサイズ通りにしたら下記のように画像が荒くなってしまいました。
また、画像を大きくしたら枠からはみ出て画像全体が写らなくなりました。
画像全体が写って、枠内ちょうどの大きさに表示したいのですが、この場合はcssでどのように記述したら良いでしょうか？
お手数をおかけしますが、教えてただけると助かります。
よろしくお願いいたします。
大西
このリンクだったんですね。実装したら上手く入りました！
どんどん使いやすくなってます。しっかり読み込まないとお宝が使いこなせない〜頑張ります。
最近、snowmonkey daiet をやっといれてみました。これもメチャいいです。ありがとうございます。
あ、トッピック閉じておきますね。
Snow Monkey にはハッシュナビという特定の機能を起動する特殊なリンクがあります。
ドロワーを開くリンクは #sm-drawer になります。フッター固定ナビゲーションにリンク先が #sm-drawer なカスタムリンクを追加してみてください。
解決しました。
Cookieが原因で上手く表示されていなかったようです。
Chromeの『Cookieと他のサイトデータ』を削除したところ問題なく表示されました。
お騒がせして申し訳ありませんでした。
Snow Monkey Editorを有効にすると、全てのブロックでエラーが発生します・・・
（一般ブロック、Snow Monkey Blocks共通ブロック・セクションなど・・・）
プラグインは、
- Snow Monkey Blocks
- Snow Monkey Editor
のみ有効にし、それ以外は停止にしています。
サーバーは、Xサーバーを使用しており、
なども、OFFにしています。
@Rocket Martue さん、コメントありがとうございます！
@大西さん、この部分、現状簡単に追加する方法はなく、My Snow Monkey プラグインに PHP のコードを書くか、Rocket Martue さんが書いてくださったようにメニュー追加 + CSS でやるかのどちらかになります。僕も CSS のほうが簡単かなと思います（PHP だとエラーを気にしないといけないので）
一応 My Snow Monkey でやるのはこんな感じ。この場合、ドロワーの一番下に画像リンクが追加されます。検索ボックスがあったりドロワーサブナビが設定されていてもその下に追加されることになり、細かい位置調整はできません。
add_filter(
'snow_monkey_template_part_render',
function( $html, $slug ) {
if ( 'template-parts/nav/drawer' !== $slug ) {
return $html;
}
ob_start();
?>
<ul class="c-dropdown__menu">
<li class="c-dropdown__item">
<a href="リンク先 URL"><img src="画像URL" alt=""></a>
</li>
</ul>
<?php
$img_link = ob_get_clean();
return str_replace( '</nav>', $img_link . '</nav>', $html );
},
10,
2
);
普通にメニュー項目を追加して、追加CSSで画像に置き換えるのが簡単かなと思います。
.c-drawer li:last-child a {
background: url(background-img.png);
height: 160px;
max-width: 100%;
overflow: hidden;
text-indent: -1000%;
white-space: nowrap;
width: 240px;
}
background-img.png の所は、アップロードした画像のパスに置き換えてください。
height、widthは、画像に合わせてください。
