VIVID COLORS DESIGN -ビビッドカラーズデザイン-

まいにちたのしくものづくり。


テーマ:
はじめてアメブロカスタマイズしました。

折角なのでいろいろやり方やびっくりしたこと、注意したいことなどメモしていきたいとおもいます☆



■プラグインとしてJavaScriptのコードを貼付けられるようになっていた。

アメブロはJavaScriptは一切使えないと思っていました…!


■JUGEMやFC2ブログのようにHTMLは変更できないが、フリースペースを使えばグローバルナビゲーション等も作れる


HTMLいじれないからグローバルナビとか無理でしょ、と思っていたのですが、
自由にHTMLを入れられるフリースペースがあるので、こことCSSを上手く使ってグローバルナビが作れました。


■WordPressみたいに記事書いている途中に自動保存してくれない。


投稿画面周辺に外部サイトへのリンクが多いのでうっかり押すと全部消えて涙目っていう…。この記事を書いている最中にもやらかしました;;

メモ帳で書いて貼付けようと思います…!




HTMLいじれないし、思い切ったことは何も出来ないんじゃ?と思っていたのですが、
工夫次第で色々できますねー!


ということで、今日は

・外部のアクセス解析の貼付け方
・グローバルナビゲーションの作り方

の二つをメモ。




外部のアクセス解析を使用する方法

【フリープラグイン】を使う

管理画面から
【サイドバーの設定】→【プラグインの追加】ページへ
フリープラグインのタブに切り替えて
そこにAnalyticsのコードなどを入れて保存

$VIVID COLORS DESIGN-フリープラグイン

【サイドバーの配置】ページに移動して
フリープラグインの項目を使用する機能の方にドラッグする

$VIVID COLORS DESIGN-使用するにする


グローバルナビゲーションを入れる方法

【フリースペース】を使う

管理画面から
【フリースペース】を使う

管理画面から
【サイドバーの設定】→【フリースペースの編集】ページへ

入力エリアにHTMLタグを記入する。
改行の後に自動で
タグをいれてしまうので、改行なしでいれる。
今回はこんな感じで入力。

<div id="gmenu"><ul><li><a class="menu1" href="http://ameblo.jp/yuki-930/">このブログのトップへ</a></li><li><a class="menu2" href="http://yuki930.v-colors.com" target="_blank">ポートフォリオサイトへ</a></li><li><a class="menu3" href="http://blog.v-colors.com" target="_blank">VIVID COLORS + BLOGへ</a></li><li><a class="menu4" href="http://fw.v-colors.com" target="_blank">Fireworksマニアへ</a></li><li><a class="menu5" href="http://twitter.com/yuki930/" target="_blank">twitterへ</a></li></ul></div>


管理画面から
【デザインの変更】→【CSSの編集】

CSSで表示位置をスタイリング。

まず、親要素のpositionをrelativeに。

#subFrame{
position:relative;
}

あとはグローバルナビの位置と表示を調整。
今回はこんな感じで。

#gmenu {
position:absolute;
top:260px;
left:0;
height:50px;
width:960px;
background:url(http://data.v-colors.com/yuki-930/gmenu.gif) no-repeat;
display:block;
}

#gmenu ul {
margin:0;
padding:0;
list-style:none;
display:block;
}

#gmenu ul li{
margin:0;
padding:0;
list-style:none;
float:left;
}

#gmenu ul li a{
background:url(http://data.v-colors.com/yuki-930/gmenu.gif) no-repeat;
display:block;
height:50px;
text-indent:-9999px;
overflow:hidden;
}

#gmenu ul li a.menu1 {
margin:0 0 0 10px;
background-position:-10px 0;
width:164px;
}

#gmenu ul li a.menu1:hover{
background-position:-10px -50px;
}

#gmenu li a.menu2 {
margin:0 0 0 5px;
background-position:-179px 0;
width:202px;
}

#gmenu li a.menu2:hover{
background-position:-179px -50px;
}

#gmenu li a.menu3 {
margin:0 0 0 5px;
background-position:-386px 0;
width:211px;
}

#gmenu li a.menu3:hover{
background-position:-386px -50px;
}

#gmenu li a.menu4 {
margin:0 0 0 5px;
background-position:-602px 0;
width:208px;
}

#gmenu li a.menu4:hover{
background-position:-602px -50px;
}

#gmenu li a.menu5 {
margin:0 0 0 5px;
background-position:-815px 0;
width:137px;
}

#gmenu li a.menu5:hover{
background-position:-815px -50px;
}


【サイドバーの配置】ページに移動して
フリースペースの項目を使用する機能の方にドラッグする







HTMLが変更できないのである程度デザインの制約はでるものの、
結構細分化してclassが切ってあるので思ったより細かくデザイン指定出来ました。

また気付いたことなどちょこちょこ書いていきますー☆
AD
いいね!した人  |  コメント(6)  |  リブログ(0)

YUKIさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

AD

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。