実際にやってみたSimplicityのカスタマイズまとめ

WordPress Simplicity WordPress

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

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

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

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

スポンサーリンク

Simplicityのカスタマイズまとめ

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

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

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

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

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

【simplicity】豊富なアイコンが使い放題!アイコンフォント「FontAwesome」
WordPressのテーマ「simplicity」を使っている人は、サイトの所々にアイコンが使われているの見たことありますよね。 しかしそれはほんの一部で、実際はもっといろんな種類のアイコンが存...

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

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

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

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

【simplicity】記事一覧のサムネイル画像を好きなサイズに変更!簡単な方法で横長に出来ます
WordPressのテーマ「simplicity」の記事一覧は、通常設定の場合正方形の画像がサムネイルに指定されます。 各記事のアイキャッチに設定した画像が、自動的に正方形にリサイズされサムネイ...

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

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

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

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

【Simplicity】スライドインメニューをカスタマイズするためのCSSセレクタを紹介
Simplicityのスライドインメニューをちょっとカスタマイズしてみました。 少しでも標準のものと変えたかったんですよね。 そんなわけで、今回は簡単にスライドインメニューの見栄え...

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

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

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

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

Simplicity子テーマ内のファイルが少ない?必要なファイルを追加するよ
Simplicityをカスタマイズするには、子テーマを使うのが安心安全ですね。それは親テーマがアップデートされても、子テーマは影響を受けないからです。 子テーマを実装するのはとても簡単に出来ます...

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

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

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

Simplicityのサイドバーにおしゃれなプロフィールを付けてみた
Simplicityのサイドバーにオリジナルのプロフィールを付ける方法を紹介します。 固定ページで詳しくプロフィールを作る人も多いと思いますが、簡単な紹介だけでも目につきやすいサイドバーにあると...

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

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

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

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

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

SimplicityのSNSシェアボタンを横1列に並べるカスタマイズを施すよ
simplicityのSNSボタンをちょっとカスタマイズ。 ボタンが2行で表示されるのが、なんか見栄え悪いなぁと思いまして。横一列で表示されるようにました。 特にスマホサイトはごちゃごちゃ...

7、SimplicityのTwitter設定

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

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

SimplicityのTwitter設定まとめ。サイドバーにタイムライン追加
Simplicityには、簡単にフォローボタンを設置する機能が備わってます。 設定画面よりツイッターアカウントを登録するだけでOKなのですよ。 そんなわけで今回は、Simplicityで作...

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

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

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

【Simplicity】外部リンクをアイコン付きボタンにカスタマイズ
外部リンクを、アイコン付きでシンプルなボタンにカスタマイズしてみました。 アフィリエイト等のリンクも、コードを埋め込むだけで分かりやすいボタンにすることができますよ。 WordPressの...

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

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

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

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

Simplicityの記事一覧をまさしくシンプルにカスタマイズしてみた
simplicityの記事一覧のデザインを、まさしくシンプルにカスタマイズしてみました。 PHPファイルは一切変更することなく、CSSのみを使ったカスタマイズ。 PC用とスマホ用で数値は変...

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

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

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

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

【Simplicity】まずは見出しをカスタマイズしてみよう
WordPressのカスタマイズ第一歩としておすすめなのが「見出し」です。 文字のスタイル変更はとても単純で、CSS初心者でも簡単に出来るんですよね。 そんな見出しのカスタマイズですが、今...

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

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

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

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

【Simplicity】サムネイル画像上にカテゴリーのラベルを付けてみた
少し前に、ユーザビリティを考え「エントリーカード全体をリンク化」しました。 せっかく作った記事一覧のCSSも一新する羽目になりましたが...。 それに伴ってカテゴリーのデザインも変えてみた...

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

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

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

【Simplicity】シェアボタンの場所をアイキャッチ画像の下に移動してみた
ある日ふと「SNSシェアボタンってアイキャッチ下のほうが目に付きやすくね」と思いました。 正直デザイン的にこっちの方が好きという理由が大きいんですけどね(笑) ほら、アイキャッチと記事本文...

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

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

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

【Simplicity】ブログカードをカスタマイズするCSSセレクタ
WordPressのブログカードをちょっとカスタマイズしてみました。 Simplicityのカスタマイズ内ではほとんど変更が出来ませんからね。 今回は、実際にカスタマイズした例をもとにCS...

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

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

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

【Simplicity】関連記事をカスタマイズ。サムネイルのサイズ変更とか
Simplicityの関連記事をカスタマイズしてみたのでCSSを公開します。 サムネイル画像のサイズ変更はPHPファイルを使う必要があります。でも意外と簡単に出来るので安心してください。 ...

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

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

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

【Simplicity】モバイルメニューをおしゃれにカスタマイズするプラグイン
Simplicityのモバイルメニューって少し地味なんですよね...。 何とかできないものかと思っていたところ、簡単におしゃれなモバイルメニューが実装できるプラグインを見つけました。 プラ...

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

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

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

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

【Simplicity】h2タグ前にアドセンス広告を2つ横並びに表示させる方法
投稿記事中の最初に出てくる「h2タグ」の上に2つのアドセンス広告を横並びに表示させる方法を紹介します。 Simplicityの場合は「投稿本文中」ウィジェットがあるので超簡単。 ちなみに、...

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

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

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

【Simplicity】文字リンクの頭に矢印アイコンを付ける方法
Simplicityでブログを運営している皆さん。 今回は、文字リンクの先頭に「矢印」のようなアイコンを付ける方法を紹介します。 記事中の目立たなかった文字リンクも、頭にアイコンが付くだけ...

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

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

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

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

【Simplicity】文章の重要なところにマーカーのような線を引く方法
今回は「重要な文章をマーカーのようなラインで目立たせるカスタマイズ」を紹介したいと思います。 文章の重要ポイントをマーカーで際立たせることにより、長文がとても見やすくなるんですよ。マーカーの部分...

カスタマイズの基本「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化されているサイトも増えてきました。 GoogleによるSSL化されたサイトを優遇する動きが徐々に見られる中、SSL化が無料で出来るレンタルサーバーが増えましたからね。 僕が...

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

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

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

htaccess1行で一括リダイレクト!パーマリンクの上手な変更手順【WordPress】
WordPressのパーマリンクを思い切って変更してみました。 パーマリンクの変更は、基本的にSEO等から見てNG行為とされてます。 しかし、301リダイレクトという方法を使うことで、ほと...

最後に

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

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

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

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