【アメブロカスタマイズ】自分でヘッダー、メニューバーを作る(旧CSS)
見出し画像

【アメブロカスタマイズ】自分でヘッダー、メニューバーを作る(旧CSS)

櫻井圭子

こんにちは。ブログコンサルタントの櫻井圭子です。

アメブロカスタマイズは、大きく分けて2種類のテンプレートがあります。

・旧CSS編集デザイン
・新CSS編集デザイン

最近は新CSS編集デザインの方が人気になってきましたが、細かいところまでデザインできる旧CSS編集デザインも根強い人気があります。

今回は旧CSS編集デザインで、アメブロのヘッダーとメニューバーをつける方法を説明します。

【旧CSS編集デザインの良いところ】
・細かい部分までデザインにこだわる事ができる。
・プロフィールの下にメッセージを送るボタンがある。

【ヘッダーのオススメサイズ(旧CSSの場合)】
・横980px × 縦300〜400pxくらい

※ヘッダーの縦幅は自分で自由に決める事ができます。

※今回の説明では、ヘッダー画像は用意している前提で進めます。


【実践】アメブロのヘッダーを設置

アメブロのヘッダー画像を用意しましょう。
今回は980px×300pxの画像を例に説明させていただきます。

本のヘッダー

ヘッダー画像はCanvaなどで無料で作る事ができます。


①デザインの設定

【アメブロ】マイページ→ブログ管理→デザインの設定

■カテゴリから探すの中から"カスタム可能"を選びましょう。
カスタム可能デザインの一覧の中から、このCSS編集用デザインを選択してください。

「カスタム可能」デザイン-一覧|Ameba-アメーバ-2

※上にある3つのCSS編集用デザインは、新CSSとなります。


②カラム選択

■CSS編集用デザインを選んだら次はカラム選択です。

東京のかわいいアメブロカスタマイズ

※おすすめは新デザインと同じく2カラム右メニューです。
適用するボタンを押して次へ。


③ヘッダーの設置

■CSSの編集をクリックして進んでください。

デザイン適用完了|Ameba-アメーバ-

※間違えて一度戻ってしまった方は、デザインの設定画面に戻りCSSの編集をクリックしましょう。

「カスタム可能」デザイン-一覧|Ameba-アメーバ


■こちらにヘッダー画像をアップロードします。

ブログデザインのCSSの編集|Ameba-アメーバ


■アップロードが完了すると画像が表示されます。

ブログデザインのCSSの編集|Ameba-アメーバ-


④CSSの編集

■CSSの編集画面が開きます。

CSSの編集|Ameba-アメーバ-


■CSSの記述の中で、/* (3-2) ブログヘッダーから始まるブログヘッダーの記述を見つけてください。

▼このコードをコピペします

この続きをみるには

この続き: 3,812文字 / 画像7枚

【アメブロカスタマイズ】自分でヘッダー、メニューバーを作る(旧CSS)

櫻井圭子

500円

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
スキありがとうございます♡
櫻井圭子
世界観を「作る」、そして届くように「伝える」 女性の起業はマインド面でだけでなく、世界観をどのように伝えるかや、あなたのHPやブログを必要な方に届くように伝える事が大切です! 自分でできる簡単なデザインのコツや、Googleで検索1位になるようなブログの書き方をお伝えします!