サポート » テーマ » Twenty Forteenの固定ページの全幅テンプレートで、Table部分だけ幅820pxにし

  • 解決済 maury2

    (@maury2)


    テーマ Twenty Forteenの子テーマを作り、カスタマイズしています。
    固定ページのページ属性テンプレートに、全幅ページがあります。
    この全幅ページは、contentの幅 max-width:474px;になって中央に配置されているようなんですが、

    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta,
    .page-content  {
        margin: 0 auto;
        max-width: 474px;
    }

    これを、content幅一杯に表示するよう、 max-width: 474px; を削ると、当然content幅一杯に表示されます。 だがすべての全幅ページに影響します。

    全幅ページのすべての contentを幅一杯に表示させるのではなく、Table部分だけ幅一杯にしたい。
    そこで、以下の様にTableを挿入したんですが、やはり、すべての全幅ページに適用され、上手く行きません。

    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta,
    .page-content  table{
        margin: 0 auto;
    }

    全幅ページで画像はマイナスマージンで配置されているように、表(Table)だけマイナスマージンで、幅一杯に表示させたいのですが、お分かりになる方、よろしくお願いします。

    WordPress本来の中身の質問ではなく、CSSの質問で恐縮です。よろしくお願いします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック投稿者 maury2

    (@maury2)

    自己レスです。以下の方法で解決しましたので、この記事解決済みにしておきます。
    まず、以下のCodeではなくStyle.cssの1263行にある .entry-content tableでした。

    /* 1263L */
    .entry-content table,
    .comment-content table {
        font-size: 12px; /* 14px → 12pxに文字を小さくした */
        line-height: 1.2857142857;
    	width: 750px;  /* 新規追加 */
        margin-bottom: 24px;
    }

    但し、これだと右に750幅で表示されてしまいますので、以下の通り右にマイナスマージンをtable限定で調整しました。

    /* 1021L のTable限定の設定です 1263Lの設定とセットになっています */
    .site-content .entry-header table,
    .site-content .entry-content table,
    .site-content .entry-summary table,
    .site-content .entry-meta table,
    .page-content  table{
    	margin-left: -150px; /* Tableのみマイナスマージンを設定した */
    	/* max-width: 474px; は不要なので削除しました */
    }

    これで、固定ページのページ属性テンプレートに、全幅ページでほぼ一杯に表が表示されます。但し、Media Queryでの設定をしてありませんので、縮小していくと表の一部が欠けますが、一応OKということで解決済みにしておきます。

    尚、このサイト(自分のサイト)は http://moripapa.info/coffee/7collaboration/ です。

    トピック投稿者 maury2

    (@maury2)

    追伸です。
    Media Queryでの設定で、上記codeを以下のように@media screen and (min-width: 1008px) { } の中に入れればOKでした。

    @media screen and (min-width: 1008px) {
    /* 1263L */
    .entry-content table,
    .comment-content table {
        font-size: 12px; /* 14px → 12pxに文字を小さくした */
        line-height: 1.2857142857;
    	width: 750px;  /* 新規追加 */
        margin-bottom: 24px;
    }
    /* 1021L のTable限定の設定です 1263Lの設定とセットになっています */
    .site-content .entry-header table,
    .site-content .entry-content table,
    .site-content .entry-summary table,
    .site-content .entry-meta table,
    .page-content  table{
    	margin-left: -150px; /* Tableのみマイナスマージンを設定した */
    	/* max-width: 474px; は不要なので削除しました */
    }
    }

    以上です。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「Twenty Forteenの固定ページの全幅テンプレートで、Table部分だけ幅820pxにし」には新たに返信することはできません。