実際にやってみたSimplicityのカスタマイズ18選

WordPress Simplicity WordPress

WordPressのテーマ「Simplicity」に、実際に施したカスタマイズの一覧をまとめておきました。

SEOに強い無料テーマとして有名なSimplicity。他にもSEOに強い無料テーマはありますが、その中でもカスタマイズしやすいテーマとして知られています。

このサイトもSimplicityで作っているので、実際にどう変わったのかは見てもらえば分かると思います。カスタマイズするたびに随時更新していきますよ。

追記)その他、WordPressで作成したブログサイトでいずれやりたくなるようなこともまとめておきました。これはある程度知識がついてきた頃にやるのがおすすめ。

スポンサーリンク

Simplicityのカスタマイズまとめ

Simplicityのテーマをもとにしたカスタマイズをまとめています。

ですが他テーマも根幹の部分は同じなので、理解できればSimplicity以外のテーマにも適用できるはずです。

1、Simplicityで使えるアイコンフォント

Simplicityでは「FontAwesome」というアイコンフォントが使われています。

かなり種類が豊富なので、一通り目を通しておくといいと思います。

【simplicity】豊富なアイコンが使い放題!アイコンフォント「FontAwesome」
WordPressのテーマsimplicityには色々な箇所にアイコンが使われています。「FontAwesome」というアイコンフォントを利用しているんですが、かなりの種類のアイコンが揃っていて便利です。自分好みにアイコンの種類を変えたり、新しくアイコンを追加する方法を紹介します。とても簡単なので使ってみてください。

2、記事一覧のサムネイルをカスタマイズ

Simplicityで使われるサムネイルは、通常サイズが自動的に決まってしまいます。

CSSで調整するだけでは、画像が引き伸ばされてしまうんです。

PHPを使って、自分の好きな横幅・高さにカスタマイズする方法を紹介。

【simplicity】記事一覧のサムネイル画像を好きなサイズに変更!簡単な方法で横長に出来ます
WordPressのテーマsimplicityは、デフォルトで記事一覧のサムネイルが小さな正方形に設定されます。単純にCSSでサイズ変更が出来ません。そこで今回はサムネイルの画像サイズを自由に変更する方法を紹介します。画像を横長に表示することもできるようになります。簡単な3つの手順でカスタマイズすることが出来ますよ。

3、スライドインメニューをカスタマイズ

モバイルで表示されるスライドインメニュー。

ここでは、スライドインメニューをカスタマイズするためのCSSセレクタをまとめてます。

アイコンフォントと組み合わせることで、オリジナリティを出すこともできますよ。

【Simplicity】スライドインメニューをカスタマイズするためのCSSセレクタを紹介
Simplicityには「スライドインメニュー」というスマホで見た時専用のモバイルメニューが備わっています。そこで今回はそのスライドインメニューをカスタマイズするためのcssセレクタを紹介します。また一部のボタンのみを非表示にしたり、アイコンの種類や色を変える方法も細かく見ていきましょう。

4、Simplicityの子テーマをカスタマイズ

WordPressのカスタマイズは、子テーマを使うのが常識です。

Simplicityでも簡単に子テーマをダウンロードできますが、最初は編集画面より扱えるPHPファイルが一部しか表示されていません。

親テーマのPHPファイルを子テーマに移す方法を紹介します。

Simplicity子テーマ内のファイルが少ない?必要なファイルを追加するよ
Simplicityのカスタマイズには子テーマが欠かせません。ですが、なんか親テーマに比べて編集できるファイルの数減ってませんか?Simplicityの子テーマはもともと「テーマの編集」で10種類のファイルしかカスタマイズできません。FTPソフトを使って必要なPHPファイルを子テーマに追加する方法を紹介します。

5、サイドバーにプロフィールを追加

サイドバーに画像を使ったプロフィールを追加する方法を紹介。

ちょっとした自己紹介を乗せたい時なんかに使ってみてください。

Simplicityのサイドバーにおしゃれなプロフィールを付けてみた
Simplicityのサイドバーにオリジナルのプロフィールを付けてみました。4つの手順で簡単に実装できるので、人と違ったおしゃれなプロフィールを作りたい人はぜひ使ってみてください。Simplicityのサイドバーの横幅300pxにぴったり馴染んだプロフィールをつけることが出来ますよ。

6、SNSシェアボタンを横一列にカスタマイズ

Simplicityはデフォルトで、シンプルなSNSシェアボタンを実装できます。

ですが、SNSの表示数によっては2、3行になってしまいます。

スマホサイトでは、これがなかなか鬱陶しいんですよね。

そんなわけでシェアボタンを横一列に並べる方法をまとめました。

SimplicityのSNSシェアボタンを横1列に並べるカスタマイズを施すよ
SimplicityのSNSシェアボタンを横一列に並べるカスタマイズをしてみました。記事のトップにあるシェアボタンがすっきりして、スマホでも見やすいデザインになると思います。CSSを使ってボタンの横幅のサイズを小さくするだけ。基本cssのコピペのみで実装できるのでぜひ試してみてはどうでしょうか。

7、SimplicityのTwitter設定

SimplicityとTwitterを連携させる方法のまとめです。

自信のTwitterアカウントの登録方法や、タイムラインを表示させる方法を紹介します。

SimplicityのTwitter設定まとめ。サイドバーにタイムライン追加
SimplicityのTwitterに関する設定をまとめました。Simplicityの場合は自分のTwitterアカウントを簡単に登録できます。フォローボタンの設置以外にも、サイドバーにウィジェットを利用してツイッターのタイムラインを表示させる方法も紹介しますね。

8、外部文字リンクにアイコンを付ける

アイコンフォントを使って、外部文字リンクの後ろにアイコンを付ける方法。

さらにボタンのようなデザインにすることで、少しおしゃれなリンクにしてみました。

【Simplicity】外部リンクをアイコン付きボタンにカスタマイズ
Simplicityの外部リンクを、シンプルなボタンにする方法を紹介。どんなサイトにも馴染むんじゃないかと思います。リンクホバー時に色を変えるCSSも加えてますので、サイトに合う色を選んでみてください。アフィリエイトのリンクも分かりやすいボタンにすることが出来るので試してみてはどうでしょうか。

9、記事一覧のデザインをカスタマイズ

Simplicityの記事一覧は、最初結構ごちゃごちゃしてます。

そこで、不必要な情報は削除しよりシンプルなデザインにしてみました。

これで他のSimplicityサイトと比べ、デザイン的にかなりの差別化を図れると思いますよ。

Simplicityの記事一覧をまさしくシンプルにカスタマイズしてみた
Simplicityの記事一覧のデザインをカスタマイズしてみました。不要な部分を削除して、枠線もシンプルに仕上げました。PHPファイルを一切かまうことなく、CSSのみのカスタマイズ。これでかなりオリジナリティを出すことが出来ると思いますよ。HTMLの要素ごとに分けてカスタマイズしたCSSを見ていきましょう。

10、Simplicityの見出しをカスタマイズ

CSS初心者は、まず見出しからカスタマイズするのがおすすめ。

文字のスタイル変更から徐々にカスタマイズに慣れていきましょう。

シンプルで目に入りやすい見出しのCSSを紹介します。

初心者も簡単!Simplicityの見出しをカスタマイズしてみよう
Simplicityのカスタマイズをするなら、まずは見出しから取り掛かるのがおすすめ。CSS初心者でも簡単にできます。今回はユーザーが記事を読みやすくなるような、シンプルかつパッと目に入る見出しのデザインを紹介。CSSの「backgroundプロパティ」を使い、背景色を自分の好きな色に設定することが出来ます。

11、サムネイル画像上にカテゴリーのラベルを付ける

サムネイル画像の左上にカテゴリーを移動するカスタマイズです。

有料テーマでよく見かけるので、Simplicityにも実装してみました。

PCサイト専用ですが結構気に入ってます。

【Simplicity】サムネイル画像上にカテゴリーのラベルを付けてみた
Simplicity記事一覧のサムネイル画像にカテゴリーのラベルを付けるカスタマイズをしてみました。Simplicityデフォルトでは日付の右側にカテゴリー名が表示されていますが、それをCSSでサムネイルの左上に移動させます。カテゴリーの表示デザインを変更してみましょう。

12、シェアボタンをアイキャッチの下に移動

通常アイキャッチ画像の上にあるシェアボタンを、アイキャッチ下に移動してみました。

デザインにメリハリが出ます。

【Simplicity】シェアボタンの場所をアイキャッチ画像の下に移動してみた
SimplicityのSNSシェアボタンをアイキャッチ画像の下に移動してみました。よりユーザーの目に入りやすくなったのかなと。シェアボタンの存在を知ってもらうことは重要ですからね。全体のデザイン的にもまとまった感じになるので、気に入った人はぜひ試してみてはどうでしょうか。

13、ブログカードをカスタマイズ

ブログカードのデザインをちょっとカスタマイズするためのCSSセレクタを紹介します。

本文の邪魔にならない程度にシンプルにしてみました。

【Simplicity】ブログカードをカスタマイズするCSSセレクタ
SimplicityのブログカードをカスタマイズするCSSセレクタを紹介します。ブログカードを横幅いっぱいに変更したり、カードホバー時の色を変更したりと、実際のカスタマイズを例に見ていきたいと思います。

14、関連記事のデザインをカスタマイズ

本文下にある関連記事のデザインをカスタマイズします。

記事一覧同様シンプルなデザイン。サムネイルのサイズ変更もまとめてあります。

【Simplicity】関連記事をカスタマイズ。サムネイルのサイズ変更とか
Simplicityの関連記事デザインをカスタマイズしてみました。PHPファイルを使ってサムネイル画像のサイズを変更させた後に、CSSを使って全体のデザインをアレンジします。Simplicityの関連記事はコンパクトな割には、説明文が入っていてごちゃごちゃしてるんですよね。かなりすっきりしたと思います。

15、おしゃれなモバイルメニューを設置

プラグインを使っておしゃれなモバイルメニューを設置してみました。

有効化するだけですぐに実装することが出来ます。設定画面より見た目のカスタマイズも可能。

【Simplicity】モバイルメニューをおしゃれにカスタマイズするプラグイン
Simplicityのモバイルメニューをカスタマイズしたい。そんな方におすすめなのが「Responsive Menu」というプラグイン。有効化するだけでおしゃれなモバイルメニューが実装できます。またプラグインの設定画面より、誰でも簡単に好みのデザインにカスタマイズできる手間をかけずにカスタマイズしたい人におすすめ。

16、先頭のh2タグ上にアドセンス広告を2つ横並びに設置

最初に出てくるh2タグの上に、アドセンス広告を2つ横並びに設置する方法を紹介。

Simplicityは「投稿本文中ウィジェット」があるので簡単です。

ただし、コンテンツ量が不十分な時は広告の貼りすぎに要注意。

【Simplicity】h2タグ前にアドセンス広告を2つ横並びに表示させる方法
Simplicityには、投稿記事中の最初に出てくる「h2タグ」の上にアドセンス広告を挿入する機能があります。今回はそこに広告を2つ横並びに表示させる方法を紹介。CSSで横並びのレイアウト済みなので、Simplicityの「投稿本文中ウィジェット」にコードを張り付けるだけです。アドセンス広告をきれいに挿入できます。

17、文字リンクの頭に矢印アイコンを入れる方法

文字リンクの頭に矢印のアイコンを付ける方法を紹介。

リンクがパッと目に留まるようになるのでおすすめです。

【Simplicity】文字リンクの頭に矢印アイコンを付ける方法
文字リンクの頭に矢印アイコンを付ける方法を紹介。リンク前にアイコンがあると目に留まりやすくなりますよね。Simplicityでブログを運営している方は、「FontAwesome」のアイコンフォントを使えば簡単に実装できます。手順は、アイコンを選んでコードを張り付けるだけ。アイコンを使って見やすいサイトにしましょう。

18、重要な文章にマーカー線を引く

文章の重要な箇所にマーカーのような線を引く方法を紹介します。

長文を書いている人はこれを実装することで、ユーザーが見やすい文章にすることが出来ると思いますよ。

文章の要点が伝わりやすくなります。

【Simplicity】文章の重要なところにマーカーのような線を引く方法
WordPressで書いた文章の重要なところにマーカーのような線を引く方法を紹介します。文章の重要部分を際立たせることにより、長文も見やすくなります。マーカーを追っていくだけで、その記事の要点を読み取ることも出来るので、ユーザーの負担も激減。文字全体に色をかぶせるのではなく、下半分だけに色付きのラインが引かれるので見にくくなる心配もありません。Simplicityの場合はもともとクラス名「marker」に対して、文章の背景を黄色にするCSSがもともと備わっているので、それを使うのもありですね。CSSとHTMLを使いますが、初心者でもコピペで簡単に実装できるのでぜひ試してみてください。
スポンサーリンク

カスタマイズの基本「HTML」と「css」を学ぶ

WordPressのデザインをカスタマイズしたいときは「HTML」と「css」の知識が必要。

しかし、実はこの2つって他の難しいプログラム言語と比べ、簡単に理解することが出来るものなんです。

 

上記Simplicityカスタマイズの各記事内で簡単に紹介はしていますが、一度基本知識に目を通してからの方が理解も進みますし、今後どんどんオリジナルのカスタマイズができるようになると思います。

1、カスタマイズの基礎知識「HTML」

HTMLはwebページ構成する枠組みを作るためのものです。

デザイン変更するのはあくまで次に紹介するcssなんですが、HTMLを理解しておかないとcssも使えません。

何度も言いますが超簡単なので、これからwebに携わっていく人は一度目を通してみることをおすすめします!

2、カスタマイズの基礎知識「css」

HTMLが理解できたらいよいよcssです。

webページのレイアウトは全てこれでできます。

基本知識とよく使うプロパティをまとめておきました!

追記:Simplicityの後継Cocoonにテーマを移行しました

Simplicityの後継テーマCocoon(コクーン)がリリースされたので、テーマを移行しました。

いろいろカスタマイズして愛着のあったSimplicityでしたが、Cocoonは現web環境に最適化されたテーマ。Simplicityと比べいろんな面でアップデートされてます。

 

有料テーマにも匹敵する最強の無料テーマ。

CocoonもSimplicity同様、カスタマイズのしやすさは抜群です。

ブログ初心者や、サイトを独自にカスタマイズしたい人に特におすすめですね。

Simplicity使いのみさんもできれば移行しておいた方が良いと思いますよ!

simplicity使いが有料テーマを試した感想

無料テーマを使っている人ならだれもが気になる、有料テーマの話も少しまとめた記事も書きました。

僕はこのサイト以外にも複数のサイトを運営しているんですが、simplicityのような無料テーマ以外に有料のテーマを使ってます。

大体10,000円くらいするんですが、やっぱり有料テーマは扱いやすい。これに限ります。

僕は自分でカスタマイズするのが楽しくて無料テーマも使ってますが、記事の執筆に集中したい人は有料テーマも検討してみる価値がありますね。

WordPressで作ったブログサイトでいずれやりそうなカスタマイズ

WordPressでブログ運営している人なら、いずれやることになるかもしれないこともまとめます。どちらかというとこれは中級者向けかもしれません。

1、WordPressをSSL化する方法

WordPressで作ったサイトをSSL化する手順をまとめます。

まだ徐々にではありますが、GoogleによるSSL化サイトの優遇が発表されるようになってきました。

いずれやるつもりの人は早めにやっておくことをおすすめします。

【WordPress】ロリポップの無料独自SSLを使ってサイトをSSL化する手順
レンタルサーバー「ロリポップ」でも無料でサイトをSSL化することが出来るようになりました。そんなロリポップの独自SSL証明書を申し込み、WordPressのサイトをSSL化する手順をまとめした。SEO的にも問題なくサイトをSSLに移行する方法。WordPressの場合は出来るだけ早めにSSL化するのがおすすめです。

2、サイト全体のパーマリンクを上手に一括変更する方法

パーマリンクはサイト作成の最初の段階で決めるのが基本ですが、方法さえ間違えなければ上手く移行することが出来ます。

どうしても変更したいときは参考にしてください。

htaccess1行で一括リダイレクト!パーマリンクの上手な変更手順【WordPress】
WordPressのパーマリンクを、SEOを維持したまま変更する方法を紹介。実は.htaccessファイルに1行追記するだけで、パーマリンクを変更しても簡単に301リダイレクトすることが可能です。記事数が多い場合も1つのコードで一括処理。WordPressのパーマリンク選びに失敗した方はぜひ試してみてください。

最後に

簡単なものから少し手間のかかるものまで、ざっくばらんにまとめました。

順番もごちゃごちゃですが、そこはご容赦を。

他のSimplicityサイトでは見ないカスタマイズもあると思うので、ぜひ参考にしてみてください。

徐々にブログサイトに合うようなデザインにしていきたいと思っておりますよ。