前回公開した「Jimdoの見出しにアイコンを付けたい」は、Firefoxでは正しく表示されないことがわかり、断念しました。今回ももしかしたら問題があるかもしれませんが、その時はまた教えてください。
すべての見出しの頭にアイコンをつける方法を説明しています（改良版）
見出し大に共通したアイコンをつけることを想定しています。
アイコンが付いている見出しをたまに見かけると思います。
通常そのアイコンは画像を使っているのですが、今回は、Jimdoがutf-8で書かれているため、unicodeを使用してアイコンをつけてみました。
※ここで紹介させていただいたアイコンが全てのブラウザやすべての言語で表示されるとは限らないことをご理解ください。（おそらく日本語環境であれば、ほとんどのアイコンは利用可能だと思います）
CSSを書きます。
以下のコードを下のタグの貼り付け方に沿って貼り付けます。
※すでに<style></style>が存在していた場合は、赤い文字の部分だけをその中に入れます。
保存したあと、ページの再読み込みをしてください。（キーボードのF5ボタンを押す）
<style type="text/css">
#content_area h1{
padding:0;
margin:0 0 20px;
line-height:1.5;
font-size:28px;
font-weight:bold;
border:none;
background:none;
}
#content_area h1:before{
content:"➢";
font-family:'sans-serif';
margin-right:0.1em;
color:#09D;
font-weight:normal;
font-size:150%;
}
</style>
ここで、『➢』ってどうやって入力するんだよ！！って思った方。
安心してください！！
下にアイコン表を用意しました。アイコン表から使いたい文字をコピーして差し替えれば、使えると思います。
たぶん・・・・ｗｗｗ。※クロームでは出来ました(^o^;)v。
▼ タグの貼り付け方はここ マウスを当てると画像が開きます。
アイコン文字（特殊キャラクターunicode）
コピペして使えます！ →たぶん（笑）使えなかったらご愁傷様(^^;)
よく使われる丸、四角、チェックマーク
| · | • | ▪ | ○ | ◉ | ◎ | ▪ | ▭ | ▫ | ✗ | ✓ | ☑ | ☒ | ✏ |
|
✍ |
✌ |
☺ |
☯ |
● |
❍ |
■ |
□ |
❑ |
❒ |
▯ |
⌘ |
✄ |
|
|
☏ |
☜ |
☞ |
☚ |
☛ |
☝ |
☟ |
☒ |
‽ |
☽ |
☾ |
◆ |
◇ |
◈ |
|
◖ |
◗ |
+ |
✚ |
☓ |
✖ |
✱ |
※ |
⁂ |
|
|
|
|
|
音楽マーク
| ♩ | ♪ | ♫ | ♬ | ♯ | ♭ | ♮ | ✇ |
矢印マーク色々
| « | » | ≪ | ≫ | ↔ | ⇔ | ← | ↑ | → | ↓ | ↵ | |||
| ⇐ | ⇒ | ⇕ | ⇖ | ⇗ | ⇘ | ⇙ | ↖ | ↗ | ↘ | ↙ | |||
| ▲ | △ | ▴ | ▵ | ▶ | ▷ | ▸ | ▹ | ► | ▻ | ▼ | ▽ | ▾ | ▿ |
| ◀ | ◁ | ◂ | ◃ | ◄ | ◅ | ◢ | ◣ | ◤ | ◥ | ||||
| ☜ | ☝ | ☞ | ☟ | ➢ | ➲ | ➔ | ⇦ | ⇨ | ⇧ |
トランプマーク（ダイヤ・ハート・クラブ・スペード）
| ♦ | ♢ | ♥ | ♡ | ♣ | ♧ | ♠ | ♤ |
リサイクルマーク
| ♲ | ♳ | ♴ | ♵ | ♶ | ♷ | ♸ | ♹ | ♺ | ♻ | ♼ | ♽ |
天気マーク
| ☀ | ☁ | ☂ | ☃ | ☼ | ❄ | ☉ |
チェス記号
| ♔ | ♕ | ♖ | ♗ | ♘ | ♙ | ♚ | ♛ | ♜ | ♝ | ♞ | ♟ |
図柄
| ✿ | ❀ | ☂ | ☃ | ❖ | ☸ | |||||||||||||
| ★ | ☆ | ✡ | ✩ | ✪ | ✫ | ☪ | ✦ | ✴ | ✶ | ✹ | ✵ | ✰ | ✯ | |||||
| ♨ | ✂ | ✄ | ✈ | ✉ | ☄ | ✞ | ✟ | ✠ | ✱ | ✲ | ❈ | ❉ | ❊ | ❋ |
易マーク
|
♈ |
♉ |
♊ |
♋ |
♌ |
♍ |
♎ |
♏ |
♐ |
♑ |
♒ |
♓ |
|
|
|
|
|
|
|
| ☰ | ☱ | ☲ | ☳ | ☴ | ☵ | ☶ | ☷ |
アイコンには使えないと思うけど便利そうなんで載せておきます！
危険記号
| ☠ | ☡ | ☢ | ☣ |
郵便・電話マーク
| 〒 | 〠 |
〶 |
℡ |
✆ |
|
|
|
単位
| ∞ | ≠ | ㎜ | ㎝ | ㎞ | ㎠ | ㎡ | ㎢ | ㎎ | ㎏ | ㏄ | ㎖ | ㎗ | ㎘ | ||||||
| ℉ | ℃ | ￥ | % |
商用マーク
| ＠ | © | ® | ™ | ℗ | 〄 | ✓ | ☑ | № | ㊑ | ㍿ | ㈱ | ㏍ |
■参考にさせていただいたサイト（特殊文字とか他にも多数掲載あり）
特殊文字などunicodeのページはこちらから
バリエーション
【使用しているCSS】
#content_area h1{
background: #bfa46f;
color: #fff;
text-align: center;
padding: 40px 0;
font-size: 28px;
border: 3px solid #d6c6af;
font-family: ’游明朝’, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;
text-shadow:-1px -1px 0 rgba(0,0,0,0.3)
}
#content_area h1:after,
#content_area h1:before{
content:"✿";
font-family:'sans-serif';
margin:0 0.5em;
font-weight:normal;
}
コメントをお書きください