Cafi Netつながる情報技術
  1. トップ>
  2. アメブロカスタマイズ>
  3. CSS編集用デザイン

CSS編集用デザインでヘッダー画像を設置

2011年7月末にリリースされた「CSS編集用デザイン」のカスタマイズです。

CSS 編集用デザインを適用

アメーバブログへログイン/ブログを書く/デザインの変更/カスタム可能へと進み、カスタム可能デザインの一覧から CSS 編集用デザインを表示します。

カラムを選択して、適用するをクリックします。

カラムは真ん中の「3カラム・右ワイドメニュー」を選択しました。

ブログデザイン適用完了の画面から、CSS の編集をするへと進みます。

現在使用中のブログデザイン CSS

現在使用中のブログデザイン CSS が表示されます。

CSS(スタイルシート)の編集を行います。

オリジナルのヘッダー画像を設置

ヘッダー画像のパス

幅 980px のオリジナルのヘッダー画像を作成します。高さは 300px にしました。(ヘッダーの幅は 980px です)

幅 980px 高さ 300px のヘッダー画像を、ブログデザインヘッダ・背景用画像の追加からアップロードします。(現在使用中のブログデザイン CSS のすぐ上にあります)

現在使用中のブログデザイン CSS を、以下のように編集します。

変更前の CSS コード

/* (3-2) ブログヘッダー
--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */

変更箇所は、「Ctrl + F」でブラウザ検索すると素早く発見できます。

変更後の CSS コード(赤字が編集部分です)

/* (3-2) ブログヘッダー
--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background-image: url(ヘッダー画像のパスを貼り付けてください);
height: 300px;

}

「ヘッダー画像のパスを貼り付けてください」の文字を「この画像のパス」に変更します。

この画象のパスを、コピー&ペーストして下さい。

「height: 300px;」は、ヘッダー画像の高さの指定です。(例えばヘッダー画像の高さが 200px の場合は、200px と指定してください)

/* ~ */ の部分は、CSS のコメント(説明)です。複数人で編集する場合など、コメントがあると編集が簡単になります。

アメブロの「現在使用中のブログデザイン CSS」にも、コメントが多く記載されているのでカスタマイズのヒントになります。

変更後の CSS コードでは「/* ブログヘッダーに背景画像を敷きたいとき */」を無くしていますが、このようにコメントは消しても構いません。

表示を確認すると保存ボタン

表示を確認するを選択すると、プレビューが表示されます。

保存を選択すると、編集した CSS が保存されます。

ブログデザインは、一度違うデザインを設定するとリセットされます。

つまり別のテンプレートを設定すると、編集中の CSS は編集前に戻ります。

CSS の編集内容を保存しておきたい場合は、現在使用中のブログデザイン CSS を Ctrl キー+ A ですべて選択します。(右クリックから、すべて選択でも構いません)

選択した CSS はコピーしてメモ帳へ貼り付けます。

メモ帳に CSS を保存しておけばバックアップとして利用できますし、いつでも編集をやり直すことができます。

他のブログデザインを適用した後でも、続けて編集を行うことができます。