【STORK(ストーク)】周りと差をつけろ!見出しをグラデーションにするカスタマイズ

どうも、あらやんです。

最近色んな人のブログをチェックしていますが、やはりSTORK(ストーク)使っている人多いっすね~!多いというか、多くなってきているというイメージです。ビジネスでブログを運営している人はもうみんなとりあえず堅威(有名なWordPress用有料テーマ)みたいなところありましたけど、どんどんとSTORK(ストーク)使っている人増えてますね。

前回記事で

「カスタマイズばかりに時間をかけずに、コンテンツをしっかりと揃えていきましょうね!」

みたいなことを言っといて何なんですが、やはり読者さんがあなたのブログを最初に見たときの印象は大事なので、デザイン面での周りとの差別化はやっておいた方が良い部分でもあります。

今回は見出しのカスタマイズということで、h2見出しの背景をグラデーション表示にする方法を説明していきます。このカスタマイズをやっているブログはあまり見かけないのできっと目立つこと間違いなし!

 

まずはグラデーションの色を決めよう

まずは見出し背景の色をどんなグラデーションにするか決めていきましょう。

とは言え、グラデーションの色を決めるって難しくないですか?単色の背景ならイメージしやすいと思うんですけど、グラデーションとなるとパッとイメージ出来ないですよね。でも、これから紹介するサイトを使えば簡単にグラデーションを作ることが出来て、そしてなんとCSSまで作成してくれます。このサイト作ってくれた人ほんと神ですね。

そのサイトは「Blend」という名前のサイトです。無料で使えるのでまずはアクセスしてみましょう。

アクセスするとこんな画面が開くはずです。

左右にあるカラーピッカーで好みの色を選ぶことが出来ます。これで2色を選んだら真ん中の「Let’s Blend!」をクリックすると選んだ2色が混ざったグラデーションが表示されます。こんな感じ↓

これで好みの色を決めたら細かな編集に入っていきます。右上に色々とボタンが表示されていますよね?これを使います。

左からいくと、

  • Unblend:やり直しをする時にクリックするボタンです。
  • 四角のマーク:グラデーションをかける角度を調整する時にクリックするボタンです。
  • ツマミのついたバー:四角のマークをクリックしてある時にこのバーのつまみを左右に動かすことでグラデーションの角度を調整することが出来ます(上下、左右、斜めなど)。
  • 丸のマーク:円形にグラデーションをかけたい時にクリックするボタンです。
  • </>:表示されているグラデーションのCSSを作成する時にクリックするボタンです。
このようになっています。操作は簡単なので色々と弄ってみて下さい!

納得のいくグラデーションができたら「</>」ボタンをクリックすると作成したグラデーションに対応したCSSが表示されます。その下にある「Highlight Code」をクリックするとCSS部分が反転するのでコピーしましょう。

これでCSSが用意できました。

 

テーマの追加CSSを編集しよう

好みのグラデーションに対応したCSSが用意できたので、次はテーマのカスタマイズを行ってh2見出しの背景色を変更しましょう。

まずはダッシュボード画面左の「外観」→「カスタマイズ」→「追加CSS」をクリックして追加CSSの編集画面を開きます。

そうしたら以下のCSSを追加して下さい。

.entry-content h2 {
先ほど作成した好みの色のグラデーションに対応したCSS
}

これだけで簡単にh2見出しの背景色を変更することが出来ます。試しにやってみますね。デフォルトだとh2見出しはこのように表示されますが、

上記の様にCSSを編集すると、

できました!こんな感じでオリジナリティ溢れる見出しにすることが出来ます。このカスタマイズはとても簡単にできるのでちょっと周りとの差をつけたい時はぜひやってみて下さいね。今回の説明は以上です。お疲れさまでした。

 

カスタマイズ記事まとめ

他のSTORK(ストーク)カスタマイズ記事をお探しの方はこちらからどうぞ

あらやん公式メルマガはこちら

無料のメルマガに登録して頂くとメルマガ会員限定のメンバーズサイトに無料でご招待しています。

メルマガやメンバーズサイトでは

  • 自由なライフスタイルを実現するための具体的な方法
  • 理想を現実にするための思考法・マインドセット
  • より成果を出すための作業のマネジメント

などなど、自由なライフスタイルを実現するための様々な情報を発信していきます。

あなたも自由なライフスタイルを実現し、家族や恋人、友人などの大切な人とニコニコ笑顔で過ごしていけるようなそんな人生を歩んでいきませんか?もしそんな人生に興味や憧れがあるのなら、ぜひこのメルマガに登録して下さいね。

あなたが理想のライフスタイルを実現できるように私も頑張って情報を発信していきます!