テンプレ改造CSS編集できないテンプレでもメニューを設置する。

テンプレ改造CSS編集できないテンプレでもメニューを設置する。

アメブロのテンプレート改造です。

CSS編集できないテンプレートでも、
フリープラグインフリースペースを使って、CSSの書き込みができるんです。

 

 

 

アメブロの場合、CSS(ブログのスタイル設定のことです)を、
追加・編集するのが可能なデザインスキンは、
【CSS編集可能】デザインスキンだけです。

 

ですが、他のテンプレートの場合は、
フリープラグインや、フリースペースにコードを貼ることによって、
CSSの追加が可能。
この方法を使って、メニューを設置してみましょう。

 

前の記事でも書いているんですが、
メニューバーを設置したい!!と思っている方は、
多くいらっしゃいます。

 

メニューバーは、読者さんを他のサイトへ誘導したり、
読んでほしい記事を目立たせたりといろいろな役割を果たします。
カスタマイズも、ちょっと難しいですが、
記事で解説している方法で、メニューバーの設置が、
整います。
【アメブロ テンプレ改造 メニューバーを設置する】

 

そこで、このCSSを他のテンプレートにも、
応用していきましょう。

 

 

CSS編集可能以外のデザインスキンを使う場合は、

 

<style type=”text/css”>
</style>

タグを使って、この<style type=”text/css”>と</style>の間に、
コードを記述し、フリースペースや、フリープラグインに貼れば、
CSSの追加が可能となります。

 

ただ、アメブロのフリープラグインは、
文字数制限があるので、たくさんのプラグインを貼ると、
文字数が足りなくなります。

 

なので今回は、フリースペースを使って、
コードを貼るようにしています。

 

また、コードがあまりにも長くなってしまって、
他のCSSが解らなくなってしまう場合もあります。

 

そのため、私はフリースペースもダイエットさせているんですね。

まず、フリースペースをダイエットする前に、
コードの内容をちょっとだけ理解しつつ、
メニューバーを設置させていきましょう。

 

設置方法

今回は、アメブロのCSS編集できないスキンを
使って、フリースペースにメニューバーを設置する方法を、
開設していきます。

設置する前は、こんな感じです。

サンプルブログ変更前

 

ヘッダー画像の下に、メニューを設置していきます。

 

今回も、1項目のメニューの幅は決めずに、
リストを横に並べるイメージで、メニューにしています。

 

メニュー項目の前に、リストアイコンも付けます。
(今回のヘッダー画像がワンコなので、肉球アイコンにしました。)

 

下記のURLをコピーして、
フリースペースに貼ってください。

 

フリースペースの場合は、改行が入っていると、
表示されませんので、改行はすべて削除してくださいね。
 

<div id="headerMenu"><ul class="menu"><li><a href="リンク先" target="_blank">トップページ</a></li><li><a href="リンク先" target="_blank">メニュー2</a></li><li><a href="リンク先" target="_blank">メニュー3</a></li></li></ul></div>

 

メニュー項目のリンク先と、項目名(表示される項目の名前です)は、
ご自分のメニュー項目に変更してくださいね。

 

それから、div id=”headerMenu”
これは、idの名前が “headerMenu”ですよーということなので、
自分の解る名前に変更可能です。

 

その後の、<ul class=”menu”> のclass の名前も、
変更可能です。

解りやすくつけているので、そのまま使用してもいいですよ。

 

上記のコードで、メニュー項目の設定をしますよ・・・
という設定の意味です。

 

次に、メニューのスタイルを設定していきます。

下記コードを貼っていきます。

 

<style type="text/css">
.skinContentsArea {
position:relative;
padding-top:40px !important; /*← メニューの設置場所を設定しています。*/
}
#headerMenu{
position:absolute;
top:0px;
left:0px;
margin:0;
padding:0;
}

#headerMenu{
display:block;
width:980px;
height:35px;    /*←メニューの高さの設定です。*/
padding:0 10px;
background:#ffe5e5; /*←メニューの背景画像です。*/
list-style:none;
}

#headerMenu ul.menu li{
display: block;
line-height:35px;
font-size:12px; /*←メニューの項目のフォントの大きさ*/
font-weight:bold; /*←メニューの項目のフォントを太くする設定*/
font-family:”メイリオ”,”Meiryo”; /*←メニューの項目のフォントの種類*/
display:inline;
}
#headerMenu ul.menu li a{
display:block;
float:left;
color:#ffffff; /*←メニューの項目のフォントの色*/
background:url(ミニアイコンのアップロード先) no-repeat 0 8px;
padding:0 30px;
}
#headerMenu ul.menu li a:hover{
fontweight:bold;
text-decoration:none;
color:#ff69b4; /*←クリックした時のメニューの項目の色*/
background:#ffe5e5; /*←クリックした時のメニューの背景の色*/
}
</style>

 

一度保存して、ブログを確認してくださいね。
※表示されない場合は、ブログを表示してからF5キーで更新をかけてください。

 

出来上がりはこんな感じ。

 
サンプルブログメニュー設置

 

 

もし、表示がうまくできない場合は、
改行が抜けていないか、; とか ”” とかが、
全角だったり } が消えていたりということが、考えられます。

 

コードの見直しをしてから、
再度確認をおこなってくださいね。

 

こんな感じで、リスト形式のメニューなら、
日記ブログや趣味ブログでも、自然な感じに仕上がりますよね。

 

ぜひメニューバーを設置して、
読者さん目線のブログ・カスタマイズをしてくださいね。

 

 

 

テンプレート・カスタマイズのことで、
ご質問・ご相談がある方は、お気軽にメールをしてくださいね。

 
 
 

One Response to “テンプレ改造CSS編集できないテンプレでもメニューを設置する。”

  1. […] 場合は、 こちらに設置の方法があります。 → 【アメブロ テンプレ改造 メニューバーの設置方法】 […]

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



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

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

line

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



Fc2ランキングへ



お問い合わせ

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

pen

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

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

このページの先頭へ