ストークを可愛くオシャレにしたい!CSSカスタマイズまとめ【ボタンデザイン他】

数あるテーマの中でもWordPressテーマ「ストーク」ブロガー、アフィリエイター御用達!

人気のWordpressの有料テーマです。

今回は、そんなストークを可愛くオシャレにカスタマイズする方法をまとめました。CSSはそのままコピペOKです!

あなた好みにカラーコードを変えるだけで、オシャレになりますよ*

「これからストークを使ってみようかな?」と思っている人の参考になれば嬉しいです!

トップページのカスタマイズ方法はこちらにまとめました▼

ストークのトップページをお洒落にカスタマイズする方法まとめ*

2019.04.30

ストークを可愛く&オシャレにしたい!カスタマイズ方法まとめ



 さっそくカスタマイズ方法をご紹介します。可愛く&オシャレにしていきましょう!

※CSSは必ずバックアップをとっていただくようお願いいたします

ボタンのCSSをカスタマイズ

ストークには、いくつかボタンデザインがあります。

こんなのとか

こんなのとか

こんな感じで何種類かあるのですが、少しカスタマイズしました。

こちらのデザインです▼

サイズは横幅いっぱいになるようにしています。マウスオーバーした時に、沈むだけにして色変えなしです。スマホだとマウスオーバーでグレーになります。

このボタンデザインを、プロフィールとSNSに使っています。

以下のコードをコピーしてストークのダッシュボードから追加CSSに貼ってください。


/* プロフィールボタン */
.btn-wrap.simple2 a{
 width:90%;
 border:solid 1px #3f2e00;
 background:#fff;
 color: #3f2e00;
}
/* マウスオーバー時の指定 */
.btn-wrap.simple2 a:hover{
 width:90%;
 }

カラーコードは好きに変えてくださいね。

CSSに追記すると「simple2」というボタンを使えるようになります。

投稿画面の表示はこうなります▼

ボタンを追加した時に classをsimpleからsimple2にするだけです。




SNSボタンのデザインをカスタマイズする

記事下につけられるSNSボタンのデザインも少し変えています。すべて色を統一し、マウスオーバーで色が変わるようになっています。

こんな感じですね。

追加CSSはこちらの通り。


/*ツイッター*/
.sns .twitter a{
color: #332d2d !important;
border: solid 1px #332d2d !important;
background: #fff !important;
box-shadow: none;
}

.sns .twitter a:hover{
color: #fff !important;
border: solid 1px #22b8ff !important;
background: #22b8ff !important;
}

/*Facebook*/
.sns .facebook a{
color: #332d2d !important;
border: solid 1px #332d2d !important;
background: #fff !important;
box-shadow: none;
}

.sns .facebook a:hover{
color: #fff !important;
border: solid 1px #6680d8 !important;
background: #6680d8 !important;
}

/*はてブ*/
.sns .hatebu a{
color: #332d2d !important;
border: solid 1px #332d2d !important;
background: #fff !important;
box-shadow: none;
}

.sns .hatebu a:hover{
color: #fff !important;
border: solid 1px #5d8ac1 !important;
background: #5d8ac1 !important;
}

/*Pocket*/
.sns .pocket a{
color: #332d2d !important;
border: solid 1px #332d2d !important;
background: #fff !important;
box-shadow: none;
}

.sns .pocket a:hover{
color: #fff !important;
border: solid 1px #ff6d82 !important;
background: #ff6d82 !important;
}

/*Google+*/
.sns .googleplus a{
color: #332d2d !important;
border: solid 1px #332d2d !important;
background: #fff !important;
box-shadow: none;
}

.sns .googleplus a:hover{
color: #fff !important;
border: solid 1px #6cc655 !important;
background: #6cc655 !important;
}
/*Feedly*/
.sns .feedly a{
color: #332d2d !important;
border: solid 1px #332d2d !important;
background: #fff !important;
box-shadow: none;
}

.sns .feedly a:hover{
color: #fff !important;
border: solid 1px #6cc655 !important;
background: #6cc655 !important;
}

こちらをダッシュボードから追加CSSに貼ってください。

色は好きなものに変更してくださいね!

ちなみに、feedlyは、ページトップには表示されないのですが、ページ下部には表示されるので消さないでくださいね。




商品リンクを一発で!「Rinker」のカスタマイズ

こちらのブログでは、商品を紹介する際に

  • Amazon
  • 楽天
  • ヤフー

のリンクを一発で作れる「Rinker」というプラグインを使用しています。

里佳
こういう感じです!

とても便利なので、ブログで商品紹介する人は導入してみてください。

ボタンカスタマイズの方法はこちらを参考にしてくださいね。

商品リンクを1発で!神プラグインRinker(リンカー)の魅力とCSSカスタマイズ

2018.08.27

誰でも簡単にオシャレにできる!配色サイト

ストークをオシャレにカスタマイズするためには、配色が大事。

ただ、デザイナーでもない私たちが良い感じの配色を使いこなすのは非常にむずかしい…。

ということで、オシャレな配色サイトを参考にしましょう!

ポイントは

  • 配色カラーコードをそのまま使う
  • 4色の配分は6:3:0.5:0.5

これだけで、誰でも簡単にそれっぽいサイトが作れます。

こちらのブログ「ノマドワ」では、下記の4色に統一しました。

見出し:#5bc8ac

ヘッダーラベル・ボタン:#e6d72a

リンク:#f18d9e

このほか、画像を作成するときはこのカラーコードを使っています。例▼

同じグリーンでも微妙に色のニュアンスが変わるので、カラーコードはそのまま使用することをおすすめします!

詳しくはこちらで▼

センスに自信がなくても大丈夫!可愛くてオシャレなサイトを作る配色の基本

2019.04.29

商用可能な画像については「O-DAN」を使っています。オシャレな海外サイトを一気に検索できますよ。

世界32サイトから無料の画像素材が見つかる【O-DAN】でブログ執筆を効率化

2019.01.10

サイトのロゴを作成し、ヘッダーに使用する

ノマドワで使用している画像は、

Canva

という画像作成ソフトで作っています。

オシャレなテンプレートをそのまま使えるので、フォントと色を変えるだけ!

テンプレートを選び、見出しのカラーコード(#5bc8ac)でロゴを作成しました。▼

ダッシュボード>カスタマイズ>グローバル設定

[ヘッダー]ロゴレイアウト
ロゴの位置を変更することが可能です。(※PC表示)

こちらを「中央配置」にしてください。

「左側配置」になっていると、大きな画像を挿入してもロゴが大きく表示されません!

次に、

カスタマイズ>サイトロゴ・アイコン

こちらにロゴをアップロードすればOKです。




ヘッダーラベルを好みの色に変更する

上記の配色に合わせてヘッダーも色を変更しました。追記するCSSがこちら。

/* --- ヘッダーラベル(背景色変更) --- */
.header-info a{
background-color: #e6d72a;
	color: #000;
}

意味は、

background-color: #e6d72a;(背景の色)

color: #000;(文字の色)

です。好きなカラーコードに変更してくださいね。

ウィジェットの見出しデザインを変更する

ウィジェットの見出しは、デフォルトだと投稿記事の見出しデザインと同じなるように設定されています。

デザインを変更するには、cssの追記が必要です。ノマドワで使っているコードはこちら。

/*ウィジェット見出し*/
.widgettitle {
	color:#000;
	background: none; /* 背景色を消す */
	border-bottom: solid 3px #000; /* 下線の種類・幅・色*/
}

このまま貼り付けて使ってください。

RECOMMEND 「こちらの記事も人気です」の色を変える

ウィジェットの見出しの色を黒に変更した場合、「こちらの記事も人気です」の見出しはこうなります。

背景色が黒、文字色も黒になるので文字が見えません。

そこで、文字色を白にします。

cssはこちら。

/*レコメンド(文字色変更)*/
.related-box .h_ttl {
    color: #fff;
    font-size: 12px;
    text-align: left;
    text-indent: 10px;
    margin: 1em 0;
    padding: 1em .1em;
}

このまま、追加cssに貼り付けて使ってください。




ボックスデザインを変更する

ブルーボックスのデザインをこのように変えました。

追記するcssのコードがこちら。



/* ブルーボックスの指定 */
.entry-content .c_box.blue_box{
background:#ffff;
border: solid 3px #95ccff;
	border-radius: 8px;
color:#555;
font-size:90%;
}
/* ブルーボックスタイトル周りの指定 */
.entry-content .c_box.blue_box .box_title span{
font-size:16.5px;
background:#fff;
	color:#95ccff;;
}

 

イエローボックスのデザインも変更しました。

追記するcssがこちら。

/* イエローボックスの指定 */
.entry-content .c_box.yellow_box{
background: #fffacd;
border-color: #e6d72a;
color:#555;
	border:none;
font-size:90%;
}
/* イエローボックスタイトル周りの指定 */
.entry-content .c_box.yellow_box .box_title span{
	top: -10px;
left: -10px;
	font-size:16.5px;
	border:none;
background: #ffa500;
	
}
里佳
そのままコピペして使ってください!

ストークのトップページもカスタマイズしてみた

ストークのトップページを固定にしてみました。

カテゴリにわけて、初めて来てくれた方にもどんな記事があるのか見てもらえるかなと思います。

トップページの作り方はこちらにまとめました▼

ストークのトップページをお洒落にカスタマイズする方法まとめ*

2019.04.30

そのほかのカスタマイズ

 

カテゴリ・タグ別に人気記事を表示させたくなったら…

WordPressPopularPostという人気記事を表示させられるプラグインを使って、カテゴリ・タグ別に表示させましょう。

やり方はこちらにまとめました。

カテゴリ・タグ別に人気記事を表示させる方法<WordPress Popular Postsで>

2018.12.21

途中でパーマリンクを変更したくなったら…

一瞬でリダイレクト処理する方法を紹介しました。

SEOに有効なパーマリンクはこちら。

SEOに良いとされるURL
  • http://example.com/カテゴリー名/記事名
  • http://example.com/記事名

もし、カテゴリ名を入れたくなったり、記事名だけにしたくなったら読んでみてください。301リダイレクト処理をする方法をわかりやすく書いています。

WordPressでパーマリンク設定変更!全記事を一瞬で301リダイレクトする方法

2019.02.25

「ストーク」をおすすめする理由はカスタマイズのしやすさ



WordPressテーマ「ストーク」はとても見やすいく、きれいなデザインです。

何よりたくさんの方がカスタマイズ方法を発信しているので、とても参考になりますし、使いやすいですよ。

販売会社のOPENCAGEでは他にも4つのテーマを販売しています。

それぞれ8,000円ほどで購入でき、ストークは10,800円(税込)です。

高いと感じるかもしれませんが、実際ストークを買ってみると本当に便利ですよ。

里佳
初心者さんでも簡単に導入できると思います!ぜひ使ってみてください

初心者のわたしがゼロからCSSを勉強した本▼

 

 











コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です