【STORK】カスタマイズ!コピペだけでオシャレにする方法まとめ

【STORK】カスタマイズ!コピペだけでオシャレにする方法まとめ

ここあです。

 

WordPressテーマSTORK

誰でも簡単にオシャレなブログができると評判です。

 

わたしも見た目の良さや使いやすさの評判から

STORK」を手に入れました。

 

しかし、不思議なもので、そんなキレイなテーマですら

見慣れてくると、どうしてもカスタマイズしたくなるんですよね^^

 

まぁ、そこがデザイナーの性分といいますか…(笑)

 

STORK」の良いところは本当に使っている人が多いので

いろいろカスタマイズしたいと思うと

何でもできちゃうのがスゴイ!

 

やっぱり、いろいろ見てると真似したくなりますよね。

 

しかし、実際に真似してみようと

カスタマイズ方法を見ながらやるものの…

思ったように上手くいかなくて

 

  • 「何で同じようにできないの?」
  • 「やっぱりわたしには無理だわ…。」

と諦めた人もいるのでは?と思います。

 

そこで、今回、わたしも試行錯誤しながら

細部までこだわったカスタマイズ方法を

初心者のあなたでも簡単にできるようにまとめました。

 

全てコピペだけでできるように

また、どこを触れば微調整ができるかなど

かなり細かく書いていますので

  • 「これいい!」
  • 「やりたい!」

と思ったら、どんどん取り入れてみてください。

 

ここにまとめてあるのは「STORK」以外のテーマでも

使えるコードがあると思うので、できそうなものがあれば

ぜひ一度チャレンジしてみてくださいね。

 

フォントを変更して「ブログ全体のイメージ」を変える!

ブログのほぼ全てを占めるフォント。

フォントを1つ変えるだけでもブログの印象はかなり変わります。

 

私も一番初めにしたのがフォントの変更です。

 

他のブロガーと差別化したいという人は

まずはフォントから変えてみてはいかがでしょうか?

おすすめです。

 

[コピペで簡単]ストークのフォントを変更する方法

 

見出しを変更して「オシャレにかわいく」!

わたしが一番気に入らなかったのは記事の見出し。

デフォルトの見出しデザインがダサすぎ。

「STORK」のがっかりランキングNo.1ですね(笑)

 

↓ 通常はこんな感じ。(テンション下がる〜)

ストーク:カスタマイズ:見出し

 

↓ 変更後はこんな感じにしました。(オシャレ度UP!)

ストーク:カスタマイズ:見出し

 

見出しは記事の中でも非常に重要な要素なので

こだわったものにしたいですよね。

 

記事の見出しを変えるだけでも

ずいぶんと印象が変わりますよ^^

 

[コピペで簡単]ストークの見出しをオシャレにかわいくカスタマイズする方法

 

リストの表示を変更して「さらに見やすく」!

私が見出しの次に嫌だったのがリスト表示です。

なんの味けもない。シンプルでお粗末。

これも早く何とかしなければと思って変えました。

 

がっかりランキングはNo.2かな…

 

↓ 通常はこんな感じ。

  • 番号なしリスト1
  • 番号なしリスト2
  • 番号なしリスト3

これにほんの少しだけCSSを加えると…

 

随分と印象が変わりますよね。

  • 番号なしリスト
  • 番号なしリスト
  • 番号なしリスト

あなたはどっちが好きですか?

 

また番号付きリストも変更しています。

通常の番号つきリストは…

  1. 番号付きリスト1
  2. 番号付きリスト2
  3. 番号付きリスト3

 

デフォルトで「h2見出しと同じ色の設定」になっており

せっかく変更した番号なしリストと

統一感がなく違和感ありありになってしまいます。

 

なので…

わたしはこのように、番号部分の色も変更しました。

  1. 番号付きリスト1
  2. 番号付きリスト2
  3. 番号付きリスト3

これで、番号なしリストと統一感が出ますよね。

 

これもほんの少しCSSを加えるだけで簡単にできます。

[コピペで簡単]ストークのリスト表示をカスタマイズする方法

 

また「AFFINGER5」にデフォルトで設定されている

こんな方におすすめ」リストの設定方法も

別記事に記載しています。

 

↓こんなリストが作れます。

こんな方におすすめ

  • これはダミーのテキストです。
  • これはダミーのテキストです。
  • これはダミーのテキストです。

 

このリストは記事にすごく使いやすいのでおすすめです^^

AFFINGER5の「こんな方へおすすめ」リストを作ってみた!

 

ページャーのカタチを変更して「POP」に!

非常に細かい部分ですが、トップページ下にある

ページャーの形も変更しています。

 

↓ 通常はこんな感じ。

ストーク:カスタマイズ:ページネーション

 

これにCSSを加えると…

↓ こんな感じに変わります。

ストーク:カスタマイズ:ページネーション

 

これは完全に好みなので

丸い方が可愛くていいという人は変更してくださいね。

 

[コピペで簡単]ストークのページャーをカスタマイズする方法

 

SNSシェアボタンの表示を変更して「スッキリ」!

STORK」の良いところは

さすがモバイルフレンドリーだけあって

SNSのシェアボタンも標準装備

 

しかし、SNSのシェアボタンは目立つのはいいものの

せっかくアイキャッチ画像を入れても

 

SNSのシェアボタンの方に目がいってしまう

思うぐらいに目立ち過ぎるのもどうかと思います。

あくまでも主役は記事ですからね…。

 

なので、もう少しSNSシェアボタンが目立ち過ぎないようにと

CSSを駆使して見た目を変更しました。

 

↓ デフォルトのアイキャッチ画像下のシェアボタンがこちら(明らかに主張しすぎ^^;)

ストーク:カスタマイズ:SNSシェアアイコン

 

これをシンプルに…

ストーク:カスタマイズ:SNSシェアアイコン

 

こんな感じに変更しています。(スッキリ!)

 

さらに記事の下にあるSNSシェアボタンも…

↓ こんな感じから

ストーク:カスタマイズ:SNSシェアアイコン

 

↓こんな感じに…。

ストーク:カスタマイズ:SNSシェアアイコン

 

かなりスッキリとした印象になりますよね。

 

特に、記事下のシェアボタンのサンプルみたく

画像」と「この記事が気に入ったいいねしよう!」と

シェアボタン」がまとまると

 

それぞれが主張しすぎて無駄に暑苦しいですよね^^;

なので、変更後はその辺もかなり緩和されます。

 

また、気付かれているかもしれませんが、SNSのシェアボタンは

あまり馴染みのないGoogle+のアイコンを

LINEのアイコンにも変更しています。

 

特に「LINE」は日本のアクティブユーザーが7,300万人以上

ほぼ日本人口の半分を占めているわけですから

SNSを活用するなら「LINE」は外せないですよね。

 

なので、色替えまではしなくとも

せめて「LINE」のシェアボタンは

導入しておくことをおすすめします。

 

[コピペで簡単]SNSシェアボタンをカズタマイズする方法

 

サイドバーのプロフィールを「LINE風にカスタマイズ」して親近感を!

先ほどお伝えしたように「LINE」のアクティブユーザーは

7,300万人以上です。

 

なので、右上の一番目立つプロフィールが

LINE風になっていたら

何となく親近感をもってもらえそうですよね^^

 

私もぜひにと思ってカスタマイズでしてみました。

 

ストーク:カスタマイズ:LINE風プロフィール

STORKにはSNSのシェアボタンはあっても

なぜかSNSのフォローボタンは

無いんですよね(何で?笑)^^;

 

なので、SNSのフォローボタンが必要な場合は

独自に組み込む必要があります。

 

私はTwitterアカウントがあるので

これを機にフォローボタンも

組み込んでみました。

 

LINE風のプロフィールはテーマが「STORK」じゃなくてもできるので

おもしろい!」「やりたい!」と思ったら

チャレンジしてみてください。

 

また、紹介記事の方ではTwitterだけでなく

それ以外のフォローボタンの入れ方も説明しているので

あなたのお好みに合わせてカスタマイズしてくださいね。

 

[コピペで簡単]「LINE風」プロフィールを作成する方法

 

カテゴリー一覧を「ボタン風」にアレンジ!

カテゴリーが増えてくるとどうしても

縦にダラっと長くなってしまうカテゴリーリスト

 

あなたはそんな収まりの悪いカテゴリーが

気になりませんか?

 

私はそれがすごく気になったので

主要なカテゴリーのみに整理し直して

カテゴリーリストをボタン風にアレンジしました。

 

カテゴリー一覧

変更前のカテゴリーリスト

ボタン風カテゴリー

カスタマイズ後のカテゴリーリスト

 

このようにちょっとカスタマイズするだけで

かなり印象も変わりユーザビリティも向上します。

 

カテゴリーリストのカスタマイズも

それほど難しくはありません。

 

「カテゴリーリスト」をボタン風にカスタマイズする方法

 

サイドバーウィジェットの見出しデザインをカスタマイズ!

罫線のみのシンプルな見出し

 

サイドバーウィジェットの見出しはデフォルトだと

記事のh2タイトルの見出しと同じで単調に見えてしまいます。

 

私はそれが不満でした。不満ばかりですね(笑)^^;

 

コンテンツとして…

  • 立たせる部分はしっかりと目立たせる
  • そうでない場所は少し控えめにする

など、デザインをしっかりカスタマイズしながら

訪問者のユーザビリティを上げたいものです。

 

私が紹介しているサイドバーウィジェットの

カスタマイズはコピーだけで簡単にできるので

ぜひ変更してみてください。

 

[コピペで簡単]サイドバーウィジェットの見出しをカスタマイズする方法

 

固定ヘッダーにして訪問者の「ユーザビリティをアップ」!

固定ヘッダーにして訪問者の「ユーザビリティをアップ」!

 

このブログのヘッダーは固定ヘッダーになっています。

 

ヘッダーを固定ヘッダーすると…

訪問者のユーザビリティを上げることができます。

他のストークユーザーとも差別化できるし一石二鳥

 

  • 「ヘッダーロゴ画像あり」+「ヘッダー背景画像なし」のパターン
  • 「ヘッダーロゴ画像なし」+「ヘッダー背景画像あり」のパターン

の2種類の「固定ヘッダー」のカスタマイズ法を記載しています。

 

CSSコードをコピーするだけでカスタマイズできるので

初心者のあなたにも簡単にできます^^

 

CSSの調整方法も書いているので微調整も心配は無用。

ぜひ一度試してみてください。

[コピペで簡単]ストークに固定ヘッダーを作る方法

 

目次をカスタマイズしてさらに可愛く!

目次のカスタマイズは

あまり注目されていないかもしれませんが

 

目次自体は非常に目に付くアイテムですし

カスタマイズすることで差別化もできます。

 

なので、目次のカスタマイズ方法に関しては…

ちょっと気合いを入れて、「SANGO風」の可愛らしい目次

目次のカスタマイズ

 

Googleフォント」を使ったちょっとオシャレに見える目次

目次カスタマイズサンプル

 

の「2種類」のカスタマイズ方法を

それぞれ「別々の記事」にまとめています。

 

どちらのカスタマイズ方法も「コピペだけ」で

簡単に再現できるようにしてありますので

ぜひ一度試してみてくださいね^^

 

WPテーマ「STORK」カスタマイズ!SANGO風もくじの作り方!

WPテーマ「STORK」カスタマイズ!目次をGoogleフォントでオシャレにしよう!

 

テキストリンクにアテンションを付けて「回遊率をUP」!

ここにタイトル

ここにタイトル

 

私は上記のようなテキストリンクをまとめるボックスを組んだり

リンクテキストの前にアテンションを付けて

内部リンクの記事が読者の目にも止まりやすくなるよう工夫しています。

 

もしもあなたがブログ記事の回遊率が今一つ悪いと感じている場合は

こうした目に止まりやすい「アテンション」を

導入してみてはいかがでしょうか?

 

[コピペで簡単]おしゃれな「リンクボックス」とリンクテキストの「アテンション」

 

ショートコードを使い倒して「作業効率アップ」!

わたしはストークの便利なショートコード

オリジナルタグを合わせて計50個以上

AddQuicktag」に登録しています。

 

AddQuicktag一覧
AddQuicktag一覧

 

ショートコードを便利に使いこなせば

作業効率が格段にアップします。

 

私が登録している「AddQuicktag」のインポートファイルを

無料でダウンロードできるようにしてあるので

 

登録が面倒で、これまであまり使ってなかった人は

ぜひ一度使ってみてください。

おすすめです。

 

【作業効率UP】STORK(ストーク)のショートコードを効果的に使う方法!

 

リンクカードをおしゃれにして「アイキャッチ」に!

【STORK】カスタマイズ!コピペだけでオシャレにする方法まとめ

2018.04.25

 

ストークのショートコード機能で使えるリンクカード

 

トップページ」の目次にしたり

アイチャッチ」にしたり、用途は様々です。

 

シンプルな「リンクカード」だからこそ

あなたらしくカスタマイズすることで

大きく印象を変えることができます。

 

カスタマイズは簡単なのでぜひ試してみてくださいね。

 

[コピペで簡単]リンクカードをおしゃれにカスタマイズ!

 

トップページをカスタマイズして「他のブロガーと差別化」する!

ストーク:トップページカスタマイズ

 

ストークのトップページは

最新記事一覧」が表示される

一般的なブログレイアウトです。

 

しかし、ストークユーザーも多いため

ブロガー同士「トップページのデザイン」が被ってしまい

 

訪問者の方にも

どれも似たようなデザインと思われるのを

懸念している人も多いようです^^;

 

せっかくがんばってブログを育てる以上は

トップページでしっかりと自分らしさを演出し

  • このブログ面白そう!
  • 役に立ちそう!

と訪問者に思ってもらわなければもったいないですよね。

 

実は、ストークのトップページは

固定ページを作りホームページに設定することで

簡単にカスタマイズすることができます。

 

なので…

他のブロガーと差別化したい!と思っている方は

そろそろ違うテーマに変えようかな?と思う前に

 

トップページのカスタマイズをしてみてはいかがでしょうか?

 

STORK」は非常に優秀なテーマなので

安易な気持ちでテーマを変更してしまうのは

非常にもったいないです^^;

 

カスタマイズしようと思えば、私のように

強引に「SANGO」風のデザインにだってできます(笑)

※SANGO風にしているのは「トップページ」ではありません…

 

さすがにトップページのカスタマイズは

コピペだけ!」というわけにはいきませんが

ぜひ一度チャレンジしてみてくださいね。

 

「STORK」のトップページを劇的にカスタマイズする方法!

 

記事内の画像を「ポラロイド風」にしてオシャレに!

記事内に挿入する画像も

簡単に「ポラロイド風」にできます。

 

キャプションなしの場合も…

スイーツ画像

 

キャプションありの場合もご覧の通り!

パンケーキ、美味しいそう!

 

使用方法は若干慣れるまで少しややこしいかもしれませんが

基本的には「CSSコード」と「HTMLコード」を

加えるだけで表示できるようにしてあります。

 

使ってみたいと思う方は、ぜひご活用ください^^

「ポラロイド風」画像を作る方法!

 

「ミニ吹き出し」でさらに記事をアレンジ

STORK」ユーザーの記事装飾をさらに楽しく

他のブロガーとさらに差別化するために

 

「AFFINGER5」のデフォルトで使用できる

ミニ吹き出し」の作り方をご紹介しています。

 

ミニ吹き出し」とは以下のアイテムです。

ここにテキスト

ここにテキスト

 

紹介記事の方では「色替えの仕方」や

配置の仕方」まで丁寧に解説しています。

 

記事装飾に変化をつけたい方はぜひ参考にしてください^^

AFFINGER5の「ミニ吹き出し」を作る方法!

 

まだまだあります「厳選小ネタ集」6選

1記事にまとめるまでもない

超簡単な「STORK」のカスタマイズ法を

小ネタ集として6つほどまとめています。

 

この記事に記載してあるカスタマイズは

  • 記事中の画像に影を付ける
  • 記事中の画像に罫線を付ける
  • 記事の本文に蛍光マーカーをつける
  • トップへ戻るボタンの色を変える
  • ヘッダーロゴのサイズを変える
  • 記事本文の行間を調整する

以上6つ。

 

画像に影や罫線を付けたり

記事本文にマーカーを付けたりと

記事を書く際にも大活躍するカスタマイズも書いてあります。

 

こちらの記事もCSSをちょっと書き足すだけで

できるものばかりなのでぜひ参考にしてみてください。

 

WPテーマ「STORK」カスタマイズいろいろ!〜厳選小ネタ集6選

 

カスタマイズの注意点

STORK」は親テーマの他に子テーマを使用するテンプレートです。

カスタマイズをする時は、必ず「子テーマ」の方で設定を行い

もしも「子テーマ」に設定を触りたいファイルがない場合は

 

親テーマ」から該当するファイルを「子テーマ」にコピーしてから

編集するようにしてくださいね。

 

子テーマ」にないファイルを「親テーマ」から持ってくる方法は

こちらの記事に記載しています。

「親テーマ」のファイルを「子テーマ」で編集する方法

 

また、phpファイルを編集する際

1つ間違うと画面が真っ白になってしまい

パニックになる可能性があります。

 

なので、何をするにしても元に戻せるように

必ずバックアップをとってからカスタマイズしてください

カスタマイズはあくまでも自己責任でお願いします^^

 

万が一、何かあっても私は一切の責任は負いませんので

予めご了承ください!

 

STORKのカスタマイズ!コピペだけでオシャレにする方法まとめ

WordPressテーマ「STORK」は使用している人も多いので

カスタマイズのための記事もかなり充実しています。

 

あなたが

  • 「やってみたいと思うこと」
  • 「え?そんなことまでできるの?」

というようなカスタマイズも探せばいろいろ見つかります。

 

わたしもいろんな人の記事を参考に

自分がやりたいと思ったカスタマイズを

少しずつ試せたおかげで今に至っています。

 

だから、カスタマイズのための記事を書いている方には

本当に感謝しています。

 

STORK」はテーマとして完成されてしまっているので

逆にカスタマイズにしにくかったり

変なところでバグが出たりと

 

カスタマイズするためには多少のCSSの知識がないと

難しいと思ったのが私の印象です。

 

本来はCSSの知識がなくてもキレイでオシャレなブログができる

という評判を見て、購入に踏み切った方も多いハズです。

 

サクサクとカスタマイズ出来て

記事を書くことに専念できる「STORK」だからこそ

 

カスタマイズするために

余計なところでつまずいて欲しくないと思ったし

 

出来るだけコピペで簡単にできるようにと

それぞれのカスタマイズ方法を

記事としてまとめることにしました。

 

私の記事が一人でも多くの方の参考になり

自分らしい愛着の湧くブログデザイン

カスタマイズしていただけると嬉しいです。

 

わたしもまだまだ試しながらカスタマイズしているところなので

あれもこれも変えられるというワケではありませんが…

 

もしもカスタマイズの方法で分からないことなどありましたら

可能な限りご相談にも乗りますので、ぜひお気軽にご連絡ください。

 

また、新しくカスタマイズできたところから

随時、記事を増やしていきたいと思います。

 

最後までお読みいただきありがとうございました!

 

Happy STORK Life with me !

ストークライフを一緒に楽しみましょう!^^

 

【STORK】カスタマイズ!コピペだけでオシャレにする方法まとめ

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。