STORKをカスタマイズ!「番外編:リクエスト集」

現在、ブロガーの間で大人気となっている、テーマ「STORK(ストーク)」を、自分だけのオリジナルデザインにカスタマイズしよう!

今回は、番外編「リクエスト集」を、ご紹介します。

 

第1~3弾も、見てね!(↓)

 

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

そもそも「STORK」って?

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

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

2016.12.21

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

2016.12.21

 

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

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

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

2016.12.27

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

 

(↑)のカスタマイズを終えられた方は、早速「番外編」をやってみましょう!

 

「STORK」カスタマイズ 番外編:リクエスト集

実は、これまで「STORK」のカスタマイズ記事をご紹介するうちに、お問合せを頂くことが増えました。

「細かいけど、ココを変えたい!何か方法はないでしょうか?」

「自分らしいブログのため、ココの色を変えたいのですが、自分ではわからなくて・・・!」

もともとオシャレな「STORK」ですが、やっぱり皆さん、それぞれ自分だけのブログデザインにしたい、という思いは強いですよね。そのご要望に僕も応えたいと思いまして、今回は「リクエスト集」として、少しマニアックなカスタマイズを、ご紹介します。

頂いている、すべてのご要望にお応えできるわけではありませんが、今後も随時追加していく予定です!

 

※ カスタマイズは、子テーマの「style.css」に、追加します

ご案内するカスタマイズ方法は、子テーマの「style.css」ファイルに、コピペして追加することで、ご利用できます。詳しいやり方は、記事の後半にある「テンプレートの使い方」を見てね。

また、普段のカスタマイズ記事と比べると、少し応用編です。わからないところ等あれば、気軽にご質問くださいね。

 

1.「関連記事」ラベルの、文字を変える

ショートコードで、ラベル付きのリンクカードを挿入する場合、もともとは、このように(↓)「関連記事」という文字が、表示されます。

ここを、当ブログのように(↓)、好きな文字に変えられます。

【保存版】初心者こそ使ってほしい「STORK」の魅力・完全マニュアル

2017.05.07
/* ショートコード(関連記事)文字を変える */
.related_article .ttl:before{
    content:'(ここに好きな文字を入れてね)' !important;
}

 

2.ヘッダーの、英字フォントを変える

もともとは、このように(↓)ポップな見た目の英字フォントが、表示されます。

ここを、当ブログのように(↓)、好きなフォントに変えられます。

 

 フォント変更には、2種類の方法があります

  •  「内部フォント指定」を変える方法
  •  「Webフォント」を指定する方法

詳しくは、コチラ(↓)で解説しているので、ぜひ見てね。

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

2017.04.14

 

内部フォント指定の場合

/* ヘッダー英字フォント変更 */
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メーカー」というツールがとても便利です!

Font-familyメーカー:フォント種類一覧からサクッと指定
Windows・Mac・iOSの標準フォント一覧からドラッグするだけで簡単に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」があります!

他のフォントも試してみたい!という方は、コチラ(↓)を見てみてね。

Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access
As Google makes progress on supporting Japanese web typography, we invite designers and developers to experiment with these Japanese web fonts now available ...

 

また「Google Fonts」の使い方は、コチラ(↓)で、わかりやすく解説されていますので、見てみてね。

【保存版】ゼロから分かるGoogle Fontsの使い方
最も有名なWebフォント「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メーカー」というツールがとても便利です!

Font-familyメーカー:フォント種類一覧からサクッと指定
Windows・Mac・iOSの標準フォント一覧からドラッグするだけで簡単に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」があります!

他のフォントも試してみたい!という方は、コチラ(↓)を見てみてね。

Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access
As Google makes progress on supporting Japanese web typography, we invite designers and developers to experiment with these Japanese web fonts now available ...

 

また「Google Fonts」の使い方は、コチラ(↓)で、わかりやすく解説されていますので、見てみてね。

【保存版】ゼロから分かるGoogle Fontsの使い方
最も有名なWebフォント「Google Fonts」の使い方と導入方法を、初心者の方でも分かるように解説します。

 

【追記】2017/5/28

ヘッダーや記事下を含む、ポップな英字フォント一括して変更したい!とのリクエストを頂きました。その場合は、以下をコピペして使ってね。

内部フォント指定の場合

/* 標準英字フォント・一括変更 */
.gf{
    font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans','Helvetica Neue','Helvetica','Arial',sans-serif;
}

Webフォント指定の場合

/* 標準英字フォント・一括変更 */
@import url(https://fonts.googleapis.com/earlyaccess/kokoro.css);
.gf{
    font-family: 'Kokoro', sans-serif;
}

 

 

4.オリジナルデザインの吹き出しを作る

ショートコードで、吹き出しを挿入する場合、もともとは、このように(↓)3種類の、デザインがあります。

狐火兎
シンプルな吹き出しです
狐火兎
Facebook風カラーの、吹き出しです
狐火兎
LINE風カラーの、吹き出しです

 

この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です。

 

狐火兎
自分だけの、オリジナルデザインの吹き出しを、ぜひ作ってみて下さいね♪

 

【2017/6/1】以下の「5・6」を追加しました!

 

5.記事一覧を見やすくする

記事一覧のタイトル・説明文が、そのままだと少し読みにくかったので、見やすく調整します(サイズはお好みで)。

/* 記事一覧(タイトル)調整 */
h1.h2{
 font-size: 13pt !important;
}
/* 記事一覧(説明文)調整 */
.description p{
 font-size: 10pt !important;
}

 

6.コメント欄を見やすくする

コメント欄が長くなると、不格好に見えてしまうので、少しフォントサイズを変えて調整します。

/* コメント欄調整 */
/* pinback調整 */
li.pingback div p{
    font-size: 0.7em !important;
}
/* comment調整 */
li.comment div p{
    font-size: 0.9em !important;
}

 

 

各テンプレートの使い方

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

 

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

 

まとめ

  1.  「関連記事」ラベルの、文字を変える
  2.  ヘッダーの、英字フォントを変える(2種類の方法アリ)
  3.  記事下の、英字フォントを変える(2種類の方法アリ)
  4.  オリジナルデザインの吹き出しを作る

 

今回この番外編は、頂いたリクエストの中から、勝手ながらチョイスして書かせて頂きました。ご要望頂いてから、お待たせしてしまった方、遅くなってしまい申し訳ありませんでした。

今後も、随時更新していきたいと思います!

 

リクエストも受け付けていますので、コメントまたは、お問合せフォーム・Twitterなどから、気軽にご連絡くださいね。

 

また「STORK」の基本的な機能・必要なプラグインなど、STORKユーザーが知っておくべきコトを、コチラ(↓)にまとめていますので、ぜひ見てね!

【保存版】初心者こそ使ってほしい「STORK」の魅力・完全マニュアル

2017.05.07

 

狐火兎
ブログを続けていくには、自分がブログに愛着を持てることも大切です。納得のいくデザインにして、これからも楽しく記事を書きましょう~!では、また♪

 

コチラもおすすめです

「ネットで月収10万を稼ぐメソッド」まとめ
ブログ収入(アドセンス)だけで、月10万を稼ぐ、その具体的な方法とは
【最重要】月10万を稼ぐための、3ステップ

 

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

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

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

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

1 個のコメント

  • コメントを残す

    ABOUTこの記事をかいた人

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