MENU

アメブロカスタマイズ メニューバーの作り方

2020 7/02

アメブロをお仕事に利用したい方にとってヘッダー設置の次に需要のあるカスタマイズは、なんと言ってもメニューバー(グローバルメニュー)の設置です。

メニューバーとは、ヘッダーエリアと記事エリアの間に、メニュー一覧やアクセスなど見てもらいたい記事へのリンクボタンを設置するカスタマイズのこと。

4~5個くらいのメニューボタンを写真のように横に並べて設置し、メニュー記事やアクセス記事、お客様の声などにリンクを貼ることで、訪問した方がクリックをすると記事が表示されます。

今回は、新デザインでのメニューバーの作り方を載せてみたいと思います。

目次

アメブロカスタマイズ メニューバーの作り方(新デザイン)

設定をする前に、カスタマイズができるようにこちらの設定にしておきましょう。

基本設定は、こちらです。
アメブロカスタマイズをする際の基本手順

グローバルメニューの設定をする

アメブロのブログ管理ページを開きます。

設定・管理→「フリースペースの編集」を開きます。

URLにリンクしたいアドレスと、リンク先に自己紹介などの文字を入力して保存します。

(事前に設定・管理→フリースペースの配置設定でフリースペースを「サイドバーに使用する機能」の中に入れておきましょう)

 CSSを入力します

CSS編集デザインに記載されているCSSタグの一番最後に下記を入れます

ナビメニューの色設定

ナビメニューの色設定を行います。色の参考はこちらから見てください。

変更が必要な場所は赤字にしています。

文字・ボタン・背景色の色は、#○○○となっています。

こちらは、カラーコード表から色コードを見て選んでください。

こんな感じで、メニューとメニューの間にスキマの入ったデザインを作ることができます。

アメブロのデザインテンプレートを販売中です。
全体のデザインを統一していますので、チェックしてみてくださいね

この記事が気に入ったら
フォローしてね!

この記事を書いた人

メール対応・資料作成・Webサイト管理・SNS運用・ライティング・デザインまでワンストップ対応できるクリエイティブ秘書&ブロガー。

ブログは、フリーランスお仕事系お役立ち記事を載せています。
お仕事依頼はこちらから

目次
閉じる