メニューにアイコンを入れました。
WordPress.com では、「外観」→「メニュー」より、ナビゲーションメニューを設定することができますが、オプションとして、各メニューにCSS class を指定することができるようになっています。カスタムデザインにアップグレードし、CSSスタイルシートエディターの欄内に「li.folder > a {background-image: url(http://example.com/image/hogehoge.jpg”);background-position:5px center;background-repeat:no-repeat;}」といったような感じのCSSを追加すると、上のようにメニューの左側にアイコンをつけることができます。
複数のクラスを指定するときは、半角空白で区切ればいいようです。
例えば、アイコンと文字色を別々でクラス指定できるようにしておき、下図のように表現することができます。
私は Freemind というソフトで情報の一元化を行なっているのですが、そこで使っているアイコンと同じものをブログの方でも使っていこうと思っています。
このようにCSSのクラスを使うことによる利点のひとつは、アイコンを別のものに変更する場合、そのクラスに該当する部分のアイコンをCSSを修正することで入れ替えることができるということです。投稿記事に直接、画像を貼っている場合には、後々の変更がたいへんになります。なお、この原理は、FreeMind の方のアイコンでも同様です。
はじめまして。
私もｔｗｅｎｔｙelevenでホームページを作成中で、いつも参考にさせていただいてます。
メニューにアイコンを入れる方法を試しているのですが、表示できせん。
原因はおそらくドロップダウンメニューがcomemoさんのは半透明になっているからだと思います。
半透明にするにはどうすればよいでしょうか？
お問い合わせありがとうございます。
半透明の命令は、
A:hover {
opacity: 0.7;
}
で行なっています。
例えば、フォルダーのアイコンを表示するところのCSSには、
#access li.folder > a, #content li.folder > a {
background-image: url(‘http://comemo508.files.wordpress.com/2011/11/folderopened_yellow.png’);
background-position: 5px center;
background-repeat: no-repeat;
background-color: #F9F9F9;
}
というものを使用しています。
もし、該当のサイトのアドレスを教えて頂ければ、より直接的なアドバイスができると思います。
返答ありがとうございます！
comemoさんと同じように表示させることができました！
要素を検証しても全然わからなかったので大変嬉しいです！
サイトはザンプでまだローカルで試しているところです。
近々公開予定なのですが、また困ったことがあったら問い合わせていただきます。
これからもtwentyelevenのカスタマイズを色々教えてください（＾＾）
夜分失礼しました。
うまくいかれたようでよかったです！
お役に立てる記事が書けるように今後も精進します。
何かありましたら、またご連絡下さい。私自身、よくあることなのですが、人に聞いた瞬間に解がひらめくこともありますので。