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

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

スポンサードリンク

関連コンテンツ

オススメ記事

WordPressカスタムヘッダーを完璧に使いこなしたい人へ告ぐ!

森の中に昔から住んでる@It_is_Rです。 WordPressのカスタマイズをする上で、カスタムヘッダーを使うと、色やヘッダー画像をWordPressの管理画面から操作できるようになり便利です

zplug を使ってプラグインをインストール、管理する。

二つのことを同時にできない、@It_is_Rです。 今回はターミナルをかっこよくするシリーズ、第三回目です。 zplug を使って、プラグインをインストールする方法を紹介します。

【Bootstrap 4】ボタン(btn)の作り方。色やサイズなどの指定方法!

Bootstrap4の使い方、第5回目となりました。 Bootstrapの機能のひとつとして、クラスを組み合わせて指定するだけで、色々なボタンが作れます。 今回はBootstrap4を使ったボ

WordPress テーマの基本構成と読み込まれるファイルの優先順位。

ドラクエとかにテンプレートっていう武器ありそうですね。@It_is_Rです。 WordPress テーマ自作シリーズ第4回目です。 今回はテーマを作成する上で、重要な知識を書いていこうと思いま

zsh

zsh のインストール方法と、うまく起動しない時の対処法。

かっこいいものが大好きな@It_is_Rです。 そこで今回は、ターミナルをかっこよくする為の方法を、何回かの記事に分けて書いてみたいと思います。 今回、第一回目は zsh ( Z Shell

【Gitの使い方 – その4】ブランチを使って履歴を分岐させる方法

エビの殻や、ポテチ、煮干しなどを食べると、必ずと言っていいほど口が血だらけになります。@It_is_Rです。 さて、Gitの使い方4回目の今回は、ブランチについてです。 ブランチは作業を枝分か

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

小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第4弾です。 前回はHTMLでりこちゃんの画像を表示し、クリックすると前に一歩動くというのをJavaScriptで作りました。 J

迷路やRPGで使えるマップを作ってみよ!

小学生からのJavaScript。迷路やRPGで使えるマップを作ってみよう!

小学生からのプログラミング講座(こうざ)、第10弾です。 前回はHTML5とCanvasを使って、キャラクターがキーボードの入力(にゅうりょく)で移動(いどう)するところまで、紹介(しょうかい)

文字を一文字ずつ表示してみよう!

小学生からのJavaScript。改行と一文字ずつ画面に表示する方法!

小学生からのJavaScript講座です。 このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。 前回、画面に文字を表示するためのクラスを作ったのですが、それを

キー入力で文字を切り替えるべ

JavaScript|ノベルゲーム風にキー入力で文字を切り替える方法!

小学生からのJavaScript講座です。 前回、文字を一文字づつ表示させる方法と改行の方法を紹介しました。 今回はこのプログラムに、キー入力によって文字を切り替えられる機能をつけてみましょう

コメントをどうぞ!

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