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

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

ただいまの
回答率

90.34%

  • WordPress

    7647questions

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

  • CSS

    6187questions

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

  • div

    25questions

    HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。

wordpressテーマ sydneyについての質問です。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,040

mitsunori-k

score 1

ワードプレステーマ SydneyでWebサイトを作成しています。

初心者で申し訳ございません。質問させて頂きます。
Sydneyが指定している各Media Queryに合わせて、div.row内のブロック要素div#primary.content-area.col-md-9をdiv.rowの上下左右中央揃えをするにはどうしたらよいですか?

発生している問題

Media Queryのmin-width: 991px以上は下記のコードで対応できそうなのですが、widthが990px以下だと画面左に過剰な余白が出てしまいます。
また、記入したcssの問題なのか、div#primary.content-area.col-md-9のテキストが綺麗に折り返されません。

該当のソースコード(CSS)

-------------------------------------------------------------- */
    @media only screen and (min-width: 1930px) {
                .parallax {
            background-size: cover;
        }
    }
    /* Smaller than standard 1200 */
    @media only screen and (max-width: 1199px) {

        .roll-icon-list .list-item {
            margin-bottom: 18px;
        }
        .roll-project.fullwidth .project-item {
            width: 25%;
        }
        .masonry-layout .hentry {
            width: 455px;
        }
    }
/* Smaller than standard 980 */
    @media only screen and (max-width: 991px) {
        .site-header.fixed {
            position: static !important;
        }
        .parallax {
            background-size: cover;
            background-attachment: scroll;
            background-position: top center!important;
        }
        .roll-counter .numb-count {
            font-size: 24px;
        }
        .masonry-layout .hentry {
            width: 345px;
        }
        .header-wrap .col-md-8 {
            padding: 0;
        }
        .last {
            margin-bottom: 0 !important;
        }
        .margin-bottom-device {
            margin-bottom: 50px;
        }
        .margin-top-device {
            margin-top: 50px;
        }
        .content-area .post-wrap,
        .contact-form-wrap {
            padding-right: 0;
        }
        .contact-form-aside,
        .sidebar {
            margin-top: 50px;
        }
        .roll-icon-box {
            margin-bottom: 30px;
        }
        .roll-promobox.aside-style,
        .roll-promobox.aside-style .promo-wrap,
        .roll-promobox.aside-style .promo-content,
        .roll-promobox.aside-style .promo-controls {
            display: block;
            text-align: center;
            width: 100%;
        }
        .roll-promobox.aside-style .title {
            margin-bottom: 20px;
        }
        .roll-project.fullwidth .project-item {
            width: 33.3%;
        }
        .footer-widgets .widget {
            margin-bottom: 50px;
        }
        .text-slider-stopped {
            top: 70%;
        }
    }
    @media only screen and (max-width: 1024px) {
        .slides-container .slide-item,
        .panel-row-style {
            background-attachment: scroll;
            background-position: center !important;
        }
        .panel-row-style.mob-pad-0 {
            padding: 0 !important;
        }
        .panel-row-style.mob-pad-15 {
            padding: 15px 0 !important;
        }
        .panel-row-style.mob-pad-30 {
            padding: 30px 0 !important;
        }
        .panel-row-style.mob-pad-45 {
            padding: 45px 0 !important;
        }
        #mainnav {
            display: none;
        }
        .btn-menu {
            display: block;
        }
        .site-header {
            position: static;
            background-color: rgba(0,0,0,0.9);
        }
        .posts-navigation {
            overflow: hidden;
            margin-bottom: 30px;
        }
    }
    @media only screen and (max-width: 780px) {
        .roll-client .client-item img {
            max-width: 100%;
          }
          .panel-grid-cell {
               padding-left:15px !important;
            padding-right:15px !important;
            margin-bottom: 15px !important;
          }
        h1 { font-size: 32px;}
        h2 { font-size: 28px;}
        h3 { font-size: 22px;}
        h4 { font-size: 18px;}
        h5 { font-size: 16px;}
        h6 { font-size: 14px;}
    }
    /* Tablet Landscape */
     @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
        .parallax {
            background-size: cover;
            background-attachment: scroll;
            background-position: top center!important;
        }
    }
    /* All Mobile Sizes */
    @media only screen and (max-width: 767px) {
        .posts-layout {
            max-width: 100%;
        }
        .masonry-layout .hentry {
            width: 100%;
            margin: 0 0 30px;
            padding: 0 15px;
        }
        .text-slider-section {
            min-height: 190px;
        }
        .text-slider .maintitle {
            font-size: 32px;
            line-height: 1.1;
            padding-bottom: 10px;
        }
        .text-slider .subtitle {
            font-size: 16px;
            line-height: 24px;
            padding: 15px 0;
        }
        .roll-button {
            padding: 10px 30px;
        }
        .roll-project .project-item {
            width: 100%;
        }
        .roll-project.fullwidth .project-item {
            width: 50%;
        }
        .roll-counter {
            margin-bottom: 50px;
        }
        .single-post .author-post .author-avatar {
            float: none;
            margin-bottom: 20px;
        }
        .single-post .author-post .author-info {
            margin-left: 0;
            padding: 0;
        }
        .single-post .author-post ul.socials {
            position: static;
        }
        .single-post .author-post .intro {
            clear: left;
            padding-top: 10px;
        }
        .comment-list .children {
            margin-left: 75px;
        }
        .error-wrap .error-search {
            padding: 0 20px;
        }
        .aside-image .content-wrap {
            padding-left: 0;
            padding-right: 0;
        }
        .social-menu-widget a:before {
            font-size: 42px;
        }
        .btn-menu {
            float: none;
            margin: 15px auto 0;
        }
        .header-wrap {
            text-align: center;
        }
        #mainnav-mobi {
            top: auto;
        }
        .site-header.float-header {
            padding-top: 20px;
            padding-bottom: 20px;
        }

        .text-slider-section {
            min-height: 0;
            top: auto;
            bottom: 0;
        }
        .site-title {
            font-size: 22px !important;
        }
    }
    /* Mobile Portrait Size */
    @media only screen and (max-width: 479px) {
        .roll-project.fullwidth .project-item {
            width: 100%;
        }
        .blog-post,
        .service,
        .sidebar-column {
            padding: 0;
        }
        .roll-button {
            font-size: 12px;
        }
        .text-slider .maintitle {
            font-size: 20px;
        }
        .text-slider .subtitle {
            font-size: 14px;
        }
        .text-slider {
            margin-bottom: 15px;
        }
    }
    @media only screen and (max-width: 320px) {
        .text-slider {
            margin-bottom: 0;
        }
    }
/* 追加css */


.col-md-9 {
position: relative;
top: 25%;
    right: 0;
    bottom: 25%;
    left: 20%;
width: auto;
height: auto;
}


該当のコードです。 (html)

<div id="content" class="page-wrap">
        <div class="container content-wrapper">
            <div class="row">    
    <div id="primary" class="content-area col-md-9">
        <main id="main" class="post-wrap" role="main">



<article id="post-5" class="post-5 page type-page status-publish hentry">
    <header class="entry-header">
        <h1 class="title-post">動画制作事業</h1>    </header><!-- .entry-header -->

    <div class="entry-content">
        <h3><span style="color: #ffffff;">コンセプトの策定からやらせていただきます。</span></h3>
<p><span style="color: #ffffff;">弊社は県内随一の夜間撮影能力を持っています。</span><br>
<span style="color: #ffffff;"> もちろん明るい場所での撮影も可能です。</span></p>
<p><span style="color: #ffffff;">TVCMからyoutube等のネット広告、更には社内や学内に配る動画作品まで</span><br>
<span style="color: #ffffff;"> 動画であれば何でもやらせていただきます。</span></p>
<p><div class="fluid-width-video-wrapper" style="padding-top: 56.25%;"><iframe src="https://www.youtube.com/embed/smbmxL04-xs" frameborder="0" allowfullscreen="allowfullscreen" id="fitvid701968"></iframe></div></p>
<p><div class="fluid-width-video-wrapper" style="padding-top: 56.25%;"><iframe src="https://www.youtube.com/embed/7dlBP-Y9QuI" frameborder="0" allowfullscreen="allowfullscreen" id="fitvid921242"></iframe></div></p>
            </div><!-- .entry-content -->

    <footer class="entry-footer">
        <span class="edit-link"><a class="post-edit-link" href="http://mimic339.com/wp-admin/post.php?post=5&amp;action=edit">編集</a></span>    </footer><!-- .entry-footer -->
</article><!-- #post-## -->



        </main><!-- #main -->
    </div><!-- #primary -->

            </div>
        </div>
    </div>

試したこと

上記css末尾に,こちらを記入してみました。
.col-md-9 { position: relative; top: 25%; right: 0; bottom: 25%; left: 20%; width: auto; height: auto; }
また、floatさせright指定もしてみましたが、上記問題のように左側に余白が過剰にできてしまいました。

補足情報(言語/FW/ツール等のバージョンなど)

cssなどの記入は善意の方のwebサイトを参考に色々試しましたが、うまくいっていません。
どうかご教授願います。
こちらがデモサイトです。
こちらがダウンロード先です。
こちらが問題の画像1画像2画像3です。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/04/12 00:54

    質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、WordPressテーマはテーマ名だけではなく取得したURLを質問文に追記ください。(URLにはリンクを張ることができます)

    キャンセル

  • kei344

    2017/04/12 01:23

    デモサイトには「col-md-9」が使用されていません。具体的にHTMLを提示され、どの部分か画像で示すなどされるほうが良いと思います。

    キャンセル

  • kei344

    2017/04/12 02:09

    追加ありがとうございます。ただ画像のリンクが切れているようです。teratailに画像を投稿する事もできますので、そちらの機能を使用していただけませんか? あと、「@media」ごとに分割するとかえって読みにくいですよ。

    キャンセル

回答 1

checkベストアンサー

+1

left: 20%; をメディアクエリで変更すればよいです。また、.col-md-9 より div#primary.content-area に CSS を当てたほうが良いです。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/04/14 18:02

    色々と御丁寧に対応していただいてありがとうございました。

    キャンセル

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

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

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

  • WordPress

    7647questions

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

  • CSS

    6187questions

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

  • div

    25questions

    HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。