こんにちは、森くま☆(@kuma_moriya)です。
唐突な質問をしますが、皆さんは毎日ワクワクして生きていますか？
私のワクワクの理由は、相方さんと過ごせていること。そして大好きな100均を使って暮らしていることです。そんな充実した毎日に実は最近もう一つ、暮らしの中での楽しみ事が増えました。
それはこの主人との暮らしを綴る「おうちブログ」の存在です。
そんな「おうちブログ」を好きになれた理由の一つは、何を隠そうワードプレスのテーマである『ストーク』があげられます。そこで今回はブログ初心者の方に少しでもお役に立てるよう、『ストーク』のちょっとしたカスタム方法をご紹介します。
目次
『ストーク』とは？
『ストーク』とは、ブログが作れるワードプレスのテーマ（テンプレート）のことです。
そんな『ストーク』には初心者に有難い手厚い30日のサポートがあるので、ブログを書くまでには直ぐになれると思います。
でも、サポートをフルに使った私が思ったことは30日では思うようなカスタムまでできない人が多いと感じました。特にちょっとしたカスタムをしているか、していないかで人気のテーマである『ストーク』にオリジナリティが出てきます。
この記事では、そんなちょっとした『ストーク』のカスタム法をピックアップ！使うことできっと、お気に入りのブログに変化していくはずです。
『ストーク』カスタマイズ法8選
カスタマイズする時の注意点
ワードプレスのテーマである『ストーク』には、親テーマと子テーマがあります。
必ず子テーマをダウンロードして、子テーマでカスタマイズしましょう！
またCSSは、なるべく【外観→カスタマイズの中の“追加CSS”】で設定するようにしてください。
CSSも同様ですが特にfunctions.phpをいじる時は、デザインが崩れる可能性があるため必ずバックアップをしてください。
H2の見出しを吹き出しに変更する方法
ワードプレスで人気の見出しといったら、吹き出し風です。『ストーク』では外観の項目をいじるだけ！スタイルシートもいじることがないのが嬉しいです。
変更方法外観→カスタマイズ→投稿・固定ページ設定の“見出しデザイン”にて吹き出しを選ぶ
記事内の文字サイズの変更方法
そのままでも素敵な文字サイズですが、こだわっても楽しいですよ。実践したい方は、下記のCSSを子テーマのstyle.cssに記述しましょう。font-size: 1.0emなどの1.０や0.9という数字に自分が反映させたい文字サイズ（数字）を入力すれば変更されるはずです。
下記の6つの場所が変えられます。
- 記事タイトル
- 記事内見出し
- 記事内文章
- ウィジェット見出し
- サイドバーウィジェット
- フッターウィジェット
#container .entry-title,
#container .single-title,
#container .page-title {font-size: 1.0em;}
/* 記事内見出し */
#container .entry-content h2 {font-size: 1.0em;}
#container .entry-content h3 {font-size: 1.0em;}
/* 記事内文章 */
#container .entry-content p {font-size: 0.9em;}
/* ウィジェット見出し */
#container .widgettitle {font-size: 0.9em;}
/* サイドバーウィジェット */
.sidebar {font-size: 0.9em;}
/* フッターウィジェット */
#footer-top .inner {font-size: 0.9em;}
記事タイトル・見出し(h2)のフォントを変更する方法
見出しの印象は大切！
「Google Fonts」を使えば、読者を惹きつける見出しを作ることができます。
好きな文字を見つけたら、HTMLコードをheadタグ欄に入力し、下記のCSSを入力すれば反映されるはずです。
POINTheadタグは外観→カスタマイズ→アクセス解析コードで辿り着けます
（例）「Rounded M+ 1c」フォントの場合
<link href=”https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css ” rel=”stylesheet” />
#container .entry-content h2 {
font-family: “フォント名を指定”;
}
#container .entry-title,
#container .entry-content h2 {
font-family: “Rounded Mplus 1c”;
}
階層化ナビゲーションのリンク色のみの変更方法
カスタムしていくとわかるのですが、グローバルナビの階層化のリンク色は初期設定ではフッターリンク色と同じになります。私はかぶって見づらくなってしまったため、別々の色で変更していますよ！やりたい方はぜひ、使ってみてくださいね。
*モバイルでは階層化ができないため、パソコンのみの設定になります。
color: #カラータグ;
}
フッター・タグウィジェットの背景色の変更方法
フッターに設置したタグウィジェットのタグ背景色は初期状態だとグレーになっています。このままだとデザインが崩れる方は、下記のCSSを記載してみましょう。
/*フッター・タグウィジェットの背景色の変更方法*/
.footerwidget.widget_tag_cloud a.tag-cloud-link {
background: #カラータグ;
}
フッターのウィジェットのタイトルにラインを表示する方法
フッターにあるウィジェットのタイトルにラインを設置している人もいました！そんな人のようにラインを表示したい方は、下記のCSSを貼り付ければ表示できます。
border-bottom: 1px solid #カラータグ;
}
スマートフォン用グローバルナビの背景色・文字色の変更方法
写真では背景色のみわかりやすく、黄色になってますがスマートフォン用のグローバルナビの背景色・文字色も変更可能です。
POINT文字色については、外観→カスタマイズ→サイトカラー設定の“ヘッダーリンク”で変更可能ですが、ヘッダーリンクと同色になってしまうため個別に変更したい方は下記のCSSがおすすめです。
background: #カラータグ;
}
color: #カラータグ;
}
アイキャッチ画像を正方形にする方法
インスタなどやっている方は、正方形の画像にこだわっている方もいるはず。そんな人は、アイキャッチを正方形にしてもいいかもしれません。下記の設定でできます。
POINT①外観→カスタマイズ→記事一覧ページ設定にて“シンプル”or“カード型”を選ぶ。
POINT②既に投稿済みの画像には反映されないため、新しく設定しなおしてください。
function add_mythumbnail_size() {
add_theme_support(‘post-thumbnails’);
add_image_size( ‘home-thum’, 486, 486, true );
add_image_size( ‘post-thum’, 300, 300, true );
}
add_action( ‘after_setup_theme’, ‘add_mythumbnail_size’ );
max-height: 235px;
}
.top-post-list .post-list .eyecatch {
max-width: 180px;
}
.post-list-card .post-list .eyecatch {
max-height: 360px;
}
.post-list-card .post-list {
height: 520px;
}
.single .authorbox .author-newpost li .eyecatch,
.related-box li .eyecatch {
height: 175px;
}
@media only screen and (max-width: 1165px) and (min-width: 768px) {
.single .authorbox .author-newpost li .eyecatch,
.related-box li .eyecatch {
height: 120px;
}
}
@media only screen and (max-width: 480px) {
#container .carouselwrap .slider li,
#container .carouselwrap .slider .eyecatch {
max-height: 360px;
}
.top-post-list .post-list .eyecatch {
max-width: 95px;
max-height: 95px;
}
.single .authorbox .author-newpost li .eyecatch,
.related-box li .eyecatch {
height: 160px;
}
}
『ストーク』で素敵な「おうちブログ」生活を！
『ストーク』はとっても優秀なワードプレスのテーマです。
ぜひ、お気に入りの文字や色に変更して、おうちブログ生活を楽しんでくださいね！
