MENU
  • 無料レッスンLesson
  • プロフィールprofile
  • サービスService
    • パソコン苦手でも大丈夫!
      ホームページ作成個人レッスン
    • 起業女性に寄りそうWEBお悩み相談
  • 実績・お客さまの声portfolio
  • ブログblog
  • お問合せcontact

    カテゴリー

    • Web・SNS集客
    • Web系プログラミング
    • WordPressプログラミング
    • フリーランスの小技
    • Web活用相談
    • はじめてのWordPress
    • アメブロカスタマイズ
    • ホームページ制作
    • 自分で作れるおしゃれデザイン
    • アイデア・思考の整理

    タグ

    Adobe IllustratorGatsby.jsgitGitHubHTML/CSSMySQLNode.jsPythonSourcetreeSWELLWordPressおすすめWPプラグインおすすめツールアメブロエックスサーバーサーチコンソールセキュリティバレットジャーナルライブドアブログ環境構築確定申告開発環境

    アーカイブ

    • 2023年1月
    • 2022年12月
    • 2022年11月
    • 2022年8月
    • 2022年4月
    • 2022年3月
    • 2022年2月
    • 2022年1月
    • 2021年12月
    • 2021年11月
    • 2021年10月
    • 2021年9月
    • 2021年8月
    • 2020年10月
    • 2020年8月
    • 2020年7月
    • 2020年6月
    • 2020年5月
    • 2020年4月
    • 2020年3月
    • 2020年1月
    • 2019年11月
    • 2019年9月
    • 2019年8月
    • 2019年5月
    • 2019年2月
    • 2019年1月
    • 2018年11月
    • 2018年9月
    • 2018年8月
    • 2018年7月
    • 2018年6月
    • 2017年10月
    • 2017年9月
    • 2017年7月
    個人事業主・女性起業家のためのWordPress・HP・ブログレッスン
    自分で作れる優しいホームページ作成・個人レッスン 中谷恵美
    • 無料レッスンLesson
    • プロフィールprofile
    • サービスService
      • パソコン苦手でも大丈夫!
        ホームページ作成個人レッスン
      • 起業女性に寄りそうWEBお悩み相談
    • 実績・お客さまの声portfolio
    • ブログblog
    • お問合せcontact
    自分で作れる優しいホームページ作成・個人レッスン 中谷恵美
    • 無料レッスンLesson
    • プロフィールprofile
    • サービスService
      • パソコン苦手でも大丈夫!
        ホームページ作成個人レッスン
      • 起業女性に寄りそうWEBお悩み相談
    • 実績・お客さまの声portfolio
    • ブログblog
    • お問合せcontact
    1. ホーム
    2. アメブロカスタマイズ
    3. 【アメブロ】背景色・画像を変えてみよう!

    【アメブロ】背景色・画像を変えてみよう!

    2022 12/19
    アメブロカスタマイズ
    2022-11-25 2022-12-19

    今回は、アメブロに背景の画像や色を設定する方法をご紹介します。

    背景に色が入ると、ヘッダー画像と合わせてブログ全体のデザインに統一感を出すことができます。

    この記事でわかること

    1.ページ全体に背景色を設定する
    2.ページ全体に背景画像を設定する
    3.(応用編)その他のパーツの背景色を変更する

    ※わかりやすくするために、前回設定したヘッダー画像は消しておきます

    目次

    動画で解説

    YouTube
    【アメブロ】背景色・画像を変えてみよう! 自分でできるアメブロカスタマイズ。背景色・背景画像の設定方法の解説です。HP:https://0forest.com/今回、背景画像が馴染みすぎて、変化がわかりにくいかもしれません💦...

    1.ページ全体に背景色を設定する方法

    管理画面→デザインの変更

    CSSの編集をクリックします。

    アメブロ背景色の変更
    CSS編集用デザインを使ってね

    アメブロのデザインをカスタマイズするときは、「CSS編集用デザイン」を使ってください。それ以外のデザインだと細かいカスタマイズができません。

    CSS編集用デザインの設定方法はこちらの記事で解説しています。

    あわせて読みたい
    自分でできる。アメブロのおしゃれなカスタマイズまとめ アメブロを、おしゃれにカスタマイズしたい! この記事では、アメブロのデザインをおしゃれにカスタマイズする方法を解説しています。 テンプレートそのままではなく、…

    背景色は入力欄の中で2カ所修正する箇所があります。

    アメブロの背景色を設定する方法

    ①ヘッダー下の背景色を設定

    まず、「(1-2) 基本背景」の下のbackground-colorの「#ffffff」を好きな色コードに変更します。

    アメブロ背景色の変更
    /* (1-2) 基本背景
    --------------------------------------------*/
    /* コンテンツ背景、ヘッダー以下の背景色 */
    .skin-blogBody, .skin-blogBodyInner {
    background-color: #ffffff;
    }
    コードの意味

    background-colorが、背景色を設定するコードになります。

    #ffffffは白を意味する色コードです。


    色のコードは以下の配色大辞典から選んでみてくださいね。

    原色大辞典
    WEB色見本 原色大辞典 – HTMLカラーコード 色の名前とカラーコードが一目でわかるWEB色見本

    変更できたら下の「保存する」をクリック。

    これでメニューバーの下にあるコンテンツエリアの背景色が変わります。

    アメブロの背景色を変更

    ②ヘッダーより上のエリアの色を設定する

    続いて、「(2-1) ヘッダー背景」の下のbackground-colorの「#ffffff」を好きな色コードに変更します。

    アメブロの背景色を変更
    /* ヘッダー背景 */
    .skin-bgHeader {
       background-color: #ffffff;
    }

    既にヘッダー画像を設定している場合は変更しなくても大丈夫です。

    ※背景色は指定しても、画像で上書きされます。(画像が表示されてない時のみ、背景色が見える形です)

    変更できたらしたの「保存する」をクリック。

    これでメニューバーの上にあるエリアの背景色が変わります。

    アメブロの背景色を変更

    2.ページ全体に背景画像を設定する

    では背景画像を設定します。

    ページ上の背景を画像の追加から背景画像のファイルを選択して、アップロードします。

    アメブロ背景画像の設定

    画像を選択したらアップロードボタンをおしてください。

    アメブロ背景画像の設定

    背景画像がアップロードされたところ。

    CSSの入力エリアに下記のように
    「background-image:url(画像へのパス);」というコードを追加します。

    アメブロ背景画像の設定
    /* (1-2) 基本背景
    --------------------------------------------*/
    /* コンテンツ背景、ヘッダー以下の背景色 */
    .skin-blogBody, .skin-blogBodyInner {
    background-color: #ffffff;
    background-image:url(画像へのパス);
    }

    ※背景色は指定しても、画像で上書きされます。(画像が表示されてない時のみ、背景色が見える形です)

    画像へのパスには上で追加した背景を画像のURLを貼り付けてください。

    アメブロ背景画像の設定

    画像のパスを設定できたら、保存ボタンをおします。

    ヘッダー下のエリアに背景画像が設定されました

    ヘッダーエリアを背景画像にするには?

    (2-1) ヘッダー背景のところに、同じようにコードを追加すると設定できます。(ほぼヘッダー画像を設定することの方が多いと思うので割愛します)

    /* ヘッダー背景 */
    .skin-bgHeader {
      background-color: #ffffff;
      background-image:url(画像へのパス);
    }

    応用編:いろんなパーツの背景色を変更する方法

    ここまでご紹介してきたやり方で、
    ページ全体だけでなく、いろんな箇所の背景色を変えることができます。

    Google Chromeを例に変更箇所の確認方法を説明します。

    色を変えたい箇所をクリックして、右クリックしてみて下さい。
    そして検証を押します。


    そうすると、デバッグモードと言われるWEBの設定が確認できる画面が開きます。

    右上の「要素を検査する」ボタンをクリックする来て色を変えたいパーツを選びます。

    そうすると右に、その部分のスタイルを設定しているコードが選択されます。
    上下にマウスを動かすと、選択箇所が変わるので、background-colorのコードを見つけましょう。

    背景色を指定しているスタイルの名前(ここでは「skin-timelineDate」)をコピーします。

    cssの入力欄でそのスタイルが設定されている場所を検索します。

    その色コードを修正して保存します。

    このように気になる箇所の色を調べて行動修正するを繰り返すとデザイン全体の色を自由に変えることができます。

    まとめ

    いかがでしたか?

    背景色や背景画像を設定して、ブログに統一感をだしてあげてくださいね!

    アメブロ背景色の設定

    その他にもアメブロカスタマイズの方法をご紹介しています!

    あわせて読みたい
    自分でできる。アメブロのおしゃれなカスタマイズまとめ アメブロを、おしゃれにカスタマイズしたい! この記事では、アメブロのデザインをおしゃれにカスタマイズする方法を解説しています。 テンプレートそのままではなく、…
    「もっとカスタマイズしたい・プロにお願いしたい」場合は?

    「ブログを自分好みのデザインにしたい!」
    「自分でも、ブログを使いこなせるようになりたい」
    そんな方は、お一人お一人のご希望に合わせてお答えできる 個人相談 をご利用ください。

    無料ブログサービスは、アメブロ、はてなブログ、ライブドアブログに対応できます^^

    ご自身の世界観をもっと表現したい方はWordPressがおすすめ。
    ホームページを始める個人レッスンもあります♪

    アメブロカスタマイズ
    アメブロ HTML/CSS
    よかったらシェアしてね!
    中谷恵美
    あなたのお仕事を育てるホームページの先生
    システムエンジニア、ITコンサルタントを経て、フリーランスに。

    ・ホームページ作成
    ・ブログのカスタマイズ
    ・LINEやメルマガのセットアップ
    ・Canvaを使ったデザインの作り方
    ・Googleの分析ツール
    ・自分の強みを生かした集客
    などの、個人レッスンをしています。

    「仕事の発信に使えるようになりたい」
    「自分でも使えるスキルを身につけたい」
    ITが苦手な個人事業主さんに向けて、困ったときのWEB担当として幅広くサポートしています。

    HP作成のほかにも、心理カウンセラーとしても活動中。

    趣味は、文房具集め、ゲーム(牧場系とモンハン)、手芸(刺繍、洋裁)。
    運動が苦手で体が硬いのが悩み。今年、腰痛改善にジムに通い始めたが、果たして続くのか。。。
    詳しいプロフィールを見る

    メルマガバナー

    活動実績

    【HP個人レッスン】

    ●ハワイアン伝統ロミロミサロン・Aさま
    ・2ヶ月でサロンのHPをリニューアル。新サービス立上げ時も自分でHPを作成できるように。
    「最初はパソコン音痴の私にできるか不安でしたが、とても丁寧な指導でわかりやすかったです。
    私好みの素敵なHPができあがり、とっても嬉しいです!」

    ●Mさま
    ・2回のミーティングでWordPress運営スキルを習得。オウンメディアを立上げ。

    ●Sさま
    ・5日間で無料ブログからWordPressへのお引越し。
    「半ば諦めかけていた移管を短期間で終えることが出来ました」

    【ホームページ作成】

    ●これまでご依頼いただいたお客さま
    (個人)写真家・サロン・カウンセラー・占い師

    (法人)メーカー代理販売店、コンサルティング企業、人事支援企業

    【経歴・資格など】
    ・基本情報技術者
    ・簿記2級

    【営業時間】平日:10:00~19:00
    【休業日】土、日、祝、年末年始

     

    新着記事
    • 個人事業主のお仕事ブログには、独自ドメインを使おう!
      2023-01-27
      Web・SNS集客
    • WordPressテーマの選び方〜おすすめ有料・無料テーマ〜
      2023-01-13
      はじめてのWordPress
    • 【アメブロ】記事に定型文をいれる方法
      2022-12-30
      アメブロカスタマイズ
    • 【アメブロ】メッセージボードをおしゃれにカスタマイズ!
      2022-12-23
      アメブロカスタマイズ
    • ブログで使えるタイトル付き囲み枠のCSS
      2022-12-21
      アメブロカスタマイズ
    人気記事
    • 【Mac】SourcetreeからGitHubへSSH接続する
      2021-08-05
      Web系プログラミング
    • 【CSSコピペOK】おしゃれな引用blockquoteデザイン10選
      2018-09-13
      WordPressプログラミング
    • Node.js+ExpressでMySQLに接続して一覧表示する
      2020-04-25
      Web系プログラミング
    • CSSとJavaScriptで作るハンバーガーメニュー
      2020-07-25
      Web系プログラミング
    • 【CSS】シンプルで女性らしい囲み枠デザイン48選
      2018-08-24
      アメブロカスタマイズ
    目次