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

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

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

 

目 次

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

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

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

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

用意しておくもの

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

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

 

デザインの選択

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

カラムを選択する

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

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

CSS編集
ヘッダー画像は、通常の記事と別の場所に画像をアップロードしておかないといけないのです。
上記画像の場所は、デザインの変更を開いた画面です。
「CSSの編集」を開いて上部にアップロードしておく場所があります。
ヘッダー画像アップロード
上記画像の場所にアップロードしておきます。
アップロードされると下に画像のアドレスが表示されるので次の スタイルシートを変更する方法で設定を覚えてください。

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

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

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

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

 

デザイン変更を確認してみる

WordPress活用講座
 スタイルシートを変更して保存したらいろいろなOSブラウザで確認してみましょう。
基本は、同じように見えてないといけないのですが、よくこのブラウザだけ違うとかあるのですが、その前に下記のページにあることを確認しておいてください。

WordPressでテーマの設定が反映しないプラグインがうまく動作しない時に確認しておきたいことWordPressでテーマの設定が反映しないプラグインがうまく動作しない時に確認しておきたいこと
WordPressをはじめた頃、設定の方法とかよくわからないまま触りまくって真っ白になってしまったり、いろんなトラブルがあったのですが今...

 


 

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
くじらモバイル登録
LINE@友だち追加

くまはちLABのご利用ありがとうございます!くまはちLABの最新情報をフォローしてゲットしてください!