tabs.jsによるタブ化でコンテンツの表示が右へ膨らむ（余白がなくなる）

前提・実現したいこと

tabs.jsを使用してのタブ切り替え実装を試みています。
head内にスクリプトを置き、cssでフロントページのみのタブ化をし、
デザインを整えているのですが、
ホームボタンを押してフロントページに移動すると
コンテンツ内が右に広がり、スマホで見た際に、コンテンツ最大幅を越えます
タブ移動をすると、大きさが調整されるのか、画面幅にしっかり収まってくれます。
このフロントページに移動した際のみに表示が右に寄る（膨らむ）現象をなんとかしたいです。
テーマ独自の設定で高速化設定があり、html,css,javascriptを縮小化というものがあり、余分な改行や余白を取り除いてくれます。
これをオンにするとタブが綺麗に横並びするのですが、オフにするとタブが2段になり不恰好になります。
なので、通常時はオンにしています。
こちらの縮小化についてはどこを提示すればいいのかわからなかったので、
参考までに自身のブログのページを書いておきます
https://takechannel.com/
縮小化でhtmlソースがかなり見にくくなっています。申し訳ないです。

また、テーマ独自の機能でランキングのショートコードを張れるのですが、そちらもスマホ表示時のみ表示が無くなります。
こちらもなんとかしたいです。
ランキングの番号の「１，２，３，４」などの順位番号です。

参考サイトはこちらです
https://nelog.jp/jquery-tabs-js

使用テーマはこちらです
https://wp-cocoon.com/

htmlは必要と思われるところだけ切り出してます。
情報が足りなければいって下さい。

該当のソースコード

html
1<!doctype html>
2<html lang="ja">
3
4<head>
5<meta charset="utf-8">
6<title></title>
7<script type='text/javascript' src='//code.jquery.com/jquery.min.js'></script>
8<script type='text/javascript' src='https://takechannel.com/wp-content/themes/cocoon-child-master/js/jquery.tabs.js'></script>
9<script type='text/javascript'>
10jQuery(document).ready( function() {
11  tabify("#tabs");
12});
13</script>
14</head>
15<body>
16<div class="entry-content cf" itemprop="mainEntityOfPage">
17      <div id="tabs">
18<ul>
19<li>人気ランキング</li>
20<li>ゲームカテゴリ</li>
21<li>たんたーの戯言</li>
22</ul>
23<div>
24<div class="column-wrap column-2">
25<div class="column-left">
26<h1>人気ゲームランキング</h1>
27  <div class="popular-entry-cards widget-entry-cards cf ranking-visible 1">
28    <a target="_self" href="https://takechannel.com/monster-hunter-world_playvideos/" class="popular-entry-card-link a-wrap" title="【MHW】実況動画で知ろう【モンハンワールド】">
29    <div class="popular-entry-card widget-entry-card e-card cf">
30      <figure class="popular-entry-card-thumb widget-entry-card-thumb card-thumb">
31      <img width="120" height="67" src="https://takechannel.com/wp-content/uploads/2018/03/mhw-120x67.jpg" class="attachment-thumb120 size-thumb120 wp-post-image" alt="" srcset="https://takechannel.com/wp-content/uploads/2018/03/mhw-120x67.jpg 120w, https://takechannel.com/wp-content/uploads/2018/03/mhw-300x170.jpg 300w, https://takechannel.com/wp-content/uploads/2018/03/mhw-160x90.jpg 160w, https://takechannel.com/wp-content/uploads/2018/03/mhw-320x181.jpg 320w, https://takechannel.com/wp-content/uploads/2018/03/mhw-414x235.jpg 414w, https://takechannel.com/wp-content/uploads/2018/03/mhw-600x340.jpg 600w, https://takechannel.com/wp-content/uploads/2018/03/mhw.jpg 759w" sizes="(max-width: 120px) 100vw, 120px" />      </figure><!-- /.popular-entry-card-thumb -->
32
33<div class="popular-entry-card-content widget-entry-card-content card-content">
34        <span class="popular-entry-card-title widget-entry-card-title card-title">【MHW】実況動画で知ろう【モンハンワールド】</span>
35                  <span class="popular-entry-card-pv widget-entry-card-pv">65views</span>
36              </div><!-- /.popular-entry-content -->
37    </div><!-- /.popular-entry-card -->
38  </a><!-- /.popular-entry-card-link -->
39<div class="column-right">
40<h1>新着記事</h1>
41  <div class="new-entry-cards widget-entry-cards cf">
42    <a target="_self" href="https://takechannel.com/dynasty-warriors9_playvideos/" class="new-entry-card-link widget-entry-card-link a-wrap" title="【真三國無双8】失敗とか言われてるけど実際どうなんだよ【アクション】">
43    <div class="new-entry-card widget-entry-card e-card cf">
44      <figure class="new-entry-card-thumb widget-entry-card-thumb card-thumb">
45              <img width="120" height="67" src="https://takechannel.com/wp-content/uploads/2018/04/sinsangokumusou8-120x67.jpg" class="attachment-thumb120 size-thumb120 wp-post-image" alt="" srcset="https://takechannel.com/wp-content/uploads/2018/04/sinsangokumusou8-120x67.jpg 120w, https://takechannel.com/wp-content/uploads/2018/04/sinsangokumusou8-160x90.jpg 160w, https://takechannel.com/wp-content/uploads/2018/04/sinsangokumusou8-320x180.jpg 320w, https://takechannel.com/wp-content/uploads/2018/04/sinsangokumusou8-376x212.jpg 376w, https://takechannel.com/wp-content/uploads/2018/04/sinsangokumusou8-250x141.jpg 250w" sizes="(max-width: 120px) 100vw, 120px" />            </figure><!-- /.new-entry-card-thumb -->
46</div>
47</div>
48      </div>
49</body>
50</html>
51

css
1/*******************************
2* タブとカラムのカスタマイズ
3********************************/
4.home .content {
5    margin-top: 0;
6}
7.home .main {
8	padding: 0;
9	border: 0;
10}
11
12.home .article ul, .article ol {
13     margin: 0;
14}
15
16.home .article ul li, .article ol li {
17    margin: 0;
18}
19
20.tabs-nav {
21	display: none;
22}
23
24.home .widget {
25    padding: 0 10px;
26}
27/*768px以下*/
28@media screen and (max-width: 768px) {
29.tabs-nav {
30	margin: 0;
31	padding: 0;
32	border-bottom: 3px solid #ba3939 !important;
33	display: block;
34	padding-left: 0 !important;
35}
36.tabs-nav li {
37    display: inline-block;
38    margin: 0;
39    border: 1px solid transparent;
40    border-bottom: none;
41    background-color: #ffffff;
42    width: calc(100%/3);
43    text-align: center;
44	font-size: 11px;
45}
46.tabs-nav li.selected {
47    border: 1px solid #ba3939 !important;
48    border-radius: 6px 6px 0 0 !important;
49    width: calc(100%/3) !important;
50    background-color: #ba3939 !important;
51    color: white !important;
52    font-weight: bold !important;
53}

php
1<script type='text/javascript' src='//code.jquery.com/jquery.min.js'></script>
2<script type='text/javascript' src='<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.tabs.js'></script>
3<script type='text/javascript'>
4jQuery(document).ready( function() {
5  tabify("#tabs");
6});
7</script>

試したこと

右側に余白paddingを追加
エントリーカードの余白の調整

補足情報（FW/ツールのバージョンなど）

スマホはiphone6を使用しています。
また、画面幅によっては、表示のずれの確認がしずらい事があります。
PCビューでは全く問題なしです。
デベロッパーツールの仮想スマホビューでも問題ありませんでした。
実機のスマホでの表示でのみ、表示がおかしくなります。
Wordpressバージョン：4.9.5
PHPバージョン：7.1.4
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.9,en;q=0.8
テーマ名：Cocoon
バージョン：0.4.5

以上になります。

もし足りていない情報などがありましたら、追記いたしますので
言って下さい。

行動規範の内容に同意します

回答1件

自己解決

様々な事を試しましたが、JSが原因ではないかという判断にたどり着きました。
そこで、JSを使わずにCSSのみでタブ化を試みたところ、上手くいきました。
参考サイトは以下のサイトです。
https://nelog.jp/css-tabs
ここのサイトを見て、CSSのみでスタイリングした所、JSを使っていた時とほぼ変わらないタブ化が実現できました。
コンテンツが右に寄る（膨らむ）などの不具合は見られません。
さらに、軽量化とamp化も可能になったため、こちらのCSSのみのタブ化でしらばらく行こうかと思います。

今回の問題の根本的な解決策になっていなくてすいません。
代替策ということで、どうかご容赦下さい。

お騒がせしました。

投稿2018/04/12 05:13

編集2018/04/12 05:16

tantaa

総合スコア6