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

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



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

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


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


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


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


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

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




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


ということで、今日は

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

の二つをメモ。




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

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

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



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




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

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

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

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

入力エリアに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が切ってあるので思ったより細かくデザイン指定出来ました。

また気付いたことなどちょこちょこ書いていきますー☆