おお…これ、display:none;してただけなんですね…！
そうなんです。本当は HTML を出し分けたほうが良いのかもですが、こっちのほうがちょっとした CSS でのカスタマイズはしやすいのかなと思ってこうしています。
こんなふうになってほしいなというデザインを添付します。
ありがとうございます！わかりやすいです。ちょっとやってみますのでお待ちくださいまし…
カスタマイザー → 追加 CSS に下記の CSS を追加してみてください。
◎名前部分
.smb-balloon__name {
color: red;
}
◎吹き出しの文字
エディター上で文字を選択して、ツールバーの文字色から変更できます。
◎吹き出し
.smb-balloon__body {
background-color: red;
}
.smb-balloon__body::after {
border-right-color: red;
}
吹き出しの色については吹き出しブロック自体に色変更機能をつけたほうが良いかもですね…検討します！
おお…これ、display:none;してただけなんですね…！
そして既出の質問で失礼しました！
こんなふうになってほしいなというデザインを添付します。すごく雑で申し訳ないのですが…。
よろしくお願いいたします。
下記のトピックで、先頭にカテゴリーを追加する方法を書いています。
もしよろしければ、著者も表示できると嬉しいんですが…！
カテゴリー表示もなのですが、テキストレイアウトのときはスペースが厳しいので、例えばカテゴリーと著者は下に表示して1項目2行にする、のようなデザインだと収まりが良いかもしれません。もしデザインを提示いただけるのであれば、コードを提示しやすいです！
– MY_SNOW_MONKEY_URL … My Snow Monkey の URL
– MY_SNOW_MONKEY_PATH … My Snow Monkey のフルパス
定数が用意されてるんですね。さすがです！
filemtime( MY_SNOW_MONKEY_PATH . '/aseet/style.css' )
filemtime( MY_SNOW_MONKEY_PATH . '/aseet/app.js' ),
は、ファイルの更新日時をファイルバージョンとして出力するあれですね。
ブラウザのキャッシュを気にしなくてよくなるので、これは記述しておくのがよさそう。
@キタジマ氏
iPhone XSの実機では、デモページが横スクロールされてます。
一応、ご報告まで。
シミュレーター環境では未確認です。
My Snow Monkey に下記を追加してください。「投稿」かつ「リッチメディア」のときに書き換えが実行されます。
add_filter(
'snow_monkey_pre_template_part_render',
function( $html, $slug, $name, $vars ) {
if ( 'template-parts/loop/entry-summary' === $slug && 'post' === $name ) {
if ( isset( $vars['_entries_layout'] ) && 'rich-media' === $vars['_entries_layout'] ) {
ob_start();
?>
<section class="c-entry-summary c-entry-summary--post c-entry-summary--my-rich-media">
<?php \Framework\Helper::get_template_part( 'template-parts/loop/entry-summary/figure/figure' ); ?>
<div class="c-entry-summary__body">
<header class="c-entry-summary__header">
<?php \Framework\Helper::get_template_part( 'template-parts/loop/entry-summary/title/title' ); ?>
</header>
</div>
<div class="c-entry-summary--my-rich-media__meta">
<div class="c-entry-summary--my-rich-media__author">
author: <?php the_author(); ?>
</div>
<span class="c-entry-summary--my-rich-media__published">
<?php the_time( get_option( 'date_format' ) ); ?>
</span>
<span class="c-entry-summary--my-rich-media__categories">
<?php
$categories = get_the_terms( get_the_ID(), 'category' );
if ( $categories ) {
foreach ( $categories as $category ) {
?>
<a href="<?php echo esc_url( get_term_link( $category ) ); ?>">#<?php echo esc_html( $category->name ); ?></a>
<?php
}
}
?>
</span>
<span class="c-entry-summary--my-rich-media__tags">
<?php
$tags = get_the_terms( get_the_ID(), 'post_tag' );
if ( $tags ) {
foreach ( $tags as $tag ) {
?>
<a href="<?php echo esc_url( get_term_link( $tags ) ); ?>">#<?php echo esc_html( $tags->name ); ?></a>
<?php
}
}
?>
</span>
</div>
</section>
<?php
return ob_get_clean();
}
}
return $html;
},
10,
4
);
ごっそり書き換えているので、アップデートの際は影響がでることがあるかもしれません。アップデートの際はご注意ください。
CSS も書いてみました。適当に調整してください。
.c-entry-summary--my-rich-media__meta {
font-size: 12px;
}
.c-entry-summary--my-rich-media__author {
color: #999;
}
.c-entry-summary--my-rich-media__categories {
color: red;
}
.c-entry-summary--my-rich-media__categories a {
color: inherit;
text-decoration: none;
}
.c-entry-summary--my-rich-media__tags {
color: orange;
}
.c-entry-summary--my-rich-media__tags a {
color: inherit;
text-decoration: none;
}
PC 用のグローバルナビゲーションが多かったり長かったりする場合、Safari だと横スクロールが発生してしまうみたいです。
現在作業をすすめている v11 では改善されるだろうと予想しているのですが、リリースまでまだ時間がかかるので、ひとまず CSS のパッチをあててみてもらえればと思います。
@media (max-width: 639px) {
.l-center-header__row.u-hidden {
display: none;
}
}
実機の Android・iPhone 11、シミュレーターの iPhone XR で確認したのですが、特に横揺れのような現象は確認できませんでした。もしよかったら動画でとっていただけると助かります！
ちょっと気になるのは横スクロールがでていることで、Snow Monkey はヘッダーに overflow: hidden をつけているのですが、どうも Safari ではそれでも中身が大きいと横スクロールになってしまうみたいなのです。現在すすめている v11 ではおそらく横スクロールは解消すると踏んでいるのですが、リリースはまだ先なのでひとまず下記のパッチを当てて確認してみてください！
@media (max-width: 639px) {
.l-center-header__row.u-hidden {
display: none;
}
}
@Rocket Martue さんありがとうございます！
新しめの My Snow Monkey だと定数を用意してあるので、それを使うと良いと思います。
– MY_SNOW_MONKEY_URL … My Snow Monkey の URL
– MY_SNOW_MONKEY_PATH … My Snow Monkey のフルパス
@shuya さん
jQuery は自分で読み込まなくても WordPress がもともと持っているので、それを使うのが安全です。また、CSS や JavaScript の読み込みは Rocket Martue さんが書いてくださった wp_enqueue_style()、wp_enqueue_script() を使うのが推奨です。これらの関数は依存関係を指定できるので、ここで jQuery を指定すると WordPress が勝手に読み込んでくれます。
ということで、ちょっと Rocket Martue さんのコードに追記してみました。
add_action( 'wp_enqueue_scripts', 'msm_enqueue_style_script' );
function msm_enqueue_style_script() {
wp_enqueue_style(
'msm_style',
MY_SNOW_MONKEY_URL . '/aseet/style.css',
[],
filemtime( MY_SNOW_MONKEY_PATH . '/aseet/style.css' )
);
wp_enqueue_script(
'msm_scripts',
MY_SNOW_MONKEY_URL . '/aseet/app.js',
[ 'jquery' ],
filemtime( MY_SNOW_MONKEY_PATH . '/aseet/app.js' ),
true
);
}
そして、app.js に記述する jQuery の実行コードは、$ からではなく jQuery から記述する必要があるのでそこは注意してください。
(function($) {
// この中では $ が使えます。
})(jQuery);
あるいは
jQuery(function($){
// この中では $ が使えます。
});
ご報告ありがとうございます！
WordPress 5.5 でエディターの HTML 構造が変わるので、それにあわせた v11 のリリースで修正したいと思います。
my-sonw-monkey.phpに以下のコードを追記してみてください。
/**
* 定数を宣言
*/
define( 'MSM_PLUGIN_URL', plugins_url( '', __FILE__ ) ); // このプラグインのURL
define( 'MSM_PLUGIN_PATH', plugin_dir_path( __FILE__ ) ); // このプラグインのパス
/**
* 外部JS・CSSの読み込み
*/
add_action( 'wp_enqueue_scripts', 'msm_enqueue_style_script' );
function msm_enqueue_style_script() {
wp_enqueue_style( 'msm_style', MSM_PLUGIN_URL . '/aseet/style.css' );
wp_enqueue_script( 'msm_scripts', MSM_PLUGIN_URL . '/aseet/app.js' );
}
トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。
【お使いの Snow Monkey のバージョン】
10.10.8
【お使いのブラウザ】
iphoneXR safari
【当該サイトのURL】（公開できる場合は書いていただいたほうがスムーズです）
===
いつもお世話になっております。
ヘッダーの中央ロゴを選択時にスマートフォンで横揺れが生じてしまい、一行にする、などで対応しております。
お手すきに一度ご確認いただけますでしょうか。よろしくおねがいいたします。
