アメブロでデザイン変更をしてみる

この記事を読むのに必要な時間は約 13 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

アメブロで記事は書いているが、デザインを変更したいけど思うように変更できないという方は、少なくないはず
ただ、そのデザイン変更はパソコンでの表示だけでスマホでの表示ではありません。
今回は、デザインの変更方法とその際に気をつけておくべきことと知っておくべきことについて解説します。
アメブロでデザイン変更したい方は、是非覚えていただければと思います。

目　次

デザイン変更する前に知っておくべきこと
用意しておくもの
デザインの選択
スタイルシートを変更する方法
デザイン変更を確認してみる

デザイン変更する前に知っておくべきこと

アメブロのデザインを変更する前に知っておいていただきたい部分

デザイン変更は、スマホの画面では反映しないこと
スマホでは、ヘッダーやグローバルメニュー・サイドバーなどは一切表示されないこと
変更したら以前のスタイルシートはすべて初期設定に戻る
ヘッダー画像の高さは変更可能です
カスタム可能な「CSS編集用デザイン」は、複数あってそれぞれスタイルシートの順番が違う

デザインの変更をする前に上記の５つを知ってからはじめる必要があります。
この変更には、スタイルシートに関する知識が必要になります。
完全な知識でなくても基本的な知識があれば何とかなります。
難しい部分は、コピペでも変更できたりします。

用意しておくもの

くまはちLABのアメブロで使っているヘッダー画像が上記３つでスライダーになってます。
ヘッダー画像を用意しておく必要があります。
画像のサイズは、使用するデザインによって違うかもしれませんが、くまはちLABで利用している「CSS編集用デザイン」では980px X 300pxが初期設定で設定されていました。
横幅の980pxは、変更した事ないですが高さの300pxは変更したこともあり、変更が可能で400pxや500pxでもOKなようです。
グローバルメニューを設置したい方は、同じように用意しておく必要がありますね
下記のページでソースは簡単に作成可能ですが・・・

WEB How to くまはちLAB

https://wp908.com/globalmenu.html

WordPressが得意な神戸のWEB屋さん

wp908.com（このサイト内）

ヘッダー画像とグローバルメニューそしてリンク先のサイトについて用意しておく必要があるというわけですね

デザインの選択

管理画面TOPより左のメニューの「デザインの変更」をクリックして下までスクロールして「他のカテゴリーからブログデザインを探す」の中で「カスタム可能」をクリックして開くと上記画像の画面になります。
ここで選択するブログデザインは、「CSS編集デザイン」を選択します。
画像の右側で赤枠で囲んだいずれかのデザインを選択します。

カラムを選択する

カラムを設定したら「適用」ボタンをクリックして決定します。
3カラムの方が多いのですが、おすすめは2カラムです。
サイドバーは、最初に書いた通りスマホでは表示されない部分なので記事の部分を表示するスペースが２カラムの方が広くなるからです。

ヘッダー画像をアップロードする

ヘッダー画像は、通常の記事と別の場所に画像をアップロードしておかないといけないのです。
上記画像の場所は、デザインの変更を開いた画面です。
「CSSの編集」を開いて上部にアップロードしておく場所があります。

上記画像の場所にアップロードしておきます。
アップロードされると下に画像のアドレスが表示されるので次のスタイルシートを変更する方法で設定を覚えてください。

スタイルシートを変更する方法

先ほどのヘッダー画像をアップロードしておくところをスクロールすると上記画像のブログデザインCSSの場所になります。
ここを編集する前に先に中身をメモ帳などにコピペしてバックアップを作ってから編集するようにしてくださいね。
触ったところを覚えていればいいですが、覚えてないとうまくいかない場合に元に戻せなくなります。
ブログの外観が変化してしまうのでちゃんとバックアップしてから作業する方が無難ですね

まずは、ヘッダー画像を設定する方法をスタイルシートで書きますね
下記のソースを参考にしてください。

/* 参考ソース */
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{background-image: url(画像のアドレス);
    background-repeat: no-repeat;
    background-position: center top;
    width: 980px;
    height: 300px;}/* ←ブログヘッダーに背景画像を敷きたいとき */

1

2

3

4

5

6

7

/* 参考ソース */

/* skinHeaderArea ブログヘッダー980pxエリア */

.skinHeaderArea{background-image: url(画像のアドレス);

background-repeat: no-repeat;

background-position: center top;

width: 980px;

height: 300px;}/* ←ブログヘッダーに背景画像を敷きたいとき */

画像のアドレスとした部分には、アップロードしたヘッダー画像のアドレスを入れてください。
このソースをスタイルシートの最下部に追加します。
追加したら「表示を確認する」をクリックして必ず確認してください。
グローバルメニューやスライダーのソースなども同じです。
スタイルシートは、上に書かれたものより下に書かれたソースの方が優先されます。