ストークカスタム | くま☆家事 https://kumakaji.com お得を発見！らく家事で毎日、幸せ♪ Fri, 10 Jun 2022 11:16:25 +0000 ja hourly 1 https://kumakaji.com/wp-content/uploads/2018/12/cropped-image1-2-32x32.jpeg ストークカスタム | くま☆家事 https://kumakaji.com 32 32 これをやれば激変！『ストーク』カスタマイズ8選 https://kumakaji.com/stoke-custom/?utm_source=rss&utm_medium=rss&utm_campaign=stoke-custom https://kumakaji.com/stoke-custom/#respond Mon, 28 Jan 2019 11:55:53 +0000 https://kumakaji.com/?p=1295 こんにちは、森くま☆(@kuma_moriya)です。 唐突な質問をしますが、皆さんは毎日ワクワクして生きていますか？ 私のワクワクの理由は、相方さんと過ごせていること。そして大好きな100均を使って暮らしていることです...

The post これをやれば激変！『ストーク』カスタマイズ8選 first appeared on くま☆家事.

]]> こんにちは、森くま☆(@kuma_moriya)です。
唐突な質問をしますが、皆さんは毎日ワクワクして生きていますか？
森くま☆
私は毎日、ワクワクしっぱなしだよ！

私のワクワクの理由は、相方さんと過ごせていること。そして大好きな100均を使って暮らしていることです。そんな充実した毎日に実は最近もう一つ、暮らしの中での楽しみ事が増えました。

それはこの主人との暮らしを綴る「おうちブログ」の存在です。

森くま☆
未熟な出来栄えだけど、私にとってはこの「おうちブログ」は宝物の一つ♡

そんな「おうちブログ」を好きになれた理由の一つは、何を隠そうワードプレスのテーマである『ストーク』があげられます。そこで今回はブログ初心者の方に少しでもお役に立てるよう、『ストーク』のちょっとしたカスタム方法をご紹介します。

『ストーク』とは？

『ストーク』とは、ブログが作れるワードプレスのテーマ（テンプレート）のことです。

森くま☆
テーマの中でも、かなりの人気で色々なブロガーさんが愛用しているものだよ！

そんな『ストーク』には初心者に有難い手厚い30日のサポートがあるので、ブログを書くまでには直ぐになれると思います。

でも、サポートをフルに使った私が思ったことは30日では思うようなカスタムまでできない人が多いと感じました。特にちょっとしたカスタムをしているか、していないかで人気のテーマである『ストーク』にオリジナリティが出てきます。

この記事では、そんなちょっとした『ストーク』のカスタム法をピックアップ！使うことできっと、お気に入りのブログに変化していくはずです。

森くま☆
デザインが整うともっとブログが好きになると思うよ！みんなも自分のブログをお気に入りにしちゃおう！

『ストーク』カスタマイズ法8選

カスタマイズする時の注意点

ワードプレスのテーマである『ストーク』には、親テーマと子テーマがあります。
必ず子テーマをダウンロードして、子テーマでカスタマイズしましょう！
またCSSは、なるべく【外観→カスタマイズの中の“追加CSS”】で設定するようにしてください。
CSSも同様ですが特にfunctions.phpをいじる時は、デザインが崩れる可能性があるため必ずバックアップをしてください。

（素人によるカスタム法のまとめにより、責任は自己責任でお願いいたします。）

WordPressはじめてのデザイン＆カスタマイズ入門 ブログ・サイトの改善方法がわかる　WordPres [ 茂木葉子 ]
created by Rinker

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タグは外観→カスタマイズ→アクセス解析コードで辿り着けます

好きな文字のHTMLコードを入力
（例）「Rounded M+ 1c」フォントの場合
<link href=”https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css ” rel=”stylesheet” />
#container .entry-title,
#container .entry-content h2 {
font-family: “フォント名を指定”;
}

（例）「Rounded M+ 1c」フォントの場合
#container .entry-title,
#container .entry-content h2 {
font-family: “Rounded Mplus 1c”;
}

階層化ナビゲーションのリンク色のみの変更方法

カスタムしていくとわかるのですが、グローバルナビの階層化のリンク色は初期設定ではフッターリンク色と同じになります。私はかぶって見づらくなってしまったため、別々の色で変更していますよ！やりたい方はぜひ、使ってみてくださいね。

*モバイルでは階層化ができないため、パソコンのみの設定になります。

#container #g_nav .nav li ul.sub-menu li a {
color: #カラータグ;
}



フッター・タグウィジェットの背景色の変更方法

フッターに設置したタグウィジェットのタグ背景色は初期状態だとグレーになっています。このままだとデザインが崩れる方は、下記のCSSを記載してみましょう。


/*フッター・タグウィジェットの背景色の変更方法*/
.footerwidget.widget_tag_cloud a.tag-cloud-link {
background: #カラータグ;
}

フッターのウィジェットのタイトルにラインを表示する方法

フッターにあるウィジェットのタイトルにラインを設置している人もいました！そんな人のようにラインを表示したい方は、下記のCSSを貼り付ければ表示できます。

#footer-top .widgettitle {
border-bottom: 1px solid #カラータグ;
}

スマートフォン用グローバルナビの背景色・文字色の変更方法

写真では背景色のみわかりやすく、黄色になってますがスマートフォン用のグローバルナビの背景色・文字色も変更可能です。

POINT文字色については、外観→カスタマイズ→サイトカラー設定の“ヘッダーリンク”で変更可能ですが、ヘッダーリンクと同色になってしまうため個別に変更したい方は下記のCSSがおすすめです。

 

#container .menu-sp a {
background: #カラータグ;
}
#container .menu-sp a {
color: #カラータグ;
}




アイキャッチ画像を正方形にする方法

インスタなどやっている方は、正方形の画像にこだわっている方もいるはず。そんな人は、アイキャッチを正方形にしてもいいかもしれません。下記の設定でできます。

POINT①外観→カスタマイズ→記事一覧ページ設定にて“シンプル”or“カード型”を選ぶ。

POINT②既に投稿済みの画像には反映されないため、新しく設定しなおしてください。

functions.php
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’ );
CSS#container .carouselwrap .eyecatch {
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;
}
}

『ストーク』で素敵な「おうちブログ」生活を！

『ストーク』はとっても優秀なワードプレスのテーマです。
ぜひ、お気に入りの文字や色に変更して、おうちブログ生活を楽しんでくださいね！




The post これをやれば激変！『ストーク』カスタマイズ8選 first appeared on くま☆家事.

]]> https://kumakaji.com/stoke-custom/feed/ 0