1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. ブログ
  6. »
  7. FC2ブログ ”最強” カスタマイズ入門講座。ブログ全体の幅を変更。

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

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

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

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

eyecatch_cat

目次
  1. 現在FC2ブログで作ったブログの状態
  2. ブログのサイズを画面に合わせる。
  3. コンテンツ部分とサイドバー部分のレイアウトの調節

現在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%の空間ができるという意味になります。この%は、各自好きな様に指定してあげれば大丈夫です。

スポンサードリンク

関連コンテンツ

オススメ記事

キーボードで画像を動かすよ!

【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 前回は、りこちゃんの画像をクリックすると、前に一歩動くというのをJavaScri

java

Javaのクラスとメソッドの違いとは?ゲーム風に解説。

この頃小説を読んでいなく、何か読みたいなと思っている@It_is_Rです。 Javaを勉強し始めたばかりの人は、何やら難しい単語に混乱する人も多いでしょう。その中で、クラスとメソッドって一体何が

クイックタグ

【WordPress】クイックタグを編集し効率よく記事を書こう!

WordPressで記事を投稿するとき、クイックタグを使うと便利です。 デフォルトで用意されているクイックタグもありますが、それだけでは少々不便なところもあります。 今回は効率よく記事を書くた

プログラミングのクラスってなぁに?

【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、第12弾です。 前回はマップ上をキャラクターが自由に動くことができるようにしました。 今回はES6から使われるようになった「クラス」という機能を

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ヘッダーをカスタマイズ。

寒くなってきましたね。皆さま前かがみになって、まるで亀の様です。@It_is_Rです。 皆様がブログを見て、一番最初に目に入ってくるのはどこでしょうか? 殆どの場合、ヘッダー部分ですよね。つま

FC2でブログを始めよう!誰でも簡単にできるブログの作り方

FC2ブログは、FC2が運営する無料でブログを開設できるサービスです。(有料版もあります) また、FC2のサービスには、動画、ライブ配信、アフィリエイト、小説など、様々なものがあります。 今回

Docker Composeで自分のWordPressサイトをローカル開発環境に反映!

ローカルにWordPress開発環境を整えてテーマを作成することがあるのですが、単にローカルに環境を作っただけでは記事がなく、テーマのイメージが分かりません。@It_is_Rです。 かといって、te

ショートコード

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

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

HTML CSS

CSSでの円の作り方と、その上下左右中央に文字を表示する方法

サイトを作る時、円形のパーツを作りたい時ってよくありますよね。 円はCSSで簡単に作ることができます。 さらに今回はCSSで作成した円の中央に文字を置く方法も紹介します。 CSSでの

ファイルを分けるべよ!

【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、第5弾です。 前回はりこちゃんを方向キーで操作《そうさ》することができるようになりました。しかしプログラムを作

コメントをどうぞ!(コメントは承認後に反映されます)

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