■この方法を試される方はご注意ください■
この方法をテストしてくださった、川合さんから、この方法はFirefoxでは利用できないというご指摘を受けました。調べてみたところ確かにFirefoxではうまく表示されていないことが判明しました。他に代用できる方法がないか調査中です。一応『遊びで作ったサイトだしFirefoxで見れなくてもいいや!」という方のために、このページは残しておきます。
参考サイト(現在研究中のサイト)
http://www.alanwood.net/demos/wingdings.html
http://www.alanwood.net/demos/wingdings-2.html
http://www.alanwood.net/demos/symbol.html
これらを使用した方が面白いものが作れるかもしれません。
♣♦♥ ♠♤♧♡♢♛♕ unicodeを使用するとこんなマークまで!
※色々テストしてみますが、もしかしたら、コピペで使えるようになるかもしれません。
すべての見出しの頭にアイコンをつける方法を説明しています
見出し大に共通したアイコンをつけることを想定しています。
アイコンが付いている見出しをたまに見かけると思います。
通常そのアイコンは、画像を使っているのですが、今回は、MacやWiddowsでは標準で付いて来るアイコンフォントWingdingsとをWingdings2を使用してアイコンをつけてみます。
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:"P";
font-family: Wingdings;
margin-right:0.5em;
color:#09D;
}
</style>
▼ タグの貼り付け方はここ マウスを当てると画像が開きます。
アイコンフォントの種類
Wingdings
- 0
- 0
- 1
- 1
- 2
- 2
- 3
- 3
- 4
- 4
- 5
- 5
- 6
- 6
- 7
- 7
- 8
- 8
- 9
- 9
- :
- :
- ;
- ;
- <
- <
- =
- =
- ≫
- ≫
- ?
- ?
- @
- @
- A
- A
- B
- B
- C
- C
- D
- D
- E
- E
- F
- F
- G
- G
- H
- H
- I
- I
- J
- J
- K
- K
- L
- L
- M
- M
- N
- N
- O
- O
- P
- P
- Q
- Q
- R
- R
- S
- S
- T
- T
- U
- U
- V
- V
- W
- W
- X
- X
- Y
- Y
- Z
- Z
- [
- [
- \
- \
- ]
- ]
- ^
- ^
- _
- _
- `
- `
- a
- a
- b
- b
- c
- c
- d
- d
- e
- e
- f
- f
- g
- g
- h
- h
- i
- i
- j
- j
- k
- k
- l
- l
- m
- m
- n
- n
- o
- o
- p
- p
- q
- q
- r
- r
- s
- s
- t
- t
- u
- u
- v
- v
- w
- w
- x
- x
- y
- y
- z
- z
- {
- {
- |
- |
Wingdings 2
- 0
- 0
- 1
- 1
- 2
- 2
- 3
- 3
- 4
- 4
- 5
- 5
- 6
- 6
- 7
- 7
- 8
- 8
- 9
- 9
- :
- :
- ;
- ;
- <
- <
- =
- =
- ≫
- ≫
- ?
- ?
- @
- @
- A
- A
- B
- B
- C
- C
- D
- D
- E
- E
- F
- F
- G
- G
- H
- H
- I
- I
- J
- J
- K
- K
- L
- L
- M
- M
- N
- N
- O
- O
- P
- P
- Q
- Q
- R
- R
- S
- S
- T
- T
- U
- U
- V
- V
- W
- W
- X
- X
- Y
- Y
- Z
- Z
- [
- [
- \
- \
- ]
- ]
- ^
- ^
- _
- _
- `
- `
- a
- a
- b
- b
- c
- c
- d
- d
- e
- e
- f
- f
- g
- g
- h
- h
- i
- i
- j
- j
- k
- k
- l
- l
- m
- m
- n
- n
- o
- o
- p
- p
- q
- q
- r
- r
- s
- s
- t
- t
- u
- u
- v
- v
- w
- w
- x
- x
- y
- y
- z
- z
- {
- {
- |
- |
バリエーション
WIngding 2の「e」と「f」を使って高級っぽさを出してみた。
【使用している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', 'MS P明朝', 'MS 明朝', serif;
text-shadow:-1px -1px 0 rgba(0,0,0,0.3)
}
#content_area h1:before{
content:"e";
font-family:'Wingding 2';
margin:0 0.5em;
font-weight:normal;
}
#content_area h1:after{
content:"f";
font-family:'Wingding 2';
margin:0 0.5em;
font-weight:normal;
}
線種の参考資料
以下の線種の指定方法 ⇒ border:10px #b0c4de 線種指定;
solid
実線
double
二重の線
groove
谷型の線
ridge
山型の線
inset
凹型の線
outset
凸型の線
dotted
点線
dashed
破線
コメントをお書きください
川合 勝 (日曜日, 26 7月 2015 17:46)
ブラウザFierfoxではWingdingsとWingdings2は同じに表示され、他のブラウザでWingdingsで取り入れたアイコンが、別な物に(つまりWingdings2)で表示されてしまいます。
Chrome 、Opera、 Maxthonは問題有りません。
PIK 村井 (月曜日, 27 7月 2015 06:24)
川合さん
確認しました。原因も調べました。
結果、FireFoxでは正常に表示されないことがわかりました。
他に代用の効く方法がないか、調べて見ます。
手がかりとしては、Unicodeで代用させるという方法がありましたが、
いかんせん海外サイトなんでwww(英語苦手なんです・・・)
ありがとうございました!