ブログにクイックリンクを付ける

★　ブログにクイックリンクを付ける。

★　変更(2012.05.26)

ヘルプの前にマイページ情報を追加

●　新しいマイページでは、クリックをたくさんしないといけないので、
　　ブログにクイックリンクをつけて、クリックを少くさせます。

　　また、ＣＳＳ編集ページやなうなどがクリックリンクにないので、
　　追加してみました。

　　アメゴールドは、除きました。

　　該当するリンクをクリックすると新しいページで開く様になっています。

■　このクイックリンクは、他の人も使えます。
　　アメブロは、ログインをしたら、ログインを保持していて、記事を書くなら
　　下記URLで、共通のURLです。
http://blog.ameba.jp/ucs/entry/srventryinsertinput.do

　　ログイン状態をアメーバ側でチェックしてログインされているアメーバID
　　の記事を書くなどのページを表示するためです。

●　現在のマイページのクイックリンク（緑枠部分がβ版から変わった部分）

●　今回、ブログに付けるクイックリンク（緑枠部分が変更部分）

◆　設置方法

①　フリープラグインへ追加する

　■　説明

　　・　下記はフリープラグインの最初に１つあればOKです。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>

　　　・　下記が既に設定されていれば、不要です。

<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>

　　・　window.onload が他にもフリープラグインにある場合は、１つにする必要があります。
　　　　例・・・　xxxxxx()が存在した場合

window.onload = function(){click_link_ver1("#QuickLink_C","t",1000),xxxxxx();}

　　・　"#QuickLink_C"・・・クイックリンクの表示部分（クリックする部分）のセレクタ名

　　・　"s"・・・ slideToggle　での開閉　"t"・・・toggle　での開閉

　　・　1000・・・ slideToggle　での開閉の時間（1000は1秒）

②　フリースペースに追記する。

<div id="QuickLink_M"><span style="cursor: pointer;" id="QuickLink_C">クイックリンク</span></div>

●　画像にしたい場合は下記の様にする

③　ＣＳＳへ追記する

/* ------------------------------------------------------- */
/* クイックリンクの設置　　　　　　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
#QuickLink_M{/* クイックリンクの表示部分 */
position:absolute;/* 相対配置 */
top:0px;/* 上から */
left:0px;/* 左から */
z-index:9999;
background-color:#ffffff;/* 背景色 */
}
#QuickLink{/* 表示・非表示される部分 */
width:590px;/* 幅 */
position:relative;/* 相対配置 */
top:3px;/* 上から */
left:10px;/* 左から */
border:1px solid #dddddd;/* 枠線 */
padding: 0 0 20px 10px;
z-index:9999;
background-color:#ffffff;/* 背景色 */
border-radius: 5px;/* CSS3角丸 */
-moz-border-radius: 5px;/* Firefox角丸 */
-webkit-border-radius: 5px;/* Safari、Google Chrome角丸 */
font-size:10px;/* 文字サイズ */
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);/* 影 */
}
#QuickLink .QL_sp {/* 大見出し(アメブロなどの表示部分) */
padding:0px 0px 0px 5px;/* 隙間 */
font-size:12px;/* 文字サイズ */
color:#0000ff;/* 文字色 */
background-color:#cccccc;/* 背景色 */
display:block;
margin:5px 0px 0px 0px;/* 隙間 */
}
#QuickLink span {/* 小見出し ([投稿・編集]などの表示部分) */
padding:0px 0px 0px 0px;/* 隙間 */
font-size:10px;/* 文字サイズ */
color:#ff88ff;/* 文字色 */
}
#QuickLink a {/* リンク部分 */
color:#777777;/* 文字色 */
}
#QuickLink a:hover {/* リンク部分にカーソルを乗せた時 */
color:#cccccc;/* 文字色 */
text-decoration:none;/* アンダーラインを表示しない */
}
#QuickLink div {/* １列の部分 (現在は４列) */
float: left;
width: 130px;/* 幅 */
padding-right: 15px;/* 隙間 */
}
#QuickLink:after {
display : block;
clear : both;
content : '.';
visibility: hidden;
height: 0;
}
/* ------------------------------------------------------- */

リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）

アメブロ　新ＣＳＳ　ＣＳＳ編集用デザイン　無料
カスタマイズ　アメブロカスタマイズ　初心者
ＣＳＳ　スタイルシート　デザイン
javascript jQuery

ブログにクイックリンクを付ける