けんちゃんSWELLってh2タグをグラデーションにできないの？！
と思った全国のSWELLファンのみなさん、お待たせしました。SWELLのカスタマイザーではできなかったh2タグのグラデーション化する方法を見つけました。
結論からいうと、CSSを自分で書いてしまえばいいんです。
なぜ、CSSを自分で書かなければいけないかというと、SWELLのカスタマイザｰではグラデーションにできないからなんです。手軽に統一感のあるサイトを構築できるのがSWELLのいいところですが、細かいカスタマイズには向いてないんです。
でも、CSSって難しそうですよね。
CSSの経験のない方でも確実にできるように、SWELLのどこに、どんなふうに書けばいいのか具体的に説明していきます。さらに、サクッとカスタマイズできるようにコピペ用のサンプルCSSも用意しました。
この記事を読めば、サクッと3分でh2タグをグラデーションにできます。グラデーションであなたのサイトに彩りを加えて、訪問してくれた人に楽しんでもらいましょう。自分の手でカスタマイズすることで、さらにサイトへの愛着もわいてくると思います。一緒にSWELLのカスタマイズを楽しみましょう！
- SWELLでh2タグをグラデーションにしたい人
- コピペでサクッとh2タグをグラデーションにしたい人
- CSS初心者でグラデーションにする方法を学びたい人
SWELLではグラデーション不可（自分で書いちゃおう！）
上でお伝えしたようにSWELLのカスタマイザーでは、h2タグはグラデーションにはできません。試してみるとわかりますが、カスタマイザーで変更できるのは下の12パターンだけです。
SWELLは、見やすさ、シンプルさを重視しているので細かいカスタマイズはできません。（書くことに集中できるのはとてもいいところです。）色は、SWELLで設定している「メインカラー」が反映されます。
h3、h4タグもカスタマイズ可能で、下のようになります。
h3タグではグラデーションが入る種類もありますが、基本的にどの種類でもグラデーションにはなりません。
けんちゃんそれだったら、自分でCSSを書いてしまおう！
というのが、今回の趣旨です。でも、難しそう。そもそもCSSって何？ どうやって書いたらいいの？ という人も安心してください。次から具体的に説明していきますので、順を追って一緒にやっていきましょう。
CSSを書く場所
CSSを書く場所に行くには、たった2ステップ！
ワードプレスの管理画面の上にある「カスタマイズ」をクリックします。
すると上の画像のようにカスタマイザーが開きます。左にメニューがあるので一番したまでスクロールしてください。
メニューの一番下にある「追加CSS」をクリック。
追加CSSの編集画面が開きます。ここにCSSを書いていきます。
私はもうすでにCSSを追加しているので、開くとこんな感じになっていますが、初めて開いた場合は何も文字は書かれていません。
コピペして完成！
.post_content h2 {
background: linear-gradient (90deg, var(--color_htag) 50%, white);
}上のCSSコードを追加CSS編集画面にコピペして、編集画面の上にある「公開」をクリックしたら完成です！ ここまで3分かからないくらいでできたと思います。簡単ですね！
結果は、追加CSS編集画面の右側にリアルタイムに反映されます。実際に自分のサイトを開いて確認するのもいいでしょう。ただ、投稿の編集画面上では、グラデーションは反映されないので注意してください。
CSSの書き方・解説
h2タグはグラデーションになりましたか？ ここからは、CSSコードを部分に分けて具体的に解説していきます。この章が理解できると、次の章で自由自在に応用ができるようになります。CSSを勉強したい、他のグラデーションにもチャレンジしたいという人はぜひ読んでください。
①～③ .post_content h2 { ～ }
「.post_content h2」は、①post_contentクラスの②h2タグという意味になります。先頭の「.」はクラスを表します。①②の部分はサイトのどこを設定するかをセレクトしているので、セレクタといわれています。
②h2は、ブログなんかでは見出しの部分になります。一般的には、記事のタイトルがh1、大きな見出しがh2、その次に大きな見出しがh3、その次に大きな見出しが･･････となっています。
①.post_contentは、post_contentクラスを表します。クラス名は各サイトの設計者が自由に決められます。SWELLの場合、「投稿記事」を表すクラス名を「post_content」としています。
③{ ～ }は、①②で指定した部分に{ }の中のことをやってね、という意味です。①②が命令の対象を表し、③の中が命令内容になります。
①～③をまとめると
という意味になります。
④ background: ～ ;
④backgroundは、そのまんま背景のことです。字が書いてある部分の背景はデフォルトでは白ですが、色を変えたり、色々な効果をもたせたりすることができます。｛ ｝の中なので、ここが具体的な命令内容になります。この部分をプロパティと呼びます。
プロバティには書式があって、background（プロパティ名）のあとに「:（コロン）」をつけてから、具体的な命令を書きます。そして、プロパティの最後には必ず「;（セミコロン）」をつけます。「:」「;」をつけるのはルールなので必ずつけてください。
ということになります。
⑤ linear-gradient( ～ )
④backgroundの具体的な命令内容です。⑤linear-gradientもそのまんま、線形のグラデーションという意味です。
（ ）の中に、どのような線形グラデーションにするか具体的な命令内容を書いていきます。
まず1つ目、「90deg」です。実はこの部分は省略できます。省略すると上から下へと色が変わっていくグラデーションになります。今回は、左から右へと横方向に色が変わっていくグラデーションにしたかったので90deg（90度）と角度を指定しました。
2つ目の「var(–color_htag) 50%」です。var(–color_htag) は、色を指定しています。（詳しくは次の節で解説します。）この色を左から50%まで、つまり左半分塗りつぶしてください、という意味です。
3つ目「white」です。そのまんま白ということですが、一番右が白になるようにグラデーションしてください、という意味になります。
それぞれの間は、「,（カンマ）」を入れてください。これもルールです。
まとめると、
ということになります。
⑥ var(–color_htag)
「var( )」と、「–color_htag」に分けて考えましょう。
var( )の部分は変数になります。変数というのは、数学のxとかyとかと同じです。何かが入る入れ物と考えるといいでしょう。（ ）の中が変数の名前になります。つまり、入れ物の名前ですね。⑥var(–color_htag)は、「–color_htag」という名前の変数という意味になります。
「–color_htag」は、変数名でしたね。この変数名もサイトの設計者が自由に決められますが、SWELLではhタグ（見出し）の色を「–color_htag」の変数（入れ物）に入れています。何色にするかはSWELLのカスタマイザーで指定できます。デフォルトは「基本カラー」になっています。
ということになります。
色々なグラデーション
上から下にグラデーション
.post_content h2 {
background: linear-gradient(#9c27b0, #ff536f);
color: white;
}グラデーションのデフォルトが上から下なので、degの部分がありません。
色を指定する部分に「#9c27b0」「#ff536f」という暗号のような数字が並んでいます。いわゆるカラーコードです。CSSでは色の指定の書式が色々ありますが、このRGBという書式が一番ポピュラーです。ここでは詳しい説明は省略しますが、#のあとに英数字6桁で表すんだな～くらいに覚えておいてください。「カラーピッカー」と検索すると様々な色のRBGを調べることができます。
colorというプロパティがありますが、すでにテキストが白で表示されている場合は書く必要はありません。
横に4色でグラデーション
.post_content h2 {
background: linear-gradient(to right, orange, deeppink, blueviolet, cyan);
color: white;
}（ ）の中に「to rihgt」というのがあります。右にグラデーションしてください、という意味です。90degと同じですね。
グラデーションの色の数はいくらでも指定できます。当然、指定する順番が変われば、グラデーションの順番も変わります。たくさんの色を指定できますが、多くて4色までがおすすめです。それ以上になると、少々めざわりに感じます。
colorというプロパティがありますが、すでにテキストが白で表示されている場合は書く必要はありません。
斜めにグラデーション
.post_content h2 {
background: linear-gradient(to right top, lime, yellow);
color: white;
}（ ）の中に「to right top」というのがあります。斜め右上にグラデーションしてください、という意味です。ゴールが右上なので、自動的にスタートは左下になります。ちょっとしたアクセントになって、目を引くデザインですね。
colorというプロパティがありますが、すでにテキストが白で表示されている場合は書く必要はありません。
角を丸めてグラデーション
.post_content h2 {
border-radius: 10px;
background: linear-gradient(to right top, orange, yellow);
color: white;
}「border-radius」というプロパティが追加されています。見出しの角をどのように丸めるかを指定するプロパティです。10pxは、半径10ピクセルの円で角を丸めてください、という意味です。PCで見る場合とスマホで見る場合では、画面の大きさが違うので多少印象が変わるかもしれません。実際に見比べながら何ピクセルにするか調整するといいと思います。
colorというプロパティがありますが、すでにテキストが白で表示されている場合は書く必要はありません。
左右を丸くしてグラデーション
.post_content h2 {
border-radius: 100vh;
background: linear-gradient(cyan, royalblue, cyan);
color: white;
}色使いにもよりますが、この形にすると立体的に見えるのがいいですね。
今度は、border-radius の値が「100vh」になっています。vhは、ビューポート・ハイトのことで、ブラウザ等で表示されている領域の高さ（縦の長さ）を表します。100vhだと、vhの100％の長さになります。要するにMAXってことですね。
colorというプロパティがありますが、すでにテキストが白で表示されている場合は書く必要はありません。グラデーションによっては白だと見にくくなると思います。カラーピッカーなどで最適な色を見つけてください。
まとめ
SWELLでh2タグをグラデーションにする方法 まとめ
- カスタマイザーの「追加CSS」にCSSを書く。
- セレクタは、「.post_content h2」
- プロパティは、「background: linear-gradient( )」
- （ ）の中に細かい設定を書く。
- 色はカラーピッカーを使うと便利。
これでSWELLでもh2タグに思い通りのグラデーションをつけることができるようになったと思います。「追加CSS」でCSSを書くとリアルタイムにh2タグに反映されるのでいろいろいじってみて理想のh2タグにしてみてください。
けんちゃん自分のサイトがかっこよくなると嬉しいですね！
最後まで読んでいただき、ありがとうございます。少しでも参考になったら、下の「♡」「コメント」いただけると嬉しいです！
コメント