目次のデザイン(数字)を変更したい

0
いいねをした人: 居ません
  • このトピックには20件の返信、2人の参加者があり、最後にTakeruにより5年、 2ヶ月前に更新されました。
15件の投稿を表示中 - 1 - 15件目 (全21件中)
  • 投稿者
    投稿
  • #28018
    Takeru
    閲覧者
    0

    トピックを新しく立てる方は次の項目も記述してください(要望トピックの場合は不要です)。

    【お使いの Snow Monkey のバージョン】7.11.0
    【お使いのブラウザ】Crome、Safari
    【当該サイトのURL】(公開できる場合は書いていただいたほうがスムーズです)

    ===

    目次のデザインを、数字からドットに変更は可能でしょうか。

    完成形のイメージは、以下のsangoというテーマのように、h3は少し小さめのフォントにしたいです。

    0
    いいねをした人: 居ません
    #28019
    Takeru
    閲覧者
    0

    上記に関連して追加がありまして、目次のタイトル「目次」後の「”」を非表示にしたいです。

    0
    いいねをした人: 居ません
    #28020
    Takeru
    閲覧者
    0

    追加多くてすみません…

    目次内の各テキストの上下の間隔(padding)を狭めたいです。

    0
    いいねをした人: 居ません
    #28160
    アバター画像キタジマ タカシ
    参加者
    2421

    こんな感じでしょうか?

    .wpco .contents-outline a {
        flex-direction: row;
        padding: .23rem 0;
    }
    
    .wpco .contents-outline a:before {
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 100%;
        margin-top: 1em;
        font-size: 1px;
        overflow: hidden;
        padding: 0;
    }
    
    .wpco .contents-outline ol ol {
        font-size: 14px;
    }

    上記に関連して追加がありまして、目次のタイトル「目次」後の「”」を非表示にしたいです。

    これはちょっとどういう意味なのかわかりませんでした。

    0
    いいねをした人: 居ません
    #28198
    Takeru
    閲覧者
    0

    ありがとうございます!

    h3タグの「・」をh2より小さめのサイズ(以下のような感じ)で小さめにできますか?

     

    上記に関連して追加がありまして、目次のタイトル「目次」後の「”」を非表示にしたいです。

    は、目次直下の「”」を消したいな、という意味です。

    0
    いいねをした人: 居ません
    #28202
    Takeru
    閲覧者
    0

    h3は小さいサイズできてました!すみません。

    0
    いいねをした人: 居ません
    #28203
    Takeru
    閲覧者
    0
    .wpco .contents-outline a {
    flex-direction: row;
    padding: .23rem 0;
    }
    
    .wpco .contents-outline a:before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 100%;
    margin-top: 1em;
    font-size: 1px;
    overflow: hidden;
    padding: 0;
    }
    
    .wpco .contents-outline ol ol {
    font-size: 14px;
    }

    こちら、「・」と見出しタイトルで上下に差がある(テキスト位置のほうが少し下)のは、どの部分調整すればいいですか?

    .wpco .contents-outline ol ol {
    font-size: 12px;
    }

    こういった調整だと文字サイズは小さくなりますが「・」と上下位置はスマホ表示でも同じになりました。

    0
    いいねをした人: 居ません
    #28214
    アバター画像キタジマ タカシ
    参加者
    2421

    目次直下の「”」を消したいな、という意味です。

    本来こういう文字は表示されないので、なんらかカスタマイズの影響かなと思います。別トピックで目次に関するカスタマイズをしたかと思いますが、使用中の目次に関するカスタマイズの PHP コードをそのままここに貼り付けてもらえますでしょうか?

    こちら、「・」と見出しタイトルで上下に差がある(テキスト位置のほうが少し下)のは、どの部分調整すればいいですか?

    こちらの環境ではずれていないので、おそらく文字のサイズとか、他の CSS が影響しているのだと思います。実際の画面をみてみないとどれだけずらせば良いか計算できないので、URL を教えてもらえないでしょうか?

    0
    いいねをした人: 居ません
    #28257
    Takeru
    閲覧者
    0

    URLはキタジマさんにのみ開示はできますか?

    0
    いいねをした人: 居ません
    #28306
    アバター画像キタジマ タカシ
    参加者
    2421

    プライベートサポートはプロプランの方のみのサービスとなりますので、例えばオンラインコミュニティの DM で URL だけ教えてもらって、引き続きサポートはここでおこなう、ということは可能です。

    0
    いいねをした人: 居ません
    #28407
    Takeru
    閲覧者
    0

    ありがとうございます、遅くなりましたが先程DM送りました!

    0
    いいねをした人: 居ません
    #28434
    アバター画像キタジマ タカシ
    参加者
    2421

    拝見しました。

    こちら、「・」と見出しタイトルで上下に差がある(テキスト位置のほうが少し下)のは、どの部分調整すればいいですか?

    これは h3 から生成された目次について、ということであっていますでしょうか? h2 から生成された目次についてはほぼ問題なさそうかなと…。

    本来こういう文字は表示されないので、なんらかカスタマイズの影響かなと思います。別トピックで目次に関するカスタマイズをしたかと思いますが、使用中の目次に関するカスタマイズの PHP コードをそのままここに貼り付けてもらえますでしょうか?

    こちらもお願いします。

    0
    いいねをした人: 居ません
    #28438
    Takeru
    閲覧者
    0

    以下、ご確認お願いします!

    <?php
    /**
     * Plugin name: My Snow Monkey
     * Description: このプラグインに、あなたの Snow Monkey 用カスタマイズコードを書いてください。
     * Version: 0.1.1
     *
     * @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;
    }
    
    // サイドバーのウィジェットの見出しを h2 から h4 に変更する
    add_filter(
    	'dynamic_sidebar_params',
    	function( $params ) {
    		if ( preg_match( '|sidebar|', $params[0]['id'] ) ) {
    			$params[0]['before_title'] = str_replace( '<h2 ', '<h4 ', $params[0]['before_title'] );
    			$params[0]['after_title']  = str_replace( '</h2> ', '</h4> ', $params[0]['after_title'] );
    		}
    		return $params;
    	}
    );
    
    // コメントを非表示に
    add_action(
    	'snow_monkey_get_template_part_template-parts/discussion/comments',
    	function() {
    	}
    );
    
    // トラックバックを非表示に
    add_action(
    	'snow_monkey_get_template_part_template-parts/discussion/pings',
    	function() {
    	}
    );
    
    // 前後の投稿
    add_filter( 'gettext', function( $translation, $text, $domain ) {
    	if ( 'snow-monkey' === $domain && 'Old post' === $text ) {
    		return '前の記事';
    	}
    	elseif ( 'snow-monkey' === $domain && 'New post' === $text ) {
    return '次の記事';
    }
    	return $translation;
    }, 10, 3 );
    
    // 記事一覧の日付の位置
    add_filter(
    	'snow_monkey_template_part_render',
    	function( $html, $slug, $name, $vars ) {
    		if ( 'template-parts/loop/entry-summary' === $slug && 'post' === $name ) {
    			if ( 'rich-media' === $vars['_entries_layout'] ) {
    				$html = preg_replace( '|<div class="c-entry-summary__meta">.*?</div>|ms', '', $html );
    				ob_start();
    				\Framework\Helper::get_template_part( 'template-parts/loop/entry-summary/meta/meta' );
    				$meta = ob_get_clean();
    				$html = str_replace( '<h2 class="c-entry-summary__title">', $meta . '<h2 class="c-entry-summary__title">', $html );
    			}
    		}
    		return $html;
    	},
    	10,
    	4
    );
    
    // 投稿日でなく更新日
    add_filter(
    	'snow_monkey_template_part_render',
    	function( $html, $slug ) {
    		if ( 'template-parts/loop/entry-summary/meta/meta' === $slug ) {
    			return preg_replace(
    				'|<li class="c-meta__item c-meta__item--published">.*?</li>|ms',
    				'<li class="c-meta__item c-meta__item--modified">' . get_the_modified_time( get_option( 'date_format' ) ) . '</li>',
    				$html
    			);
    		}
    		return $html;
    	},
    	10,
    	2
    );
    
    // 
    add_filter(
    	'inc2734_wp_contents_outline_view_render',
    	function( $html, $slug, $name, $vars ) {
    		if ( 'wp-contents-outline' === $slug ) {
    			return preg_replace(
    				'|<h2 class="wpco__title">(.*?)</h2>|',
    				'<div class="wpco__title">$1</div>"',
    				$html
    			);
    		}
    		return $html;
    	},
    	10,
    	4
    );
    
    /*****目次*****/
    .wpco{
    	position: relative;
    	width: 100% !important;
    	margin: 2.5em 0;
    	background: #f9f9f9;
    	box-shadow: 0 1.5px 2.4px rgba(0,0,0,.15);
    		font-size: 15px;
    }
    .wpco .contents-outline a {
        flex-direction: row;
        padding: .23rem 0;
    }
    .wpco .contents-outline a:before {
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 100%;
        margin-top: 1em;
        font-size: 1px;
        overflow: hidden;
        padding: 0;
    	background-color: #d5d5d5!important;
    }
    .wpco .contents-outline ol ol {
    	font-size: 14px;
    }
    
    0
    いいねをした人: 居ません
    #28443
    アバター画像キタジマ タカシ
    参加者
    2421

    この部分を一度消してみてもらえないでしょうか。

    add_filter(
    	'inc2734_wp_contents_outline_view_render',
    	function( $html, $slug, $name, $vars ) {
    		if ( 'wp-contents-outline' === $slug ) {
    			return preg_replace(
    				'|<h2 class="wpco__title">(.*?)</h2>|',
    				'<div class="wpco__title">$1</div>"',
    				$html
    			);
    		}
    		return $html;
    	},
    	10,
    	4
    );

    それで「”」の表示が消えればここが原因です。消える場合は、恐らくちゃんとした(半角の)ダブルクォーテーションじゃないダブルクォーテーションが入力されているのだろうと思いますので、再度貼り付けた後、ダブルクォーテーションの箇所を打ち直してみてください。

    0
    いいねをした人: 居ません
    #28502
    Takeru
    閲覧者
    0

    削除したところ、たしかに「”」表示は消えました!

    ただ、再度貼り付けて「”」を5箇所打ち直したんですが、再度目次直下に「”」が表示されるようです…

    他に原因があるということですかね…?

    0
    いいねをした人: 居ません
15件の投稿を表示中 - 1 - 15件目 (全21件中)
  • トピック「目次のデザイン(数字)を変更したい」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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