アメブロdeアクセスアップ

アメブロプチカスタマイズヘッダー下にメニューを設置(CSS編集可能以外) | アメブロのテンプレートやツールを使って、アクセスアップする方法やアメブロカスタマイズの方法をご紹介します。


テーマ:プチカスタマイズ

アメブロのプチカスタマイズです。

 

ヘッダー下にメニューを設置するコードに関して、
このブログでも質問をいただきました。

ちょっと私の記述で、戸惑った方もいるかと思いますので、
もう一度ちゃんとご説明します。

 

 

 

アメブロのCSS編集可能のテンプレート(デザインスキン)使うカスタマイズでは、
CSSの記述は、フリープラグインかフリースペースを使用します。

 

 

フリープラグインは、そのままCSSコードを記述しても大丈夫ですが、
デメリットは、文字数の制限です。
3800文字以上は、記述できなくなります。

 

 

jqueryなど、記述が長い場合は、

コードをテキストなどに記述して、サーバーなどにアップロードし、
そこから、読み込む方が安全ですし、いくらでも記述できます。

 

 

サーバーなどを持っていない方は、ドロップボックスや、
無料のホームページスペースなどを利用するといいですよ!!

こちらで、詳しく書いています。

Dropboxの使用方法 パブリックフォルダも使用可能です。

 

 

 

逆に、フリースペースの場合は文字数制限などもないので、

沢山コードの記述はできます。

 

 

 

できますが!!

check改行・空白があると表示できません!!

 

 

 

どういうことかというと、これアメブロ特有だと思うんですが、
改行などがあると、コードが反映しないんです。(その部分だけね)

 

 

1つでも、あるとすべてにおいて表示できない!!ってなるんですね。

 

 

ここが、ちょいとアメブロの難しいところなんです。

 

 

 

以前ヘッダー下にメニューを設置する方法を記載したんですが、
CSSはあっているんですが、記述の方法に誤解がありました。
そう、私の記述をそのままコピーすると改行がはいってしまうので、
表示できないんです。

アメブロ カスタマイズメニューバーの設置方法

 

 

 

本当に申し訳ありません・・・

 

 

 

なので再度、記述の方法を記載しますね。

下記のコードをそのままコピーして、一度テキストに貼ってみましょう。

それから、数字やカラーコードなどを変更して貼り付けるとうまくいきますよ。

 

 

 

 

CSSなどのコードは、記述がひとつ間違っているだけで、
表示できないという、なんともプログラムよねーって思う部分がたくさんあります。

 

 

検証するときに、まず注意する点はこんな感じです。

 

  • コードの文字が全角になっていないか?
  • ”” ’ ’: ; などが、抜けていないか?
  • フリースペースを利用するときは、改行・空白がないか?
  • コード自体の記述が間違っていないか?

 

 

 

こんな感じかしら?

 

 

 

私も見直したりするんですが、間違っている場合もありますので、
もし、表示できなかったり確認できない場合は、
メールでお知らせいただければ、嬉しいです。

 

※アメブロのHTMLが変更になりました。
新しいCSSを記述しています。
アメブロヘッダー下にメニュバー設置HTMLが変わったので!
 

 

カスタマイズをしている方も、
ブログや書籍などを利用して、勉強していってくださいね。
 

 

 

アメブロビズ2(AmebloBiz2)からバージョンアップ!!
デザイン数も数倍増えたアメブロビズ3(AmebloBiz3)レスポンシブ対応ですよ^^
詳細はこちらから!!→ アメブロビズ3(AmebloBiz3)特典付きレビュー

 

 

 

テンプレートデザイン・カスタマイズのこと、アクセスアップのこと、
アメブロのことならお任せあれ!

Copyright © アメブロdeアクセスアップ All Rights Reserved.