このブログ(MyThemeShop BLOGGIE)はボックスで構成されているデザインのため、少し狭く感じていたのでサイトの幅を広く調整しました

site_css

PCから閲覧した場合ですが、今回サイトの幅を20pxですが幅を広く調整しました。ほとんど見た目は分からないですよねwww 備忘録としてメモします。


HaLPosTはMyThemeShop BLOGGIEで作られています


このMyThemeShop BLOGGIEはFREEのレスポンシブテーマです。素人の自分にはわざわざスマホサイトを作らなくていいのでとても重宝しますね。

他にも無料のテーマがたくさんあります。シンプルでとても良いテーマがあるので是非覗いてみてください。

今回このブログの幅を広げた理由

他のブログサイトを見ていたときおそらく幅は同じなんですが、ボックスで構成されていないブログサイトと自分のブログサイトを比べるとなんとなく自分のブログサイトが異様に狭く感じたのがきっかけですかね。

そこで今回は960pxでしたが980pxにしました。たった20px程度ですが毎日見ている自分にとってはかなり印象が変わりました。

変更場所

これから書くのは、MyThemeShop BLOGGIEでの変更です。

style.cssの中身を変更します。

❚各ページの幅の変更

まずは基本の各ページの幅の変更です。
下記のようにwidthを変更
/*-[ Main container ]---------------*/
.main-container {
width: 980px;
margin: 0 auto;
}

#page,
.container{
max-width: 100%;
min-width:240px;
overflow:visible;
width: 980px;
}
/*-[ Header ]-----------------------*/
#header{
position: relative;
width: 980px;
margin: 15px auto;
float: left;
max-width: 100%;
}
/*-[ Navigation ]-----------------*/
.main-navigation #navigation {
clear:both;	
width: 980px;
margin:0 auto;
}

#navigation ul{
max-width: 100%;
margin:0 auto;
width: 980px;
}

.main-navigation #navigation {
width: 978px;
clear:both;
background-color:#FFF;
margin:0 auto;
max-width: 100%;
}
/*-[ Footer ]-------------------*/
.footer-widgets {
overflow: hidden;
padding-top: 20px;
width:980px;
margin:0 auto;
max-width: 100%;
}

#copyright-note {
width:980px;
padding-top:15px;
margin:0 auto;
clear:both;
border-top: 1px solid #4E4E4E;
color:#9f9f9f;
max-width: 94%;
}
/*-----------------------------------------------
/* Responsive
/*---------------------------------------------*/
@media screen and (max-width:980px){
#page, .container {
max-width: 96%;
}

❚ページの幅を変更

一番上のメニュー(ホーム、サイトについて、サイトマップ、お問い合わせ)の幅も変更します。
下記のようにwidthを変更
/*-[ Navigation ]-----------------*/
.main-navigation #navigation {
clear:both;	
width: 980px;
margin:0 auto;
}

❚各ボックスの比率の変更

左側(コンテンツ側)右側(ウィジェット側)を変更します。
下記のようにwidthを変更。
/*-[ Content ]--------------------*/
.article{
width: 65.8%;
float: left;
margin-bottom: 20px;
}
/*-[ Sidebar ]---------------------*/
.sidebar.c-4-12 {
float: right;
width: 34%;
font-size: 14px;
}



BLOGGIEテーマのRelated PostsとAuthor Boxは使用していませんので、もし使用しているようであればこれらも変更しなければならないかもしれませんね。



ついでに、カテゴリーメニューの文字の大きさも変更しました。17pxです。

あと今後の課題としてはテーブル設置がいろいろ試してはいますがうまくいきませんね。難しい…。


photo credit: Jeffrey via photopin cc

シェアする

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です