[GONSY]

こちらのプラグインでページやカテゴリー、タクソノミー、デバイスごとにウィジェットの表示をコントロールできるので試してみました。

Widget Options – The #1 Widget Control Plugin

Get Better Control over your WordPress Widgets. Easily show or hide WordPress widgets on specific pages, for specific user roles, taxonomy or devices.

ja.wordpress.org

ほかにも表示させたいページがある場合は、その分サイドバーに「ローカルナビゲーション」ウィジェットを追加して、表示したいページのみチェックを入れればできると思います。

希望する回答でなかったらすみません。。。

♥ 1

いいねをした人:

[GONSY]

興味があったのでやってみました(≧∇≦)

なんとなく近いイメージになったんじゃないかと思います。

ただ、CSSだけではできませんでした。
右カラム「EVENT」のサムネイル画像に値（高さ）を与えないと揃わないので、左カラムの5件の記事の高さを取得して、それを3で割って画像に与えています。

手順としては以下のような感じです。
 
固定ページ

1. 【セクション】ブロック設置
   タイトルタグ「none」
   背景（固定）の設定で適当な色を設定
2. 【セクション】ブロック内に【カラム】ブロックで2カラムを設置
3. 左カラム
   【見出し】ブロックで見出しを入力（日本語はテキストサイズ調整）
   【任意のタクソノミーの投稿】ブロックを設置、投稿のカテゴリー「お知らせ」を選択
   表示する投稿数は「５」
   レイアウト「テキスト2」
   【高度な設定】の【追加CSSクラス】に「home_news_posts」と入力
4. 右カラム
   【見出し】ブロックで見出しを入力（日本語はテキストサイズ調整）
   【任意のタクソノミーの投稿】ブロックを設置、投稿のカテゴリー「NEWS」を選択
   表示する投稿数は「3」
   レイアウト「シンプル」
   【高度な設定】の【追加CSSクラス】に「home_event_posts」と入力

 
CSS
【カスタマイズ】→【追加CSS】
もしくは、My Snow Monkeyを使用している場合は、自分で用意したCSSに以下を追加

.home_news_posts .c-entries,
.home_event_posts .c-entries{
	border: 1px solid #ccc;
	background-color: #fff!important;
}

.home_news_posts .c-entries__item:not(:last-child),
.home_event_posts .c-entries__item:not(:last-child) {
	border-bottom: 1px solid #ccc;
}

.home_news_posts .c-entries__item:last-child,
.home_event_posts .c-entries__item:last-child {
	border-bottom: 0;
}

.home_news_posts .c-entries__item > a {
	padding: 0.9rem;
}

.home_event_posts .c-entries__item > a {
	padding: 0;
}

.home_event_posts .c-meta__item--author {
	display: none;
}

.home_event_posts .c-entry-summary__figure {
	width: 35%;
}

.home_event_posts .c-entry-summary__body {
	width: calc(65% - 1.8rem);
	width: calc((65% - var(--_space, 1.8rem))*1*var(--_margin-scale, 1));
	padding-right: 1.8rem;
	padding-right: calc(var(--_space, 1.8rem)*1*var(--_margin-scale, 1));
}

.home_event_posts .c-entry-summary {
	display: flex;
	align-items: center;
}

.home_event_posts .c-entry-summary__title {
	font-size: 1rem;
	font-weight: normal;
}

 
JavaScript
My Snow Monkeyを使用している場合は、my-snow-monkey.phpに記述。
※jQueryでやりましたが、もっと良い方法があったらアドバイスをお願いします！

add_action( 
	'wp_footer',
	function( ) {
	?>
<script>
jQuery(function($) {
	$(window).on('load resize', function () {
   		var news_height = $('.home_news_posts').outerHeight();
		var event_assign =  news_height / 3 - 1;
    	$('.home_event_posts .c-entry-summary__figure').css('height', event_assign + 'px');
	});
});
</script>
	<?php
}
);

実際にセクションを作っていないようなら、以下をコピペして「コードエディター」に貼れば一瞬で再現できると思います。
※投稿カテゴリー「お知らせ」「NEWS」がある前提です。

<!-- wp:snow-monkey-blocks/section {"titleTagName":"none","fixedBackgroundColor":"#f3f3f3","align":"full"} -->
<div class="wp-block-snow-monkey-blocks-section alignfull smb-section"><div class="smb-section__fixed-background" style="padding-top:0;padding-bottom:0;background-color:#f3f3f3"></div><div class="smb-section__inner"><div class="c-container"><div class="smb-section__body"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>NEWS <span style="font-size: 15px" class="sme-font-size">お知らせ</span></h2>
<!-- /wp:heading -->

<!-- wp:snow-monkey-blocks/taxonomy-posts {"taxonomy":"category","termId":1,"postsPerPage":5,"layout":"text2","itemTitleTagName":"h4","className":"home_news_posts"} -->
<div data-dynamic-block="snow-monkey-blocks/taxonomy-posts" data-version="2" class="wp-block-snow-monkey-blocks-taxonomy-posts home_news_posts"></div>
<!-- /wp:snow-monkey-blocks/taxonomy-posts --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>EVENT <span style="font-size: 15px" class="sme-font-size">イベント</span></h2>
<!-- /wp:heading -->

<!-- wp:snow-monkey-blocks/taxonomy-posts {"taxonomy":"category","termId":24,"postsPerPage":3,"layout":"simple","smCols":1,"itemTitleTagName":"h4","className":"home_event_posts"} -->
<div data-dynamic-block="snow-monkey-blocks/taxonomy-posts" data-version="2" class="wp-block-snow-monkey-blocks-taxonomy-posts home_event_posts"></div>
<!-- /wp:snow-monkey-blocks/taxonomy-posts --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div></div></div>
<!-- /wp:snow-monkey-blocks/section -->

♥ 7

いいねをした人:

[GONSY]

【外観】→【メニュー】の設定画面で、ナビゲーションラベルにコード書いて、CSSを追加してみてください。

ナビゲーションラベル
<i class="fas fa-home fa-2x"></i><span class="label">ホーム</span>

アイコンはここで探してみてください

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

<i class="fas fa-home"></i>の部分がコピーできます。
<i class="fas fa-home fa-2x"></i>とfa-2xを追加すると大きくなると思います。

CSS

.p-global-nav .c-navbar__item a span {
  display: block;
}

お試しください。

♥ 6

いいねをした人:

[GONSY]

キタジマさんが回答したこちらが参考になります！

カスタム投稿タイプの個別ページにシェアボタンを表示したい

このトピックには2件の返信、2人の参加者があり、最後に谷口 允により7ヶ月前に更新されました。 3件の投稿を表…

snow-monkey.2inc.org

♥ 2

いいねをした人:

[GONSY]

こちらのトピックが参考になると思います。

トップページに表示するカスタム投稿の横列(PCの場合)のカラム数を変えたい

タグ: ウィジット, カスタム投稿, カラム, 最近の投稿 このトピックには5件の返信、2人の参加者…

snow-monkey.2inc.org

要素間のアキは、
カスタマイズ→デザイン→基本デザイン設定内の【要素間の余白サイズ】で“標準”か“広め”か選べます。
さらに狭くしたい場合は、CSSの調整が必要になります。

♥ 3

いいねをした人:

[GONSY]

「不具合報告」のフォーラムにあげてますが、内容的には「使い方に関する質問」です。以後、そちらに投稿されたほうが良いと思います。

 

まず、石原さんのアップされた画像から、状況として・・・

1. 画像1枚目
   “投稿”記事内に画像（ヘリコプターの画像）をアップして【行動な設定】→【追加 CSS クラス】でクラス名をつけて【公開】した。

   →投稿内にアップされた画像は、別のページにそのまま表示されません。

2. 画像2枚目〜5枚目
   フロントページになる【固定ページ】内に【最近の投稿】ブロックなどで、投稿記事を表示しようとしたが表示されない。

   →【最近の投稿】などのブロックを使っても、アイキャッチ画像を設定していないと、別ページに投稿の画像は掲載されません。
   ※アップされた画像を見る限り、Snow Monkey（テーマ）が有効化されていない？

3. 画像6枚目
   教材のフロントページにはCSSを適用した楕円の画像が表示されている。

   →これはたんにフロントページになっている固定ページに画像を貼ってCSSを適用させているだけに思われます。

 

となっています。

そこで確認ですが

• 投稿ページにアップした画像に、直接CSSを適用しようとしていますか？
• 固定ページ（フロントページ）にアップした画像に、直接CSSを適用しようとしていますか？
• 固定ページ（フロントページ）内に【最近の投稿】ブロックを使い、投稿記事のアイキャッチ画像にCSSを適用しようとしていますか？

これがハッキリしないと、回答が出せないと思います。

♥ 12

いいねをした人:

[GONSY]

こちらにチェックを入れなければスマートフォンでは表示されません。

 

@media (min-width: 767px) {
.c-btn header-button-online {
display: none;
}

とありますが、これは767pxより大きい場合となるので、スマートフォン用ということであれば

@media (max-width: 767px) {
	.c-btn header-button-online {
		display: none;
}

がベターです。
上記のカスタマイズ画面でチェックを入れれば必要ないと思いますが。。。

♥ 1

いいねをした人:

[GONSY]

カンマで区切ってメールアドレスを入れれば複数指定できます。

♥ 2

いいねをした人:

[GONSY]

あとから気づきましたが、過去のトピックでキタジマさんが提示されているコードでも実装可能ですね。
サクっとやるなら、こちらのほうがオススメです。

ヘッダーコンテンツのボタンが一瞬アクセントカラーが表示された後、デフォルトの色に上書きされた状態で表示されてしまう

このトピックには7件の返信、2人の参加者があり、最後にキタジマ タカシにより2年、 11ヶ月前に更新されました…

snow-monkey.2inc.org

♥ 1

いいねをした人:

[GONSY]

My Snow Monkeyを使用しているなら、WordPressのフックwp_body_openもしくはSnow Monkeyのフックsnow_monkey_prepend_bodyでbodyタグ直下に必要なHTMLを入れ、CSSとJavaSciptも読み込ませれば実現可能だと思います。

こちらの記事が参考になると思います。

CSSとJavaScriptでWebページにローディングアニメーションを表示させる方法

ページやコンテンツの読込中、何も表示されない真っ白な画面が延々と続くと、なんだか不安になりますよね。本当にこのページであってるのか…今何を待ってたんだっけ…なん…

www.webcreatorbox.com

♥ 0

いいねをした人: 居ません

[GONSY]

ソースコードを拝見したら、メディアクエリのスマホ画面用のCSSが}がなく、閉じてないようです。

/*****  mobile  *****/
@media (max-width: 420px) and (min-width: 321px){
div.yyi-rinker-contents div.yyi-rinker-box {
    flex-direction: column;
}
div.yyi-rinker-img-m div.yyi-rinker-image, div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
    width: 100%;
}
	div.yyi-rinker-contents div.yyi-rinker-info {
    margin-left: 0px;
    text-align: center;
    margin-top: 12px;
}
	
 /*目次のH3を●にする*/
	.wpco .contents-outline ol ol {
	list-style: disc!important;
	padding-left: 5em!important;
}

.wpco .contents-outline li li > a {
	padding-left: 0!important;
}

.wpco .contents-outline li li > a::before {
	display: none!important;
}

/*目次のH3を●にする*/の前に}を入れてみてください。

♥ 2

いいねをした人:

[GONSY]

importantまつりになってしまいますが、こんな感じで近い見た目になると思います。

.wpco .contents-outline ol ol {
	list-style: disc!important;
	padding-left: 5em!important;
}

.wpco .contents-outline li li > a {
	padding-left: 0!important;
}

.wpco .contents-outline li li > a::before {
	display: none!important;
}

お試しください。

♥ 2

いいねをした人:

[GONSY]

このセクションの見出しだけスマートフォン表示でフォントサイズを小さくしたい場合、ブロックを選択した状態で右メニューの一番下にある「高度な設定」の「追加 CSS クラス」で固有のクラス名（例：sp-resize）をつけて

@media ( max-width: 480px) { 
	.sp-resize .smb-section__title span {
	  font-size: 18px;
	}
}

でやるのはいかがでしょうか？

♥ 2

いいねをした人:

[GONSY]

1行メニューの全幅なら、カスマイズ→デザイン→ヘッダーの設定でできますが、カスマイズについての質問なので、このことではない気もしますが。。。

もしかして、ドロップダウン・ナビゲーション（.l-header__drop-nav）のことでしょうか？
だとしたら、こちらを参考にテンプレートを書き換える必要があると思います。

Snow Monkey でテンプレートの内容を書き換えるフィルターフック

通常、WordPress テーマでテンプレートの内容を書き換えたい場合は、子テーマを用意して上書きしたいテンプ…

snow-monkey.2inc.org

♥ 3

いいねをした人:

[GONSY]

サイトにログインしていないユーザーは、名前・メール・サイトの項目が表示されると思います。
当方の環境は、macOS 10.15.7、いずれも最新のChrome、Safari、Firefox、Edgeで見たところ、すべて該当の項目は表示されてました。

この記事にあるような方法で非表示にできるようです。

WordPressのコメントを非表示にする方法！邪魔なメールアドレス、ウェブ欄を駆逐！

WordPressのコメントフォームにある不必要な項目(メールアドレス、ウェブサイト、「メールアドレスが公開されることはありません」、「次回のコメントで使用するためブラ…

ponhiro.com

♥ 2

いいねをした人:

[投稿者]

投稿