現在、ブロガーの間で大人気となっている、テーマ「STORK（ストーク）」を、自分だけのオリジナルデザインにカスタマイズしよう！
今回は、番外編「リクエスト集」を、ご紹介します。
第1～3弾も、見てね！（↓）
■目次
「STORK」を、自分好みにカスタマイズ！
そもそも「STORK」って？
「STORK」を知らない、まだ使っていない・・・という方は、先にコチラ（↓）をどうぞ。なぜ人気があるか、わかってもらえると思います。
カスタマイズ！・・・その前に
まずは、たった1時間で、簡単にできるカスタマイズがあります！
これだけでも、ぐっとオシャレ・オリジナルデザインに、なりますよ♪
（↑）のカスタマイズを終えられた方は、早速「番外編」をやってみましょう！
「STORK」カスタマイズ 番外編：リクエスト集
実は、これまで「STORK」のカスタマイズ記事をご紹介するうちに、お問合せを頂くことが増えました。
「細かいけど、ココを変えたい！何か方法はないでしょうか？」
「自分らしいブログのため、ココの色を変えたいのですが、自分ではわからなくて・・・！」
もともとオシャレな「STORK」ですが、やっぱり皆さん、それぞれ自分だけのブログデザインにしたい、という思いは強いですよね。そのご要望に僕も応えたいと思いまして、今回は「リクエスト集」として、少しマニアックなカスタマイズを、ご紹介します。
頂いている、すべてのご要望にお応えできるわけではありませんが、今後も随時追加していく予定です！
ご案内するカスタマイズ方法は、子テーマの「style.css」ファイルに、コピペして追加することで、ご利用できます。詳しいやり方は、記事の後半にある「テンプレートの使い方」を見てね。
また、普段のカスタマイズ記事と比べると、少し応用編です。わからないところ等あれば、気軽にご質問くださいね。
1．「関連記事」ラベルの、文字を変える
ショートコードで、ラベル付きのリンクカードを挿入する場合、もともとは、このように（↓）「関連記事」という文字が、表示されます。
ここを、当ブログのように（↓）、好きな文字に変えられます。
/* ショートコード（関連記事）文字を変える */
.related_article .ttl:before{
content:'（ここに好きな文字を入れてね）' !important;
}
2．ヘッダーの、英字フォントを変える
もともとは、このように（↓）ポップな見た目の英字フォントが、表示されます。
ここを、当ブログのように（↓）、好きなフォントに変えられます。
内部フォント指定の場合
/* ヘッダー英字フォント変更 */
h2.en.gf{
font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans','Helvetica Neue','Helvetica','Arial',sans-serif;
font-size: 2.3em !important;
}
（↑）は、「コピペOK】STORK（ストーク）をカスタマイズ！「第2弾：フォント テンプレート7選」でご紹介した、「内部フォント指定」の「② スッキリ・読みやすい」場合の例です。
「font-family」部分を、好きなフォントに変えて、使います。「font-size」も、好みのサイズに変えてね。
他のフォントも試してみたい！という方は、コチラ（↓）の「Font-familyメーカー」というツールがとても便利です！
Webフォント指定の場合
/* ヘッダー英字フォント変更 */
@import url(https://fonts.googleapis.com/earlyaccess/kokoro.css);
h2.en.gf{
font-family: 'Kokoro', sans-serif;
font-size: 2.3em !important;
}
（↑）は、「コピペOK】STORK（ストーク）をカスタマイズ！「第2弾：フォント テンプレート7選」でご紹介した、「Webフォント指定」の「❶ こころ明朝（おしゃれ・和風）」場合の例です。
「@import url」と「font-family」部分を、好きなフォントに変えて、使います。「font-size」も、好みのサイズに変えてね。
他のフォントも試してみたい！という方は、コチラ（↓）を見てみてね。
また「Google Fonts」の使い方は、コチラ（↓）で、わかりやすく解説されていますので、見てみてね。
3．記事下の、英字フォントを変える
もともとは、左側のように、ポップな見た目の英字フォントが表示されますが、右側の、当ブログのように、好きなフォントに変えられます（↓）。
前述の「2．ヘッダーの、英字フォントを変える」と同様、「内部フォント指定」と「Webフォント指定」の、2種類の方法で変更できます。
内部フォント指定の場合
/* 記事下英字フォント変更 */
.single .h_ttl span{
font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans','Helvetica Neue','Helvetica','Arial',sans-serif;
font-size: 1em !important;
}
（↑）は、「コピペOK】STORK（ストーク）をカスタマイズ！「第2弾：フォント テンプレート7選」でご紹介した、「内部フォント指定」の「② スッキリ・読みやすい」場合の例です。
「font-family」部分を、好きなフォントに変えて、使います。「font-size」も、好みのサイズに変えてね。
他のフォントも試してみたい！という方は、コチラ（↓）の「Font-familyメーカー」というツールがとても便利です！
Webフォント指定の場合
/* ヘッダー英字フォント変更 */
@import url(https://fonts.googleapis.com/earlyaccess/kokoro.css);
.single .h_ttl span{
font-family: 'Kokoro', sans-serif;
font-size: 2.3em !important;
}
（↑）は、「コピペOK】STORK（ストーク）をカスタマイズ！「第2弾：フォント テンプレート7選」でご紹介した、「Webフォント指定」の「❶ こころ明朝（おしゃれ・和風）」場合の例です。
「@import url」と「font-family」部分を、好きなフォントに変えて、使います。「font-size」も、好みのサイズに変えてね。
他のフォントも試してみたい！という方は、コチラ（↓）を見てみてね。
また「Google Fonts」の使い方は、コチラ（↓）で、わかりやすく解説されていますので、見てみてね。
4．オリジナルデザインの吹き出しを作る
ショートコードで、吹き出しを挿入する場合、もともとは、このように（↓）3種類の、デザインがあります。
この3つ以外にも、このように（↓）、オリジナルデザインの吹き出しが作れます。
/* マイ吹き出し1 */
.voice.l.my1 .voicecomment:before{
border-right-color: （吹き出しのしっぽ部分の色を入れてね）;
}
.voice.l.my1 .voicecomment:after{
content:none;
}
.voice.my1 .voicecomment{
background: （吹き出しの背景色を入れてね）;
border-color: （吹き出しの枠の色を入れてね）;
color: （吹き出し内の文字色を入れてね）;
}
.voice.r.my1 .voicecomment:before{
border-left-color: （吹き出しのしっぽ部分の色を入れてね）;
}
.voice.r.my1 .voicecomment:after{
content:none;
}
.voice.icon_my1 .icon img{
border-color: （アイコン枠の色を入れてね）;
}
（↑）を、子テーマの「style.css」に、追加した後、ショートコードとしては、このように（↓）を書きます。
[voice icon="（画像アドレス）" name="（あなたの名前）" type="l my1 icon_my1"]セリフ[/voice]
アイコン枠の色を変えたくない場合は、「icon_my1」を削除すればOKです。
テンプレートの使い方
「外観」→「テーマの編集」を、押します。
① 編集するテーマで、子テーマ「stork_custom」を選択
② スタイルシート（style.css）を選択
③ 好みのテンプレートタグをコピーし、貼り付け後、「ファイルを更新」を忘れずに
まとめ
- 「関連記事」ラベルの、文字を変える
- ヘッダーの、英字フォントを変える（2種類の方法アリ）
- 記事下の、英字フォントを変える（2種類の方法アリ）
- オリジナルデザインの吹き出しを作る
今回この番外編は、頂いたリクエストの中から、勝手ながらチョイスして書かせて頂きました。ご要望頂いてから、お待たせしてしまった方、遅くなってしまい申し訳ありませんでした。
今後も、随時更新していきたいと思います！
リクエストも受け付けていますので、コメントまたは、お問合せフォーム・Twitterなどから、気軽にご連絡くださいね。
また「STORK」の基本的な機能・必要なプラグインなど、STORKユーザーが知っておくべきコトを、コチラ（↓）にまとめていますので、ぜひ見てね！
コチラもおすすめです
「ネットで月収10万を稼ぐメソッド」まとめ
ブログ収入（アドセンス）だけで、月10万を稼ぐ、その具体的な方法とは
【最重要】月10万を稼ぐための、3ステップ
