【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(ストーク)カスタマイズ記事をお探しの方はこちらからどうぞ


無料会員制のメールコミュニティへご招待しています

無料で参加できるメールコミュニティ、その名も「ニコニコスマイルコミュニティ」にご招待しています。

このコミュニティではブログでお伝えしきれなかった内容やコミュニティ参加者限定のコンテンツをプレゼントしています。ネットビジネスでお金を稼ぐ力を身に付け、自由なライフスタイルを実現して大切な人とニコニコ笑顔で暮らしていけるような人生を創造していきたいのなら、あなたも無料のコミュニティに参加して仲間になりませんか?