a-blog cmsでサイト制作講座デザイン編

サブカラムを撤去しメインカラムだけにする

suzuki.kazuhiro — Fri, 22 Aug 2014 20:24:14 +0900

変更前

　
トップページに以下の変更を加えます。　

1　サブカラムを撤去する。
2　メインカラムの幅を広げる。
　

手順1　サブカラムを撤去する

top.htmlのサブカラム部分を削除します。
またサブカラム25％分のスペースを消すために、class=acms-push-3タグを消します。
　

トップページのサブカラムが消えました

　
メインカラムの幅をサイトの幅に合わせる。

　
変更前

メインカラム
.main {
  width: 700px;

　
変更後

メインカラム
.main {
  width: 960px;

モジュールボックスの色

suzuki.kazuhiro — Fri, 22 Aug 2014 18:48:49 +0900

変更前

 メインエリア共通 
.mainModuleBox {               
  margin: 0 0 30px 0;
  padding-bottom: 10px;
  border-radius: 5px;
  background: #d9d9d9;　　　　　　
}

　
変更後

メインエリア共通 
.mainModuleBox {
  margin: 0 0 30px 0;
  padding-bottom: 10px;
  border-radius: 5px;
  background: #f0e68c;
}

カテゴリー見出し

suzuki.kazuhiro — Fri, 22 Aug 2014 18:02:44 +0900

変更前

 ■■■■■ カテゴリー見出し #categoryH1 　
#categoryH1 {
  margin: 0 0 30px 0;
  padding: 15px 30px;
  background-color: #FFFFFF;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  color: #333333;
  font-size: 24px;
  _text-align: left;
  for ie6 
}

変更後

 ■■■■■ カテゴリー見出し #categoryH1 
#categoryH1 {
  margin: 0 0 30px 0;
  padding: 15px 30px;
  background-color: #f0e68c;　　　　　←背景色
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  color: #daa520;　　　　　　　　　　　←フォント色
  font-size: 24px;
  _text-align: left;

グローバルナビゲーションの色

suzuki.kazuhiro — Fri, 22 Aug 2014 16:43:33 +0900

変更前

 ■■■■■ グローバルナビ .acms-navbar 　
.acms-navbar {
  background-color: #333333;　　　　　　　　
  border-top: solid 1px #333333;
  border-bottom: solid 1px #333333;
  リンク 
 2段目以降 
}
.acms-navbar a:hover,　　　
.acms-navbar #viewing {
  background: #808080;　　　　　　　　　　　
}
.acms-navbar .stay a,
.acms-navbar a:active {
  background: #666666;　　　　　　　　　　　
}
.acms-navbar ul ul a {
  background: #333333;　　　　　　　　　　　
}
.acms-navbar ul ul a:hover {
  background-color: #808080;　　　　　　　　
}
.acms-navbar ul li.stay ul a {
  background-color: #333333;
}
.acms-navbar ul li.stay ul a:hover {
  background-color: #808080;
}
.acms-navbar .acms-module-edit a {
  height: auto;
  padding: 6px;
  line-height: 1.5;
}

　
変更後

　
グローバルナビゲーションの親と子それぞれの色、ホバー中、クリック中の色を変更しました。

 ■■■■■ グローバルナビ .acms-navbar 
.acms-navbar {
  background-color: #deb887;
  border-top: solid 1px #deb887;
  border-bottom: solid 1px #deb887;
  リンク
  2段目以降
}
.acms-navbar a:hover,
.acms-navbar #viewing {
  background: #d2b48c;
}
.acms-navbar .stay a,
.acms-navbar a:active {
  background: #d2b48c;
}
.acms-navbar ul ul a {
  background: #d2b48c;
}
.acms-navbar ul ul a:hover {
  background-color: #d2b48c;
}
.acms-navbar ul li.stay ul a {
  background-color: #d2b48c;
}
.acms-navbar ul li.stay ul a:hover {
  background-color: #d2b48c;

グローバルナビゲーションとサイトの横幅を揃える

グローバルナビゲーションの横にはみ出た部分の色を、サイトの背景色と同じにして見た目を揃えます。

 ■■■■■ グローバルナビ .acms-navbar
.acms-navbar {
  background-color: #ffffe0;          ←グローバルナビゲーションの色をサイトの背景色と同じにする
  border-top: solid 1px #ffffe0;
  border-bottom: solid 1px #ffffe0;
}
.acms-navbar ul {　　　　　　　　　　←中央部分の色を設定するコードを書き加える
  background-color: #deb887;　　　　　←
}　　　　　　　　　　　　　　　　　　　←

サイトタイトルのフォント

suzuki.kazuhiro — Fri, 22 Aug 2014 16:11:27 +0900

変更前

#siteName {
  margin: 20px 0 0 0;
  font-size: 28px;
}

　
変更後

　
サイト名のフォントを40px、明朝体に変更しました。

#siteName {
  margin: 20px 0 0 0;
  font-size: 40px;
  font-family: "ＭＳ 明朝",serif;
}

ヘッダーの色と画像を変更する

suzuki.kazuhiro — Fri, 22 Aug 2014 13:26:43 +0900

変更前

 ヘッダ 
#headWrapper {
  padding-bottom: 15px;
  background: #FFFFFF;　　　　
}

　
　
ヘッダーの色を変更

　
ヘッダーの色をシルバーに変更しました。
　

 ヘッダ 
#headWrapper {
  padding-bottom: 15px;
  background: #c0c0c0;　　　
}

　
　
ヘッダー画像を変更

　
ヘッダーの高さを250ｐｘにして、猫の画像を中央に配置しました。
　

#headWrapper {
  width:940px;
  height:250px;
  padding-bottom:15px;
  margin: 0 auto;
  background-image:url("../images/cat.JPG");
  }

サイト全体の背景色を変更する

suzuki.kazuhiro — Fri, 22 Aug 2014 11:31:23 +0900

変更前

body { 
  background:#ffffff;　←ここを変更
  color: #333333;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, 'メイリオ', 'ＭＳ Ｐゴシック', 'MS PGothic', Verdana, sans-serif;
  font-size: 14px;

　
変更後

body { 
  background:#f0e68c;　←ここを変更
  color: #333333;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, 'メイリオ', 'ＭＳ Ｐゴシック', 'MS PGothic', Verdana, sans-serif;
  font-size: 14px;

システム関連はこちらをご覧ください

suzuki.kazuhiro — Mon, 18 Aug 2014 18:11:37 +0900

a-blog cmsでサイト制作講座1　システム編

http://startup.nagoya//a-blog/

CSS

suzuki.kazuhiro — Mon, 18 Aug 2014 17:41:09 +0900

　レスポンシブ対応

 タブレット 
@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;
  }
}

CSS

suzuki.kazuhiro — Mon, 18 Aug 2014 17:07:02 +0900

.contactH2 {
  margin: 0 20px 10px 0;
  padding: 3px 10px 5px;
  border-bottom: solid 1px #999999;
  color: #333333;
  font-size: 16px;
}
電話番号　
#contactNo {
  margin: 5px 0 0 0;
  padding: 0;
  color: #666666;
  font-size: 24px;
  font-weight: bold;
}
 フォームテーブル 
.ablogcmsForm {
  width: 100%;
  margin: 0 0 20px 0;
  border-collapse: collapse;
  border: none;
  border-top: 1px solid #CCCCCC;
}
.ablogcmsForm th {
  width: 180px;
  margin: 0;
  padding: 8px 10px;
  border: none;
  border-bottom: 1px solid #CCCCCC;
  background-color: #EEEEEE;
  color: #333333;
  font-size: 13px;
  vertical-align: top;
  white-space: normal;
}
.ablogcmsForm td {
  margin: 0;
  padding: 5px 20px;
  border: none;
  border-bottom: 1px solid #CCCCCC;
  font-size: 15px;
  _text-align: left;
}
.required {
  margin: 0 10px;
  padding: 1px 8px;
  border-radius: 3px;
  background-color: #C40F32;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: normal;
}
.mailStep {
  padding: 0;
}
.formBtnBox {
  margin-bottom: 20px;
}
ステップ 
#mailStep {
  list-style: none;
  display: block;
  padding: 20px;
  margin: 0 0 20px 0;
  border-radius: 5px;
  background-color: #d9d9d9;
  font-size: 18px;
}
#mailStep li {
  float: left;
  margin: 0 25px 0 0;
  color: #999999;
}
#mailStep .current {
  color: #333333;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .contactBox {
    padding: 15px 10px;
  }
  .acms-entry .contactH2 {
    margin-right: 0;
  }
   ステップ 
  #mailStep {
    border-radius: 0;
  }
  #mailStep li {
    float: none;
    margin: 0 0 10px 0;
  }
}

a-blog cmsでサイト制作講座 デザイン編

サブカラムを撤去しメインカラムだけにする

変更前

手順1 サブカラムを撤去する

メインカラムの幅をサイトの幅に合わせる。

変更前

変更後

モジュールボックスの色

変更前

変更後

カテゴリー見出し

変更前

変更後

グローバルナビゲーションの色

変更前

変更後

グローバルナビゲーションとサイトの横幅を揃える

サイトタイトルのフォント

変更前

変更後

ヘッダーの色と画像を変更する

変更前

ヘッダーの色を変更

ヘッダー画像を変更

サイト全体の背景色を変更する

変更前

変更後

システム関連はこちらをご覧ください

CSS

CSS

a-blog cmsでサイト制作講座デザイン編

手順1　サブカラムを撤去する

　
メインカラムの幅をサイトの幅に合わせる。

　
変更前

　
変更後

　
変更後

　
変更後

　
変更後

　
　
ヘッダーの色を変更

　
　
ヘッダー画像を変更

　
変更後