| 項目 | 内容 |
|---|---|
| 記事の種類 | はてなブログの書き方、はてなブログの使い方 |
| SEO施策 | 関係なし |
| SXO施策 | 関係なし |
| 難しさ | かんたん |
| 重要さ | 重要 |
次のような方にオススメ！
- はてなブログのフォントの色を変えたい
- はてなブログの文字色の変え方が分からない
- ブログ記事を装飾したい
- ブログ記事の見栄えを良くしたい
- 読みやすいブログ記事を作りたい
ぴっぴも本ブログを始めた頃、フォントの色を変更して読みやすいブログ記事を作りたいと思いました。
フォント色の変更て難しいと思っていたんですけど、見たまま編集の場合、色を変えたいところを指定して「文字色」ボタンを押すだけなんです。
そのような訳で今回の「ぴっぴのはてなブログでアフィリエイト」は、はてなブログのフォント色の変更手順を紹介します。
記事の内容
- はてなブログのフォント色の変更方法
- はてなブログの文字色の変えるときの注意点
- はてなブログのフォント色を変えてみた感想
ブログのフォント色を変えるときの注意点も併せて紹介しています。
なので本記事を読んで、見栄えの良い記事をつくってくださいね。
記事を書いた人
ひよこブロガー
- ・ブログ開始69日で合計1万PV
- ・ブログ開始75日で収益獲得
- ・アクセスの約90％が検索流入
応援していただけるとスゴク嬉しいです！
( ﾟдﾟ)ﾊｯ!
自己紹介させてください。
あらためまして、ぴっぴです！
現役のはてなブロガーで、ぴっぴのはてなブログでアフィリエイトでは「はてなブログ」に関する記事を書いています。
ちなみに、本ブログのコンセプトは、はてなブログに関して困っている方を一人でも減らすことです。
おかげ様で毎月4000人以上の方に本ブログを利用していただいています。
はてなブログのフォント色の変更方法
はてなブログのフォント色の変更は、3通りあります。
- 指定して文字色ボタンを押す（HTML編集以外）
- HTML直接スタイルをあてる
- CSSで変更する
この３通りの方法で、はてなブログのフォント色を変えます。
CSSでフォント色を変えるのが、最良ですよ
変更方法1：指定して文字色ボタンを押す（HTML編集以外）
HTML編集以外のフォントの色を変える手順は次のとおりです。
- 変更部分を指定する
- 文字色ボタンを押す
- フォント色が変わる
この3つの手順で、HTML編集以外の場合フォント色を変えられます。
手順1：変更部分を指定する
まずフォントの色を変更したい部分を指定します。
指定は「（シフトキー＋カーソルキー）」または「ドラッグ＆ドロップ」で行ってくださいね。
手順2：文字色ボタンを押す
次に文字色ボタンを押します。
文字色ボタンは、上の画像の赤枠で囲んでいるところにありますよ。
文字色ボタンを押すと、色を選択できるようになるので、好きな色を選んでください。
手順3：フォント色が変わる
文字色ボタンでの操作を終えると、フォントの色が変わります。
変更方法2：HTML直接スタイルをあてる
HTML編集の場合、HTMLタグに直接スタイルをあてると、フォントの色を変えられます。
色を変えたい部分を次のコードで囲んでください。
「カラーコード」には「ddd」のようなコードを入力します。
<span style="color: #カラーコード;">指定部分</span>
カラーコードを知りたい方は、下記のリンク先「WEB色見本 原色大辞典」をご覧のうえ好きな色を選んでください。
変更方法3：CSSで変更する
CSSでフォント色を変更する方法は次のとおりです。
- CSSをコピー
- ブログの概要
- デザイン
- カスタマイズ
- デザインCSS
- 入力
- spanタグ付与
- class名付与
この手順どおりにすれば、CSSでフォント色を変更することができます。
CSSをコピー
次のCSSをコピーします。
.クラス名 {
color: #カラーコード;
}
ブログの概要
ブログの概要に移動します。
デザイン
続いて画面左にある「デザイン」をクリックし、デザインに移動してください。
カスタマイズ
赤枠で囲んでいるカスタマイズ（スパナマーク）をクリックします。
デザインCSS
デザインCSSをクリックし、先ほどコピーしたCSSを貼り付けてください。
クラス名を変更します。
( ﾟдﾟ)ﾊｯ!
クラス名は半角英数字を使ってください。
それと変えるのは「.」の後ろだけです。
次に「カラーコード」のところを、好きな色のカラーコードに変更します。
カラーコードを知りたい方は、下記のリンク先「WEB色見本 原色大辞典」をご覧のうえ好きな色を選んでください。
入力
色を変えたい文（単語？）を入力します。
spanタグ付与
フォントの色を変えたい部分の前後に「span」タグを入力します。
次のコードをコピペしてもOKですよ。
そのとき、指定部分にフォントの色を変えたい内容にしてくださいね。
<span>指定部分</span>
class名付与
「span」タグを入力したら、それにクラス名を付与しましょう。
クラス名は、先ほどCSSに付けたものと同じです。
<span class="クラス名">指定部分</span>
はてなブログの文字色を変えるときの注意点
はてなブログの文字色を変えるとき、背景とのコントラスト（明暗）に注意してくださいね。
例えば背景色が白なのに、文字色を黄色にすると明暗がハッキリしないため、テキストが読みにくくなります。
なので、はてなブログの文字色を変えるとき、背景とのコントラストに気をつけてくださいね。
はてなブログでフォント色を変えてみた感想
はてなブログでフォント色を変えてみた感想は、次のとおりです。
- ボタンを押すだけ
- 超かんたんやん
- スタンダードな使いやすさ
こんな感じでした。
HTML編集以外、他のブログサービスと同じくボタンを押すだけなので簡単です。
またCSSで変更する場合やHTMLに直接スタイルをあてる場合も、編集画面の切り替え方さえ覚えれば、簡単にフォントの色を変えられます。
今では、はてなブログに慣れているので一番かんたんかな？
まとめ：注意点を守って見栄えの良いブログ記事に！
今回は、はてなブログのフォント色の変更について紹介しました。
今回のポイント！
- HTML以外は文字色ボタンを押せばいい
- HTMLに直接スタイルをあてればいい
- CSSで変更すればいい（最良の方法）
- だけどコントラストに気を付けてね
今回のポイントを押さえてブログ記事を書けば、見栄えが良くて読みやすくなりますよ！
これから記事を書く方へご案内
ぴっぴのはてなブログでアフィリエイトでは、編集画面の使い方が分かる「画像でわかる【はてなブログの記事の書き方】」をご用意しています。
今回のポイント
- 使用頻度の高い【機能の使い方を21枚の画像】で紹介
- オススメの記事の内容
- ネタの探し方
- 記事の品質の上げ方
このような盛りだくさんの内容になっています。
「良い記事を書きたい」または「検索する手間を省きたい」という方は、下記のリンクより「画像でわかる【はてなブログの記事の書き方】」をご覧ください。
