こんにちは。
AmebaOwndマイスター加藤です。
あの怒濤の２泊３日、から一週間が経ちました。
すでに７日経過ですよ。。
早いなぁ～。。
あの日は暖かく雨まじりな日もありましたが、
今日は小雪混じりです。。
さて、未だオフィシャルアナウンスが無いと思うのですが
あっ、新・新デザイン「CSS編集用デザイン」の件です。
もし、何かしら情報ありましたら是非教えて下さいね。
先日は、新・新デザインに「ヘッダー画像」を設置してみました。
今回は、「メニューバー」を設置してみたいと思います。
イメージは記事トップの画像をご覧くださいませ。。
メニューバーを設置するには、フリースペースを使用します。
今回は、新・新デザイン「CSS編集用デザイン」の
２カラム右ワイドと２カラム左ワイドでのメニューバー設置方法になります。
フリースペースは、マイページ＞設定・管理＞フリースペースになります。
下の枠で囲った中のHTMLタグをコピーして、フリースペースに貼り付けてください。
メニューバーに表示する文字はそれぞれのお使いの目的に合わせて変更してくださいね。
※赤文字の部分です。
貼り付けるとこんな感じ。。
ここまで大丈夫ですかね^_^;
新・新デザイン「CSS編集用デザイン」には、３種類のテンプレートがあります。
お好きなものを選んでくださいね。
必要なCSSはこちらになります。
こちらを、CSS編集のエディタの１番下に、貼り付けて下さいませ。
貼り付ける場所がわからない方は前回の記事を参考にしてみてください。
メニューバーのカラーを変更したい方は。。
赤文字の部分を変更してくださいね。
さて、これでフリースペースとCSSの設定は完了になります。
それぞれ設置したら必ず保存してくださいね。
是非チャレンジしてみてくださいませ！！
ではまた。
加藤でした。
私のSmilefactorytenのAmebaOwndサイトはこちらでーす！！
kato AmebaOwnd site
AmebaOwndマイスター加藤です。
あの怒濤の２泊３日、から一週間が経ちました。
すでに７日経過ですよ。。
早いなぁ～。。
あの日は暖かく雨まじりな日もありましたが、
今日は小雪混じりです。。
さて、未だオフィシャルアナウンスが無いと思うのですが
あっ、新・新デザイン「CSS編集用デザイン」の件です。
もし、何かしら情報ありましたら是非教えて下さいね。
先日は、新・新デザインに「ヘッダー画像」を設置してみました。
今回は、「メニューバー」を設置してみたいと思います。
イメージは記事トップの画像をご覧くださいませ。。
メニューバーを設置しよう
メニューバーを設置するには、フリースペースを使用します。
今回は、新・新デザイン「CSS編集用デザイン」の
２カラム右ワイドと２カラム左ワイドでのメニューバー設置方法になります。
フリースペースは、マイページ＞設定・管理＞フリースペースになります。
下の枠で囲った中のHTMLタグをコピーして、フリースペースに貼り付けてください。
メニューバーに表示する文字はそれぞれのお使いの目的に合わせて変更してくださいね。
※赤文字の部分です。
<div id="navi"><ul><li class="left"><a href="#">メニュー１</a></li><li><a href="#">メニュー２</a></li><li><a href="#">メニュー３</a></li><li><a href="#">メニュー４</a></li><li><a href="#">メニュー５</a></li></ul></div>
貼り付けるとこんな感じ。。
ここまで大丈夫ですかね^_^;
CSSを設置してみよう
新・新デザイン「CSS編集用デザイン」には、３種類のテンプレートがあります。
お好きなものを選んでくださいね。
注意！！
今現在、新・新デザインへの変更を考えていない人は、絶対に「CSS編集用デザイン」を弄らないようにしてください。
選択してクリックしてしまうと、今の「新CSS編集用デザイン」には戻りません。デザインも全て初期化されます。
今現在、新・新デザインへの変更を考えていない人は、絶対に「CSS編集用デザイン」を弄らないようにしてください。
選択してクリックしてしまうと、今の「新CSS編集用デザイン」には戻りません。デザインも全て初期化されます。
必要なCSSはこちらになります。
こちらを、CSS編集のエディタの１番下に、貼り付けて下さいませ。
貼り付ける場所がわからない方は前回の記事を参考にしてみてください。
div#subA{
position:static;}
#navi{position: absolute;top: 0;left: 0;width:1120px;font-size: 12px !important;}
#navi ul{margin: 0;padding: 1px 0;list-style: none;}
#navi ul li{margin: 0;padding: 0 0 0 1px;display: inline;width: 223px;line-height: 3.6;float: left;overflow: hidden;white-space:nowrap;}
#navi ul li.left{margin: 0;padding: 0;display: inline;width: 224px;line-height: 3.6;float: left;overflow: hidden;white-space: nowrap;}
#navi ul li a{display: block;text-align: center;font-weight: bold;background-color: #7B746B;color: #F4E5D1 !important;text-decoration: none;border: 1px solid #ffffff;}
#navi ul li a:hover{background-color: #ffffff;color: #7B746B !important;border: 1px solid #F4E5D1;}
#navi ul li ul li{display: block;margin: 0;padding: 0;position:relative;border-top:1px solid #ffffff;float:none;width:223px;}
#navi ul li ul li.left{display:block;margin: 0;padding: 0; position: relative;border-top: 1px solid #ffffff;float: none;width: 224px;}/* OFF */
#navi ul li ul {display: none;}/* ON */#navi ul li:hover ul{margin: 0;padding: 0; display: block;position: absolute; z-index: 100;}
メニューバーのカラーを変更したい方は。。
赤文字の部分を変更してくださいね。
div#subA{
position:static;}
#navi{position: absolute;top: 0;left: 0;width:1120px;font-size: 12px !important;}
#navi ul{margin: 0;padding: 1px 0;list-style: none;}
#navi ul li{margin: 0;padding: 0 0 0 1px;display: inline;width: 223px;line-height: 3.6;float: left;overflow: hidden;white-space:nowrap;}
#navi ul li.left{margin: 0;padding: 0;display: inline;width: 224px;line-height: 3.6;float: left;overflow: hidden;white-space: nowrap;}
#navi ul li a{display: block;text-align: center;font-weight: bold;background-color: #7B746B;color: #F4E5D1 !important;text-decoration: none;border: 1px solid #ffffff;}
#navi ul li a:hover{background-color: #ffffff;color: #7B746B !important;border: 1px solid #F4E5D1;}
#navi ul li ul li{display: block;margin: 0;padding: 0;position:relative;border-top:1px solid #ffffff;float:none;width:223px;}
#navi ul li ul li.left{display:block;margin: 0;padding: 0; position: relative;border-top: 1px solid #ffffff;float: none;width: 224px;}/* OFF */
#navi ul li ul {display: none;}/* ON */#navi ul li:hover ul{margin: 0;padding: 0; display: block;position: absolute; z-index: 100;}
さて、これでフリースペースとCSSの設定は完了になります。
それぞれ設置したら必ず保存してくださいね。
是非チャレンジしてみてくださいませ！！
ではまた。
加藤でした。
私のSmilefactorytenのAmebaOwndサイトはこちらでーす！！
kato AmebaOwnd site