アメブロは そのままで使えるおしゃれなテンプレートが豊富にそろっているのが特徴ですがさらにデザインをカスタマイズすることによって 見やすく集客しやすいブログにすることができます このテキストでは 2016 年 3 月にリリースされた CSS 編集用デザイン を使用して あなただけのデザインにアメブロ

Transcription

1 このテキストについて このテキストは おもに下記の方を対象にしています Windows パソコンを使い 基本的なキーボード操作 マウス操作のできる方 アメブロを自分だけのデザインにカスタマイズしたい方 アメブロにメニューバーなどを設置して 使いやすいデザインにしたい方 本書はパソコン教室での個別学習を想定して作成されたテキストです インターネットにつながる環境が必要です テキストの作成環境 OS: Windows10 ブラウザ : Microsoft Edge 上記推奨環境以外でも学習していただけます 注意事項 本テキストに掲載されている画面写真は テキスト作成当時のものです インターネットサービスのデザイン 機能等は変更される場合もありますのでご了承ください 5

2 アメブロは そのままで使えるおしゃれなテンプレートが豊富にそろっているのが特徴ですがさらにデザインをカスタマイズすることによって 見やすく集客しやすいブログにすることができます このテキストでは 2016 年 3 月にリリースされた CSS 編集用デザイン を使用して あなただけのデザインにアメブロをカスタマイズしていきます Ameba にログインし マイページを表示しましょう まだアカウントを取得していない方は アメブロでブログをはじめよう のテキストで方法を学習できます 01 カスタマイズ可能なデザインの選択 アメブロに用意されているテンプレートは すべてカスタマイズが可能なわけではありません カスタマイズを始めるにあたって まずはカスタマイズ可能なテンプレートに変更しましょう このテキストで使用するデザインテンプレートは 2016 年 3 月に新たに登録された 以下の 3 つの CSS 編集用デザイン になります 6

3 3 つのデザインの違いは トップページのデザインが スタンダードか リスト表示か タイル表示か ということになります スタンダード 最新記事が全文表示される ブログとしてスタンダードなデザインです リスト表示 複数の記事のタイトルと冒頭の文章が リスト形式で表示されます タイル表示 複数の記事のタイトルと冒頭の文章と記事に掲載した写真がタイル状に表示されます 通常は スタンダード が使いやすいと思います 記事数が多く 一覧から選んでもらいたい場合などは リスト表示 か タイル表示 を選択するといいでしょう このテキストでは どの表示形式を選んでもカスタマイズできるようになっています 7

4 旧 CSS 編集用デザイン について テンプレート一覧には この 3 つ以外にも CSS 編集用デザイン という名前のものがあります これは以前リリースされた旧 CSS 編集用デザインで 新デザインとは構成が異なりますので このテキストで学習する方法でカスタマイズすると 反映されなかったりデザインが崩れる場合があります 新 旧の違いは クリックして表示を確認してみると分かります 主な特徴として新デザインはプロフィール画像が丸く 旧デザインは四角くなっています 新 CSS 編集用デザイン 旧 CSS 編集用デザイン 現在 旧 CSS 編集用デザイン をお使いの方へ新 CSS 編集用デザイン にテンプレートを変更すると すでに行ったカスタマイズがすべてリセットされます 新たにデザインしなおしたい場合はそれでもいいですが 今までのデザインを引き継ぎたい場合は 旧デザインのままカスタマイズする必要があります 旧デザインのカスタマイズ方法は このテキストでは学習できません 8

5 それでは 新 CSS 編集用デザイン にテンプレートを変更しましょう 1. マイページの上メニューの ブログ管理 をクリックします 2. 左メニューの デザインの変更 をクリックします 9

6 2. ページを下にスクロールし カテゴリ一覧から カスタム可能 をクリックします 3. カスタム可能なデザイン一覧が表示されますので 新 CSS 編集用デザイン の 3 つのデザインの好きなものをクリックします リスト表示 スタンダード タイル表示 これは旧デザインですので 選ばないでください 4. デザインが表示されますので 確認してレイアウト選択し 適用する をクリックします カラムやメニューのレイアウトは好みで決めてかまいません 10

7 5. ブログデザイン適用完了 と表示されます ブログ をクリックして表示を確認しましょう 6. ブログデザインが変更されています 何も設定しない状態では とてもシンプルなデザインです ここから 色々とカスタマイズしていきましょう! CSS って何? CSS( カスケーディングスタイルシート ) とは ブログやホームページのデザインを調整するためのプログラムコードです このテキストでは その記述方法を詳しく学習するのではなく 主にコードをコピーアンドペーストして使用します 11

8 アメブロは そのままで使えるおしゃれなテンプレートが豊富にそろっているのが特徴ですがさらにデザインをカスタマイズすることによって 見やすく集客しやすいブログにすることができます このテキストでは 2016 年 3 月にリリースされた CSS 編集用デザイン のテンプレートを使用し サイドバーのデザインをカスタマイズする方法を学習します 01 サイドバーとは サイドバーとは アメブロでメインの記事が掲載されるエリアの横の縦に細長い部分です メニューやプロフィールなどの情報を掲載することができます CSS の編集用デザイン では 以下のレイアウトを選ぶことができます 赤く表示された部分がサイドバーです サイドバーに載せる情報の種類や順番の設定は アメブロでブログをはじめよう のテキストで学習できますので このテキストではデザインのカスタマイズ方法を学習します 12 55

9 02 サイドバーのタイトルのカスタマイズ サイドバーの各項目にはタイトルが付いていますが 何も設定しない状態だと下記のように少し地味ですね サイドバーのタイトル この部分を下記のように装飾して 目立つようにしてみましょう 好きな色を背景に使用し 角を丸くしてボタン風に 56 13

10 1.Ameba にログインし マイページ の ブログ管理 をクリックします 2. 左メニューの デザインの変更 をクリックして開き 適用中のデザイン の CSS の編集 をクリックします 14 57

11 3. CSS 編集欄 の一番下に 下記コードを入力し 保存 をクリックします 下線部分は 自分が使用したい色のカラーコードを入力します コードについて コピー & ペーストで使えるテキスト文書をご用意しています インストラクターから受け取ってください このテキストで使用するファイル : 5.sidebar_code.txt 58 15

12 サイドバータイトル 1 角丸ボタン風 CSS 編集欄 貼り付け用コード /* サイドバータイトル ( 角丸ボタン風 ) */.skin-widgettitle { color: # カラーコード ; /* 文字の色 */ background-color:# カラーコード ; /* 背景の色 */ padding:15px; border-bottom: 0px; border-radius:10px; } #calendar.skin-widgettitle { padding-bottom: 15px; margin-bottom: 0; } #profile.skin-widgettitle { padding-bottom: 15px; margin-bottom: 0; } カラーコード の部分は 使用したい色のカラーコードを入力します 角を丸ではなく四角にしたい場合は 7 行目の border-radius:10px; の部分を削除します その際 最後の } は残してください 4. ブログの表示を確認してみましょう 下記のようにサイドバータイトルの表示が変わっていれば OK です 16 59