CSS リストマーク
先日リストマークのズレについて質問がありました
リストマークの付け方も説明しておきます
リストマークってなに？
サイドバーの中の項目はHTMLは ul li のリスト形式で書かれています
その頭につけるマークなんで・・・リストマーク
カンタンにはスタイルにlist-style-typeを指定します
・・・これは種類も少ないし、マークと文字のズレが訂正できません
それにアメブロのCSSでlist-style: none;で表示しないように設定されています
ここでは小粋空間さんが紹介された背景画像を使ったリストマークを説明します
アメブロで記事を書くときに使う絵文字を使った例です
http://stat.ameba.jp/blog/ucs/img/char/char2/061.gif
- 2008年03月 ( 2 )
- 2008年02月 ( 2 )
- 2008年01月 ( 1 )
http://stat.ameba.jp/blog/ucs/img/char/char2/118.gif
- 2008年03月 ( 2 )
- 2008年02月 ( 2 )
- 2008年01月 ( 1 )
http://stat.ameba.jp/blog/ucs/img/char/char2/148.gif
- 2008年03月 ( 2 )
- 2008年02月 ( 2 )
- 2008年01月 ( 1 )
CSSの最後にコピペしてください
/* リストマーク */
.menu_frame ul {/* 全体の位置 */
list-style: none;
margin-left: 5px;/* 注1 */
}
#reader li {/*reader : 読者一覧*/
margin: 0;
padding-left: 16px;/*画像横+α 注2 */
background: url(画像のURL) no-repeat;
background-position:0px 0px;/*画像位置 横 上 注3 */
}
#bookmark li {/*bookmark : ブックマーク*/
margin: 0;
padding-left: 16px;/*画像横+α*/
background: url(画像のURL) no-repeat;
background-position:0px 0px;/*画像位置 横 上*/
}
#favorite li {/*favorite : お気に入りブログ*/
margin: 0;
padding-left: 16px;/*画像横+α*/
background: url(画像のURL) no-repeat;
background-position:0px 0px;/*画像位置 横 上*/
}
#recent_entries li {/*recent_entries : 最新の記事*/
margin: 0;
padding-left: 16px;/*画像横+α*/
background: url(画像のURL) no-repeat;
background-position:0px 0px;/*画像位置 横 上*/
}
#recent_comment li {/*recent_comment : 最近のコメント*/
margin: 0;
padding-left: 16px;/*画像横+α*/
background: url(画像のURL) no-repeat;
background-position:0px 0px;/*画像位置 横 上*/
}
#theme_list li {/*theme_list : ブログテーマ一覧*/
margin: 0;
padding-left: 16px;/*画像横+α*/
background: url(画像のURL) no-repeat;
background-position:0px 0px;/*画像位置 横 上*/
}
#archives li {/*archives : アーカイブ*/
margin: 0;
padding-left: 16px;/*画像横+α*/
background: url(画像のURL) no-repeat;
background-position:0px 0px;/*画像位置 横 上*/
}
注1 と 注２ の位置関係
小さな画像を使うとやはりズレが気になります・・・
注3 の位置関係
[一覧を見る] がジャマになる場合は右寄にします
/* [一覧を見る]を右に */
.menu_frame p.list{
text-align: right;
padding-right: 15px;
}
ココにも使えそうなアイコンがいっぱいあります
Free Tiny Small Mini Icons Bullets:
http://icons.primail.ch/
自分で作った画像でも可能です
その場合、文字のサイズに合うサイズで作ってください
参考：
小粋空間: リストマークの画像のずれを修正する
http://www.koikikukan.com/archives/2005/06/14-235902.php
ペタキャラ・・・・
基本的にペタは反対なんです
アフェリだけのサイトや誘導サイトへの引き込みの仕組みみたいで・・・
でも実際ペットとか好きで（特にネコちゃん）皆さんのサイトにお邪魔したときペタっとね・・・
今住んでいるところがペット禁止なんで・・・・
できればかわいい写真をいっぱい貼っていただくと個人的にはうれしいのですが・・・
勝手なお願いはこのへんにしておいて
来週からペタキャラが変わるみたいです
ということで・・・？
記念に現在のペタキャラを公開しちゃってもいいのかな？
赤ちゃん 10級
ひよこ 9級
パグ 8級
前日付いたペタ数 4～6
ペンギン 7級
前日付いたペタ数 7～9
豚 6級
馬 5級
前日付いたペタ数 15～19
羊 4級
イエティ 3級
前日付いたペタ数 30～49
マンモス 2級
前日付いたペタ数 50～99
赤恐竜 1級
前日付いたペタ数が101個以上（100個の時は黒恐竜）
ペタ前
ペタ後
黒恐竜 1級
前日付いたペタ数がきり番（100個）のとき現れます
緑恐竜 1級
午前と午後3時00分～3時03分の3分間だけ赤恐竜が緑に変身～
マウスを乗せるとアクションはしますがクリックしてもエラーになるだけです・・・
新キャラになったらファイルが削除され表示できなくなる場合があります
3/24・・・
キャラが追加になって進級？の基準がきつくなりました
ペタキャラタレントさんブログみたいに写真に・・・・・
あの～・・・・・
完全にお遊びです
タレントさんブログで
写真が保護されているのありますよね
写真をコピーしようと写真の上で右クリックしても反応しない・・・あれ
フリープラグインにそのままコピペです
<script type="text/Javascript" src="http://stat.ameba.jp/blog/ucs/js/common/protectimage.js"></script >
<script type="text/JavaScript">
<!--
window.onload = function() {protectImageLoad();};
-->
</script>
※このjavascriptはタレントさんブログで使われているもので、アメブロで用意している物と思われますが、万が一タレントさんのブログを作った方に著作権があると判明した場合は削除してください
・・・アメブロで用意してありゃ勝手に使っていいのか？は考えないようにして
※スリープラグインにすでに入っているjavascriptでonload命令が使われている場合はどちらかが動かなくなる場合があります、その場合は削除してください
ＩＥ以外では普通に右クリックできますし
ソースを見られればお持ち帰りされます
ディスプレイに表示されてしまえばどんな対策をしようと
プリントスクリーンで画面そのままコピーして写真部分だけ切り抜かれればとられてしまいます
現時点では画像を取られないようにすることは不可能と思われます
そのことをわかった上で、あくまでもお遊びとして使ってください
他にも
画像を背景として表示させて
その上に1px×1pxで作った透過画像を背景の大きさだけ敷き詰める方法もあります
右クリックしてコピーできたと思ってみたら何もない？・・・1×1の透明の画像ですから見えないだけです
リクいただければ書きますが
1つ1つ設定しなくてはいけませんので面倒です
クリックして大きな画像もできませんし
それにプリントスクリーンにはやっぱりお手上げですから・・・・・