レスポンシブ対応
タブレット
@media screen and (max-width: 950px) {
メインカラム
.acms-col-9.main {
float: none;
left: inherit;
width: auto;
margin: 0 auto;
}
サブ
.acms-col-3.sub {
float: none;
right: inherit;
width: auto;
max-width: 720px;
margin: 0 auto;
}
.acms-col-3.sub .subModuleBox {
float: left;
width: 213px;
margin: 0 10px;
}
.acms-col-3.sub .subModuleBox .photo {
height: auto !important;
}
.acms-col-3.sub .subModuleBox img {
left: inherit !important;
top: inherit !important;
width: 170px !important;
height: auto;
}
ヘッダー
#headWrapper #siteName,
#headWrapper #siteCaption {
margin: 10px 0 0 10px;
}
フッター
#companyAbout {
padding: 20px 10px;
}
#search {
padding: 0 10px;
}
}
管理用スタイル
.comPost {
margin: 0 0 10px 0 !important;
}
.formEntryAction {
margin: 20px 0 !important;
}
.js-edit_inplace.align_hidden::before {
margin-right: 20px;
}
.editLink {
font-size: 12px;
font-weight: normal;
}
#nav-open-btn,
.siteHeader {
display: none;
}
ユニットグリッド
.acms-entry .acms-col-12 {
padding: 0;
}
エントリー内要素 box-sizing対処法
.entry-container {
padding-left: 10px;
padding-right: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.acms-table-responsive {
padding-left: 10px;
padding-right: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
グリッドシステム内のYoutubeの幅
.acms-entry [class*='acms-col-'] .column-youtube-auto {
width: auto!important;
}
@media screen and (max-width: 767px) {
.column-image-auto {
width: auto !important;
}
.acms-table-responsive {
overflow-x: scroll;
overflow-y: scroll;
}
}
@media screen and (max-width: 479px) {
.column-image-left {
float: none;
}
}
グリッドシステム
@media screen an d (max-width: 767px) {
.acms-grid,
.acms-grid-r {
margin-right: 0;
margin-left: 0;
}
.acms-grid-r .acms-push-1,
.acms-grid-r .acms-push-2,
.acms-grid-r .acms-push-3,
.acms-grid-r .acms-push-4,
.acms-grid-r .acms-push-5,
.acms-grid-r .acms-push-6,
.acms-grid-r .acms-push-7,
.acms-grid-r .acms-push-8,
.acms-grid-r .acms-push-9,
.acms-grid-r .acms-push-10,
.acms-grid-r .acms-push-11 {
left: inherit;
}
.acms-grid-r .acms-pull-1,
.acms-grid-r .acms-pull-2,
.acms-grid-r .acms-pull-3,
.acms-grid-r .acms-pull-4,
.acms-grid-r .acms-pull-5,
.acms-grid-r .acms-pull-6,
.acms-grid-r .acms-pull-7,
.acms-grid-r .acms-pull-8,
.acms-grid-r .acms-pull-9,
.acms-grid-r .acms-pull-10,
.acms-grid-r .acms-pull-11 {
right: inherit;
}
.acms-grid-r [class*="acms-col"] {
padding-right: 0;
}
ナビゲーション
.acms-show-sp .acms-sidebar {
display: block;
}
ヘッダー
#headWrapper {
padding-top: 10px;
}
#headWrapper .acms-col-8 {
margin-bottom: 0;
}
メイン
.acms-container {
width: auto;
padding-left: 0;
padding-right: 0;
}
.main {
padding-left: 0;
}
#nav-open-btn,
.siteHeader {
display: block;
}
.nav-btn {
position: absolute;
top: 0;
padding: 10px;
}
#adminBox,
.mainModuleBox {
margin-right: 0;
}
#siteCaption {
width: auto;
}
.mainModuleBox h2 {
margin: 0;
padding: 10px;
}
モジュール
#headline,
#summaryDefault {
margin: 0;
border-radius: 0;
}
#headline .title {
display: block;
}
.acms-container .bx-wrapper .bx-viewport {
border: none;
}
.summaryDefault .summaryDefaultEntry {
float: none;
width: auto;
}
.summaryDefault .summaryDefaultEntry .summaryTitle {
margin-top: 0;
}
.acms-entry,
#topicpath,
#categoryH1,
.acms-grid-r .acms-revison-admin,
.acms-entry p,
.acms-entry table,
.acms-entry h3 {
margin-right: 0;
}
#search {
position: inherit;
right: inherit;
top: inherit;
margin-bottom: 0;
}
#footer {
padding: 0 10px;
}
#footer .acms-col-6 {
margin-bottom: 0;
}
#pageTop {
text-align: right;
}
#pageTop a {
display: inline;
position: inherit;
right: inherit;
bottom: inherit;
}
#copyright p {
width: auto;
font-size: 11px;
}
.main .mapWrapper {
padding: 10px;
}
#realestateMap .js-s2d-ready,
#realestateMap .column-map- {
width: 230px !important;
height: 230px !important;
}
#realestateMap img.column-map- {
width: 280px !important;
height: auto !important;
}
.acms-entry#realestateSearch {
border: none;
}
.acms-entry.ablogcmsForm {
width: auto;
border: none;
}
#realestateSearch th,
#realestateSearch td,
.ablogcmsForm th,
.ablogcmsForm td {
display: block;
width: auto;
padding: 0;
border: none;
}
#realestateSearch td,
.ablogcmsForm td {
padding-bottom: 10px;
}
.ablogcmsForm td {
padding: 10px 0 15px;
}
.siteHeaderWrapper {
width: 100%;
height: 40px;
padding: 0 10px;
background-color: #FFFFFF;
z-index: 500;
}
.siteHeader {
position: relative;
}
.siteHeader #nav-open-btn {
display: inline;
}
.siteHeader .headTel,
.siteHeader .headAccess {
position: absolute;
top: 0;
font-size: 28px;
color: #333333;
line-height: 1;
}
.siteHeader .headTel {
right: 70px;
}
.siteHeader .headAccess {
right: 20px;
}
#siteName img {
vertical-align: middle;
}
#siteName,
#siteCaption {
padding: 0;
}
.acms-sidebar ul {
list-style: none;
padding-left: 0;
}
.acms-sidebar ul ul {
display: none;
}
.acms-sidebar li {
border-bottom: solid 1px #666666;
}
.acms-sidebar a {
display: block;
padding: 10px 15px;
color: #FFFFFF;
}
.acms-sidebar li.stay,
.acms-sidebar a:hover {
background-color: #555555;
text-decoration: none;
}
#nav a {
color: #FFFFFF;
}
#nav .subTitle {
padding: 5px 10px;
background-color: #444444;
color: #FFFFFF;
font-size: 11px;
}
.subModuleBox {
padding: 10px;
}
.subModuleBox h2 {
text-align: left;
}
.subModuleBox .photo {
width: auto !important;
height: auto !important;
}
.subModuleBox .photo img {
left: inherit !important;
top: inherit !important;
}
.subModuleBox p {
margin-top: 0;
}
.subModuleBox img {
width: 100% !important;
height: auto !important;
}
#linkList li a:hover {
background-color: transparent;
text-decoration: underline;
}
.entryListBox {
margin: 0;
padding: 0;
}
.entryListBox #entryList {
border: none;
}
.entryListBox #entryList a {
border-top: none;
border-bottom: 1px solid #666666;
}
.entryListBox #entryList a:hover {
background-color: #555555;
text-decoration: none;
}
.categoryListBox {
padding: 0;
}
#categoryList li {
margin-bottom: 0;
border: none;
border-bottom: 1px solid #666666;
border-radius: 0;
background-color: transparent;
}
#categoryList li a {
padding: 10px 15px;
color: #FFFFFF;
}
#categoryList li a:hover {
border-radius: 0;
background-color: #555555;
}
.acms-btn-action-group th,
.acms-btn-action-group td {
display: block;
width: 100%;
}
.acms-form .ablogcmsForm input.acms-form-width-medium,
.acms-form .ablogcmsForm .acms-form-width-medium {
width: 100%;
}
.entryColumn {
padding: 20px 0px;
}
.entryCategory {
margin-left: 10px;
}
.acms-col-3.sub .subModuleBox {
float: none;
margin: 0;
width: auto;
}
}