Download as PDF, PPTX
アメブロヘッダーメニューの設置方法
- 1. ソーシャルメディア時代の稼ぎ方マニュアル －アメブロヘッダーメニューの設置方法－ 起業戦略コンサルタント 金太郎
- 2. ソーシャルメディア時代の稼ぎ方（全体像） マインドセット・ 集客スキーム構築 コンテンツ提供 収益化 自己能力向上 戦略策定 ブックマーク ・使命 教材 ユーチューブ ・戦略コンセプト ・ビジネスモデル設計 ランキング ・コンテンツ整理 コーチング ・アクションプラン 知恵袋 Q&A セミナー ブログ 実行力 twitter ・成功者のマインドセット 会員プログラム ・朝の習慣 ・エネルギーレベル FB広告 Facebook スライドシェア 出版 無料レポート サポーター メルマガ スタンド ・メンター ・アドバイザー PPC LP ・仲間 ：今回のテーマ JV
- 3. アメブロのヘッダーメニューの重要性 これがヘッダーメニューです ■自分の伝えたいメッセージ（コンテンツ）を整理して、誘導する ・ブログは自分メディアの根幹である。 ■ヘッダーメニューがあるかどうかで「プロっぽく見せる」 ・エキスパートか、素人かは、ヘッダーメニューがあるかないかで判断されやすい。 ■ヘッダーメニューがあると、PVが1.5倍～2倍になる ヘッダーメニューは、超重要です！ 簡単に設置でき、効果抜群なので、必ず設置すべし！
- 4. アメブロのヘッダーメニューの設置方法 ステップ①ヘッダーメニューを決める ステップ②フリースペースへヘッダーメニューのhtmlコードを設定 ステップ③デザインを【カスタマ可能】に変更する ステップ④CSS編集 たったこれだけです。 わずか数分で出来ます。慣れたら、超簡単です。
- 5. ステップ①ヘッダーメニューを決める ■自分が何をメッセージとして伝えたいか整理する ・自分がブログで読者に伝えたいコンテンツを整理します。 ・僕の場合は、起業をテーマとしたブログである為、 起業に関する「ビジネスの作り方」「集客の仕方」「会社の作り方」みたいにカテゴリーをまずは考え、 そこから更にカテゴリー毎にブレイクダウンしていきます。 例）「ビジネスの作り方」→「アフィリエイト」「情報ビジネス」「コーチング」等にブレイクダウン ■ヘッダーメニューに表示するテーマを決める ・コンテンツ整理して、カテゴリーが決まれば、そのカテゴリーをヘッダーメニューにしてもいいし、 また僕の場合は、「メソッド」「コンサルティング」「コミュニティ」「メルマガ」のような それぞれのメディアへリンクさせる感じにして、４つ～５つのヘッダーメニューを決めます。 ・コンテンツのカテゴリーをヘッダーメニューにする場合は、そのカテゴリーの目次ページを 表示させる形にするのがおすすめです。 ■ヘッダーメニューで表示させるページのURLを記録する ★ヘッダーメニューこそ、あなたのメディアの主軸のナビゲーションになります ★目次リストがあるだけで、PVが1.5倍～2倍になります。 ★それ故、ヘッダーメニュー＋目次リストで、相当なPVが倍増します。
- 6. 表示させたいURLの確認方法 ■ヘッダーで表示させたいページを表示させます。 ■そのページのURLを控えます。 表示させたいページのURLを控える
- 7. 目次ページのサンプル ■アメブロは、ブログ記事をテーマで分類しますが、１階層しかテーマ分類できないので、 それぞれの記事へリンクさせる目次ページを用意しておくことで、埋もれた記事を閲覧しやすくします。 このサンプルでは、目次ページの中に テキストしか記載していませんが、そ れぞれの記事のURLリンク貼ることで、 この目次ページから、それぞれの記事 へ直接リンクしていけるようにします。 （注） 事前に「コンテンツ整理」というステッ プで、各カテゴリーの中にどんなコンテ ンツを用意していくかの目次を纏めて おきます。
- 8. ステップ②フリースペースへヘッダーメニューのhtmlコードを設定 ■ヘッダーメニューのhtmlコードを「フリースペース」へ書き込む ・アメブロ管理画面の「ブログを書く」→「サイドバーの設定」→「フリースペースの編集」で、 フリースペースの編集画面を開きます。 ・以下のヘッダーメニューの元となるhtmlコードをフリースペースに書き込みます。 <div id="headermenu"> <ul> <li><a href="リンクURL" class="menu1">メニュー1</a></li> <li><a href="リンクURL" class="menu2">メニュー2</a></li> <li><a href="リンクURL" class="menu3">メニュー3</a></li> <li><a href="リンクURL" class="menu4">メニュー4</a></li> <li><a href="リンクURL" class="menu5">メニュー5</a></li> </ul> </div> ・上記の「リンクURL」というところに、さきほどのステップで控えた表示させたいページのURLに変更。 ・メニュー１～５と記載されてある部分が、実際にヘッダーメニューに表示される名称となるので、 自分の表示させたい名称に変更します。 ・上記は、ヘッダーメニューを５個作る場合ですが、4個の場合は、メニュー５のコードを削除。
- 9. ステップ②フリースペースへヘッダーメニューのhtmlコードを設定 ■htmlコードと名称の修正が終わったら、最後にhtmlコードを１行にする。 ・以下のようなイメージで、最初の<divid・・・ から 最後の </div> までが１行ということです。 ・改行が入ってしまうと正しく表示されなくなってしまいます。
- 10.
- 11. ステップ③デザインをカスタム可能に変更する ■アメブロをカスタマイズする場合、【カスタム可能】のデザインでしかカスタマイズできない。 ■アメブロの管理画面の「ブログを書く」→「デザインの変更」→「カスタム可能」を選択する。 ・ベーシック、ピーチ、ブルー、グレイ、グリーンのどれかを選択する。 ベーシックとピーチ等ではブログの横幅が異なりますので注意が必要です。 ベーシック 800pxピーチ、ブルー、グレイ、グリーン 760px レイアウトは左サイドバー、記事エリア、右サイドバーの3カラム構成にします。
- 12. ステップ④CSS編集 ■CSS編集とは ・ブログの箱をどんな大きさにしたり、どんな色にしたりといったことを指定する設定です。 ■次項のCSSコードをCSS編集画面の一番下に貼る ・アメブロ管理画面→「ブログを書く」→「デザインの変更」→「CSSの編集」 CSSは結構長いので、一番下までス クロールさせ、そこに次項のコードをコ ピペで貼るだけで大丈夫です
- 13. このCSSコードを貼って下さい /*メニューエリア*/ /*メニューリストリンク*/ #headermenu{ #headermenu ul li a{ position:absolute; font-size:15px; width:800px; font-weight:bold; margin:0; color:#FFFFFF; /*文字色*/ padding:0; background-color:#664332; /*背景色*/ height:40px; /*メニューエリアの高さ*/ display:block; top:200px; /*画面上からの位置*/ text-decoration:none; /*項目の文字装飾*/ } text-align:center; /*項目の文字寄せ位置*/ /*メニューリストグループ*/ padding-top:10px; #headermenu ul { height:30px; width:800px; } padding:0; /*メニューリストリンク マウスオーバー時*/ margin:0; #headermenu ul li a:hover{ } color:#000000; /*文字色*/ /*メニューリスト*/ background-color:#FFFFFF; /*背景色*/ #headermenu ul li { display:block; padding-left:0px; text-decoration:none; /*項目の文字装飾*/ padding-top:0px; /*各メニューリストのメニューエ text-align:center; /*項目の文字寄せ位置*/ リア内 } の上余白*/ /*メニュー下の位置下げ*/ float:left; #wrap{ width:160px; /*メニュー1項目の幅*/ margin-top:40px ;/*メニューエリア分*/ height:40px } } /*メニューバー縦線*/ #headermenu ul li a.menu1, #headermenu ul li a.menu2, #headermenu ul li a.menu3, #headermenu ul li a.menu4{ border-right:1px solid #FFFFFF; }
- 14. カスタマイズ方法 ヘッダーメニューの位置が、ヘッダー画像と離れていたり、またボディ部分のメッセージボードと重なったりした場合、 ヘッダーメニューの位置などは、下記のように調整できます。 ■ヘッダー画像の上に重なってしまった場合 CSSで追加した /*メニューエリア*/ #headermenu{ position:absolute; width:800px; margin:0; padding:0; height:40px; /*メニューエリアの高さ*/ top:200px; /*画面上からの位置*/ ← この数字を変更します background-color:#664332; /*メニューエリア背景色*/ } ■サイドバーやメッセージボードと重なってしまった場合 CSSで追加した /*メニュー下の位置下げ*/ #wrap{ margin-top:40px ;/*メニューエリア分*/ ← この数字を変更します } ※この他にも、ヘッダーメニューの色や、縦/横のサイズとか、先ほどのCSSを同じように編集していけば、 自由にカスタマイズも可能です。 ※カラーコードはこちらで確認できます ⇒ http://www.colordic.org/w/
- 15. ヘッダーメニュー設置完了！ 最初は、僕もヘッダーメニュー作るのに、CSSとかよくわからず、何日も編集に時間かかっていましたが、 わかりやすいテキストと慣れで、今では5分もあれば、編集できるようになりました（感動） あなたの自分メディア作りのお役に立てればと思いますので、 ご質問などあればコチラまでご連絡下さいね！ [email protected]
- 16. 起業戦略コンサルティング ソーシャルメディアで自分メディアを創りたい方へ。 真剣に自分の人生を変えたいと熱い志を持っている方には、 あなたに最適な起業のあり方を一緒に考える 起業戦略コンサルティングをさせて頂きます。 あなたの求める結果を手に入れられるように、 僕も全力でサポートします。 詳しくは、個別にメールでお問合せ下さい。 [email protected]
- 17. 「起業実践会レビュー」 最新のインターネットマーケティングや お金の稼ぎ方といった起業を実践していく為の 役立つメソッドをわかりやすく具体的に レポートしています。 http://ameblo.jp/kigyoujissenkai/
- 18. フェイスブックで本気の起業仲間を作りませんか？ 自分のビジネスを本気で作ってみたいと思っている意識の 高い同志と情報交換できるコミュニティーです。 僕も最新のソーシャルメディアマーケティングや 起業メソッドを沢山情報発信していくので、 興味のある方は、こちらもどうぞ参考にしてみて下さい。 僕のスペシャルな友人達もいるので、 素晴らしいメンターや仲間と出会える 良質な出会いの場でもありますよ。 http://www.facebook.com/kigyoujissenkai
- 19. スモールビジネスで起業する人の成功を応援します！ 起業実践会