リストタグの黒丸マーカーをミッキーっぽく変更♪
ブログデザインをディズニーっぽくマイナーチェンジ
2日前になってしまいましたが
ブログデザインをマイナーチェンジしました!
具体的には
- リストタグの黒丸マーカーをミッキーっぽく変更
- Twitterアカウントへのリンクバナー作成
以上2点です\(^o^)/
今日は最初の"リストタグの黒丸マーカーをミッキーっぽく変更"
についてご紹介したいと思います!
ぜひディズニーブロガーの皆さんにも使って頂きたいと思います!
学部生時代は学生向けのWebサイトを運営していたこともあって
この程度の編集はある程度できます♪
ミッキーっぽいリストマーカーを作る。
まず、ミッキーモチーフの絵を書きます。
僕はphotoshopを使って楕円を3つ合わせて
ミッキーっぽいモチーフを書きました。
丸3つくらいであれば、ペイントでも書けると思います!
今の僕の画力ではこの辺が限界ですね(^_^;)
ミッキーっぽいマーカー画像のURLを取得する
さて、できあがった画像をインターネット上にアップロードします。
僕の場合は、はてなフォトライフの
非公開フォルダにアップした後に
画像のURLをコピーして準備万端です。
(その他、Dropbox・ameba画像フォルダなど様々な方法があると思います。)
CSSでリストマーカーをミッキーっぽく変える編集をする
はてなブログでは
"デザイン設定"
↓
"カスタマイズ"
↓
"デザインCSS"
から編集できます。
(それぞれのブログに適した方法でCSSを編集してください)
まず、ulタグの黒丸をなくしてしまいます。
その次に作成した画像を背景画像として貼り付けるという仕組みです。
以下にそのCSSコードを示しますが
ulとliで共に黒丸をなくすように設定していますが
念のためです!←
そして、最後にno-repeatと示して
繰り返し表示させないことがポイントです!
リストタグの黒丸マーカーをミッキーっぽく変更するCSS記述
ul{
list-style:none;
}
li{
list-style:none;
padding-left:30px;
background:url(http://画像のURL) no-repeat;
}
以上、リストタグの黒丸マーカーをミッキーっぽく変更する
テクニックのご紹介でした!
皆さんのディズニーデザインブログのオリジナルテクニックがあれば
教えていただければ嬉しいです(*^_^*)