最新デザインでヘッダー画像を設置する方法

こんにちは、パソコンインストラクターの川上雄大です。

アメブロをされている方向けですが、

パソコン版のアメブロの上部に表示されるヘッダー画像を設置する方法を、このように書いています↓

（CSS編集用デザインを選択している場合の方法です→『CSS編集用デザインってどこにあるのですか？』

『ヘッダー画像に文字を埋め込んだ場合のタイトルや説明文を非表示にする方法（CSS）』

ただし、このCSSコードは最新のCSS編集用デザインではなくて、新デザイン（ひとつ前のデザイン）のCSS編集用デザインでのものです。

そこで、今回は最新のCSS編集用デザインでのヘッダー画像の設置方法をお伝えしますね。

まず、最新のデザインのサイズは横幅が1120pxとなっています。

高さはご自由に。

ワタクシ、2016/5/16から新しく別ブログを立ち上げまして･･･

（こっそりと立ち上げたつもりだったのですが、すでに発見されてしまいました･･･汗）

そちらで最新デザインを試していたりしています。

まず、1120px×300pxのヘッダー画像をPNGファイルで作成します。

（作成の方法は→『エクセル（Excel）でヘッダー画像を作るには』など）

例えば、私はこんなヘッダー画像を作ってみました↓

（舛岡美寿子さんに撮っていただいた写真を使わせていただいております。）

この画像を、「ブログデザインのCSSの編集」でアップロードします。

そして、「画像のパス（画像url）」を取得します。

そして、下側にあるCSSの欄の最後（下）に、このCSSをコピペします。

/* ヘッダー画像の設置 */
.skin-bgHeader {
background: no-repeat scroll center;
background-color:#FFFFFF;
background-image: url(画像のパス);
}
/* ヘッダーの横幅の設定 */
.skin-bgHeader [data-uranus-layout="headerInner"] {
width:1120px;
}
/* ヘッダーの高さの設定 */
.skin-bgHeader [data-uranus-layout="headerInner"]>a {
height:300px;
}
/* ブログタイトルと説明文の非表示 */
.skin-headerTitle {
display: none;
}