【コピペOK】STORK（ストーク）をカスタマイズ！「第1弾：見出し　テンプレート12選」

現在、ブロガーの間で大人気となっている、テーマ「STORK（ストーク）」。

他のテーマには無い「オシャレさ」「多機能」「面倒なカスタマイズ要らず」さから、「STORK」を選ぶ人が続出しているようです。かく言う、僕もその1人。もう何か月も使っていますが、こんなに満足なテーマは、正直初めてです。

ただ、多くの人が使うようになってきて、「他で見たブログと、似たようなデザインだなぁ」と、最近「見た目が似てしまう」ことが増えました。折角のあなただけのブログなのに、パッと見で「他と一緒」と思われるのは、もったいないですよね。

そこで「STORK」を、自分だけのオリジナルデザインに、カスタマイズしましょう！

今回は、第1弾「見出し編」を、ご紹介します。

「STORK」を、自分好みにカスタマイズ！

そもそも「STORK」って？

「STORK」を知らない、まだ使っていない・・・という方は、先にコチラ（↓）をどうぞ。なぜ人気があるか、わかってもらえると思います。

ブロガーに大人気！話題のテーマ「STORK（ストーク）」を使う！

2018.04.02

無料テーマを辞めて、僕が「STORK（ストーク）」を選んだ理由

2017.06.06

カスタマイズ！・・・その前に

まずは、たった1時間で、簡単にできるカスタマイズがあります！

「STORK（ストーク）」を、たった1時間で、おしゃれにカスタマイズ！

2017.09.29

これだけでも、ぐっとオシャレ・オリジナルデザインに、なりますよ♪

（↑）のカスタマイズを終えられた方は、早速「見出し」のカスタマイズをしましょう！

「STORK」カスタマイズ　第1弾：見出し

見出しとは、記事内で使われる小タイトルのこと。

「段落」「hタグ」とも呼ばれ、「1～6」まで設定できます。「STORK」では最初、このような（↓）デザインです。

見出しは、記事の見やすさやSEOの観点からも、欠かせないものです。しかしデザインを変える場合、HTML・CSSに詳しくない方には、ハードルが高いと思います。

そこで今回は、初心者の方でもコピペで使える、見出しテンプレート「12選」を用意しました！

STORK用　見出しテンプレート　12選

1．下線

/* 見出し装飾 */
.entry-content h1 {
  border-bottom: 3px solid #f3f3f3 !important;
  padding: 12px 0px 12px 5px ;
  margin: 30px 0px 20px;
}

2．点線

/* 見出し装飾 */
.entry-content h1 {
  border-bottom: 3px dashed #000 !important;
  padding: 12px 0px 12px 5px ;
  margin: 30px 0px 20px;
}

3．上下線

/* 見出し装飾 */
.entry-content h1 {
  border-top: 1px solid #cc0033 !important;
  border-bottom: 1px solid #cc0033 !important;
  padding: 12px 0px 12px 5px ;
  margin: 30px 0px 20px;
}

4．背景カラーボックス

/* 見出し装飾 */
.entry-content h1 {
  color: #fff !important;
  background-color: #cccac3 !important;
  border-radius: 3px;
  padding: 12px 0px 12px 5px ;
  margin: 30px 0px 20px;
}

5．影付きボックス

/* 見出し装飾 */
.entry-content h1 {
  border: 1px solid #f3f3f3 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  padding: 12px 0px 12px 5px ;
  margin: 30px 0px 20px;
}

6．左ボーダー

/* 見出し装飾 */
.entry-content h1 {
  background: #f3f3f3 !important;
  border-left: 6px solid #c1403c !important;
  padding: 12px 0px 12px 5px ;
  margin: 30px 0px 20px;
}

7．バイカラー

/* 見出し装飾 */
.entry-content h1 {
  position: relative;
  border-bottom: 3px solid #cccac3 !important;
  padding: 12px 0px 12px 5px ;
  margin: 30px 0px 20px;
}
.entry-content h1:after {
  position: absolute;
  bottom: -3px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 3px;
  background-color: #f05941 !important;
}

8．マーク付き

/* 見出し装飾 */
.entry-content h1 {
  border-bottom: 5px solid #000 !important;
  padding: 12px 0px 12px 5px ;
  margin: 40px 0px 20px;
}
.entry-content h1:before{
  margin-right:20px;
  color: #c1403c !important;
  font-family:"FontAwesome";
  content:"\f219";
}

アイコンは、コチラ（↓）のサイト様から、好きなものを選べます。「content:”\f219“;」の赤字箇所を、好きなものに変更して、使ってくださいね。

fontawesome.io

 

1 tweet 1715 users

Font Awesome Icons

Font Awesome, the iconic font and CSS framework

9．ドッグイヤー

/* 見出し装飾 */
.entry-content h1 {
  position: relative;
  border-bottom: 2px solid #c1403c !important;
  background-color: #f3f3f3 !important;
  padding: 12px 0px 12px 5px ;
  margin: 40px 0px 20px;
}
.entry-content h1:after {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  width: 0;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: #fff #fff #ddd #ddd !important;
  box-shadow: -1px 1px 2px rgba(0, 0, 0, .1);
}

10．ストライプ

/* 見出し装飾 */
.entry-content h1 {
  background: -webkit-repeating-linear-gradient(44deg, #cccac3, #cccac3 2px, #f3f3f3 2px, #f3f3f3 40px) !important;
  background: repeating-linear-gradient(44deg, #cccac3, #cccac3 2px, #f3f3f3 2px, #f3f3f3 40px) !important;
  padding: 12px 0px 12px 15px ;
  margin: 40px 0px 20px;
}

11．背景カラー・吹き出し（左寄せ）

/* 見出し装飾 */
.entry-content h1 {
  position: relative;
  background: #e5e2d7 !important;
  padding: 8px 0px 8px 20px;
  margin: 40px 0px 20px 0px;
}

.entry-content h1:after{
  content: ' ';
  width:0;
  height: 0;
  position:absolute;
  border:10px solid transparent;
  border-top-color:#e5e2d7 !important;
  top:100%;
  left:5%;
}

12．枠・吹き出し（真ん中寄せ）

/* 見出し装飾 */
.entry-content h1 {
  position: relative;
  border: 2px solid #c1403c !important;
  padding: 8px 0px 8px 20px;
  margin: 40px 0px 20px 0px;
}

.entry-content h1:after{
  content: ' ';
  width:0;
  height: 0;
  position:absolute;
  border:10px solid transparent;
  border-top-color:#c1403c !important;
  top:100%;
  left:50%;
}

テンプレートの使い方

「外観」→「テーマの編集」を、押します。

①　編集するテーマで、子テーマ「stork_custom」を選択
②　スタイルシート（style.css）を選択
③　好みのテンプレートタグをコピーし、貼り付け後、「ファイルを更新」を忘れずに

また貼り付ける時は、以下の3点に注意して、ご使用ください。

まとめ

シンプルなものから、すこし珍しいものまで、テンプレートを作ってみました。見出しだけで、ブログの印象がガラッと変わるので、ぜひ好きなアレンジに変えて、カスタマイズしてみてください！

もし「こんな風に変えたいけど、やり方がわからない」という方は、気軽にご質問くださいね。

第2弾、「フォント編」は、コチラ（↓）からどうぞ！

関連記事【コピペOK】STORK（ストーク）をカスタマイズ！「第2弾：フォント　テンプレート7選」

2017.06.07

STORKユーザーの方は、コチラもみてね
【最新版】「STORK」で使えるショートコードを、全部・サクッと、便利に登録！
STORK（ストーク）で、ランディングページ（LP）を設置するべき、3つの理由と具体例

カラーは、自分のサイトの配色に合わせたり、上のテンプレート（↑）で使っているような薄いグレーやベージュが、馴染みやすくてオススメです。では、また♪