アメブロで記事は書いているが、デザインを変更したいけど思うように変更できないという方は、少なくないはず
ただ、そのデザイン変更はパソコンでの表示だけでスマホでの表示ではありません。
今回は、デザインの変更方法とその際に気をつけておくべきことと知っておくべきことについて解説します。
また、くまはちLABは様々なアメブロツールを基本的に無料で提供させていただいてます。
アメブロでデザイン変更したい方は、是非覚えていただければと思います。
デザイン変更する前に知っておくべきこと
アメブロのデザインを変更する前に知っておいていただきたい部分
- デザイン変更は、スマホの画面では反映しないこと
- スマホでは、ヘッダーやグローバルメニュー・サイドバーなどは一切表示されないこと
- 変更したら以前のスタイルシートはすべて初期設定に戻る
- ヘッダー画像の高さは変更可能です
- カスタム可能な「CSS編集デザイン」は、複数あってそれぞれスタイルシートの順番が違う
デザインの変更方法をする前に上記の5つを知ってからはじめる必要があります。
この変更には、 スタイルシートに関する知識が必要になります。
完全な知識でなくても基本的な知識があれば何とかなります。
難しい部分は、コピペでも変更できたりします。
用意しておくもの
くまはちLABのアメブロで使っているヘッダー画像が上記3つでスライダーになってます。
ヘッダー画像を用意しておく必要があります。
画像のサイズは、使用するデザインによって違うかもしれませんが、くまはちLABで利用している「CSS編集デザイン」では980px X 300pxが初期設定で設定されていました。
横幅の980pxは、変更した事ないですが高さの300pxは変更したこともあり、変更が可能で400pxや500pxでもOKなようです。
グローバルメニューを設置したい方は、同じように用意しておく必要がありますね
下記のページでソースは簡単に作成可能ですが・・・
デザインの選択
管理画面TOPより左のメニューの「デザインの変更方法」をクリックして下までスクロールして「他のカテゴリーからブログデザインを探す」の中で「カスタム可能」をクリックして開くと上記画像の画面になります。
ここで選択するブログデザインは、「CSS編集デザイン」を選択します。
画像の右側で赤枠で囲んだいずれかのデザインを選択します。
アメブロ関連
アメブロツール
- アメブロ目次付きテンプレート(メルマガ購読者プレゼント)
- アメブロ用グローバルメニュー作成ツール
- シンプルな見出し付き囲み枠作成
- アメブロ記事紹介タグ作成
- Amecare活用マニュアル(メルマガ購読者プレゼント)
アメブロ 目次付きテンプレート使っている記事紹介
ブログをはじめる前にしておくこと
記事を書くときに気をつけること
- レスポンシブデザインって何?
- 端末やモニターによる見え方の違い
- SSLにしたときのリンク先アドレス
- 入力方法について
- 音声入力と辞書登録について
- タグやハッシュタグの使い方
- アメブロやFC2ブログでのスマホ表示
- 初心者が今すぐできるブログ記事タイトルの5つの改善ポイント
- ブログの中でOGP画像って何?
- アメブロ記事の文字数制限について
- アメブロで記事下に表示したい項目
- アメンバー記事ってどんな時に使うのか?
記事構成について
ソーシャルメディアとの連携
ワードプレスのテーマを知る前にブログのことも知っておいてほしいと思います。
クイックナビ
サービス /ブログ /プライバシーポリシー /お問い合わせ
![目次付きテンプレート](https://stat.ameba.jp/user_images/20191224/20/wp908kobe/65/6e/p/o0300014014684285651.png?caw=800)
アメブロ用目次付きテンプレートを無料で配布しています!
![YouTubeチャンネル登録](https://stat.ameba.jp/user_images/20190111/05/wp908kobe/13/dc/p/o0750033214336860263.png?caw=800)
YouTubeチャンネル登録お願いします!
また、ALiSには、ブログ全般に関することを掲載しています。
アメブロの記事の増加とともにメルマガもスタートします。スタートは、2月の予定なので事前に登録していただけると幸いです。
![メルマガ](https://stat.ameba.jp/user_images/20190111/05/wp908kobe/e3/16/p/o0640024614336861785.png?caw=800)
アメブロやWordPressに関するお問い合わせは、下記よりお気軽に・・・
![お問い合わせ](https://stat.ameba.jp/user_images/20190111/05/wp908kobe/e5/67/j/o0650025414336861024.jpg?caw=800)