アメブロカスタマイズ フリーのサイドメニューを設置する方法

アメブロカスタマイズ フリーのサイドメニューを設置する方法

アメブロに限らずですが、
サイドバーって、いろんな機能を表示させることができますよね。

フリーのサイバーのメニューを、
他のメニューと同様設置してみましょう。

 

 

 

アメブロの場合、サイドバーに使用する機能は、
配置設定より、選択できます。
(他のブログも同じ感じですね。)

 

サイドバーの役割としては、
ブログの目次(メニュー)や記事のおまとめ、
アメブロの場合だと、読者登録やランキングの表示など。

 

いろいろな機能を表示させて、読者さんに、
ブログの細かな説明をしている部分です。

 

ただアメブロの場合は、フリースペースやフリープラグインを使って、
サイドバーに何かを表示させた場合、
既存しているメニューが使用できません。

 

 

例えば、外部のランキングボタンをサイドバーにつけたいなー
と思ったら、ランキングボタンのタグを持ってきて、
サイドバーに貼るというと、フリースペースか、フリープラグインを使いますよね。
こんな感じです。

メニューなし

 

下のメニューのものと、比べてくださいね。

 

サイドバーの表示の順番によっても違いますが、
メニューの統一感もなく、ちょっと味気ないでしょう?

 

なので、やっぱりここも画像などを揃えた方が、
バランスがいいですよね。

 

以前の記事でも書いているんですが、
サイドバーのメニューの部分に、ワンポイント画像をいれただけでも、
メニューが目立って、ステキにサイドバーを飾ってくれます。
アメブロ サイドバータイトル横にワンポイント画像を入れる方法

 

 

ワンポイント画像を付けたサイドバーメニューと
同じようなデザインで表現できるように、
今回は、フリースペースにフリーのメニューを追加して、
統一感のとれた、サイドバーに仕上げましょう。

 

 

フリーメニューの設置方法

CSSを追加していきます。
※アメブロのCSS編集可能デザインスキンを見本にしています。

CSS編集のCSSの部分で、
下記のコメントアウトを探してください。
(control+F キーで検索をかけて、サイドバーと検索窓に入力すると、
探しやすいです)

 

/* (3-8) サイドバー メニュー
——————————————–*/

 

 

/* skinMenuHeader サイドメニュータイトルエリア */
という記述があるので、その下の方に、
下記のコードをコピーして、貼りつけてください。

 

 

 
 

CSSの説明

.skinMenuHeader は、予め設定しているので、
メニューにつけた画像などは、同じ画像を使います。

 

フリースペースにメニューを作るので、
.skinMenuHeader2として、新しく設定していきます。

 

padding:0 0 10px 25px; サイドバーの囲みからの余白です。
.skinMenuHeadeと、若干ことなります。
数字の設定の順番は、
上・右・下・左

この余白の設定を、レビューを見ながら行うと、
バランスが取れます。

 

fontも一応、.skinMenuHeadeと同じように設定しておきましょう。
background:url ですが、先ほども書きましたが、
サイドバーメニューと同じものを使います。

 

no-repeat の後の数字ですが、これも余白です。
今回は、2か所の設定
数字が二つの場合の設定の順番は、
上下・左右

 

この場合は、上下は0 左右は15pxとなっています。
画像から見ての余白なので、画像から文字(テキスト)の
間の余白をとりたい場合に、設定します。
これも、レビューを見ながら設定してみてください。

 

これで、CSS追加は終了です、
一度保存をしてださい。

 

今度は、ランキング(例題)のタグとテキストを
記述していくんですが、HTMLが解る方は、
そのままフリースペースに記載してください。

 

ですが、HTMLがよくわからない方は、
記事投稿で、ダミーの記事を作ってください。
通常表示で確認すると、こんな感じですね。

ダミー記事

HTML表示に切り替えて、そこにあるソースを全部コピーして、
メモに貼っておきます。

 

 

フリースペース追加に戻って、
下記コードのをコピーして、メモなどに貼り、
先ほどのダミー記事のタグを、下記指示通りに貼ってみてくださいね。

 

 

※フリースペースは、空白が入っていると、
表示できませんので、注意してくださいね。

 

貼り終えたら、一度プレビューで確認してみましょう。
※もし表示が変わっていない場合は、一度保存して、
F5キーを押下、更新をかけてみてくださいね。

 

こんな感じに変更していたら、OKです。

フリーメニュー完成

 

お疲れ様でした。

 

今回は、テーマの上にフリーメニューを追加しました。
この表示の順番は、配置設定で行います。

 

フリースペースを表示したい場所に、
配置設定のところで移動させれば、OKです。

 

 

こういうカスタマイズの方法を、覚えておくと、
応用が利きますので、ぜひとも試してみてくださいね。

 

 

 

 

A6A6

なにかお困りのことはありませんか?

良かったらメールをしてくださいね。

ぺんちゃーん クリック!!

arrow10_59x29_ylw

mail-pen1

ちえぞうに直接届きます!!

 

 

 

 

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



こんにちは。ちえぞうです。
手作りモノが、大好きで、好きが講じて手芸家になりました。
自分の時間を、もっと大事にするため、アフィリエイトもしています。 夢を叶える為に、日々奮闘中です。

もっと詳しくプロフィール♪

line

お役に立てたら、ぽちっとな ♪



Fc2ランキングへ



お問い合わせ

ペンちゃんをクリック!!

pen

ご質問や、ご相談など、
気軽にメールしてくださいね。

アメブロテンプレート参考本

このページの先頭へ