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

初心者にやさしいa-blog cmsの使い方 CSSを書き換えてデザインをカスタマイズしよう

TEL

ヘッダー



”ヘッダー”パートソースコード

 ■■■■■ サイトタイトル #siteTitle
#siteTitle {
  float: left;
  margin: 0;
  padding: 0 0 20px 0;
}
#siteTitle img {
  padding: 17px 0 0 0;
  vertical-align: bottom;
}
@media screen and (max-width: 767px) {
  #siteTitle img {
    width: auto;
    height: auto;
  }
}
#siteName {
  margin: 20px 0 0 0;
  font-size: 28px;
}
@media screen and (max-width: 767px) {
  #siteName {
    width: auto;
    font-size: 16px;
  }
}
#siteName a,
#siteName a:hover {
  color: #333333;
  font-weight: bold;
  text-decoration: none;
}
#siteName img {
  margin-right: 10px;
  vertical-align: middle;
}
#siteCaption {
  margin: 10px 0 0 0;
  font-size: 11px;
}
 ■■■■■ ヘッダーナビ # headNavi 
#headNavi {
  display: block;
  list-style: none;
  float: right;
  margin: 20px 0 0 0;
  padding: 0;
  text-align: right;
}
#headNavi li {
  float: right;
  padding: 0 0 0 30px;
}
 ■■■■■ 電話番号 # headTelNo 
#headTelNo {
  display: block;
  float: right;
  margin: 10px 0 0 0;
  padding: 0;
  font-size: 20px;
  font-weight: bold;
  text-align: right;
}
#headTelNo span {
  margin: 0 0 0 10px;
  font-size: 30px;
}
#headTelNo a {
  color: #666666;
}
#headTelNo a:hover {
  text-decoration: none;
}
 ■■■■■ グローバルナビ .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;
}
@media screen and (max-width: 767px) {
  .acms-navbar {
    display: none;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .acms-navbar a:link,
  .acms-navbar a:visited,
  .acms-navbar a:hover,
  .acms-navbar a:active,
  .acms-navbar #viewing {
    padding: 0 20px;
  }
}
.acms-show-sp .acms-sidebar {
  display: none;
}
■■■■■ メインイメージ #topImage 
#topImage {
  text-align: left;
}
 ■■■■■ トピックパス #topicpath  
 #topicpath {
 margin: 30px 0 0 0;
  padding: 5px 30px;
  background: #d9d9d9;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  _text-align: left;
   for ie6 
}
#topicpath li,
#topicpath li a,
#topicpath li:before {
  color: #006dd9;
}
@media screen and (max-width: 767px) {
  #topicpath {
    padding: 5px 10px;
    border-radius: 0;
  }
}
 ■■■■■ カテゴリー見出し #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 
}
@media screen and (max-width: 767px) {
  #categoryH1 {
    margin: 0 0 15px;
    padding: 15px 10px;
    border-radius: 0;
    font-size: 16px;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  #siteName {
    font-size: 20px;
  }
  #headTelNo span {
    font-size: 18px;
  }
  #headWrapper .acms-col-8,
  #headWrapper .acms-col-4 {
    float: left;
    min-height: 1px;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }
  #headWrapper .acms-col-8 {
    width: 66.6667%;
  }
  #headWrapper .acms-col-4 {
    width: 33.3333%;
  }
}