質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.45%

  • PHP

    24609questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    21041questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • WordPress

    9152questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • CSS

    7820questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • jQueryプラグイン

    627questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 484

tantaa

score 2

 前提・実現したいこと

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

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

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

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

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

 該当のソースコード

<!doctype html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title></title>
<script type='text/javascript' src='//code.jquery.com/jquery.min.js'></script>
<script type='text/javascript' src='https://takechannel.com/wp-content/themes/cocoon-child-master/js/jquery.tabs.js'></script>
<script type='text/javascript'>
jQuery(document).ready( function() {
  tabify("#tabs");
});
</script>
</head>
<body>
<div class="entry-content cf" itemprop="mainEntityOfPage">
      <div id="tabs">
<ul>
<li>人気ランキング</li>
<li>ゲームカテゴリ</li>
<li>たんたーの戯言</li>
</ul>
<div>
<div class="column-wrap column-2">
<div class="column-left">
<h1>人気ゲームランキング</h1>
  <div class="popular-entry-cards widget-entry-cards cf ranking-visible 1">
    <a target="_self" href="https://takechannel.com/monster-hunter-world_playvideos/" class="popular-entry-card-link a-wrap" title="【MHW】実況動画で知ろう【モンハンワールド】">
    <div class="popular-entry-card widget-entry-card e-card cf">
      <figure class="popular-entry-card-thumb widget-entry-card-thumb card-thumb">
      <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 -->

<div class="popular-entry-card-content widget-entry-card-content card-content">
        <span class="popular-entry-card-title widget-entry-card-title card-title">【MHW】実況動画で知ろう【モンハンワールド】</span>
                  <span class="popular-entry-card-pv widget-entry-card-pv">65views</span>
              </div><!-- /.popular-entry-content -->
    </div><!-- /.popular-entry-card -->
  </a><!-- /.popular-entry-card-link -->
<div class="column-right">
<h1>新着記事</h1>
  <div class="new-entry-cards widget-entry-cards cf">
    <a target="_self" href="https://takechannel.com/dynasty-warriors9_playvideos/" class="new-entry-card-link widget-entry-card-link a-wrap" title="【真三國無双8】失敗とか言われてるけど実際どうなんだよ【アクション】">
    <div class="new-entry-card widget-entry-card e-card cf">
      <figure class="new-entry-card-thumb widget-entry-card-thumb card-thumb">
              <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 -->
</div>
</div>
      </div>
</body>
</html>
/*******************************
* タブとカラムのカスタマイズ
********************************/
.home .content {
    margin-top: 0;
}
.home .main {
    padding: 0;
    border: 0;
}

.home .article ul, .article ol {
     margin: 0;
}

.home .article ul li, .article ol li {
    margin: 0;
}

.tabs-nav {
    display: none;
}

.home .widget {
    padding: 0 10px;
}
/*768px以下*/
@media screen and (max-width: 768px) {
.tabs-nav {
    margin: 0;
    padding: 0;
    border-bottom: 3px solid #ba3939 !important;
    display: block;
    padding-left: 0 !important;
}
.tabs-nav li {
    display: inline-block;
    margin: 0;
    border: 1px solid transparent;
    border-bottom: none;
    background-color: #ffffff;
    width: calc(100%/3);
    text-align: center;
    font-size: 11px;
}
.tabs-nav li.selected {
    border: 1px solid #ba3939 !important;
    border-radius: 6px 6px 0 0 !important;
    width: calc(100%/3) !important;
    background-color: #ba3939 !important;
    color: white !important;
    font-weight: bold !important;
}
<script type='text/javascript' src='//code.jquery.com/jquery.min.js'></script>
<script type='text/javascript' src='<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.tabs.js'></script>
<script type='text/javascript'>
jQuery(document).ready( function() {
  tabify("#tabs");
});
</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

以上になります。

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

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

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

お騒がせしました。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.45%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • PHP

    24609questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    21041questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • WordPress

    9152questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • CSS

    7820questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • jQueryプラグイン

    627questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。