目次 こちらは アメーバブログのアカウントをすでに持っている状態から 解説が始まります はじめに アメーバブログ編 カスタム用デザインへ設定する メッセージボードの作成 メッセージボードの基本機能 画像配置 アメーバキング編 アメーバキングでのテンプレート作成 アメーバキングでのデザイン変更

Transcription

1

2 著作権について このレポートは著作権法で保護されている著作物です このレポートの著作権はTAKAに属します 著作権者の許可なく このレポートの全部又は一部をいかなる手段においても複製 転載 流用 転売等することを禁じます このレポートに書かれた情報は 作成時点での著者の見解等です 著者は事前許可を得ずに誤りの訂正 情報の最新化 見解の変更等を行う権利を有し ます このレポートの作成には万全を期しておりますが 万一誤り 不正確な情報等があり ましても 著者 パートナー等の業務提携者は 一切の責任を負わないことをご了承 願います このレポートを利用することにより生じたいかなる結果につきましても 著者 パー トナー等の業務提携者は 一切の責任を負わないことをご了承願います 推奨環境 このレポートに記載されているURLはクリックできます できない場合は最新のAdobeReaderを下記のページよりダウンロードしてください 無料

3 目次 こちらは アメーバブログのアカウントをすでに持っている状態から 解説が始まります はじめに アメーバブログ編 カスタム用デザインへ設定する メッセージボードの作成 メッセージボードの基本機能 画像配置 アメーバキング編 アメーバキングでのテンプレート作成 アメーバキングでのデザイン変更

4 はじめに アメブロでメルマガの読者を集めたいなら 間違いなく必須になってくるのが メッセージボードの改造です ここがうまくバシっと決まっているかどうかで ウブなリストを登録させることができるかどうかが決まります なので ここをまずは最初に作ってしまって デザイン等をねったりしていきましょう ここがしっかりと決まれば 毎日記事を更新したりすることが メルマガのリストを増やすことにつながっていきます ちょっとめんどくさいかもしれませんが わかりやすく図を交えて解説いたしましたので 一緒に作業を進めて頂ければなと思います

5 カスタム用デザインへ設定する まずは 自分のマイページへ一旦進み デザイン変更という項目から デザイン変更画面へ進みます そしたら このような画面になります

6 その画面のまま下にスクロールすると カスタム可能という項目が出てくるので そちらをクリックしてみましょう このようなページに行くので 赤枠の CSS 編集用デザイン というのを クリックしてください

7 このような画面になります 下に実際にそれが適用されたブログのプレビュー画面が表示されています 上の黒い画面には 何カラムにするかが出てくるので 好きなのをお選びください おすすめは 個人的には３カラムです 選んだら 下の 適用する ボタンをクリックし 決定します このような画面になれば 設定完了です これで カスタム専用の設定にすることができました このまま メッセージボードの変更へ進みましょう 目次へ戻る

8 メッセージボードの作成 次に いよいよメッセージボードの作成をしていきます 真ん中赤丸の デザインの変更トップページ をクリックしてください 再びこちらの画面へ戻ります

9 その画面を下にスクロールしていくと メッセージボードというのが出てくるので そちらをクリックしてください

10 クリックすると このような画面へ移行します この 赤枠の部分が出ているか確認をしてください もし出ていない場合 ブラウザを変えてみてください firefox ならほぼ確実に出るので そちらがおすすめです 目次へ戻る

11 メッセージボードの基本機能 図とともに メッセージボードにあるツールの基本機能を解説します 文字サイズ変更 文字のサイズを変えることができます おすすめは２くらい カラーパレット 小 あらかじめ決められている色を クリックすると変えることができます カラーパレット 大 クリックすると 豊富な色が出てくるので そこから自由に色を選べます 太字 文字を選択してこのボタンを押すと 太字にすることができます 斜字 文字を斜めにすることができます 斜字 文字に下線をつけることができます 取り消し線 文字に取り消し線をつけることができます

12 リンク 文字にリンクを設定することができます このように 別のページへ飛べるようになります 画像 画像を添付することができます 目次へ戻る

13 画像配置 まずは 土台となるクリックする画像を配置してみましょう まずは 赤枠の 画像 ボタンをクリックします

14 するとこのような画面が出てくるので 赤枠の参照ボタンをクリックし メッセージボードの表示したい画像を 選びましょう タイトルは わかりやすい名前で大丈夫です そこまで出来たら アップロード をクリックしてください

15 次に アップロードした画像を配置していきます アップロードが完了すると このようにしたに アップした画像が現れます この画面が出ないときは 再度 画像 ボタンを押すと 現れます 下の方をみると サイズ 配置 順番 というのがあります まずサイズですが これは オリジナルで表示 を選んでください 縮小する方を選ぶと サムネイルのようなサイズになってしまいます 真ん中の配置ですが これは中央に配置を選ぶといいでしょう 綺麗に真ん中に画像がセットされます 順番は このままで構いません ここまでできたら チェックした画像をつかう か この画像を使う を押して見ま しょう チェックした画像を使う を押す場合は 青丸のところにチェックを 入れてください

16 決定すると おそらく最初はこんな画面になっていると思います そこで 赤枠の四角いボックスをクリック ドラッグし 大きさを適度に調節してくださ い

17 だいたいこのくらいの大きさにすると いい具合になります 今回は わかりやすいようにこのようなテスト画像を使わせていただいております 笑 次に メルマガ登録用の URL を組み込みます それぞれのメルマガスタンドで作成した登録フォームの URL を コピーしておいてください コピーをしてきたら 画像をクリックして選択されている状態で こちらの リンク ボタンをクリックしてください 白い小さな のボックスが画像の周りに出ていれば 選択されている証拠です

18 するとこのような画面が出てきます こちらの赤枠のところの コピーしてきたメルマガ登録フォームの URL を貼り付けます 貼り付けが完了したら リンク を押してみましょう

19 それが完了したら 一番下の 公開 ボタンを押してみましょう

20 完了の画面になるので そのまま赤丸の部分を押して ブログを確認してみましょう

21 このように メッセージボード部分に作成した画像が出ていれば 成功です この画像をクリックし 作成したメルマガフォームの URL にたどり着くか 確認をしてみましょう これで メッセージボードの取り付けは完了です あとは追加したい文字を加えてみたり 画像を綺麗なデザインにしてみたりしましょう 目次へ戻る

22 アメーバキングでのテンプレート作成 アメーバキングでのテンプレート作成をすると 非常に素晴らしいデザインにすることができるので 僕も現在使用させていただいております アメーバキングはこちら また それだけでなく 読者登録やペタを繰り返すことにより ブログの pv をアップさせるのに役立つ機能が満載のツールなので 非常に強くおすすめをしているツールです 僕の愛用度は ほかのツールの中でもダントツで NO1 ですね 目次へ戻る

23 アメーバキングでのデザイン変更 アメーバキングを開き 自分のアメーバアカウントの ID を登録していきます 上のタブのアメーバ ID をクリックし 赤枠の部分に 自分のアメーバアカウントの ID とパスワードを入力し 登録を押してみましょう

24 登録完了したら 左側に ID が出てくるので それを選択し 下のログインをクリックします ログインに成功すると 上の方にプロフィール画像等が表示されます 次に タブの中の その他機能 を選び テンプレート作成 新 という方を お選びください テンプレート作成 でも問題ありません

25 すると このような画面が出てきます 左から テーマ その他設定まであるので まずは テーマ ヘッダー画像 読者ボタン 項目で 好きな画像を選んでいってください

26 その他設定 ですが 個人的おすすめは 赤枠のチェックマークを外すほうがいいと思います これらを外すと ヘッダー画像に出る文字がなくなり 先ほどヘッダー画像で選んだ綺麗 な画像だけが表示されます オリジナルのヘッダー画像を新たに入れたい時は アメブロのマイページの方で改造する のですが オリジナルヘッダーにしても ずっと余計なタイトル文字などはこれででなく なります

27 最後に 右側の部分を設定していきます カラムタイプは ここで設定する場合 また再度設定したいカラムを選択してください その下のヘッダーメニューですが ヘッダーの下にでる横に並んだあのボタンです 名称に表示したい名前を書き リンク先の URL のところに 飛んでいきたい URL を記入します 完了したら 下の 作成 自動設定 を押してみましょう

28 成功すると このようにボタンが配置されます ここまでできれば 完成です 目次へ戻る

29 発行者情報 作者 TAKA twitter 公式ブログ アメーバブログ お問い合わせ