【リザスト】LP・メルマガの見出しや囲み枠の色を変える方法

【リザスト】見出し・囲み枠の色を
ソースコードで自由に変更する方法

メルマガ・LP・イベントページで使えるカラーカスタマイズ術

リザーブストック（リザスト）のメルマガやLP（ランディングページ）で「大見出し」や「囲み枠」を使うと、デフォルトではオレンジ色のデザインになります。

「自分のブランドカラーに合わせたい」「もっと違う色にしたい」と思ったことはありませんか？

この記事では、ソースコード編集機能を使って、見出しの左側のバーや囲み枠の色を自由に変更する方法をご紹介します。HTMLの知識がなくても、コードをコピペするだけでOKです。

全体の流れ

ツールバーの
「…」をクリック

→

「<>」ソースコード
ボタンを押す

→

HTMLコードを
編集する

→

「保存」を
クリック

1ソースコード編集画面を開く

まず、メルマガやLPの編集画面を開きます。

1-1. ツールバーの「…」ボタンをクリック

エディタのツールバー右端にある 「…」（三点リーダー） ボタンをクリックすると、隠れているツールバーが展開されます。

ポイント：「…」ボタンは、太字(B)・斜体(I)・下線(U)・文字色(A)などのアイコンの右端にあります。

1-2. 「<>」ソースコードボタンをクリック

展開されたツールバーの左端に 「<>」 のアイコンがあります。これが「ソースコード」ボタンです。クリックすると、HTMLソースコードの編集画面が開きます。

補足：ソースコード画面には、現在のページ内容がHTMLタグとして表示されます。ここで直接コードを編集して「保存」を押すと、変更が反映されます。

2見出し（大見出し）の色を変更する

リザストで「大見出し」ボタンを使うと、以下のようなHTMLコードが生成されます。

変更前のコード（デフォルト = オレンジ）

<h1 class=“midashi_20”>ここに見出しテキスト

表示イメージ（変更前）

ここに見出しテキスト

この見出しの左側のオレンジバーの色を変えるには、style属性を追加します。

変更後のコード例（青色に変更）

<h1 class=“midashi_20” style=“border-color: #4a90d9;”>ここに見出しテキスト

表示イメージ（変更後 = 青）

ここに見出しテキスト

ポイント： border-color: #4a90d9; の #4a90d9 の部分を好きなカラーコードに変えるだけでOK！

他の色の例

緑（#28a745）

見出しテキスト（緑）

<h1 class=“midashi_20” style=“border-color: #28a745;”>見出しテキスト（緑）

ピンク（#e91e8c）

見出しテキスト（ピンク）

<h1 class=“midashi_20” style=“border-color: #e91e8c;”>見出しテキスト（ピンク）

3囲み枠の色を変更する

リザストで「囲み枠」を挿入すると、以下のようなコードが生成されます。

変更前のコード（デフォルト = オレンジ枠）

<divclass=“randing_kakomiwaku_2”>
ここに本文テキスト
 

表示イメージ（変更前）

ここに本文テキスト

変更後のコード例（青色に変更）

<divclass=“randing_kakomiwaku_2” style=“border-color: #4a90d9;”>
ここに本文テキスト
 

表示イメージ（変更後 = 青）

ここに本文テキスト

他の色の例

緑（#28a745）

囲み枠テキスト（緑）

<div class=“randing_kakomiwaku_2” style=“border-color: #28a745;”>…

ピンク（#e91e8c）

囲み枠テキスト（ピンク）

<div class=“randing_kakomiwaku_2” style=“border-color: #e91e8c;”>…

4見出しの文字色も同時に変える

バーの色だけでなく、見出しの文字色も一緒に変えたい場合は、color も追加します。

<h1 class=“midashi_20” style=“border-color: #4a90d9; color: #4a90d9;”>見出しテキスト

バーも文字も青

見出しテキスト

まとめ：style属性の中に、セミコロン（;）で区切って複数のスタイルを指定できます。
style=”border-color: 色1; color: 色2; background-color: 色3;”

5よく使うカラーコード一覧

以下のカラーコードをコピーして使ってください。

色名	カラーコード	見た目
オレンジ（デフォルト）	#e8951a	オレンジ
ブルー	#4a90d9	ブルー
ネイビー	#2c3e7a	ネイビー
グリーン	#28a745	グリーン
ピンク	#e91e8c	ピンク
レッド	#dc3545	レッド
パープル	#6f42c1	パープル
ゴールド	#c8a415	ゴールド
ブラック	#333333	ブラック

好きな色を探すには：Googleで「カラーコード」と検索すると、カラーピッカーが表示されます。そこで好きな色を選ぶと # から始まる6桁のコードが取得できます。

6注意点・トラブル対策

注意1：ソースコードを編集する前に、現在のコードをメモ帳などにコピーしておくことをおすすめします。元に戻したいときに安心です。

注意2：エディタのビジュアル画面で見出しを再編集すると、追加した style 属性が消えてしまうことがあります。色の変更はソースコード画面から行い、その後はビジュアル画面で見出し部分を触らないようにしましょう。

うまくいかない場合：カラーコードの前に # が付いているか、style=”” のダブルクォーテーションが正しく閉じているかを確認してください。

まとめ

リザストの見出しや囲み枠の色を変えるポイントは、たった1つ。

style=”border-color: #好きな色コード;” を追加するだけ！

手順をおさらいすると：

エディタのツールバー右端 「…」 をクリック
展開されたバーの左端 「<>」ソースコード をクリック
class=”midashi_20″ や class=”randing_kakomiwaku_2″ を見つける
style=”border-color: #カラーコード;” を追加する
「保存」ボタンを押して完了！

これでオリジナルのカラーデザインが実現できます。ぜひ試してみてください。