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

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

ただいまの
回答率

88.80%

WordpressのSydneyで中央寄せ

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,480

p_s

score 8

WordpressでSydneyというテーマを使用しています。
パソコンなどの比較的大きいディスプレイで見た時に、テキスト全体を中央寄せにして左右に多く余白を持ちたいのですが、どこをどう変更すればいいか教えてください。(iPhoneなどでは見やすいようにレスポンシブ対応でよろしくお願いいたします。)

初心者なものですみません。おそらくこのあたりだと思うのですが、よろしくお願いいたします。

Content
--------------------------------------------------------------*/
.sticky {
    display: block;
}
.hentry {
}
.byline,
.updated:not(.published) {
    display: none;
}
.single .byline,
.group-blog .byline {
    display: inline;
}
.single .entry-header,
.page .entry-header {
    margin-bottom: 30px;
}
.entry-footer {
    clear: left;
    margin-top: 30px;
}
.page-links {
    clear: both;
    margin: 0 0 30px;
}
.page-header {
    margin: 0;
    border: 0;
}
.page-wrap .content-wrapper {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #fff;
}
.page .page-wrap .content-wrapper,
.single .page-wrap .content-wrapper {
    padding: 30px;
}
.page-template-page_front-page .page-wrap .content-wrapper {
    padding-top: 0;
    padding-bottom: 0;
    background-color: transparent;
}
/*--------------------------------------------------------------
Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
    display: none;
}


/*--------------------------------------------------------------
Layout
--------------------------------------------------------------*/
    .aside-image {
        padding: 0;
        position: relative;
    }
    .aside-image .image-container {
        height: 100%;
        overflow: hidden;
        padding: 0;
        position: absolute;
        left: 0;
        top: 0;
    }
    .aside-image .image-holder {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover !important;
        z-index: 0;
        background-position: 50% 50%;
    }
    .aside-image .content-wrap {
        padding: 70px 0 70px 50px;
    }
    .aside-image.right .image-container {
        left: auto;
        right: 0;
    }
    .aside-image.right .content-wrap {
        padding: 70px 50px 70px 0;
    }
    .error-wrap h1 {
        font-size: 35px;
        color: #ddd;
        font-weight: 600;
        margin: 0 0 40px;
        line-height: normal;
    }
    .error-wrap h5 {
        margin-top: 60px;
        font-size: 18px;
        font-weight: normal;
    }
    .error-wrap .error-search {
        padding: 0 80px;
    }
    .error-wrap #search-form {
        height: 50px;
        margin-bottom: 17px;
        position: relative;
        width: 100%;
    }
    .error-wrap .search-input {
        margin: 0;
        width: 100%;
    }
    .error-wrap #search-submit {
        height: 50px;
        padding: 0;
        position: absolute;
        top: 0;
        right: 0;
        width: 120px;
        border-radius: 0 3px 3px 0;
        background: #443f3f;
        border-color: #443f3f;
    }
    .error-wrap #search-submit:hover {
        color: #fff;
    }
    /* Page sider */
    #page-slider {
        position: relative;
        height: 250px;
    }
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        filter: alpha(opacity=70);
        opacity: 0.7;
    }
    .page-wrap {
        padding: 83px 0 100px;
        clear: both;
    }
    .page-template-page_front-page .page-wrap {
        padding: 0;
    }
    .entry-page p,
    .entry-post p {
        margin-bottom: 24px;
    }
    .entry-post img {
        margin: 10px 0 20px;
    }
    .header-slider,
    .owl-wrapper {
        direction: ltr;
    }
    .header-slider,
    .owl-carousel {
          -webkit-transform: translate3d(0,0,0);
    }

/*--------------------------------------------------------------
Blog
--------------------------------------------------------------*/
    .content-area .post-wrap,
    .contact-form-wrap {
        padding-right: 20px;
    }
    .content-area .hentry {
        position: relative;
        padding-top: 50px;
        padding-bottom: 20px;
    }
    .content-area .hentry:first-child {
        padding-top: 0;
    }
    .content-area .hentry:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 30px;
        height: 1px;
    }
    .content-area .hentry:first-child:after {
        height: 0;
    }
    .hentry .post-content {
        overflow: hidden;
    }
    .content-area .entry-thumb {
        text-align: center;
        margin-bottom: 30px;
    }
    .hentry .title-post {
        font-size: 20px;
        font-weight: 600;
        line-height: normal;
        padding-bottom: 10px;
        margin: 0;
    }
    .hentry .meta-post {
        margin-bottom: 20px;
    }
    .hentry .meta-post,
    .hentry .meta-post a {
        color: #5e5e5e;
        font-size: 13px;
    }
    .hentry .meta-post span {
        position: relative;
        padding-left: 20px;
        margin-right: 18px;
    }
    .hentry .meta-post .cat-links {
        display: inline-block;
    }
    .hentry .meta-post span:before {
        position: absolute;
        left: 0;
        top: 1px;
        font-family: "FontAwesome";
        line-height: normal;
    }
    .hentry .meta-post span.posted-on:before {
        content:"\f073";
    }
    .hentry .meta-post span.byline:before {
        content:"\f007";
    }
    .hentry .meta-post span.comments-link:before {
        content:"\f086";
    }
    .hentry .meta-post span.cat-links:before {
        content:"\f114";
        top: 4px;
    }
    span.author.vcard {
        padding: 0;
        margin: 0;
    }
    .hentry blockquote {
        background-color: #333;
        color: #fff;
        font-size: 16px;
        font-style: italic;
        line-height: 23px;
        margin-bottom: 30px;
        padding: 30px 35px;
        position: relative;
    }
    .fullwidth {
        width: 100%;
    }
    .error-404 {
        text-align: center;
    }
    .error-404 .page-content p {
        margin-bottom: 30px;
    }
    .masonry-layout {
        width: 100%;
        padding: 0;
    }
    .masonry-layout .hentry {
        width: 360px;
        margin: 15px;
        padding: 0;
    }
    .masonry-layout .post-wrap {
        padding: 0;
    }
    .masonry-layout .hentry:after {
        width: 0;
        height: 0;
    }
    /* Blog pagination */
    .blog-pagination ul {
        width: 100%;
        text-align: right;
        list-style: none;
    }
    .blog-pagination ul li,
    .blog-pagination ul li a {
        display: inline-block;
        background-color: transparent;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
    .blog-pagination ul li {
        margin-left: 3px;
    }
    .blog-pagination ul li.active,
    .blog-pagination ul li:hover a {
        color: #fff;
    }
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

テーマのstyle.cssを編集し、中央寄せしたい要素にtext-align: center;を指定するだけです。
参考:text-align - CSS | MDN

PCで見た時だけ、という条件ならメディアクエリで切り分けます。
ブレイクポイントはテーマに合わせる等、調整してください。
参考:メディアクエリの利用 - CSS | MDN

どこを中央寄せしたいのかが分からないので、例としていくつかのパターンを書いておきます

@media (min-width: 960px) { /* ←数値は調整してください */

  /* 本当に全部のテキストを中央寄せしたいなら */
  body {
    text-align: center;
  }

  /* ヘッダーやフッター以外を中央寄せするなら */
  #content {
    text-align: center;
  }

  /* 投稿の本文だけを中央寄せするなら */
  .entry-content {
    text-align: center;
  }

}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/03/24 15:49 編集

    ご回答ありがとうございます。
    もともと文章自体は中央寄せなのですが、パソコンで見た際にディスプレイの左から右へと長く続いていて左右の余白が少ないです。
    そこで、パソコンで見た際に左右の余白をもっと多く、
    1/3+1/3+1/3
    余白+本文+余白
    のようにしたいです。
    質問の意図がわかりにくくてすみません。
    申し訳ありませんが、よろしくお願いいたします。

    キャンセル

  • 2018/03/26 15:07

    その要素に max-width と margin: 0 auto; でそのwidth以上の画面サイズで見た時に要素中央寄せになります。

    キャンセル

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

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

関連した質問

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