【コピペOK】STORK(ストーク)をカスタマイズ!「第1弾:見出し テンプレート12選」

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

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

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

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

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

 

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

そもそも「STORK」って?

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

ブロガーに大人気! 話題のテーマ 「 STORK(ストーク)」 を使う!

2016.12.21

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

2016.12.21

 

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

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

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

2016.12.27

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

 

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

 

「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“;」の赤字箇所を、好きなものに変更して、使ってくださいね。

 

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点に注意して、ご使用ください。

使う時に注意すること

  •  「h1」を、使用する見出しの番号に変える
  •  「#~」に、お好きなカラーをどうぞ(「!important」を消さないように)
  •  「(数字)px」で、線の太さや余白などを、好みに変えてね

 

まとめ

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

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

 

第2弾、「フォント編は、コチラ(↓)からどうぞ!

【コピペOK】STORK(ストーク)をカスタマイズ!「第2弾:フォント テンプレート7選」

2017.04.14

 

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

 

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

 

好きな生き方を選べるように

かつて社畜だった僕のように
いつか、会社を辞めて、自由に生きるために
まず、月10万をネットで稼ぐ「現実的な方法」を紹介します

ブロガー向き テーマ「STORK(ストーク)」

当ブログも使っている
WordPressテーマ「STORK」です。

4 件のコメント

  • はじめまして。ワードプレスを始めて数週間の者です。ストークを使っておりブログを参考にさせてもらっています。ありがとうございます。
    さっそく見出しを変更しようと考えていて狐火兎様の見出しcssを子テーマに貼り付けました。デザインは反映されるのですが親テーマのデザイン(元々の見出し)も残ってしまっていて両方が表示されている状態です…。他サイト様の見出しcssも試したのですが同様の結果でした。すっごく初歩的なことを見逃していれば大変お恥ずかしいのですが、ご教示いただければ幸いです…。よろしくお願いします。

    • jettさん、コメントありがとうございます。
      同じストーク仲間で、しかも僕のブログを参考にして頂き、嬉しいです(>ω<*)

      ご相談頂いた「元々の見出しも残っている」という件ですが、具体的には、どのような状態でしょうか?(背景色を変えたのに、元々の色が残ってしまっている等)

      また、貼り付けたタグに不安がある場合は、すこしお手数をおかけしますが、
      コチラの→「問合せフォーム」より、該当のタグをお送りください。
      そうすれば、僕の方でも詳細が確認できますので、解決がはやいかもしれません。

      ちなみに、キャッシュ系のプラグインは、使用していらっしゃいますか?
      古いキャッシュが残っていると、設定が反映されない場合があります。
      ブラウザのキャッシュも悪さをする可能性があるので、そちらも消去して、再度確認してみて下さいね。
      (キャッシュが原因で、反映されないという方も多いようです)

      どうぞよろしくお願いいたします。

      • 狐火兎様

        お返事ありがとうございます!さっそく問い合わせフォームから詳細をご連絡させていただきました。お忙しい中本当にご親切にしていただき感謝しております。

        • 問合せフォームより、ご連絡ありがとうございますね!
          先ほど返信させて頂きました(*’▽’)

          大変お待たせしてしまい、申し訳ありませんでした。
          引き続き、メールでやり取りさせて頂きますので、どうぞよろしくお願いいたします。

  • コメントを残す

    ABOUTこの記事をかいた人

    社畜エンジニアから、2014年に独立、フリーランスに。 「お金のための仕事」が、嫌になりました。 「好きな生き方を選べるように」、ネットで稼ぐ方法をお届けします。 *デザイン・機械・創作物・食べること が好き