この記事では、Webサイト機能における文字色の変更方法についてご案内しています。Hirameki 7で文字色を変更するには、2つの方法があります。デザインや他のコンテンツとの兼ね合いで文字色を変えたい場合は、こちらで紹介する方法のうち、ご都合に沿った方法で変更してください。

💡文字のサイズを変更する方法はこちらの記事をご覧ください。

自由にデザインおよびAIでデザイン（新エディタ）の場合

パーツをクリックして選択し、パーツの上に表示されるツールバーから「A」のアイコンをクリックします。

クリックすると「カラーピッカー」が表示され、好きな色を自由に選ぶことが出来ます。

色調を変えたい時は上段のスライダー、明暗を変えたい時は下段のスライダーを動かし、希望の色をポイントで選択します。

💡中級者向け：インナーコードの指定

インナーコードでテキストの一部にCSS（aタグ）でリンクを設定している場合、ツールバーから色を変更するとリンクの箇所のみ色が変更されます。
リンクを設定したテキスト”以外”の色を変更する場合は、いずれかの操作が必要になります。

・一度aタグを取り除いてからカラーピッカーで色を変更する
・spanタグでテキストに色を指定する

例）「こちら」にaタグでリンクを設定している状態

お問い合わせはこちらをクリックしてください。

インナーコード

お問い合わせは<a href="example.html">こちら</a>をクリックしてください。

カラーピッカーから色を変更すると…
🔻

お問い合わせはこちらをクリックしてください。

インナーコード

お問い合わせは<a href="example.html" style="color: rgb(0, 0, 238);">こちら</a>をクリックしてください。

spanタグで全体に色を指定すると…

🔻

お問い合わせはこちらをクリックしてください。

インナーコード

<span style="color:#ff0000;">お問い合わせは<a href="example.html" style="color: rgb(0, 0, 238);">こちら</a>をクリックしてください。</span>

簡単にデザイン（旧エディタ）の場合

パーツ全体の文字色を変更する際は、パーツの編集画面から設定を変更します。

パーツの編集画面右上に表示されているアイコンの中から、Aの文字が入ったアイコンをクリックします。（赤枠で囲んだ部分）

テーマカラーのタブでは、テンプレートやカラーリストからお好きな色を選んで設定することができます。

また、よく使う色を「お気に入りカラー」として保存することもできます。
色を選択した状態で「選択中のカラーを保存」の＋ボタン（赤枠で囲んだ部分）をクリックすると、お気に入りカラーとして保存されます。

お気に入りカラーから削除したい場合は色を選択した状態で右クリックします。

希望の色がカラーリストになかった場合など、すべての色から自由に選ぶこともできます。
カスタムカラーのタブをクリックすると、カラーピッカーが表示されます。

色味を変えたい時は上段のスライダー、明暗を変えたい時は下段のスライダーを動かし、希望の色をポイントで選択します。

カスタムカラーでも同様に、色を選択した状態で「保存」ボタン（赤枠で囲んだ部分）ををクリックすると、お気に入りカラーとして保存されます。

こちらの設定では、パーツ全体の文字色が変更されます。

パーツに入力したテキストのうち、特定の文字列のみ色を変更したい場合は、CSSコードの使用で変更が可能です。

特定の文字のサイズを変更する際は、CSSコードを使用します。

<span style="color:red;">テキスト</span>

文字色を変更する場合は、style="color:色;" をタグ内に追加することで変更することが可能です。色は半角英数文字で英語名で記載したり、カラーコードで色を指定することが可能です。

カラーコードを調べる際には、Googleで「カラー選択ツール」と検索すると、下の画像のようにカラー選択ツールが表示されます。

また、文字の背景を変更する場合は、background-color:色;で指定します。

<span style="color:#ff8c00;background-color:aqua;">テキスト</span>