GONSY

フォーラムへの返信

15件の投稿を表示中 - 406 - 420件目 (全458件中)
  • 投稿者
    投稿
  • 返信先: 背景画像を全体にいれたい。 #77978
    GONSY
    参加者
    803

     を削除してください!

    1
    いいねをした人:
    返信先: 背景画像を全体にいれたい。 #77950
    GONSY
    参加者
    803

    サイト全体に背景画像を。ということでしょうか?
    イメージ画像があると的確なヒントや回答が得られると思います (^^)
    Snow Monkeyは、背景画像を設定するメニューはなかったと思いますので、以下の方法でサクッとできますので、お試しください。

    1. 管理画面・左メニュー「メディア」の新規追加で、背景画像にしたい画像をアップロード。
    2. アップロードができたら、画面に表示された画像をクリックして、画像の編集画面を表示。
    3. 編集画面の右のメニュー内のファイルのURLをコピーして(「URLをクリップボードにコピー」をクリック)閉じます。
    4. 次に、管理画面・左メニュー「外観」【カスタマイズ】→【追加CSS】まで進み、そのなかに以下のようにCSSを入れて公開。

     

    body {
    	background: url(ここにさきほどコピーした画像のURL);
    }

    これでサイト全体に背景画像が適用されると思います。
    ご希望と違ったらごめんなさい。

    2
    いいねをした人:
    返信先: mysnowmonkeyのstyle.cssが反映されない。 #77920
    GONSY
    参加者
    803
    返信先: ローカルナビゲーション ウイジェット #77879
    GONSY
    参加者
    803

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

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

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

    1
    いいねをした人:
    GONSY
    参加者
    803

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

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

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

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

    1. 【セクション】ブロック設置
      タイトルタグ「none」
      背景(固定)の設定で適当な色を設定
    2. 【セクション】ブロック内に【カラム】ブロックで2カラムを設置
    3. 左カラム
      【見出し】ブロックで見出しを入力(日本語はテキストサイズ調整)
      【任意のタクソノミーの投稿】ブロックを設置、投稿のカテゴリー「お知らせ」を選択
      表示する投稿数は「5」
      レイアウト「テキスト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
    参加者
    803

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

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

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

    <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
    参加者
    803
    GONSY
    参加者
    803

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

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

    3
    いいねをした人:
    GONSY
    参加者
    803

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

     

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

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

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

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

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

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

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

     

    となっています。

    そこで確認ですが

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

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

    12
    いいねをした人:
    GONSY
    参加者
    803

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

     

    @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
    参加者
    803

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

    2
    いいねをした人:
    GONSY
    参加者
    803

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

    1
    いいねをした人:
    GONSY
    参加者
    803

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

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

    0
    いいねをした人: 居ません
    返信先: 目次のH3のデザインを変更したい #76951
    GONSY
    参加者
    803

    ソースコードを拝見したら、メディアクエリのスマホ画面用の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
    いいねをした人:
    返信先: 目次のH3のデザインを変更したい #76946
    GONSY
    参加者
    803

    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
    いいねをした人:
15件の投稿を表示中 - 406 - 420件目 (全458件中)

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。