シーサーブログPCテンプレート/スマートフォン対応化カスタマイズ

　シーサーブログのスマートフォン専用サイトがあまりにも広告でうざいので、スマートフォンからの訪問者にもPCテンプレートのほうだけの閲覧で不自由なく閲覧できるようにPCテンプレートを改造してみようと思う。

使用するシーサーブログテンプレート

『超シンプル(右サイドバー) 』

 

目標

1、1カラム化

2、リキッドレイアウト

3、アンカーテキストの使用による位置移動

 

シーサーブログテンプレートの１カラム化とリキッドレイアウト化：『超シンプル(右サイドバー) 』

1、『デザイン』→『デザイン設定』→『超シンプル(右サイドバー) 』をクリック。

2、スタイルシートをカスタマイズし、サイト全体の閲覧時の位置を中央寄せにする。

変更前	変更後
body{  text-align:center;  margin:0;  padding:0;  color:#555; }	body{   text-align:center;  margin-left: auto; margin-right: auto;  　color:#555; /* 最大幅 */max-width: 550px; /* 最大幅 */   /* IE用 */  width: expression(document.body.clientWidth > 551? "550px" : "auto");  }

　margin-left: auto; margin-right: auto;で中央寄せ。
　max-width: 550px; でサイトの幅の最大値を指定している。

3、カラムの幅の変更

変更前	変更後
#container{  width:960px;  text-align:left;  margin:0 auto; }	#container{  width:100%;  text-align:left;  margin:0 auto; }
#links-left{ } #links{  width:240px;  float:left;  padding:0px 0px 0px 0px;  line-height:1.5; }	#links-left{ } #links{  width:100%;  float:left;  padding:0px 0px 0px 0px;  line-height:1.5; }

　これで、カラムの幅が可変化されたリキッドレイアウトになる。

4、テンプレートの名前を変更して『保存』ボタンをクリック。

5、『コンテンツ』をクリック。

7、サイドカラムに配置したコンテンツをドラッグして、メインカラムへ移動。

8、『保存』ボタンをクリック。

 

　と本日はここまで。

 

PC・スマートフォン共通テンプレート化中なのはこちらのサイト（内容自体は更新が滞ってるので、実験用にちょうど良かったのだ）。

気に入ったら、押してね⇒FC2 Blog Ranking

ホームに戻る.ダイヤル0