はてなブログの色を変えてみる
ども。まーさです。
はてなブログ始めて間もないのですが
他人の記事を見ていてふと思いました。
「この色で記事を見ると見やすいかも」
「自分も色を変えてみたいな」
とか。
ということで
ブログの文字色や背景色を変えてみたいと思いませんか？
今回は記事内で直接色指定する方法を書いていきます！
＜メリット＞他のブログサイトでも流用可能
＜デメリット＞毎回記事を書くたびに個別に指定してやる必要がある
色指定する方法は大きく分けて
の２種類があります。
はてなブログではスタイルでの指定を推奨します。
HTMLタグでの指定でも可能ですが、
記述しても強制的にスタイルの指定に変換されます。
とりあえず一番簡単なのははてなブログの場合は
使っているエディタで簡単に指定できます。
が、背景色は変更できません。
↑文字を指定して
↑色を指定すると
↑文字に色が付きます
そして左上にあるHTML編集を開くとちゃんとタグが挿入されています。
スタイル方式でｗ
まーさの<span style="color: #ff0000;">ゲーム</span>垂れ流し配信
参考程度にHTMLタグでの指定方法を記述しておきます。
まずHTML編集での編集にして
まーさの<font color="#ff0000">ゲーム</font>垂れ流し配信
と記述すれば同じ結果になります。
はてなブログでは自動でスタイルに置き換わってしまいます。
変更できる色の種類はこちら
上記の16進数の値を使います。
カラー名を直接指定することも可能です。
例）
<span style="color:#0000FF;"></span> <span style="color:blue;"></span>
上記２行は同じ青色指定になります。
で、肝心のスタイル指定ですが<span></span>というタグで
挟むのが一番簡易な方法です。
文字色を指定するだけならエディタを
そのまま使用すればいいのですが、
背景色も指定したい時ってありますよね？
そんな時は手動で書くしかないのです。
まーさの<span style="color: #ffff33; background: #ff3333;">ゲーム</span>垂れ流し配信
と指定すれば
まーさのゲーム垂れ流し配信
上記の通り、黄色い字に赤い背景となります。
<span></span>タグのスタイルの指定で
style="" というように""の中に指定したいスタイルを記述します。
color:色指定; で文字色の指定
background:色指定; で背景色の指定
半角の：(コロン)の後に値をいれて
半角の；(セミコロン)で区切って次の指定
他にも文字サイズや領域の大きさや周りのスペースの大きさとかいろいろできますが今回は割愛します。
