JIMDOの見出しにアイコンを付けたい

■この方法を試される方はご注意ください

この方法をテストしてくださった、川合さんから、この方法は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: &rsquo;游明朝&rsquo;, 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
破線

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。

コメントをお書きください

コメント: 2
  • #1

    川合 勝 (日曜日, 26 7月 2015 17:46)

    ブラウザFierfoxではWingdingsとWingdings2は同じに表示され、他のブラウザでWingdingsで取り入れたアイコンが、別な物に(つまりWingdings2)で表示されてしまいます。
    Chrome 、Opera、 Maxthonは問題有りません。

  • #2

    PIK 村井 (月曜日, 27 7月 2015 06:24)

    川合さん

    確認しました。原因も調べました。
    結果、FireFoxでは正常に表示されないことがわかりました。
    他に代用の効く方法がないか、調べて見ます。
    手がかりとしては、Unicodeで代用させるという方法がありましたが、
    いかんせん海外サイトなんでwww(英語苦手なんです・・・)
    ありがとうございました!

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422