この記事では、Webサイト機能における文字色の変更方法についてご案内しています。Hirameki 7で文字色を変更するには、2つの方法があります。デザインや他のコンテンツとの兼ね合いで文字色を変えたい場合は、こちらで紹介する方法のうち、ご都合に沿った方法で変更してください。
💡文字のサイズを変更する方法はこちらの記事をご覧ください。
①パーツ全体の文字色を変更する方法
パーツ全体の文字色を変更する際は、パーツの編集画面から設定を変更します。
パーツの編集画面右上に表示されているアイコンの中から、Aの文字が入ったアイコンをクリックします。(赤枠で囲んだ部分)
テーマカラーのタブでは、テンプレートやカラーリストからお好きな色を選んで設定することができます。
また、よく使う色を「お気に入りカラー」として保存することもできます。
色を選択した状態で「選択中のカラーを保存」の+ボタン(赤枠で囲んだ部分)をクリックすると、お気に入りカラーとして保存されます。
お気に入りカラーから削除したい場合は色を選択した状態で右クリックします。
希望の色がカラーリストになかった場合など、すべての色から自由に選ぶこともできます。
カスタムカラーのタブをクリックすると、カラーピッカーが表示されます。
色味を変えたい時は上段のスライダー、明暗を変えたい時は下段のスライダーを動かし、希望の色をポイントで選択します。
カスタムカラーでも同様に、色を選択した状態で「保存」ボタン(赤枠で囲んだ部分)ををクリックすると、お気に入りカラーとして保存されます。
こちらの設定では、パーツ全体の文字色が変更されます。
パーツに入力したテキストのうち、特定の文字列のみ色を変更したい場合は、CSSコードの使用で変更が可能です。
②特定の文字の色を変更する方法
特定の文字のサイズを変更する際は、CSSコードを使用します。
文字色を変更する場合
<span style="color:red;">テキスト</span>
文字色を変更する場合は、style="color:色;" をタグ内に追加することで変更することが可能です。色は半角英数文字で英語名で記載したり、カラーコードで色を指定することが可能です。
カラーコードを調べる際には、Googleで「カラー選択ツール」と検索すると、下の画像のようにカラー選択ツールが表示されます。
また、文字の背景を変更する場合は、background-color:色;で指定します。
<span style="color:#ff8c00;background-color:aqua;">テキスト</span>
関連ページ