読者です 読者をやめる 読者になる 読者になる

Deeper & Deeper

深く、深く。

コピペで使える装飾タグいろいろ

ブログ-ブログカスタマイズ

こういうのをざっくりまとめているサイトはあまり見かけないので、自分用メモを兼ねて書いてみます。

デフォルトの装飾しか使わないという人向けなので、CSSを弄ったりできる人には当たり前かもしれません。

マーカー風

<span style="background: linear-gradient(transparent 50%, #f9c 0%);">強調部分</span>

これで強調したい部分にマーカーを引くことができます。

「50%」の部分で太さ、#f9cの部分で色が変えられます。

参考
CSSを使って蛍光ペンで太い線や細い線を引いた雰囲気を出す | webfeelfree


白抜き文字

<span style="color: white; background-color:black";>白抜き</span>

使いどころが少ないですが白抜きにできます。

もちろんcolorとbackground-colorを変更すればどんな色でも。網掛けみたいにもできます。


フォント

たまーに部分的にフォントを変えたくなることがありますよね。(ない?)

<div style="font-family: 'Yu Mincho','游明朝',Serif";>明朝体にしてみる</div>
<div style="font-family: 'Yu Gothic','游ゴシック',Sans-Serif";>ゴシック体にしてみる</div>
<div style="font-family: 'ヒラギノ丸ゴ Pro W4','ヒラギノ丸ゴ Pro','Hiragino Maru Gothic Pro','HG丸ゴシックM-PRO',HGMaruGothicMPRO";>丸ゴシック体にしてみる</div>
<div style="font-family: 'HGS行書体',HGSGyoushotai";>達筆にしてみる</div>※officeの入ったPC以外では無理

明朝体にしてみる
ゴシック体にしてみる
丸ゴシック体にしてみる
達筆にしてみる

正直なところ、WindowsMacの両方に対応するのが面倒なのであまりおすすめはできません(~_~;)

というか、最近はこういうの大抵画像でやりますよね。

(一部分のフォントを変えるより行や段落で変えることの方が多いのでdivになっていますが、部分的に変えたいならば上と同じようにspanでいいでしょう。)

参考
windowsとmac両方で丸ゴシックを表示させるCSS - EZ-SPARROW
Font−familyのベストな書き方 2015年版 | それからデザイン スタッフブログ
全標準フォント一覧 / もうパンツはかない


囲む

文章を囲みます。

<div style="border-style: solid ; border-width: 1px; padding: 20px 10px 20px 10px; border-color: blue;">囲みます</div>

こんな風に文章を囲むことができます。paddingの後の数値はそれぞれ上、右、下、左の間隔です。

枠線をなくして背景色だけで囲むのも良いですね。
目次によく使ってます。


参考
ブログの文章を枠で囲む方法 (HTMLのdivタグstyle属性で色、太さ、線種など自由自在に)


アイコンフォント

知らなかったのですが、はてなブログにはデフォルトでいくつかのアイコンフォントが読み込まれています。

アイコンフォントと言うのはこんなの

 

本来はボタンなどに使うのでしょうが、上のハートやチェックマークのように本文で使えそうなのもいくつかあります。

<i class="blogicon-check">チェック</i>

チェック

参考
はてなブログで使えるアイコンWebフォントの一覧と使い方まとめ - しろかい!

これだけだと物足りない方はFontawesomeを使うといいかもしれません。
超簡単!アイコンフォント Font Awesomeの使い方



その他、お役立ちサイト

www.colordic.org
和の色は落ち着いていて好きなので、配色に困ったときはここで探したりします。

sunafukey.fc2web.com
よく使う表だったらCSSで設定した方が速いけれど、単発でパパッと作っちゃいたいならおすすめ。

はてな記法一覧 - はてなダイアリーのヘルプ
もう一度原点に立ち返って、はてな記法を見直してみるのもいいかもしれません。

意外と知らない機能(ウクレレ記法とか)があったりして面白いですよ。

ただ「ダイアリー」では使えるけれど「ブログ」では使えないもの*1もあるので注意。


ここまで読んで頂きありがとうございます。

CGAmGFF6CGF

*1:知る人ぞ知る「aa記法」や「メロディ再生記法」など

広告を非表示にする