アメブロカスタム「Webフォントを使った見出し」設定してみました。

おひなさま、今年は、、、

写真だけでも・・・

今日は、昨日のブログにちらっと書きました、「Webフォント」。

使ったことなかったので設定してみました。

｢Webフォント」とは・・・
フォントは本来、パソコンなどにインストールして使用するものですが、｢Webフォント」はサーバー上に置かれたフォントなので、公開されているものは設定すると誰でも使えるフォントです。

設定してみようと思ったきっかけは、

見出し　かわいいハート

この見出しを見つけたから

・・・スマホだと表示されてないと思いますが

それでも、簡単に扱えるものなのか試してみたくて設定してみました。

よかったら、PC表示で見てみてくださいね。

こんな可愛い見出しを教えてくださった記事は、

HappyClover@HappyCloverAoba
確かに他のサイトにはない見出し(o^-^o)♪ コピペで使える見出しCSSコードサンプル – office FITPlus-お金とITのお悩みなら横浜のFP事務所へ https://t.co/ydtka08xLg
2017年03月02日 22:10

CSSに書き込むのでカスタム可能なテンプレートの場合に設定できます。

FP事務所さんのCSSをアメブロ用に少し手を加えました。

/* ハート見出し　*/
.skin-entryBody h2.heartClover{
color: #676767;
position: relative;
font-size: 20px;
margin: 20px 10px;
padding: 0 0 0 10px;
border-bottom: 2px solid #ffbebe;
}
.skin-entryBody h2.heartClover:first-letter{
font-size: 46px;
color: #e84545;
}
.skin-entryBody h2.heartClover:before {
position: absolute;
left: 0;
top: -12px;
font-family: "FontAwesome";
content: "\f004";
padding-right: 5px;
color: #feb5bd;
-moz-transform: translateY(0) rotate(15deg);
-ms-transform: translateY(0) rotate(15deg);
-webkit-transform: translateY(0) rotate(15deg);
transform: translateY(0) rotate(15deg);
}
.skin-entryBody h2.heartClover:after {
position: absolute;
left: 0;
top: 8px;
font-family: "FontAwesome";
content: "\f004";
font-size: xx-large;
color: rgba(253, 34, 56, 0.5);
-moz-transform: translateY(0) rotate(-20deg);
-ms-transform: translateY(0) rotate(-20deg);
-webkit-transform: translateY(0) rotate(-20deg);
transform: translateY(0) rotate(-20deg);
}