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

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

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。
FC2ブログ”最強”カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。

今回は背景色の変更をメインにカスタマイズしていきたいと思います。

カスタマイズに必要不可欠なのが、HTMLとCSSです。しかし、この講座ではHTMLやCSSが分からない人でも簡単にカスタマイズできるように、コピペのみでカスタマイズできるようにしていこうと思います。
そして、コツコツとカスタマイズを続けていくことによって、最強にカスタマイズすることができます。

目次
  1. 前回までの流れ
  2. ブログの背景の模様を変更する。
  3. ブログの背景を一色に染める。

前回までの流れ

この記事は、FC2ブログ ”最強” カスタマイズ入門講座。【準備編】の続きとなっております。

前回、FC2ブログカスタマイズを行うための、準備を行いました。
あなたのブログも準備ばっちりなはずです。

ちなみに、こちらが前回用意した「sample_2」というテンプレートです。

無料ゲーム開発日記
FC2画像

それでは始めていきましょう。

ブログの背景の模様を変更する。

まずはブログの背景を、別の画像に置き換える方法をご紹介します。

背景の画像をアップロードする。

背景を変更するには、新しく背景にするための画像が必要です。まずはその画像をアップロードしてみましょう。
今回使用したのは、ただ丸を描いただけの画像です。

背景
背景

この画像をFC2のサーバーにアップロードします。
画面左側にある「ホーム」から、「ファイルアップロード」を選択します。

ホーム
FC2画像

すると、次のような画面が表示されます。そこから、「ファイル選択」をクリックし、用意した背景画像を選択します。

FC2画像
FC2画像

タイトルを入力しましょう。アルバムには追加する必要もないかと思い、チェックを外しました。
また、サムネイルも同様に必要ないと思うので、チェックを外します。さあ、そしてアップロードをクリックです。

FC2画像
FC2画像

ダイアログが表示されたら、OKをクリックしてアップロード完了です。

では、アップロードされたファイルを確認してみましょう。
そのまま画面を下にスクロールさせると、「ファイル一覧」があります。

FC2画像
FC2画像

四角に囲まれた、http://blog-imgs……というのが、その画像がある場所となります。
これをコピーしておきましょう。

CSSを書き換えて、ブログの背景を変更する。

では、「テンプレート管理」のあるページを開いてください。
開き方は前回の通り、FC2ブログ の「設定」から「テンプレートの設定」を選択します。

設定
FC2画像

ページが開けたら、「PCテンプレート」の項目から、「sample_2」を探し、そのテンプレートの「編集」をクリックします。

FC2
FC2

では背景を表示させているタグを変更して、ブログの背景を変更してみましょう。
「sample_2 のスタイルシート編集」という部分の中から、次のコードを探してみてください。

color : #333;													/* 文字の色 */
background : url("http://blog-imgs-77.fc2.com/f/r/e/freeoriginalgame/background.jpg") top left repeat;		/* 背景画像を繰り返し表示 */
background-color : #fff;											/* 背景の色 */

このなかの、「background : url(“http://blog-imgs-77.fc2.com/f/r/e/freeoriginalgame/background.jpg”) top left repeat;」というコードは、背景に使用している画像をいくつもならべて表示する命令です。なので、ブログの背景全体に斜め線が表示されているのですね。

ではこの画像のURLを先ほどコピーしたものに書き換えましょう。

color : #333;													/* 文字の色 */
background : url("ここに先ほどコピーしたURLを貼り付け") top left repeat;						/* 背景画像を繰り返し表示 */
background-color : #fff;											/* 背景の色 */

これで、ブログの背景色を変更することができました。実際にプレビューで確認してみます。

FC2画像
FC2画像

ブログの背景を一色に染める。

画像はあまり使いたくない。。。背景は一色がいい。
そんなあなたにとっておきな方法があります。

背景に画像を表示するソースを削除する

今回はとても簡単です。なんと、背景に画像を表示するソースを削除するだけで、背景を一色にすることができるのです。
では、「sample_2 のスタイルシート編集」という部分から、先ほどのコードを探します。

color : #333;													/* 文字の色 */
background : url("http://blog-imgs-77.fc2.com/f/r/e/freeoriginalgame/background.jpg") top left repeat;		/* 背景画像を繰り返し表示 */
background-color : #fff;											/* 背景の色 */

では、背景に画像を表示するソースを削除します。
background : url(“http://blog-imgs-77.fc2.com/f/r/e/freeoriginalgame/background.jpg”) top left repeat;がそのソースなので、これを削除するだけです。

color : #333;													/* 文字の色 */
background-color : #fff;											/* 背景の色 */

すると、背景が真っ白に変わります。

FC2画像
FC2画像

背景の色を変える

中には背景に色をつけたい人もいるでしょう。では、背景の色を変えてみましょう。
先ほど削除した残りのソースがありましたね。このソースの中に、背景の色をしていするソースが含まれています。

それがbackground-color : #fff;です。
この、#fffというのが、色を表しています。

ここで大切なのが、光の三原色と、16進数です。
光の三原色を知っていますか?RGBです。

R:レッド
G:グリーン
B:ブルー

この三色で様々な色が作られています。
#fffの、3つのfがそれぞれRGBの色を表しています。

では、fは一体何なのでしょうか。このfは16進数のfなのです。
16進数は、16になった時に桁が一つ上がります。

1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,10,11,12,13,14,15,16,17,18,19,1A,1B,!C,!D,!E,!F,20………
という感じで進みます。つまり、16進数のfは、10進数でいう15のことになります。

今回は色作りについてはあまり深く解説しませんが、これが基本となります。

とりあえず、背景を青色にしたいので、RGBのBのみをfにしたいと思います。

color : #333;													/* 文字の色 */
background-color : #00f;											/* 背景の色 */
FC2画像
FC2画像

まとめ

以上、FC2ブログの背景を変更する方法でした。いかがでしたでしょうか。
CSSはHTMLで作ったページのレイアウトなどを簡単に変更することができます。

これから先、FC2ブログカスタマイズでは、CSSをメインに変更していくことになると思います。
では、またコツコツとカスタマイズしていきましょう。

ではまた。

スポンサードリンク

関連コンテンツ

オススメ記事

今月の残り日数を計算するべ!

JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門

さて、小学生からのJavaScript《ジャバスクリプト》入門、第2回目のはじまりです。今回は、JavaScriptでの演算(えんざん)の方法を学び、今月の残《のこ》り日数を計算してみましょう。

【Android Studio】じゃんけんゲームの作り方(アプリ開発の基本)

限りなくじゃんけんが弱い@It_is_Rです。 Androidアプリ開発、11回目となりました。 そろそろ何かアプリを作ってみたいですよね。基本は大事ですが、一番つまらないですね。 そこで今回は、

これまでのプログラム全体をクラスを使って作るべ!

【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、今回もはじめていきましょう! 前回はプログラミングにおける、クラスの使い方を学びました。しかし、まだクラスをどうやって使えばいいのか、ピンときていない

homebrew

Homebrewのインストール方法を分かりやすく解説(M1 Macも対応)

みなさんこんにちは。@It_is_Rです。 Homebrewは、Mac、Linuxで使うことができる、パッケージマネージャというものです。パッケージマネージャを使うことで、ソフトウェアのインス

【絶対できる!】Unityでの2Dノベルゲームの作り方を詳しく解説

人魚との触れ合いを描いた小説、「ELENA 人魚と過ごした時間」のゲーム化を目指し、日々コツコツと開発を進めているのですが、もう少し時間がかかりそうです。 さて、そんなわけで、今回はUnity

【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方

Bootstrap4の使い方、第7回目です。 トップページなどを見ると、記事の一部が抜粋された記事一覧が表示されているサイトをよく見かけます。 今回はそんな記事一覧ページを作るのに便利な「カード」と

カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!

笑いたい時に笑えず、笑っちゃいけない時に笑えてくる@It_is_Rです。 今回はカスタムロゴの使い方を紹介したいと思います。 このシリーズの前回の記事はこちらです。 【 WordPres

【enchant.js入門】ガンシューティングゲームの作り方を完全解説!

enchant.jsを使ってガンシューティングゲームの開発を行なっていきます。 enchant.jsはゲームを作るのに特化したJavaScriptフレームワークです。 これを使うことで、Jav

【Android Studio】開発したアプリの実機テストを行う方法。

どうも、頭がすっからかんの@It_is_Rです。 やかましいわ。 今回は Android Studio で実機テストする方法を紹介します。 これからアプリ開発をしていく上で必要不可欠な実機テストです

【初心者向けJavaScrip入門】変数を使いこなすための、かなり詳しい解説

変数は、数値や文字列などのデータを入れておける箱です。プログラミングをはじめて、最初のほうで覚えるものですが、変数は意外と奥が深いものです。 そこで今回は、JavaScriptにおける変数の使

コメントを残す(コメントは承認後に反映されます)

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