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

ここあです。

WordPressテーマSTORKは

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

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

STORKを手に入れました。

しかし、不思議なもので…

そんなキレイに作れるテーマですら見慣れてくると

どうしてもカスタマイズしたくなるんですよね＾＾

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

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

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

何でもできてしまうのがスゴイ!

やっぱり、他のサイトをいろいろ見てると

真似したくなりますよね。

しかし、実際に真似してみようとそのサイトの

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

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

と諦めた人もいるかもしれません…＾＾；

だから、わたしもいろいろと試行錯誤しながら

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

初心者のあなたでも簡単にできるように

さらに詳しくまとめました。

しかも、全てコピペだけでできるように

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

かなり細かくまとめていますので

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

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

使えるカスタマイズコードがあると思うので

できそうなものがあれば

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

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

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

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

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

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

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

おすすめです。

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

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

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

STORKはデフォルトの見出しデザインがダサすぎ…＾＾；

私の中ではSTORKのがっかりランキングNo.1ですね（笑）

↓ 通常はこんな感じ（テンション下がる〜）

↓ 変更後はこんな感じにしました（オシャレ度UP！）

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

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

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

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

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

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

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

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

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

私の中のがっかりランキングNo.2（笑）

↓ 通常はこんな感じ。

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

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

あなたはどちらがお好みですか？

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

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

このように

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

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

統一感がなく違和感が出てしまいます。

なので…

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

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

リスト表示もほんの少しCSSを加えるだけで簡単にできます。

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

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

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

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

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

このリストはすごく使いやすいのでおすすめです＾＾

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

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

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

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

↓ 通常はこんな感じ。

これにCSSを加えると…

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

これは完全に好みの範囲なので

「丸い方が可愛くていい！」という方は

ぜひ変更してみてくださいね＾＾

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

STORKのSNSシェアボタンの表示を変更してスッキリ！

STORKの良いところは

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

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

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

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

SNSのシェアボタンの方に

目がいってしまうと思うぐらいに

目立ち過ぎるのもどうかと思います…＾＾；

なので、もう少しSNSシェアボタンが

目立ち過ぎないようにとCSSを駆使して

デザインを変更しました。

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

これをシンプルに…

こんな感じに変更していました（スッキリ！）

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

↓ こんな感じから

↓こんな感じに…。

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

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

画像と、この記事が気に入ったいいねしよう！と

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

それぞれが主張しすぎて無駄に暑苦しいですよね…＾＾；

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

以下のリンク記事にはSNSシェアボタンを

LINEに変更する方法も記載していますが

最新のアップデート版で

LINEがデフォルトで入るようになりましたので

ボタンの色が重くて暑苦しいと思うあなたは

ぜひシンプルでスッキリした白のボタンに

変更してみください＾＾

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

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

先ほどお伝えしたように

日本のLINEのアクティブユーザーは7,300万人以上。

なので、サイドバーに設置するプロフィールが

LINE風になっていたら何となく

親近感をもってもらえそうですよね＾＾

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

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

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

無いんですよね（何で？笑）＾＾；

 

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

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

 

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

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

組み込んでみました。

LINE風プロフィールは

STORK以外のテーマでも設置できるので

• 「おもしろい！」
• 「やりたい！」

と思ったらぜひチャレンジしてみてください。

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

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

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

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

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

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

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

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

気になりませんか？

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

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

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

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

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

このようにカテゴリーをボタン風にすることで

ユーザビリティが向上し、余計な情報を

訪問者の視界から排除することができます。

見た目もスッキリするのでかなり印象も変わるはずです。

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

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

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

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

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

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

私はそれが不満でした。不満ばかりですね（笑）＾＾；

やはり、Webサイトのコンテンツとしては…

など…

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

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

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

見出しデザインもコピーだけで簡単に変更できるので

ぜひカスタマイズしてみてくださいね。

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

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

STORKは通常固定ヘッダーの設定はできませんが

CSSで固定ヘッダーにすることができます。

そして、固定ヘッダーすると…

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

しかも、他のSTORKユーザーとも差別化できるし、一石二鳥＾＾

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

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

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

また、CSSの調整方法も書いているので微調整も簡単です。

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

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

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

目次のカスタマイズは

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

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

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

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

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

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

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

別々の記事にまとめています。

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

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

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

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

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

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

ここにテキストを入力

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

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

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

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

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

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

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

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

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

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

AddQuicktagに登録しています。

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

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

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

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

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

ぜひ一度使ってみてください。おすすめです。

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

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

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

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

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

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

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

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

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

［コピペで簡単］リンクカードをおしゃれにカスタマイズ！

STORKのトップページをカスタマイズして他のサイトと「差別化」！

STORKのトップページは最新記事一覧が表示される

いわゆる一般的なブログレイアウトです。

しかし、STORKユーザーも多いため

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

訪問者の方にも

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

懸念している人も多いですよね…＾＾；

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

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

• 「このブログ面白そう！」
• 「役に立ちそう！」

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

実は、STORKのトップページは

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

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

なので…

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

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

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

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

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

非常にもったいないです…＾＾；

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

強引にSANGO風のデザインにだってできます（笑）

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

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

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

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

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

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

記事内に挿入する画像をポラロイド風に

可愛らしくしてみたいとは思いませんか？

STORKの挿入画像もCSSで簡単に

ポラロイド風にすることができるんです＾＾

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

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

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

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

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

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

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

STORKの吹き出し機能をより魅力的に！

STORKの吹き出し機能は主に3種類。

• シンプル
• Facebook風
• LINE風

↓これらがデフォルトのショートコードで使えるようになっています。

しかし、これらだけでは「物足りない！」

「もっと自分らしくカスタマイズしたい！」

という方も多いはず。

ということで、吹き出し機能の枠線や背景色

さらには文字色まで

変更する方法を詳しくまとめました。

なので、STORKの吹き出し機能を

もっと有効活用したいというあなたは

ぜひ参考にしてみてください。

STORKの吹き出しをカスタマイズする方法！

画像付きコメントでしっかりレビュー

STORKにはレビュー記事用の

画像付きコメントを表示される機能がありません。

なので、HTMLとCSSだけで

画像付きコメントを表示させるコードを作りました。

↓ノーマルの画像付きコメント

↓アコーディオン機能付きの画像付きコメント

HTMLとCSSコードをコピペするだけで簡単に作れるので

レビュー記事に活用したいという方は

ぜひ参考にしてみてください＾＾

【STORK】カスタマイズ！画像付きコメントを作る方法！

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

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

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

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

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

以上6つ。

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

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

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

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

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

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

STORKカスタマイズ時の注意点

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

あらかじめご了承ください。

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

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

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

あなたが

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

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

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

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

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

本当に感謝しています。

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

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

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

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

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

なので、HTMLやCSSの知識がなくても

キレイでオシャレなブログができるという評判を見て

購入に踏み切った方も多いハズです。

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

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

私もカスタマイズするために

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

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

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

他のサイトよりもかなり詳しくまとめました。

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

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

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

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