アメブロデザインにナビゲーションメニューを入れる

アメブロデザインにナビゲーションメニューを入れる

アメブロデザインにナビゲーションメニューを入れる

 

最初にデザインについて説明します。

ブログのレイアウトを大きく分けるとこのようになります。

アメブロ7

この5つのデザインのどれを選ぶのか? 

ここでポイントになるのは、目線の動きです。

小さいころから

文字を読むときには、左から右に目線を移します。

そして下に読み進みます。

アメブロ8

つまり、左側に視線がいきやすいということになります。

 

私の場合、バナーをクリックしてもらうのがゴールなので

左側に誘導バナーを設置できるようなデザインにしています。

 

もし、記事を読み込んで欲しいと訪問者に望むなら

左側にサイドバーが無いものが良いですね。

 

3カラムバナー(両サイドバー)は

両端にサイドバーを置いて、コンテンツは中央という形になりますね。

たくさんの情報を出せるので私はこれを選んでいます。

 

ただし、それぞれの幅が狭くなるので窮屈な感じになります。

特に有料版でない場合は(上記のページは有料版なので広告はなし)

大きな広告が入りますので、真ん中の記事は狭くなります。

たくさんのアメブロを見ましたが3カラムが多いようです。

 

アメブロデザインの変更

新しく作成したアメブロでも3カラムを選ぼうと思います。

 

アメブロ6

 

緑が好きな色なので「緑」にしました。

 

3カラムの中で

・150pxタイトル無

・150pxタイトル有

・300pxタイトル無

・300pxタイトル有

の4種類のデザインがあります。

 

最初に・300pxタイトル有 を選んで作ってみます。

アメブロ9

デザイン変更ページの下に、「カスタム可能」ボタンがあります。

ここをクリックしてください。

アメブロ13

アメブロ11

カスタム可能ボタンをクリックすると下記のページが表示されます。

CSS編集デザインをクリックしてください。

アメブロ12

このような画面になります。

「適用する」ボタンをクリックしてください。

アメブロ14

このような画面が出てきます。

「CSS編集をする」ボタンをクリックしてください。

アメブロ15

このような画面が出てきます。

アメブロ17

この赤枠の中に

アメブロ9

このテキストファイル内容を全て貼り付けて書き換えます。

 

テキストファイル内容

アメブロ16

 

 

内容を書き換えました。

アメブロ19

内容を確認するために「表示を確認する」をクリックしてください。

内容を確認できます。

アメブロ20

デザインが形になってきましたね。

 

ナビゲーションメニューの設定

ナビゲーションメニューとは?

アメブロ21

最初に「フリースペーステキストファイル」を開きます。

アメブロ22

アメブロ23

#に飛んでいくURL

メニュー(番号)に表示させるタイトル

 

タイトルには

・アメブロ集客

・ステップメール集客

・メルマガ集客

・イベント集客

ここから誘導するページはアメブロ内にページです。

集客の極意をまとめました。

アメブロ24

内容は空白のままです。

これから作る予定です。

アメブロ25

イベント案内

このメニューはリザーブストックイベントへの案内になります。

⇒ http://www.reservestock.jp/page/event_calendar/1084#top2

 

 

下の部分は ページ一番下に載せる事業主の情報です。

Presented by 夢リッチ株式会社 ⇒ 株式会社ビジネスパートナー

http://ame-rich.com/ ⇒ http://www.reservestock.jp/subscribe/17106

アメブロカスタム無料テンプレート「アメリッチ(AmeRich)」

  ⇒ リザーブストックオフィシャルトレーナー伊藤伸一

こんな形で出来上がりました。

アメブロ26

このテキストファイルをフリースペースに貼りつけます。

アメブロ27

アメブロ28

ここに先程作成したHTMLを貼りつけます。

アメブロ29

プレビューで確認してくださいね。

アメブロ30

 

満足、満足

 

上記が デザイン4種類の中の

・150pxタイトル無

・150pxタイトル有

・300pxタイトル無

・300pxタイトル有

になります。

 

・150pxタイトル無

にするとどうなるのか?

アメブロ31

タイトルが入らなくなるのと

トップ画像の高さが半分になりますね。

 

タイトルは、画像にかぶりますので

見にくくなる可能性があります。

 

今回はタイトルなし、150pxに変更しました。

説明書にも丁寧に導入方法は書かれていますが

少し、初心者には・・・・分かりにくいですね。

がんばってここまでやってください。

 

次のページ

アメブロからの効果的誘導方法とは

グーグル・bingに登録して検索アップ

アメブロに外部リンクを貼ると・・・へー集客できるんだ

 


リザーブストックオフィシャルトレーナー伊藤伸一 © 2015 All Rights Reserved. Frontier Theme