Twenty Forteenの固定ページの全幅テンプレートで、Table部分だけ幅820ｐｘにし

  • 解決済 maury2

    (@maury2)


    10年、 4ヶ月前

    テーマ 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)

    10年、 3ヶ月前

    自己レスです。以下の方法で解決しましたので、この記事解決済みにしておきます。
    まず、以下の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での設定をしてありませんので、縮小していくと表の一部が欠けますが、一応ＯＫということで解決済みにしておきます。

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

    トピック投稿者 maury2

    (@maury2)

    10年、 3ヶ月前

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

    @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部分だけ幅820ｐｘにし」には新たに返信することはできません。