CSS改編によるミニアレンジ

CSS改編によるミニアレンジ

サイト・ブログミニアレンジによりCSS見直し修正を行った。
現在のスキンはhnmを使用しているが、レイアウトの見直しによりCSSの記述を追加して更にアレンジした。

このアレンジはトップページとアイテムページ両方を実施したが、今後のトップページ改編も見越しているので、双方共通のbase.cssに記述でなくそれぞれのtop.cssとpage.cssそれぞれに同じのものを書き込んでいる。

まず、そのひとつとしてExtraskinJPやphpまたはtxt,incファイルのinclude 1 linkを目的としてコンテナを増やす形となってます。

 

div#container_a{
float: left;
width: 100%;
position: relative;
}
div#content_a{
float: left;
width: 70%;
margin-left:0px;
}
div#side_a{
float: left;
width: 30%;
margin-left:0px;
}

上記は、左70%と右30%の2カラムを作成して、それぞれにExtraskinJPまたは外部からのtxt,incファイルをincludeするための記述である。

 

div#container_b{
float: left;
width: 100%;
position: relative;
}
div#content_b{
float: left;
width: 50%;
margin-left:0px;
}
div#side_b{
float: left;
width: 50%;
margin-left:0px;
}

この記述は、上記の枠内のものをフィフティフィフティいわゆる50%:50%としたもので、nucleusのプラグインの呼び出しまたは、広告も含めて外部からのファイルをincludeさせるための記述である。

cssについては、問題はないのだが、普段よりスキンの編集ページで追加や配置換えされたプラグインやinclude外部ファイルのhtml記述をチェックしていないと、FireFoxやgoogle chromeのブラウザではレイアウトが崩れる可能性もあるので要注意!
また、CSSのmarginまたはpaddingの記述はPCユーザの多くがIEであるために少々の手抜きを行ってしまう可能性もあるために、この部分もチェックしておくこと。

ExtraSkinJP[検索]