【必見】楽天スーパーセール中

THE SONIC で浮き上がる目次を使う手順

12 min

スマホで右下の目次ボタンを押すと目次が表示されます。

目次はスクロールできるので縦に長い記事でも圧迫されません。

ブログ記事の目次って重要ですよね。なのにスマホではすぐに目次を開けないことがほとんどです。

ハンバーガーメニューでも同じようなことはできるのですが、意外と使い方知らなかったり気づかないユーザーも多いんですよね。

THE SONIC で 浮き上がってくるような目次を実装してみました。

このカスタマイズは ぽんひろ.com の記事を参考にして作成しています。不明なことがあってもぽんひろ様にお問い合わせしないようお願い致します。

テーマの編集を行う前には必ずバックアップを行ってから実行してください。元に戻せる自信がある方だけ試してみてくださいね。

SANGO の場合はこちら

jQuery を読み込む

jQueryを使うのでヘッダー部分にタグを挿入

  • 外観
  • カスタマイズ
  • サイトの基本設定
  • アクセス計測・その他タグ挿入
  • <hear>タグの最下部
カスタマイズ

サイトの基本設定
タグ挿入

jquery

以下のコードをコピペ

jQuery

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

上の公開をクリック

functions.php を編集

子テーマの functions.php に以下のコードを追記

functions.php

//目次スマホ追尾専用ウィジェット
add_action(
	'widgets_init',
	function(){
		register_sidebar(array(
		'id' => 'mobile_toc_widget',
		'name' => '目次スマホ追尾',
		'description' => 'スマホだけに表示される追尾される目次専用エリアです。',
		'before_widget' => '',
		'after_widget' => '<a href="#" class="toc-to-top">記事のトップへ</a>',
		'before_title' => '<label for="mobile-toc"><input type="checkbox" id="mobile-toc"><div class="widgettitle">',
		'after_title' => "</div></label>\n"
		));
	}
);

目次のタイトルにinput要素を付けてタッチすると閉じるようにしてあります。

この後CSSの疑似要素で「閉じる」ボタンを付けますが、実際にはタイトルのどこを押しても閉じます。

footer.php を編集

footer.php は親テーマのフォルダからコピーして、子テーマに入れておきます。

子テーマのfooter.phpを開いて一番下まで移動しましょう。

</body>
</html>

</body>直前にコードを挿入します。

footer.php

<?php if ( wp_is_mobile()  && is_single()) : ?>
<?php if(is_active_sidebar('mobile_toc_widget')) : ?>
<div id="mobile-toc-widget-wrap">
    <label for="mobile-toc">
    <div class="mobile-toc-button">
      <div class="menu-trigger">
      <span></span>
      <span></span>
      <span></span>
      </div>
    <span class="mobile-toc-button-title">目次</span>
    </div>
  </label>
    <input type="checkbox" id="mobile-toc"/>
    <div class="mobile-toc-show">
      <div class="mobile-toc-widget">
      <?php dynamic_sidebar('mobile_toc_widget'); ?>
      </div>
    </div>
</div>
<script>
//スマホ目次追尾
$('#mobile-toc-widget-wrap label').on('click', function() {
    $('.menu-trigger').toggleClass('active');
});
$('#mobile-toc-widget-wrap .mkj-list a').on('click', function() {
    $('.menu-trigger').toggleClass('active');
});
$('#sidebar-menu-input').on('click', function() {
    if ($('#sidebar-menu-input').prop('checked')) {
        $('#mobile-toc-widget-wrap').css('display', 'none');
    }else{
    $('#mobile-toc-widget-wrap').css('display', 'block');
  }
});
$('#mobile-toc-widget-wrap .mkj-list a').click(function() {
    if ($('#mobile-toc-widget-wrap input').prop('checked')) {
        $('#mobile-toc-widget-wrap input').prop('checked', false);
    }
});
$('.toc-to-top').click(function() {
    if ($('#mobile-toc-widget-wrap input').prop('checked')) {
        $('#mobile-toc-widget-wrap input').prop('checked', false);
    }
    $('.menu-trigger').toggleClass('active');
});

//スムーススクロール
$(function () {
  var headerHight = 0;
  $('a[href^="#"]').click(function(){
    var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top-headerHight;
    $("html, body").animate({scrollTop:position}, 550, "swing");
        return false;
  });
});
</script>
<?php endif; ?>
<?php endif; ?>

style.css を編集

子テーマ内の style.css に追記します。

標準の トップへ戻るボタンは非表示にしています。

常時表示させたい場合は、「/デフォルトのトップへ戻るボタン/」以降を削除してください。

style.css

/*--------------------------------------
スマホ追尾目次
--------------------------------------*/
#mobile-toc-widget-wrap {
    --toc-color: #00B1C3 /*一括で色を指定*/
}
#mobile-toc-widget-wrap .menu-trigger,
#mobile-toc-widget-wrap .menu-trigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
#mobile-toc-widget-wrap .menu-trigger {
	position: relative;
	width: 25px;
	height: 35px;
}
#mobile-toc-widget-wrap .menu-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #fff;
	border-radius: 4px;
}
#mobile-toc-widget-wrap .menu-trigger span:nth-of-type(1) {
	top: 13px;
}
#mobile-toc-widget-wrap .menu-trigger span:nth-of-type(2) {
	top: 20px;
}
#mobile-toc-widget-wrap .menu-trigger span:nth-of-type(3) {
	top: 27px;
}
#mobile-toc-widget-wrap .menu-trigger.active {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}
#mobile-toc-widget-wrap .menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(20px) rotate(-45deg);
	transform: translateY(20px) rotate(-45deg);
	top:0;
}
#mobile-toc-widget-wrap .menu-trigger.active span:nth-of-type(2) {
	-webkit-transform: translateY(0) rotate(45deg);
	transform: translateY(0) rotate(45deg);
}
#mobile-toc-widget-wrap .menu-trigger.active span:nth-of-type(3) {
	opacity: 0;
}
#mobile-toc-widget-wrap{
	position: fixed;
	bottom: 90px;
	right: 15px;
	margin: 0;
	padding: 0;
	z-index: 999;
	counter-reset: mobile-toc;
  	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

#mobile-toc-widget-wrap label .mobile-toc-button {
	width: 58px;
	height: 58px;
	border-radius:50%;
	background: var(--toc-color); /* ボタン色 */
	box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
	transition: ease-out 0.3s;
	text-align:center;
	position:relative;
	opacity: 0.7;
	z-index: 3;
}
@media (min-width: 1280px) { /*PC*/
	#mobile-toc-widget-wrap label .mobile-toc-button {
		display: none;
	}
}
#mobile-toc-widget-wrap label .mobile-toc-button .mobile-toc-button-title {
	position: absolute;
	bottom: 7px;
	left: 0;
	right: 0;
	margin: auto;
	color: #fff; /* ボタン文字色 */
	font-size: 0.65rem;
	letter-spacing: 0;
}
#mobile-toc-widget-wrap label:hover {
	background: #efefef;
}
#mobile-toc-widget-wrap input {
	display: none;
}
#mobile-toc-widget-wrap .mobile-toc-show {
	display:none;
}
#mobile-toc-widget-wrap input:checked ~ .mobile-toc-show {
	position: fixed;
	max-width: 90vh;
	top: 50px;
	left: 0;
	right: 0;
	margin: auto;
	padding: 0;
	background:#fff;
	opacity: 0.93;
	border-radius: 5px 5px 10px 10px;
	box-shadow: 5px 5px 15px #888;
	display: block;
	animation: 0.5s fade-in;
	-webkit-animation: 0.5s fade-in;
	z-index: 998;
}
@-webkit-keyframes fadeIn {
	0% {display: none;opacity: 0;}
	1% {display: block;opacity: 0;}
	100% {display: block;opacity: 0.93;}
}
@keyframes fade-in {
	0% {display: none;opacity: 0;}
	1% {display: block;opacity: 0;}
	100% {display: block;opacity: 0.93;}
}
#mobile-toc-widget-wrap .widgettitle{
	padding: 5px 0;
	text-align: center;
	font-size: 1rem;
	color: #fff; 	/* 目次名の色 */
	letter-spacing: 2px;
	background: gray; /*目次タイトル色*/
	font-weight: bold;
	position: relative;
	cursor: pointer;
}
#mobile-toc-widget-wrap .widgettitle:before {
	position: absolute;
	top: 4px;
	right: 5px;
	content: '閉じる';
	background: #aaa;
	font-weight: 900;
	font-size: 12px;
	color: #fff;
	border-radius: 20px;
	padding: 5px 10px;
	transition: 500ms;
}
#mobile-toc-widget-wrap .widgettitle:hover:before {
	opacity: 0.8;
}
#mobile-toc-widget-wrap .mkj-side-style {
	margin-bottom: 0;
	border: none;
}
#mobile-toc-widget-wrap  a {
	font-size: 0.8rem;
	font-weight:600;
}
#mobile-toc-widget-wrap .mkj-content-in {
	background: #fff;
	padding: 15px 5px;
}
#mobile-toc-widget-wrap .mkj-list {
	padding: 0;
}
#mobile-toc-widget-wrap .mkj.mkj-side-style {
	max-height: 60vh;
	overflow-y: auto;
	background: #fff;
}
#mobile-toc-widget-wrap .mkj.mkj-side-style::-webkit-scrollbar {
	background: #fff;
	border-left: solid 1px #ececec;
	width: 5px;
}
#mobile-toc-widget-wrap .mkj.mkj-side-style::-webkit-scrollbar-thumb {
	background: var(--toc-color); /*スクロールバーの色*/
	border-left: solid 1px #ececec;
}
#mobile-toc-widget-wrap .mkj-list > li {
    position: relative;
	list-style-type: none;
	margin-left: 13px;
    margin-right: 25px;
    margin-bottom: 15px;
	padding-left: 32px;
	padding-bottom: 0px;
	font-size: 1.1rem;
	line-height: 1.5;
}
#mobile-toc-widget-wrap .mkj-list > li:before{
	counter-increment: mobile-toc;
	content: counter(mobile-toc);
	position: absolute;
	left: -5px;
	top: -1px;
	height: 32px;
	width: 32px;
	text-align: center;
	line-height: 32px;
	background: none;
	font-size: 1.1rem;
	border-radius: 50%;
	background-color: var(--toc-color);
	color: #fff;
}
#mobile-toc-widget-wrap .mkj-list li ol {
	list-style: none;
	margin-top: 5px;
	padding-left: 20px;
}
#mobile-toc-widget-wrap .mkj-list li ol li:before {
	display: none;
}
#mobile-toc-widget-wrap .mkj-list > li > ol {
	position: relative;
	text-decoration: none;
}
#mobile-toc-widget-wrap .mkj-list > li:not(:last-child) > ol:before {
    /*目次の縦線*/
    display: block;
	position: absolute;
    top: 5px;
    left: -23px;
	bottom: 0;
	content: "";
	width: 3px;
	background: var(--toc-color);
}
/*--------------------------------------
スマホ追尾目次 の下のトップへ戻るボタン
--------------------------------------*/
.toc-to-top {
	display: block;
	margin-bottom: 0;
	text-align: center;
	background: var(--toc-color); /*背景色*/
	color: #fff;
	padding: 5px;
}
.toc-to-top:before {
	font-family: "font awesome 5 free";
	font-weight: 900;
	content: "\f151";
	margin-right: .5rem;
}

/*デフォルトのトップへ戻るボタン*/
@media (min-width: 1030px) {
.gotop {
	bottom: 20px;
	right: 14px;
}}
@media (max-width: 1029px) and (min-width: 768px) {
.gotop {
	bottom: calc(20px + env(safe-area-inset-bottom));
	right: 14px;
	width: 58px;
	height: 58px;
}}
@media (max-width: 767px) {
.gotop {
	display: none;
}}

色を変えたいときは、上の方の –toc-color : #00B1C3; を好きな色に変えてください。

目次ウィジットを追加

ウィジットの一覧に「目次スマホ追尾」が追加されています。

ここに THE SONIC の目次ウィジットを追加します。

  • 外観
  • ウィジット
  • 目次スマホ追尾
目次スマホ追尾

ウィジットのタイトルがそのまま目次のタイトルになります。

モバイルフッターから目次へ

この記事にある方法を使わなくても目次をかんたんに開く方法があります。PHPとかCSSとかいじりたくないという方にはこちらをおすすめします。

モバイルフッターを使うだけなので簡単です。

URLを 「#mkj」と指定するだけ

モバイルフッター

URL
#mkj

ナビゲーションラベル
<i class="fas fa-caret-square-up"></i>目次
スマホの下にメニューが表示されます
toc

THE SONIC 関連ページ

HTML / CSS を勉強するなら Udemy

udemy

HTML / CSS の基礎を勉強するなら Udemy (ユーデミー)の講座がおすすめです。買い切りなのでいつでも勉強ができます。

大幅に安くなるのでキャンペーン中に購入しましょう。

たにぐちまことさんの動画は初心者にも分かりやすいです。聞きやすくスッと頭に入ってきますよ。

ZIMA

気になるガジェットやサービスをレビュー!日常生活のアップデートを目標に役に立つ情報を掲載していきます。

仕事の依頼などはお問い合わせからどうぞ。

FOLLOW

カテゴリー:
関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です