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

スポンサードリンク

関連コンテンツ

オススメ記事

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこともありました。@It_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php

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

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

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

【初心者向け】webpack 4入門。一番簡単で詳しい使い方

風邪をひいてぼんやりしている@It_is_Rです。どちらにしろいつもぼんやりしてますが。 さて、今回はWebpack4について紹介していきたいと思います。 この記事では、jsファイルをビルドす

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

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

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

WordMove | 運用中の WordPress 環境をローカルと FTP で同期

道が覚えられない、@It_is_Rです。 人生さえ彷徨い続けてここにいます。 さて、運用中の WordPress サイトの環境を、ローカル開発環境と同期したい時、 WordMove を使うとと

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

こんにちは、@It_is_Rです。 前回「Gitの使い方。バージョン管理する流れを、実際にやってみよう」では、 実際にGitを使ってバージョン管理する流れを学びました。 さて、4回目の今

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

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

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

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

WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 改めまして、@It_is_Rです。 特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

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

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