フォーラムへの返信
-
キタジマさん
さっそくありがとうございます。
ちなみにショートコード化はこんな感じのものを使いまわしています。
add_shortcode( 'current_year', function ($atts) { $born = $atts['born'] ?? ''; if ($born && preg_match('/^\d{8}$/', $born)) { $birthdate = DateTime::createFromFormat('Ymd', substr($born, 0, 8)); $current_date = new DateTime(); if ($birthdate < $current_date) { return $birthdate->diff($current_date)->y; } } return ($born && !preg_match('/^\d{8}$/', $born)) ? '-' : date('Y'); } );
[current_year]なら現在の年
[current_year born="19XX0000"]8桁の年月日が入ったら経過年（創業から●年、●歳など）
[current_year born="19XX"]誤った記述の場合は「-」いいねをした人:拝見したところ、
my-snow-monkey/style.cssに書かれている* { overflow-x: clip; }が悪さをしているようです。
リストのアイコンがネガティブな数値で設置されているので、そのせいかと思います。
引き続きoverflow-xを使用されるようなら、リストは除いたほうが良いと思います。いいねをした人:<div class="l-center-header" data-has-global-nav="true"> <div class="c-container"> <div class="u-invisible-md-down"> ..... </div> <div class="l-center-header__row"> ..... </div> <div class="l-center-header__row u-invisible-md-down"> ..... </div> </div> </div>サイトを拝見したところ、該当箇所はこんな感じのHTMLになっていますので、
flexbox＋orderプロパティで表示順は変えられると思います。.l-center-header > .c-container { display: flex; flex-direction: column; } .u-invisible-md-down { order: 1; } .l-center-header__row.u-invisible-md-down { order: 2; } .l-center-header__row { order: 3; }いいねをした人:外部サイトに移動する前にLPなどでよくある「ほかのサイトに移動します」という中間ページを挟んで外部サイトに移動する
実際にこの動きをしているサイトが参考になると思いますが、コードはご覧になりましたか？
SNOWMONKEY テーマで作成したサイト側からそのような動作にする方法があるか
Snow Monkeyに限らず、JavaScriptで実現可能かと思います。
【サイト内】
記事や固定ページ内のaタグを対象として・・・
①クリックした際、外部サイトのURLか判定
②外部サイトの場合、指定したURL（中間ページ）に移動
③サイト内URLの場合はクリックされたURLに移動
【中間ページ】
上記で取得した外部サイトのURLを「移動する」ボタンに適用
※「戻る」ボタンで、もとのページに戻れるように
※このページのみ外部サイトの判定はしない
こんな感じの構造だと思います。
また、中間ページは、固定ページ＋デフォルトのブロックのみで作成できると思います。
では、そのJavaScriptはどんなコードを書けばいいの？となりますが、中間ページ挟んで外部リンクに移動するサイトを見たことがなく、また、わたしに提示するほどの技術もないため、参考にしたサイトのコードやネット検索などで調べていただいたほうが良いと思います。
方法はたくさん出てくると思います。
また、チャット型AIは、具体的な質問をすると、コードそのものも提示してくれるとのことですので、利用してみてはいかがでしょうか。いいねをした人:
### 発生している問題
#post-95849
の通りCSSに記載してもサイズ等が変更されない
コピペだとダメですよ。
CSSのコメントアウトが//になっているのが原因です。// ボタンのサイズ .c-hamburger-btn__bars { width: 26px; // 好きなサイズを設定 height: 18px; // バーの太さと位置から計算して設定 } // バーの太さ .c-hamburger-btn__bar { height: 2px; } // 2本目のバーのy位置 .c-hamburger-btn__bar:nth-of-type(2) { top: 8px; } // 3本目のバーのy位置 .c-hamburger-btn__bar:nth-of-type(3) { top: 16px; } // MENU の文字サイズ .c-hamburger-btn__label { font-size: 12px; }
↓コメントを残すなら、以下のように修正して追加してみてください。/* ボタンのサイズ */ .c-hamburger-btn__bars { width: 26px; /* 好きなサイズを設定 */ height: 18px; /* バーの太さと位置から計算して設定 */ } /* バーの太さ */ .c-hamburger-btn__bar { height: 2px; } /* 2本目のバーのy位置 */ .c-hamburger-btn__bar:nth-of-type(2) { top: 8px; } /* 3本目のバーのy位置 */ .c-hamburger-btn__bar:nth-of-type(3) { top: 16px; } /* MENU の文字サイズ */ .c-hamburger-btn__label { font-size: 12px; }いいねをした人:My Snow Monkey（
my-snow-monkey.php）もしくは子テーマのfunctions.phpに以下のコードを追加すると、該当箇所（のテンプレート）は読まれなくなると思います。
add_filter( 'snow_monkey_template_part_render_template-parts/common/overlay-search-box', '__return_false' );
ほかに不具合が発生するか未検証ですが、一度お試しください。いいねをした人:「新しく投稿されたものに関してはカテゴリラベルのところにNewマークがつくようにする」は以下のコードを加えました。
すでに「NEW」が表示されているということですね。
私がやるとすれば、サムネイル上の「NEW」以外のカテゴリー名はCSS（display: none）で消します。
ご提示のコードの場合、該当の要素にmy-newがついていると思いますので、そこだけ強制的に表示させます。.c-entries .c-entry-summary__term { display: none; } .c-entries span[class*="my-new"] { display: block!important; }
カテゴリーの表示は、位置をCSSで移動させるのがちょっと嫌なので、フィルターフックsnow_monkey_template_part_render_template-parts/loop/entry-summaryで</header>の後にreplaceを使ってリンクなしのカテゴリーを表示するようにしてあげれば、それっぽい感じになると思います。add_filter( 'snow_monkey_template_part_render_template-parts/loop/entry-summary', function( $html ) { $category = get_the_category(); $cat_name = $category[0]->cat_name; $html = str_replace( '</header>', '</header><p class="cat_name_origin"><span>'. $cat_name. '</span></p>', $html ); return $html; } );もっとスマートな方法もあるかと思いますが、1つの例として参考にしていただければと思います。
いいねをした人:キタジマさん
デフォルト機能でアーカイブページの記事にホバーするとopcityが薄くなるような機能がついていると思うのですが、これを無しにしたいです。
とあったので、
opacityのほうかと思いました。福山さん
私の場合ですが、Chromeのデベロッパーツール（要素）で見つからない場合、該当のCSSを開き、c-entries__itemやhoverで検索して探します。
いいねをした人:カスタムメニューの「ナビゲーションラベル」に
<img src="SVGのURL" alt="メニュー名など" width="64" height="64" class="任意のクラス名">
と直接入れるとSVGの画像（アイコン）が表示されませんか？SVGはプラグインを使用してメディアにアップするか、サーバーの任意の場所に置くなどしてください。
いいねをした人:2つ方法を提示します。
フックで挿入する場合
入れたい場所は、オレインさんのサイトがとてもわかりやすいので、こちらを見てフックを探してください。
今回は仮にフッター上部付近のsnow_monkey_append_contentsとします。
My Snow Monkey（プラグイン）なら my-snow-monkey.php 、子テーマなら funstions.php に以下のようなコードを追記します。add_action( 'snow_monkey_append_contents', function() { if ( is_singular( 'post' ) ) { echo apply_filters( 'the_content', get_post( ' 再利用ブロックのID ' )->post_content ); } } );
ウィジェットで挿入する場合
再利用ブロックのショートコードを生成してくれるプラグインをインストール、有効化します。
↓以下は代表的なものこれらのプラグインは、再利用ブロック一覧にショートコードが発行されますので、ショートコードをコピーしてウィジェットに貼り付けます。
特定の条件で表示するには別のプラグインを使用してください。
未検証ですが、以下のようなプラグインで投稿ページのみにウィジェットを表示できるかと思います。頻繁に表示する場所を変えたりしないのであれば、前者のほうが良いかと思います。
お試しくださいませ。いいねをした人:ご提示いただいたコードは
style.cssを読み込ませるものでmy-snow-monkey.phpに記述します。
style.cssは、通常のCSSを記述してください。my-snow-monkey
└ my-snow-monkey.php<?php /** * Plugin name: My Snow Monkey * Description: このプラグインに、あなたの Snow Monkey 用カスタマイズコードを書いてください。 * Version: 0.2.3 * * @package my-snow-monkey * @author inc2734 * @license GPL-2.0+ */ /** * Snow Monkey 以外のテーマを利用している場合は有効化してもカスタマイズが反映されないようにする */ $theme = wp_get_theme( get_template() ); if ( 'snow-monkey' !== $theme->template && 'snow-monkey/resources' !== $theme->template ) { return; } /** * Directory url of this plugin * * @var string */ define( 'MY_SNOW_MONKEY_URL', untrailingslashit( plugin_dir_url( __FILE__ ) ) ); /** * Directory path of this plugin * * @var string */ define( 'MY_SNOW_MONKEY_PATH', untrailingslashit( plugin_dir_path( __FILE__ ) ) ); // 実際のページ用の CSS 読み込み add_action( 'wp_enqueue_scripts', function() { wp_enqueue_style( 'my-snow-monkey', MY_SNOW_MONKEY_URL . '/style.css', [ Framework\Helper::get_main_style_handle() ], filemtime( MY_SNOW_MONKEY_PATH . '/style.css' ) ); } ); // エディター用の CSS 読み込み // クラシックエディターとブロックエディターの両方に CSS が読み込まれます。 // ブロックエディターの場合は自動的に .editor-styles-wrapper でラップされます。 // 依存関係は指定できません。 add_action( 'after_setup_theme', function() { add_theme_support( 'editor-styles' ); add_editor_style( '/../../plugins/my-snow-monkey/style.css' ); } ); // LINE広告 add_action( 'wp_head', function() { ?> <!--LINE Tag Base Code --> <!--Do Not Modify --> <script> (function(g,d,o){ g._ltq=g._ltqll[] ;g._lt=g._ltllfu nction(){g._ltq.push(arguments)}; var h=location.protocol==='https:'?'https://d.linescdn.net':'http://d.line-cdn.net'; var s=d.createElement('script');s.async= 1; s.src=o||h+'/n/line_tag/public/release/vl/lt.js'; var t=d.getElementsByTagName('script')[O];t.parentNode.insertBefore( s,t); })(window, document); _lt('init', { customerType:'lap', tagld:'123abc', sharedCookieDomain:'abc.com' }); _lt('send','pv', ['123abc']); </script> <noscript> <img height="1" width="1" style="display:none" src="https://tr.line.me/tag.gif?c_t=lap&t_id= 123abc &e=pv&noscript=l" /> </noscript> <!-- End LINE Tag Base Code--> <?php } );my-snow-monkey
└ style.css（例）@media ( min-width: 769px ) { .demo { width: 100px; } } @media ( max-width: 768px ) { .demo { width: 50px; } }いいねをした人:My Snow Monkeyについては、こちらで解説されていますのでご参照ください。
流れ
- マイアカウントから my-snow-monkey.zip をダウンロード
- ZIPを展開して
my-snow-monkey.phpに上記で提示したコードを追記 my-snow-monkeyフォルダをpluginsにアップロード- 管理画面「プラグイン」の
My Snow Monkeyを有効化
以上です。
チャレンジしてみてください。いいねをした人:該当箇所の
hoverにはfilter:brightness(80%)が指定され、それで画像を暗くしていると思います。.smb-items__banner:active .smb-items__banner__figure, .smb-items__banner:focus .smb-items__banner__figure, .smb-items__banner:hover .smb-items__banner__figure { filter:brightness(80%) }ここを
2００%などにすれば、マウスを当てた際に明るく変化すると思います。
また、コードを見るとhover前のimgにはopacity: 0.6が適用されているように思いますので、hoverした際に画像本来の色に戻してあげるほうが良いかもしれません。.smb-items__banner:active .smb-items__banner__figure > img, .smb-items__banner:focus .smb-items__banner__figure > img, .smb-items__banner:hover .smb-items__banner__figure > img { opacity: 1 !important; }自身で設定したマスクに上記が適用されるかは不明ですが、デフォルトのものでいったんお試しください。
いいねをした人:
