2016年3月より、「CSS編集用デザイン」テンプレートが新たに3つ追加されました。そちらのカスタマイズでは以下のカスタマイズが使えないものも多いため、「新CSS編集用デザイン徹底解剖」と題して新たに目次を設けてカスタマイズの方法を公開中です。2016年3月前の従来のCSS編集用デザインについてのカスタマイズは、当ページでカスタマイズができますので、ご利用状況に応じて使い分けてください。新CSS編集用デザインでのカスタマイズがご希望のかたは、こちらの目次をご覧くださいませ→新CSS編集用デザイン目次>>こちらもどうぞブログで集客したい!3980円で確実に自分でカスタマイズ!アメブロのトップに4つのナビゲーションをつけるアメブロカスタマイズ今回はアメブロに4つのナビゲーションバーを付けるカスタマイズを解説します。ナビゲーションとは以下のイメージのようにアメブロトップにホームページのようなボタンを置く設定のことを言います。ナビゲーションを置く理由ブログナビゲーションを置くメリット。それはあなたが読者の方に見てもらいたいページをアピールすることができるということです。ナビゲーションを置くことで、読者目線のブログにつながります。飲食店ならば、「アクセス」「メニュー」「ご予約・お問合わせ」「こだわり」などのボタンを置けばあなたのブログの読者に、お店の基本情報を意図的にしってもらえるきっかけとなるわけです。それでは設置方法を手順を追って解説します。手順は8段階♪まず今回は、コピペを多用します。ソースコードをコピーして貼り付ける作業を手順にそって行えばナビゲーションバーを付けることができますので、ついてきてくださいね。設定手順では早速設定してみましょう。1.マイページ(ブログの管理画面)の左上にある「クイックリンク」をクリック2.メニューの中の「サイドバーの配置」をクリック3.サイドバーの配置画面で、「フリースペース」という機能が「使用する機能」の中に含まれていることを確認する。「使用しない機能」にある場合は、それを「使用する機能」の中にドラックして含める。title="メッセージ">メッセージ</a></li></ul>上記のコードを見てわかるのは、navi1~4までがあることです。それぞれにHOME,プロフィール,このブログの読者になる,メッセージ,アメンバーになるとあります。これがナビゲーションのボタンとなるものです。このナビゲーションタイトルを自分流に変えれば、オリジナルナビゲーションを作成することができます。href=に続く、http~のアドレスですが、ここにはあなたのサイトの訪問者がサイトに訪れた時の、リンク先URLを設定するものになります。上記例の場合は、アメブロのプロフィールやメッセージを設定しましたので、あなたのブログIDというところに、あなたのIDを挿入すればこのままのコードを使うことができます。作ってみようという場合は、上記のIDを変更して試してみてください。それと・・・重要なことですが、このコードは改行しないでください。改行が入ると、ブログのレイアウトに影響がでますので。コピーして貼り付けるコードは必ず、改行なしのものを使ってください。実際に上記コードを貼り付けた画面は以下のようになります。(参考)6.CSS編集用画面を開いて下さい。*/.skinFrame2{width:980px;margin:auto;position:relative;}/*ナビゲーションの基準点を置く*/赤字で書いたコードはナビゲーションの位置座標を置くための基準点です。これは忘れずに記述してください。この基準点を設置しないとナビゲーションの配置がうまくいきません。*/」という部分に以下のコードをコピーペーストしてください。(スタイルシートの一番下です。*//*ナビゲーション設定ここから↓*/ul#global_navi{width:980px;overflow:hidden;position:absolute;top:100px;/*1ナビゲーショの位置座標の設定箇所(縦方向)。数値を大きくすると下の下がる。ヘッダー画像があるときはその高さによって調整すること*/left:00px;/*2ナビゲーションの位置座標の設定箇所(横方向)。赤字の1の部分を見てください。緑で100pxとありますね。ここは、あなたがトップ(ヘッダー)の画像があってそれを使うのならば、その画像の高さで合わせてください。ちなみにこのブログで紹介したイメージ画像(チューリップの画像)では420pxと設定しました。画像なしで設定する場合はこのままで構いません。ヘッダー画像を設定する方法は別コラムで解説していますのでそちらもご活用ください。緑の文字の部分「height:100px」を見てください。ここもさきほど同様、あなたがトップ(ヘッダー)の画像があってそれを使うのならば、その画像の高さで合わせてください。画像を設定しない場合はこのままでも構いません。これでナビゲーションの設定は終わりです。手順7でコピーペーストしたナビゲーションのコードにある赤字で記載した説明文にそって、緑の文字の部分を修正すれば、オリジナルのナビゲーションができます。以下に上記コードの解説編を掲載していますのでこちらを参考にコードを変えてみてはいかがでしょうか?こちらの解説編でナビゲーションをさらにカスタマイズするお疲れさまでした。新CSS編集用【2016年3月追加分】アメブロの記事下に定型文を張るためのサンプルカスタマイズ記事下に定型文を挿入する方法が、できなくなる。パソコン初心者でもできる。