1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. ブログ
  6. »
  7. FC2ブログ ”最強” カスタマイズ入門講座。ヘッダーをカスタマイズ。

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

寒くなってきましたね。皆さま前かがみになって、まるで亀の様です。@It_is_Rです。

皆様がブログを見て、一番最初に目に入ってくるのはどこでしょうか?
殆どの場合、ヘッダー部分ですよね。つまり、ヘッダー部分はかなり重要な要素になります。そこで、今回はFC2ブログのヘッダー部分をカスタマイズしてみたいと思います。

まず、今回修正するかしょは、次のコードです。FC2ブログの「テンプレート管理」画面を表示し、変更したいテーマの「スタイルシート編集」部分から、次のコードを探してみてください。

div#branding {
	width : 760px;						/* 背景画像のサイズを指定する場合は切れないように画像の横サイズを指定して下さい(繰り返し画像の場合は指定する必要ありません)最大値はcontainerで設定した幅までです */
	height : 250px;						/* 背景画像のサイズを指定する場合は切れないように画像の縦サイズを指定して下さい(繰り返し画像の場合は指定する必要ありません) */
	background : url("http://templates.blog.fc2.com/template/sample_2/sample_bk_header.gif") top left no-repeat;		/* サンプル画像760x250 */
}

いま現在のFC2ブログで作ったブログはこの様になっています。
無料ゲーム開発日記

目次
  1. ヘッダーの色や画像について
  2. ヘッダーのサイズについて

ヘッダーの色や画像について

eyecatch_pen

それでは、まずヘッダーの色や画像を変更してみましょう。

ヘッダーの色を変更

まず、ヘッダーの色を変更してみましょう。いま現在、灰色の様な色になっていると思いますが、実はこれは画像です。
なので一度この画像を非表示にして、ヘッダーの背景色を変えてみたいと思います。

背景画像を非表示にするには、background : url();の部分をコメントアウトしてしまいます。

div#branding {
	width : 760px;						/* 背景画像のサイズを指定する場合は切れないように画像の横サイズを指定して下さい(繰り返し画像の場合は指定する必要ありません)最大値はcontainerで設定した幅までです */
	height : 250px;						/* 背景画像のサイズを指定する場合は切れないように画像の縦サイズを指定して下さい(繰り返し画像の場合は指定する必要ありません) */
	/*background : url("http://templates.blog.fc2.com/template/sample_2/sample_bk_header.gif") top left no-repeat;*/		/* サンプル画像760x250 */
}

するとこの様に、背景画像を非表示にすることができます。
無料ゲーム開発日記

では、ここで背景色を変更する命令を入れてみます。
background-colorというのが、今回使用する命令です。実際に変更してみましょう。

div#branding {
	width : 760px;						/* 背景画像のサイズを指定する場合は切れないように画像の横サイズを指定して下さい(繰り返し画像の場合は指定する必要ありません)最大値はcontainerで設定した幅までです */
	height : 250px;						/* 背景画像のサイズを指定する場合は切れないように画像の縦サイズを指定して下さい(繰り返し画像の場合は指定する必要ありません) */
	/*background : url("http://templates.blog.fc2.com/template/sample_2/sample_bk_header.gif") top left no-repeat;*/		/* サンプル画像760x250 */
	background-color : #0ff;	/*これを入力*/
}

これで、ヘッダー部分の背景色を変えることができます。
無料ゲーム開発日記

ヘッダーに画像を表示

続いて、ヘッダーに画像を表示します。ここまでしっかりと記事を読んでくれている方はもうお分かりでしょう。そうですね。最初に背景画像が表示されているのを非表示にしました。

それを復活させて、自分の好きな画像を表示すればいいんだ。

という訳で画像を表示したいのですが、どの様なサイズにすれば良いんでしょうか。実はコードの中にその答えがあるのです。
今回の場合ならば、760×250ですね。勿論これを変更することもできますが、それはまた後ほど。

div#branding {
	width : 760px;						/* 背景画像のサイズを指定する場合は切れないように画像の横サイズを指定して下さい(繰り返し画像の場合は指定する必要ありません)最大値はcontainerで設定した幅までです */
	height : 250px;						/* 背景画像のサイズを指定する場合は切れないように画像の縦サイズを指定して下さい(繰り返し画像の場合は指定する必要ありません) */
	background : url("http://xxxファイルの場所xxx") top left no-repeat;		/* サンプル画像760x250 */ /*これを復活して、好きな画像のURLを貼る。*/
	/*background-color : #0ff;*/	/*これは削除*/
}

以前描いた初音ミクの画像を背景にしてみました。
無料ゲーム開発日記

ヘッダーのサイズについて

ヘッダーのサイズは、サイトのカスタマイズにおいて、案外難しい問題です。ヘッダーのサイズがある程度大きい場合、そこに画像を使うことによって、サイトを美しく見せることができる反面、新着記事などの情報が下へ行ってしまうので、見る側は画面をスクロールさせてその情報を見ることになります。

ならば、ヘッダーサイズが小さくても美しく見えるサイトを作ればいい。それがRの考え方です。なので今回は、ヘッダーを小さく作っていこうと思います。

ヘッダーサイズを変更する。

width : 760px;と、height : 250px;が、ヘッダー部分のサイズとなります。じゃあ、この部分を変更すれば、ヘッダーサイズが変わるのか……。確かに変わります。しかし、まだ上手くいかないのが現状でございます。

よく考えてみてください。CSSにはまだ、サイト全体のレイアウトをしている部分があります。ヘッダー部分のサイズのみを変更したところで、全体のレイアウトを変更しなければ、レイアウトが崩れてしまうのです。
なので今回は、width : 760px;と、height : 250px;でヘッダーのサイズを変更できるんだということだけ覚えていてください。

なので今回は、レイアウトが崩れないようにヘッダーサイズを変更してみましょう。ヘッダーの高さを低くするだけであれば、レイアウトには何の影響も及ぼしません。
では実際に変更してみたいと思います。

div#branding {
	width : 760px;						/* 背景画像のサイズを指定する場合は切れないように画像の横サイズを指定して下さい(繰り返し画像の場合は指定する必要ありません)最大値はcontainerで設定した幅までです */
	height : 120px;						/* 背景画像のサイズを指定する場合は切れないように画像の縦サイズを指定して下さい(繰り返し画像の場合は指定する必要ありません) */ /*この部分のサイズを120pxに変更。*/
	background : url("http://xxxファイルの場所xxx") top left no-repeat;		/* サンプル画像760x250 */
	/*background-color : #0ff;*/
}

ヘッダーを低くすることで記事が読まれやすくなり、画像を目の下で切ってしまうことにより、新たなカッコよさが生まれましたね。……生まれたと言って欲しい。
無料ゲーム開発日記

スポンサードリンク

関連コンテンツ

オススメ記事

メインループを作ってみよう!

【JavaScript】ゲームのメインループを作ってみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 突然《とつぜん》ですが、ゲーム開発《かいはつ》の基本として大切なことってなんだっ

Scratchで じゃんけんゲームを作ろう!

Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門

こんにちは! 今日(きょう)もプログラミングのお勉強(べんきょう)をはじめていきますよ! 前回の「Scratchの使い方と、ゲーム作りの基礎知識を学ぼう!」では、Scratch(スクラッチ)っ

Dockerでよく使うコマンドとオプション、その使い方を徹底解説!

人生に意味は求めない。それよりもDockerのコマンドの意味を理解する方が重要です。@It_is_Rです。 Dockerにはたくさんのコマンドがありますが、まずはよく使うコマンドを覚えていきまし

JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方

みなさんこんにちは。今日も楽しくプログラミングを学んでいきましょう! これまでの講座《こうざ》で、JavaScript《ジャバスクリプト》によるゲーム開発《かいはつ》の方法が、なんとなくでも分

Scratchでピアノを 作ってみよう!

Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門

今回も、小学生からのScratch《スクラッチ》入門、はじめていきます。 前回、「Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門」では、Scratchを使ってシ

wordpress

WordPress管理画面のテーマカスタマイザーに独自の項目を追加。

WordPressみたいに私自身の人生もカスタムできたらいいのに。@It_is_Rです。 WordPressのカスタマイズは、公開しているサイトだけではありません。 管理画面をカスタマイズする

【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!

Bootstrap4の使い方、第4回目となりました。 サイトを作っていると必然的に必要になるのがパンくずリストです。 パンくずリストは、サイト訪問者が今どのページにいるのかということを分かりや

HTML CSS

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

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

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

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

webpackを使ってゲームエンジンを作ろう!(JSライブラリの作り方)

みなさんこんにちは。今回もたのしくプログラミングを学んでいきましょう! 前回の「JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方」では、JavaScriptでゲームエンジ

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

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