FC2ブログ ”最強” カスタマイズ入門講座。ブログ全体の幅を変更。

公開 :

現実社会では殆ど言葉を発しない@It_is_Rです。だって、厄介なことになりたくないじゃん。

今回も前回に引き続き、FC2ブログカスタマイズの記事です。前回、ヘッダーのサイズを変更しましたが、ブログ全体のサイズを変えないとヘッダーのサイズが上手く調節できません。そこで今回は、ブログ全体の幅を変更してみます。

しかし、ただたんに幅を変更しただけでは、少し不便になることがあります。例えば、あなたのパソコンでブログの全体が見えていたとしても、あなたのパソコンの画面のサイズよりも小さいパソコンを使っている人は、画面全体からはみ出てしまい見にくくなってしまっているかも知れません。
それも、今回で解決いたしましょう。

eyecatch_cat

現在FC2ブログで作ったブログの状態

前回、ヘッダー部分をカスタマイズしたブログはこの様になっています。
無料ゲーム開発日記

こういうレイアウトも勿論ありなのですが、Rとしては、画面全体を使って大きく見せたいと思います。

FC2ブログの「テンプレートの設定」から、CSSを変更します。

では、横幅を画面全体に広げてみましょう。

ブログのサイズを画面に合わせる。

まず、変更するのは次の部分です。

変更前

div#container {
	width : 760px;				/* wrapper+extra-columnの幅 */
	margin-left : auto;			/* 左側のマージンを自動計算 */
	margin-right : auto;			/* 右側のマージンを自動計算 */
	background-color : transparent;		/* 背景を透過(bodyで指定した値が有効になります) */
	text-align : left;			/* 古いIE用にセンタリングした部分を元に戻す */
}

上のコードで、ブログ全体の横幅を示しているのが、width : 760px;です。この760pxを100%に変更してみましょう。

変更後

div#container {
	width : 100%;				/* wrapper+extra-columnの幅 */ /*ここを変更*/
	margin-left : auto;			/* 左側のマージンを自動計算 */
	margin-right : auto;			/* 右側のマージンを自動計算 */
	background-color : transparent;		/* 背景を透過(bodyで指定した値が有効になります) */
	text-align : left;			/* 古いIE用にセンタリングした部分を元に戻す */
}

無料ゲーム開発日記

レイアウトは崩れてしまっていますが、画面全体にブログのサイズが広がったかと思います。
このレイアウトの崩れは、まだコンテンツ部分と、サイドバー部分のレイアウトを整えていないからです。

コンテンツ部分とサイドバー部分のレイアウトの調節

次に、コンテンツ部分とサイドバー部分のレイアウトの調節を行います。

変更するコードは次の部分です。

変更前

/* 本文部分ブロック */
/* IEは正しくCSSの幅・高さを解釈出来ませんのでそのままではレイアウトが崩れます */
/* 正しく解釈出来るようにボックスモデルハックと呼ばれるおまじないを施します */
	
div#primary-column {
	float : left;			/* 左側に回り込む */
	width : 520px;			/* 古いIE用の幅(コンテンツ幅+ボーダー幅+左右パディングの幅) */
	padding-right : 0 20px;		/* パディング */
	voice-family : "\"}\"";		/* おまじない */
	voice-family : inherit;		/* おまじない */
	width : 500px;			/* CSSを正しく解釈出来るブラウザ用のコンテンツ幅 */
}

html>body div#primary-column {
	width : 500px;			/* Opera用のコンテンツ幅 */
}

/* サイトインフォ関連ブロック */

div#secondary-column {
	float : right;			/* 右側に回り込む */
	width : 240px;			/* コンテンツ幅 */
}

こちらのwidthも、%表示に直すことで、ウィンドウのサイズの違いにも適応できるようになります。

変更後

/* 本文部分ブロック */
/* IEは正しくCSSの幅・高さを解釈出来ませんのでそのままではレイアウトが崩れます */
/* 正しく解釈出来るようにボックスモデルハックと呼ばれるおまじないを施します */
	
div#primary-column {
	float : left;			/* 左側に回り込む */
	width : 75%;			/* 古いIE用の幅(コンテンツ幅+ボーダー幅+左右パディングの幅) */ /*ここを変更*/
	padding-right : 0 20px;		/* パディング */
	voice-family : "\"}\"";		/* おまじない */
	voice-family : inherit;		/* おまじない */
	width : 75%;			/* CSSを正しく解釈出来るブラウザ用のコンテンツ幅 */ /*ここを変更*/
}

html>body div#primary-column {
	width : 75%;			/* Opera用のコンテンツ幅 */ /*ここを変更*/
}

/* サイトインフォ関連ブロック */

div#secondary-column {
	float : right;			/* 右側に回り込む */
	width : 20%;			/* コンテンツ幅 */ /*ここを変更*/
}

するとこの様に、ブログのコンテンツ部分とサイドバー部分が画面全体に広がります。
無料ゲーム開発日記

今回変更したwidthは、75%と20%にしましたが、この場合合わせて95%になりますね。これはコンテンツ部分とサイドバー部分の間に5%の空間ができるという意味になります。この%は、各自好きな様に指定してあげれば大丈夫です。

スポンサードリンク

おすすめの記事♪

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。【準備編】

[email protected]_is_Rです。 少し前まで、私は FC2ブログ を使っていました。 やはり個性を大切にしたい私にとって、用意されたテンプレートを使うことに抵抗がありました。 「

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

[email protected]_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

【初心者歓迎】クライアントサイドとサーバーサイドの違いを解説!!

[email protected]_is_Rです。 今回のテーマは、ちょっと細かいテーマですが、難しいこと考えずに気楽にいきましょう! 今回はクライアントサイドプログラムと、サーバーサイドプログ

SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ!

CSS を書くときに、 Sass はもう手放せません。 @It_is_R です。 さて、今回のテーマとなる Sass の表記には、2種類ありますよね。 SCSS と、 SASS です。

WordPress

WordPressカスタマイズ。テンプレートのファイル構成をチェック。

二兎を追う者は一兎をも得ず。でも、三兎を追えばそのうちの一兎ぐらい得られるんじゃ無いかと[email protected]_is_Rです。やかましいわ。 今回の記事は初のWordPre

gulp

gulpでsassをcssにコンパイル。インストール&便利な使い方。

[email protected]_is_Rです。 Webページを制作するとき、sassをcssに変換して使用することが多いと思います。 今回は、gulpを使ってsassをcssに

CSS Button

サイト制作に!!CSSでマウスオーバーボタンの作り方。

新年初の記事です。とりあえず、あけましておめ[email protected]_is_Rです。 お正月……おそーがつ……おそまつ……おそ松さん。新年早々くだらないこと言ってないで早く記事を書けって話ですね。

HTML CSS

Google Fontsの使い方。サイトをカッコよくしよう。

[email protected]_is_Rです。 WordPress、もしくは他のホームページやブログをやっていると、フォントを変えたいなと思うことも多いと思います。 そこで、Googl

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較になら[email protected]_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

クローバPAGE

【クローバPAGE】知識ゼロでも超簡単にサイトを作れるサービス!!

[email protected]_is_Rです。 しかし、HTMLとか、CSSとかなにそれ?……という感じのひともいるでしょう。 そこで、今回は知識が全くなくても超簡単にWebサイトが作れ


コメントをどうぞ!

メールアドレスが公開されることはありません。




Category

Games