エキサイトブログのテキストカスタマイズスキンのメニューアイコンを変える
2016年 01月 20日
エキサイトブログのスキン、「テキストカスタマイズ右カラム」のスキンをベースに、メニューの「+」のアイコンを変えてみましょう。
文字で置き換える
「デザインスキン」→「カスタマイズ」→「テキストカスタマイズ右カラム」のスキンを自分のブログに適用したら、
編集のCSSから下記のコードを探しましょう。
ご丁寧にメニューリストアイコンってつけてくれていますが、デフォルトで入っている+はここで設定しているのですね。
この部分を文字で変更してあげると好きなものにできます。!とか○とか×とか。
♡などの機種依存文字もいけるかもしれませんが、環境によっては見えないでしょう。
よくよく調べると、コードで入れてあげれば見えるみたいです。
例)✿ こんなお花だとか(\00273f) ♥ ハートマーク(\002665)
>[css] contentプロパティで挿入できるコンテンツ
色とか入れてあげるとかわいいですね。
color: #e74c3c;
言葉でもいけますね、文字数も1文字でなくても大丈夫です。
画像にする
文字なら比較的簡単に変更することができました。
画像ではどうでしょうか?
画像の場合は、contentの中身を空にして、代わりにbackgroundで背景画像を指定しましょう。
画像サイズが小さい場合はそのままでも大丈夫ですが、大きかったりサイズが合わない場合は
background-size: 18px; など背景画像のサイズを提示してあげましょう。
content: "";
background: url(画像URL) no-repeat;
padding-left: 18px;
}