BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» gooブログカスタマイズ 背景画像を設定する方法

このエントリーをはてなブックマークに追加

gooブログカスタマイズ 背景画像を設定する方法

   投稿日: 2017/07/06    投稿者:webコラム

57cf52b30af5dc39c7b9ce4b2238f1e5_s.jpg


こんにちは! ライターのモモタロウです。

今回は、gooブログカスタマイズ 背景画像を設定する方法をお伝えします。

gooブログの背景画像を設定するには?


まずは、gooブログにログインします。

http://blog.goo.ne.jp/
上のURLにアクセスして新規登録も可能です。

背景画像を設定する前に、ブログのコンテンツに合ったテンプレートを設定しよう。

gooブログテンプレートを設定するには?


20170618-0-1-1-1.jpg


gooブログにログイン後、上の画像の四角く囲った部分「テンプレート選択」を
クリックします。


20170618-0.jpg

今回は、「クリアピンク右」を設定します。

上の画像にある四角で囲ったテンプレートです。

※ただし、「クリアピンク右」の右にある「クリアピンク左右」では、背景画像を設定できません。
また、「CSS編集」が不可のテンプレートもあるので選ぶときは気をつけよう。


「テンプレートを変更する」ボタンをクリックして、テンプレートを設定したら、次に背景にする画像をアップロードします。

画像をアップロードするには?

20170618-3.jpg


上の画像のように「画像フォルダ」をクリックして、画像フォルダ画面に移ります。

「画像を選択してアップロード」をクリックアップしたい画像を選択します。


da9ef6124dbdce33b8d68ee2492c7e20_s.jpg
今回は上の画像をアップします。



20170618-4.jpg


画像がアップできたら、次にURLをコピーします。



20170618-6.jpg

画像フォルダページに表示された画像にあるタグをコピーします。上の画像の四角で囲った部分です。

<img src="http://blogimg.goo.ne.jp/user_image/57/f5/d65dd532ad57fd7de8dc8d1b25285490.jpg">
上記URLをコピーしておきます。

これで、背景画像を変更する準備が整いました。

次に、テンプレート編集画面に移ります。
20170618-0-1-1.jpg


「CSSデータ」の部分で下記のタグを探します。

/* ページ全体の背景と余白 */
body {
 background-image: url();
 background-repeat: ;
 background-position: ;
 margin:0px;
 padding:0px;
 background-color:#F3EAF7;
 }



20170618-2.jpg

上の画像の下線が引いてある部分 background-image: url() に先ほどコピーしたURLを不要な部分は削除してペーストします。

background-image: url(http://blogimg.goo.ne.jp/user_image/57/f5/d65dd532ad57fd7de8dc8d1b25285490.jpg)


20170618-7.jpg

編集後のCSSは、上の画像の通りです。

プレビューボタンをクリックすると・・・


20170618-8.jpg

まとめ


いかがでしたか?

今回はgooブログにオリジナルの背景画像を設定することができました。

今後もgooブログでさまざまなカスタマイズを試してみよう。 goo

カテゴリ:

TOPへ