Q&A
コードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、WordPressテーマはテーマ名と取得したURLを質問文に追記ください。（URLにはリンクを張ることができます）
###前提・実現したいこと
wordpressでHPを作成しました。固定ページで作成したもののレイアウトが左寄りになっているので、中央に配置したいです。スマホでも綺麗なレイアウトなしたいです。
###該当のソースコード
(page.php)
<?php get_footer(); ?><div id="primary" class="content-area col-md-9"> <main id="main" class="post-wrap" role="main"> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', 'page' ); ?> <?php // If comments are open or we have at least one comment, load up the comment template if ( comments_open() || get_comments_number() ) : comments_template(); endif; ?> <?php endwhile; // end of the loop. ?> </main><!-- #main --> </div><!-- #primary -->
(style.css)
Media
--------------------------------------------------------------/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
}
/ Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
max-width: 100%;
}
img {
max-width: 100%;
height: auto;
}
@media screen and (min-width: 800px) {
/* 表示領域が800px以上の場合に適用するスタイル /
div.column { width: 240px; float: left; }
}
@media screen and (max-width: 799px) {
/ 表示領域が800px未満の場合に適用するスタイル */
div.column { width: 100%; }
}
/* Media Queries
-------------------------------------------------------------- /
@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;
}
}
@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: 470px) { .roll-project.fullwidth .project-item { width: auto; } .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; } }
###試したこと
sidebar.phpのプログラムを削除しました。
個別投稿ページの
を削除しました。
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
言語はphpかcssです。
回答1件
0
ベストアンサー
要素を中央に寄せるにはマージンで左右をオートにします。
それで出来ない場合はインポータントでマージンの指定がしてあるか、固定配置されているかなので、スタイルシートの最下部にインポータント左右のマージンにオートの指定、配置を相対配置、リラティブにすれば良いです。
スタイルシートは基本的に最後の指定が優先されます。
外部、内部、要素直接、javascriptが優先度弱い順。
投稿2016/11/24 15:34
総合スコア335
あなたの回答
tips
プレビュー
