5
★
このテキストについて
●このテキストは、おもに下記の方を対象にしています
Windows パソコンを使い、基本的なキーボード操作・マウス操作のできる方
アメブロを自分だけのデザインにカスタマイズしたい方
アメブロにメニューバーなどを設置して、使いやすいデザインにしたい方
※本書はパソコン教室での個別学習を想定して作成されたテキストです。 ※インターネットにつながる環境が必要です。●テキストの作成環境
OS: Windows10
ブラウザ: Microsoft Edge
※上記推奨環境以外でも学習していただけます。●注意事項
本テキストに掲載されている画面写真は、テキスト作成当時のものです。 インターネットサービスのデザイン、機能等は変更される場合もありますのでご了承ください。6
アメブロは、そのままで使えるおしゃれなテンプレートが豊富にそろっているのが特徴ですが さらにデザインをカスタマイズすることによって、見やすく集客しやすいブログにすることができます。 このテキストでは、2016 年 3 月にリリースされた「CSS 編集用デザイン」を使用して、 あなただけのデザインにアメブロをカスタマイズしていきます。 ●Ameba にログインし、マイページを表示しましょう。 まだアカウントを取得していない方は 「アメブロでブログをはじめよう」のテキストで方法を学習できます。01
カスタマイズ可能なデザインの選択
●アメブロに用意されているテンプレートは、すべてカスタマイズが可能なわけではありません。 カスタマイズを始めるにあたって、まずはカスタマイズ可能なテンプレートに変更しましょう。▼このテキストで使用するデザインテンプレートは、2016 年 3 月に新たに登録された
以下の 3 つの「CSS 編集用デザイン」になります。
7
▶3 つのデザインの違いは、トップページのデザインが スタンダードか、 リスト表示か、 タイル表示か、ということになります。 ▶通常は「スタンダード」が使いやすいと思います。 記事数が多く、一覧から選んでもらいたい場合などは 「リスト表示」か「タイル表示」を選択するといいでしょう。 このテキストでは、どの表示形式を選んでもカスタマイズできるようになっています。 ☜「スタンダード」 最新記事が全文表示される ブログとしてスタンダードなデザインです。 ☜「リスト表示」 複数の記事のタイトルと冒頭の文章が リスト形式で表示されます。 ☜「タイル表示」 複数の記事のタイトルと冒頭の文章と 記事に掲載した写真が タイル状に表示されます。8
◎旧「CSS 編集用デザイン」について
テンプレート一覧には、この 3 つ以外にも「CSS 編集用デザイン」という名前のものがあります。 これは以前リリースされた旧・CSS 編集用デザインで、新デザインとは構成が異なりますので、 このテキストで学習する方法でカスタマイズすると 反映されなかったりデザインが崩れる場合があります。 新・旧の違いは、クリックして表示を確認してみると分かります。 主な特徴として新デザインはプロフィール画像が丸く、旧デザインは四角くなっています。▶現在、旧「CSS 編集用デザイン」をお使いの方へ
新「CSS 編集用デザイン」にテンプレートを変更すると、 すでに行ったカスタマイズがすべてリセットされます。 新たにデザインしなおしたい場合はそれでもいいですが、 今までのデザインを引き継ぎたい場合は、旧デザインのままカスタマイズする必要があります。 旧デザインのカスタマイズ方法は、このテキストでは学習できません。 新「CSS 編集用デザイン」 旧「CSS 編集用デザイン」9
●それでは、新「CSS 編集用デザイン」にテンプレートを変更しましょう。