BLOG CATEGORY

Monthly Archives

長フチコンテンツ

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

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

gooブログカスタマイズ ブログ記事の背景を変更する方法

   投稿日: 2017/08/17    投稿者:webコラム

88f82960a109cbc2da2497c69946a2f2_s.jpg

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

今回は、gooブログカスタマイズ ブログ記事本文の背景を変更する方法をお伝えします。

今回は、トップの画像を下の画像にあるブログ本文の背景に設定してみます。
20170723-1.jpg

gooブログに画像をアップロードしよう


まずは、設定する画像をアップロードします。

gooブログにログインしたら、

メニューバーにある「画像フォルダ」から、画像をアップロードします。

その後、画像フォルダにある貼り付け用のタグをコピーしておきます。



20170723-3.jpg


上の画像の四角で囲った部分をコピーしておきます。

ブログ記事の背景を変えるには?


メニューバーで、テンプレート編集をクリックします。

データ編集画面で「CSSデータ」を編集しよう。

下の記述を見つけ出します。
20170723-2.jpg
/* エントリー本文背景 */
.entryBg{
 padding: 15px;
 background-color: #FFF0F0;
 margin:0px 0px 10px 0px;
}

ここに、
 background-image: url();
―を挿入します。
 background-color: #FFF0F0; の下に挿入してみよう。

/* エントリー本文背景 */
.entryBg{
 padding: 15px;
 background-color: #FFF0F0;
 background-image: url();
 margin:0px 0px 10px 0px;
}

http://blogimg.goo.ne.jp/user_image/7d/91/cb03d8203dc75dbe1cb816b951c9ae65.jpg

先ほどコピーした画像URLを不要な部分を除いて、
background-image: url(); のカッコ内にペーストします。

/* エントリー本文背景 */
.entryBg{
 padding: 15px;
 background-color: #FFF0F0;
 background-image: url(http://blogimg.goo.ne.jp/user_image/7d/91/cb03d8203dc75dbe1cb816b951c9ae65.jpg);
 margin:0px 0px 10px 0px;
}

20170723-4.jpg
上のようになります。


その後、「プレビュー」ボタンをクリックすると・・・

20170723-5.jpg


本文が長いと、さらに背景画像が追加された形になるので試してみよう。

以下の通りです。
20170723-6.jpg


まとめ


いかがでしたか。今回は本文中の背景画像を設定してみました。

作成したgooブログをさらにブラッシュアップしてみて下さいね。




カテゴリ:

TOPへ