なにわのディズニー好き男子のブログ

ディズニー好き男子のブログです!大阪から三重県に移り住んだため東京ディズニーリゾートへのインパ頻度は少なめで恐縮ですが、関西でのディズニー関連イベントに積極的に参加したいと思っています!

ディズニー好き男子のブログです!
大阪から三重県に移り住んだため東京ディズニーリゾートへのインパ頻度は少なめで恐縮ですが、
関西でのディズニー関連イベントに積極的に参加したいと思っています!

リストタグの黒丸マーカーをミッキーっぽく変更♪

ブログデザインをディズニーっぽくマイナーチェンジ

2日前になってしまいましたが

ブログデザインをマイナーチェンジしました!
 
具体的には
  1. リストタグの黒丸マーカーをミッキーっぽく変更
  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;
}

 
 
以上、リストタグの黒丸マーカーをミッキーっぽく変更する
テクニックのご紹介でした!
 
皆さんのディズニーデザインブログのオリジナルテクニックがあれば
教えていただければ嬉しいです(*^_^*)