ストークを使うとみんな同じに見える? WordPressのブログにオリジナリティを出す簡単な方法とは

OMIYA!

こんにちは! ヨス(@yossense)です。

WordPressでブログを始めるときに、人気のテーマを使うことが多いと思います。

だって、ブログは「書くこと」が大切なので、最初はそれが一番効率がよいからですが、気がつくと「なんかみんな同じようなブログに見える……」ということに気づくでしょう。

今回は、わたしもこのブログで使っている人気WordPressテーマ「ストーク」を例に、簡単にブログにオリジナリティを出す方法をまとめてみました。

「ストーク」って書いていますが、「ハミングバード」「アルバトロス」を使っている方も同じです。ほかのテーマを使っている方にも使えます。

WordPressのブログにオリジナリティを出す方法

WordPressの有料テーマ「ストーク」、人気ですねぇ。

「ストーク」の販売ページ
「ストーク」の販売ページ

わたしも使っているし、ゴリ押しの最高のWordPressテーマなんですけど、気になることがあります。

それが……

驚くヨス

みんな使ってるから同じに見える!!

……の問題ですね。

これ、テーマを使っていれば
仕方がないと思っていませんか?

ヨス

いえいえ! 全然そんなことないです! ちょっといじるだけでオリジナリティが出ます!!

ということで、どこを直したらオリジナリティーが出るのかを紹介しますね!

テーマカラーを変更する

「ストーク」は、すばらしく良いテーマなのですが、こんな初期状態のままの方が多いんですよ。

ストークを使ったブログが同じに見える問題
ストークを使ったブログが同じに見える問題

これ、ちゃんと個性を出せるように制作者のキチさんが、いろいろと簡単に手直しできるようにしてくれているんですよねー。

まずは、テーマカラーの変更の仕方を紹介します。色を変えるだけで、だいぶ印象は変わりますので。

1管理画面へ行く

まずは管理画面へ行きましょう。

WordPressの管理画面
WordPressの管理画面

ログインしますね。え? わかってるって?

2「外観」の「カスタマイズ」

サイドメニューの「外見」の中にある「カスタマイズ」をクリック。

外観→カスタマイズ
[ 外観 ] → [ カスタマイズ ]

3ブログ内のパーツの色を変更

ブログ内のいろんなパーツの色を変更できます。

ヘッダー背景の色
ヘッダー背景の色

こちらのようなパレットで選べるようになっていますよ。

パレットで色を選ぶ
パレットで色を選ぶ

ココでポイントがあります。

原色を使うのは避けましょう!

原色を避けましょう!
原色は避けましょう!

原色というのは、「青」「赤」「黄色」「ピンク」といっためっちゃ濃い色です。

白とか黒とか、いっさいの混じりっけのないやつ!

原色をセンスよく使うのは難しいので、安易に使わない方がいいです。

ヨス

ハッキリ言わせてください。あなたのソレ、
ダサダサです!

この辺りは必ず変更しよう!

というわけで、色を変更した方がいいところを紹介します。

まずはヘッダーの色。

ヘッダー背景(メインカラー)
ヘッダー背景の色

ブログの顔の部分ですね。ここの色を変更しましょう。

「サイトカラーのバランスとか意味わからん!」という方は「記事ページ見出し(H2)背景」もヘッダーと同じ色にそろえましょう。それが無難です。

記事ページ見出し(H2)背景・記事ページ見出し(H2)文字色
記事ページ見出し(H2)背景・記事ページ見出し(H2)文字色

この「見出し」の色が濃い目の色のときは、文字(記事ページ見出し(H2)文字色)は白のような薄い色にしましょう

逆に背景が薄い色のときは、文字色は濃い目にします。

そして、リンクテキストの色。

「リンク」の色を変更
「リンク」の色を変更

これを変えるだけで、「変わった感」が違いますよー。

そして、「ラベル」の色。「ラベル」というのはこちらです。

「ラベル背景」「ラベルテキスト」を変更
「ラベル背景」「ラベルテキスト」を変更

カテゴリ名が出る場所すべてですね。これもアクセントになるので色を変えるといいですね!

もう一度言いますが、素人がデザインする場合は、原色は絶対に避けましょう!

ロゴを変更する

そして、やっぱりロゴ画像です。

このブログなら、こんな画像が全ページの上の部分にありますが……。

ヨッセンスのロゴ

これがあるだけで、一気にオリジナリティーがアップしますね!!

ということで、設定のやり方です。

1「外観」の「カスタマイズ」

サイドメニューの「外見」の中にある「カスタマイズ」をクリック。

外観→カスタマイズ
[ 外観 ] → [ カスタマイズ ]

2「サイトロゴ・アイコン」を選択

カスタマイズのページになるので、「サイトロゴ・アイコン」を選択しましょう。

「サイトロゴ・アイコン」を選択
「サイトロゴ・アイコン」を選択

3ロゴ画像をアップロード

「ロゴ画像をアップロード」という項目が一番上に出てきますので、そこの画像を選択をクリックします。

ロゴ画像をアップロード
ロゴ画像をアップロード

あとは画像を選択するだけ!

これはラクにできますねー!!

「ロゴ画像」はどうやって作るの?!

……と、ここまでスラッと書きましたが、
1つの大きな問題をすっ飛ばしています

それが……

驚くヨス

そもそもロゴ画像を作れないんだけど…

……という問題ですね。

今からデザインの勉強をして……とか言ってたらブログが書けません。

今後、デザインの方面に進むことも考えている人じゃない限りは、
作れる人に頼んだ方が早いです!

ということで、オススメなのが「ココナラ」というWEBサービス。

これがスゴイんです。

ロゴとかデザインが得意な人たちが、「ロゴやります!」のように名乗り出てて、その人に依頼することで簡単に、しかも激安でお願いできるサービスなんです。

500円で制作してもらえたりするのですが、わたしだったら絶対に受けないほどの「ありえない」安さです。

ぜひチェックしてみてください。

ココナラ公式ページ

>>ココナラについて詳しく見てみる

ファビコンを変更する

そして「ファビコン」です。ぜひともファビコンをオリジナルなやつに変更しましょう!

ファビコンですよ! ファビコン! これです。

ファビコンを変更しよう!
ファビコンを変更しよう!

ネットを見るときの「タブ」などに出てくる小さいアイコンです。

ここもちゃんとオリジナルにしてほしいですね!

では変更の仕方を見てみましょう。超簡単です。

1「外観」の「カスタマイズ」

サイドメニューの「外見」の中にある「カスタマイズ」をクリック。

外観→カスタマイズ
[ 外観 ] → [ カスタマイズ ]

2「サイト基本情報」をクリック

左のサイドメニューにある「サイトの基本情報」をクリックします。

「サイト基本情報」をクリック
「サイト基本情報」をクリック

3「サイトアイコン」の欄で「画像を選択」

「サイトの基本情報」というページになります。

左サイドメニューの一番下に「サイトアイコン」という欄があります。

ここで設定できるんです!

「サイトアイコン」の欄で画像を選択
「サイトアイコン」の欄で画像を選択をクリック

画像を選択をクリックしてくださいね。

4画像を選んでアップロード

あとは、画像を選択してアップロードするだけです!

画像の大きさは「512ピクセル × 512ピクセル」以上の正方形」です。「png」で保存するときれいですね。

ファビコンを変更しよう!
ファビコンを変更しよう!

どんなものにしていいかわからないときには、ロゴ画像の1文字を切り取って正方形にしてもいいですね。上の例のような感じで。

サイドメニューにプロフィールを

そして、サイドメニューにプロフィールの欄を入れる方法です。

ヨス

これ、超大切です! ぜひともやりましょう。

こちらが完成のイメージです。

サイドメニューに自分のプロフィール画像+文章の欄ができた
サイドメニューに自分のプロフィール画像+文章の欄ができた

まぁ、この画像はウザいですけど、あくまで例ですよ……。

1まずは自分のプロフィール画像をアップロード

では、最初にプロフィールに載せたい画像を用意しましょう。

画像は横は336ピクセルにしておくと、サイドメニューの横幅にぴったり合いますよ。

サイドメニューの「メディア」から「新規追加」を選択して……

メディア → 新規追加
[ メディア ] → [ 新規追加 ]

ページが切り替わるので今度は「メディアライブラリ」の文字の横にある新規追加をクリックします。

「メディアライブラリ」の文字の横にある「新規追加」をクリック
「メディアライブラリ」の文字の横にある新規追加をクリック

あとは用意した画像を選択したらオッケー。ドラッグ & ドロップしてもオッケーです。

2【重要】プロフィール画像のURLをコピー

そのまま、アップロードした画像を選択してください。

アップロードした画像を選択
アップロードした画像を選択

いやー、ウザいなこの画像(笑)。

すると、アップロードした画像の情報を見ることができるんです。ちょうどこちらの下の画像のように。

アップロードしたプロフィール画像のURLを取得
アップロードしたプロフィール画像のURLを取得

この画像のURLをコピーしてください。

3「ウィジェット」を選択

今度はプロフィール画像や文章を入力する場所にいきます。

サイドメニュー「外観」から「ウィジェット」を選択して下さい。

サイドメニュー「外観」→「ウィジェット」
[ サイドメニュー「外観」 ] → [ ウィジェット ]

4「PC: メインサイドバー」をクリック

ウィジェットをいじる画面になるので「PC: メインサイドバー」をクリックしてください。

「PC: メインサイドバー」をクリック
「PC: メインサイドバー」をクリック

クリックすると、この項目の欄が広がります

ウィジェットというのは、サイドバーを「項目」ごとに簡単に作れる機能のことです。おおざっぱに言うと。

5「テキスト」を「PC: メインサイドバー」にドロップ

「ウィジェット」の画面の左の方に「テキスト」という項目があるので、それをつかんで「PC: メインサイドバー」の中にペッと持ってきましょう。

「テキスト」を「PC: メインサイドバー」にドロップ
「テキスト」を「PC: メインサイドバー」にドロップ

ドラッグ & ドロップですね。たぶん「テキスト」は左下の方にあると思います。

6写真と画像を入れる

あとは写真と文章を入れて、保存を押すだけです。

この画像のように情報を入力
この画像のように情報を入力

具体的にはこちらのようにしてください。

<img src="※ ここにさっき「メディアライブラリ」でコピーした「プロフィール画像のURLを貼り付けてください ※" alt="プロフィール画像">
<p>※ ここにあなたのプロフィール用の文章を入力してください ※ </p>

あ、「タイトル」というところには「プロフィール」とか「このブログを書いている人」とかそういうのを入れるといいですね!

これをページの方で見ると……

サイドメニューに自分のプロフィール画像+文章の欄ができた
サイドメニューに自分のプロフィール画像+文章の欄ができた

こうなるんですね!

いいですねー。プロフィール画像は写真でもイラストでもいいですが、「人間の顔」がオススメです。

ブログを始めるときに考えておくべき5つのことも参考に。

さて、今回は、WordPressでブログをやっている人でブログのオリジナリティーを出す方法について紹介しました。

簡単なことばかりなので、ぜひやってみてください。

ちなみにびっくりされますが、このブログも「ストーク」を使ってます

わたしみたいにHTMLとかCSSの知識があると、このブログぐらい改造できますよー♪

現在、私の運営するオンラインサロンでは、メンバーを募集しております!

本気の本気でブログのアクセスを増やしたい方下記からどうぞ!

ヨッセンスクール

Twitterでヨスをフォローしよう!

気に入ったらどしどしシェアしてね♪
あわせて読みたい