CSS ページ・ナンバー・ナビゲーション

ページ・ナンバー・ナビゲーション・・・・・こんなのはいかがでしょう？

明朝系のフォントにしてみる

<< < 前のページ 1 | 2 | 3 | 4 | 5 次のページ > >>

/* page no. navi */
.page{
font-family: serif;
}


現在のページを大きくしてみる & マウスがのったらチョット大きく

<< < 前のページ 1 | 2 | 3 | 4 | 5 次のページ > >>

/* page no. navi */
.page .now{
font-size: 1.5em;
font-weight:bold;
}
.page a:hover{
font-size: 1.3em;
}


背景色をつけてみる (例はわかりやすく派手な赤にしてありますが)

<< < 前のページ 1 | 2 | 3 | 4 | 5 次のページ > >>

/* page no. navi */
.page .now{
background: #ff0000;
}


背景画像をつけてみる（水色の●の画像を使用）

<< < 前のページ 1 | 2 | 3 | 4 | 5 次のページ > >>

/* page no. navi */
.page .now{
background:url(背景画像のURL) no-repeat center;
}



ボタン風にしてみる

<< < 前のページ 1 | 2 | 3 | 4 | 5 次のページ > >>

/* page no. navi */
.page .now{
background:#ececec;
border:1px solid;
border-color:#fafafa #949494 #949494 #fafafa;
color:#000000;
text-decoration: none;
padding:2px 5px 0 5px;
font-weight:bold;
}
.page a:link,.page a:visited{
background:#ececec;
border:1px solid;
border-color:#fafafa #949494 #949494 #fafafa;
color:#666666;
text-decoration: none;
padding:2px 5px 0 5px;
}
.page a:hover{
background:#cfcfcf;
border:1px solid;
border-color:#949494 #fafafa #fafafa #949494;
color:#000000;
padding:2px 5px 0 5px;
font-weight:bold;
}

※スキンによってはCSSの書き換えができない場合があります

CSS ページ・ナンバー・ナビゲーション2

CSS ページナンバーナビゲーション3

CSS 背景色と背景画像

ここでは灰色ぽい背景色と付箋紙の背景画像を使用しています

付箋紙の部分をリピートしてもかまわなければ

灰色地に付箋紙に画像だけでいいのですが

それではウザすぎます

かといってその画像を使ってリピートなしだと下のほうに背景が付きません

そこで、背景色を指定して全部に色をだしてから

その上に背景画像をのせます

用意する背景画像はバックを背景色と同じにするか、透過処理をしておかないとうまく合いません

またまた、例のごとく青字をCSSにコピペ

body{
background-color: #dbdbdb;/*　背景の色 */
background-image:url(背景画像のURL);
background-repeat : no-repeat;/* 背景画像の繰り返し*/
background-position : top center ;/* 背景画像の位置(上の真ん中)*/
}

これで、背景色の上に背景画像を載せることができます

通りすがりの者さん

>記事内の画像が別ウインドウではなく、アメブロ内の画像フォルダで開くときのような表示がされますよね？
>あれはどのような仕組みになっているのか、差し支えなければ教えていただきたいのです。
ThickBoxを使っています

もし、アメブロをお使いでしたら画像フォルダーとかで使っていると思います
・・・っん？すでにアメブロにはインストールされているんです・・・・

フリープラグインにjavascriptを書こうにも文字数が限られているため・・・・
自分用の画像フォルダーで使えるんなら

記事の中でも使ってかまわないよね・・・って

勝手にアメブロにはインストールされているThickBoxを呼び出しちゃっています
あと、CSSは呼び出せませんので自分のところにコピペしています

http://ameblo.jp/exlink/entry-10055734379.html
を見ていただければだいたいの仕組みはわかっていただけるかと・・・・

ただ、その後、いろいろさわっていて
自分でもわけがわからなくなっているところがあって
皆さんに公開できない状態なんです・・・

タイトル文字を画像に置き換えも
調子に乗ってjavascriptでやってしまいましたので
ますますゴチャゴチャになっていて
自分でもCSSに直したいのですが
さわりたくないって状態です

リクエストが多ければ
なんとか早めに公開したいとは思っているのですが・・・・

もし、アメブロ以外からお越しの場合は
yahoo、Googleで「ThickBox」を検索下さい
個人的にはThickBoxよりLightbox系のSlimboxが好みなんです
写真が開くときのエフェクトが気に入ってます

ThickBoxにもlightboxのプラグインが出たのですが
アメブロさんでインストールしていただかないことには・・・・
お願いします！！

自分で借りているサーバーに置いて
呼び出せばなんでも使えるのですが・・・・・
公開を目標にしておりましたので
誰でもできる方法をとりたいのです

答えにはなったでしょうか？