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

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

 

ここあです。

 

WordPressテーマSTORKは

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

 

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

STORKを手に入れました。

 

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

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

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

 

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

 

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

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

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

 

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

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

 

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

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

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

 

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

と諦めた人もいるかもしれません…^^;

 

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

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

 

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

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

 

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

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

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

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

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

 

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

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

 

できそうなものがあれば

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

 

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

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

フォントを1つ変えるだけでも

ブログの印象はかなり変わります。

 

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

 

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

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

おすすめです。

 

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

 

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

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

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

 

私の中では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でシェアできるようになっているんですね。

 

特にLINEは

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

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

 

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

 

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

せめて、LINEのSNSシェアボタンは

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

 

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

 

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

先ほどお伝えしたように

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

 

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

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

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

 

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

 

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

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

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

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

 

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

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

 

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

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

組み込んでみました。

 

 

LINE風プロフィールは

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

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

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

 

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

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

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

 

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

 

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

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

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

 

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

気になりませんか?

 

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

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

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

 

カテゴリー一覧

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

ボタン風カテゴリー

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

 

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

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

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

 

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

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

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

 

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

 

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

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

 

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

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

 

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

 

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

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

など…

 

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

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

 

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

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

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

 

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

 

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

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

 

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

 

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

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

 

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

 

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

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

 

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

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

 

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

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

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

 

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

目次のカスタマイズは

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

 

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

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

 

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

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

目次のカスタマイズ

 

 

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

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

 

 

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

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

 

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

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

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

 

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

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

 

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

ここにタイトル

ここにタイトル

 

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

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

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

 

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

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

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

 

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

 

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

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

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

AddQuicktagに登録しています。

 

AddQuicktag一覧
AddQuicktag一覧

 

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

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

 

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

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

 

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

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

 

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

 

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

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

2018.04.25

 

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

 

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

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

 

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

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

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

 

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

 

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

 

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

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

 

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

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

 

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

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

 

訪問者の方にも

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

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

 

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

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

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

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

 

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

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

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

 

なので…

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

 

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

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

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

 

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

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

 

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

スイーツ画像

 

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

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

 

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

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

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

 

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

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

 

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

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

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

 

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

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

 

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

ここにテキスト

ここにテキスト

 

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

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

 

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

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

 

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

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

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

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

 

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

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

以上6つ。

 

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

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

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

 

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

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

 

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

 

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

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

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

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

 

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

 

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

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

 

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

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

 

あなたが

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

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

 

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

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

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

 

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

本当に感謝しています。

 

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

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

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

 

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

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

 

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

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

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

 

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

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

 

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

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

 

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

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

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

 

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

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

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

 

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

可能な限りご相談にも乗りますので

ぜひお気軽にご連絡ください。

 

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

 

Happy STORK Life with me !

STORKライフを私と一緒に楽しみましょう!^^

 

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

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


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

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


ABOUTこの記事をかいた人

ここあ

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