人気ブログランキング | 話題のタグを見る

エキサイトブログのテキストカスタマイズスキンのメニューアイコンを変える

エキサイトブログのスキン、「テキストカスタマイズ右カラム」のスキンをベースに、メニューの「+」のアイコンを変えてみましょう。

エキサイトブログのテキストカスタマイズスキンのメニューアイコンを変える_a0342241_16363200.png

文字で置き換える

「デザインスキン」→「カスタマイズ」→「テキストカスタマイズ右カラム」のスキンを自分のブログに適用したら、
編集のCSSから下記のコードを探しましょう。

.menu .menu-title:before { content: "+"; /*---メニューリストアイコン---*/ }

ご丁寧にメニューリストアイコンってつけてくれていますが、デフォルトで入っている+はここで設定しているのですね。
この部分を文字で変更してあげると好きなものにできます。!とか○とか×とか。

エキサイトブログのテキストカスタマイズスキンのメニューアイコンを変える_a0342241_16441458.png

♡などの機種依存文字もいけるかもしれませんが、環境によっては見えないでしょう。
よくよく調べると、コードで入れてあげれば見えるみたいです。

例)✿ こんなお花だとか(\00273f) ♥ ハートマーク(\002665)

[css] contentプロパティで挿入できるコンテンツ
色とか入れてあげるとかわいいですね。

エキサイトブログのテキストカスタマイズスキンのメニューアイコンを変える_a0342241_16573301.png
content: '\002665';
color: #e74c3c;

言葉でもいけますね、文字数も1文字でなくても大丈夫です。


エキサイトブログのテキストカスタマイズスキンのメニューアイコンを変える_a0342241_16453436.png

画像にする

文字なら比較的簡単に変更することができました。
画像ではどうでしょうか?
画像の場合は、contentの中身を空にして、代わりにbackgroundで背景画像を指定しましょう。
画像サイズが小さい場合はそのままでも大丈夫ですが、大きかったりサイズが合わない場合は
background-size: 18px; など背景画像のサイズを提示してあげましょう。

.menu .menu-title:before {
content: "";
background: url(画像URL) no-repeat;
padding-left: 18px;
}
エキサイトブログのテキストカスタマイズスキンのメニューアイコンを変える_a0342241_10581770.png

by exblog-tips | 2016-01-20 11:11 | メニュー周り

エキサイトブログをとことん使い倒すブログです。こんなことできないかな?をゆるっと募集中!


by エキブロまん