現役エンジニアがオススメするデスク周りの商品紹介

【コピペでOK】WordPressのカスタマイズ集20選【ほぼ必須のカスタマイズあり】

【コピペでOK】WordPressのカスタマイズ集19選【ほぼ必須のカスタマイズあり】

読者の悩み

  • WordPressをカスタマイズしてみたい
  • カスタマイズしてもっと便利に、おしゃれにしたい!
  • 初心者がコピペでもできる簡単なカスタマイズってありますか?

ありがたいことに、当サイトでは色々なカスタマイズ記事が多くの人に読んでもらえています。

maipyon

いいなと思ったデザインはとりあえず自作できないか考える。
こんにちわ。maipyon(@maipyon8)です。

カスタマイズ記事が多くなる一方、カスタマイズ方法を一覧にまとめないと探しにくいなぁということを感じてきました。

一応他にもちょこちょこあるのですが、需要が高く、かつ誰でもできそうなカスタマイズのみを当ページで集めました。

ということで、今回の記事ではこれまでに紹介してきたカスタマイズを一気に紹介します!

WordPressをカスタマイズをする前に

WordPressのカスタマイズは、カスタマイズ方法によっては特に危険なく終わりますが、そうでない場合もあります。

コピペで終わるようなものばかりなので、そうそうミスは起きないと思いますが・・・

それでも、カスタマイズは自己責任でよろしくお願いします!

テーマによっては(手順通りやっているのに)うまくいかなかったり、人為的なミスでおかしくなってしまったり、テーマのアップデートでデザインが崩れてしまったり・・・。
特に、テーマのアップデートでデザインが崩れるのは自己解決以外の方法はないので、カスタマイズ前に把握しておいていただけますと幸いです。
カスタマイズに不慣れで、これから始める人はぜひご一読ください。
【完全初心者向け】WordPressのカスタマイズ方法の基礎を解説【手順紹介】 【完全初心者向け】WordPressのカスタマイズ方法の基礎を解説【手順紹介】 WordPressのカスタマイズをしてみたいけど、どうやったらいいんだろう?完全初心者向けに、WordPressテーマを作ったこともある私がカスタマイズ方法について解説します。

maipyon

カスタマイズ方法についても、特定のテーマ専用のカスタマイズが含まれるので、タイトル部分にご注意ください!

紹介するカスタマイズ種別

  • WordPressのカスタマイズ
    おそらく、どのテーマでも使えます。
  • 商品紹介プラグインのカスタマイズ
    Rinker・カエレバの使用者はぜひ。
  • SANGOのカスタマイズ
    テーマ「SANGO」でのカスタマイズをおすすめします。

maipyon

前書きが長くなりましたが、好きなものを選んでカスタマイズをお楽しみください!

WordPressで使えるカスタマイズ集

WordPressのカスタマイズ rabbit_icon

目次をプラグインなしで作成

【プラグインなし】WordPressの目次の作り方を解説【コピペで簡単】
完成品

ブログに目次を取り入れる

maipyon

今ではどのブログにもある目次。
プラグインに頼ってデザインが崩れている人を見かけることもあったし、「オリジナルデザインの目次も作りたい!」という人にはオススメ!

目次の上に広告を挟む方法も紹介しています!


WordPressのカスタマイズ rabbit_icon

ブログタイトルを画像に変更する

【WordPress】タイトルを画像に変更しておしゃれなデザインにする方法
完成品

ぴょんなことからトップページ

maipyon

ブログのタイトルは「ブログの顔」とも言える場所。いい画像を描けるかと言われるとNOなので、私はココナラでお安くたのみました!おしゃれなサイトを目指すなら絶対やっておこう!
関連記事
【レビュー】ココナラでブログヘッダーを依頼して大満足!依頼の流れも紹介 【レビュー】ココナラでブログヘッダーを依頼して大満足!依頼の流れも紹介 ブログのヘッダー画像を変えたいけど、センスがない。そんな時に使用したのが「ココナラ」です!ココナラを使ってブログヘッダー画像をどのように依頼したのかについて、やりとりの流れを解説しつつレビューをします。

WordPressのカスタマイズ rabbit_icon

合わせて読みたいリンクを作成する

CSSコピペで完了!「あわせて読みたい」リンクをWordPressで設置しよう!

maipyon

ブログにおいて、PVを上げるためにもリンク先の記事は読んで欲しいもの!リンクをより目立たせるためにも、なにかしらおしゃれなリンクにはしておきたいかも。

WordPressのカスタマイズ rabbit_icon

ブログカードを作ってみる

【WordPress】プラグインなしでブログカードを作る方法【コピペで完成】

maipyon

リンクをもっとシンプルでおしゃれなものにしたいなぁ・・・どうせなら画像もつけたい。と思って作ってみました。抜粋文あり・なしの2パターンのデザインで紹介中です。超愛用中で、かつプラグインいらずなのでかなりありがたいものになるんじゃないかなと!

WordPressのカスタマイズ rabbit_icon

ブログのフォントを変更してみる

WordPressのフォントを変更する方法【プラグインなし】

maipyon

ブログテーマがかわいい感じだから、文字さえもかわいくしたいなぁ・・・みたいな人に見て欲しい記事。・・・といいつつも、文字色の変更や、文字の大きさの変更方法も書いています!実は、真っ黒な文字色って目が疲れるからちょっとグレーにしてたりするんだよ!

WordPressのカスタマイズ rabbit_icon

期間に応じて中身を変えるショートコード

【コピペでOK】期間によって内容を変えるキャンペーン中ショートコード【WordPress】

maipyon

今月の3日~15日までキャンペーンで激安セールをするらしいけど、3日になった瞬間に更新とかできないし、あとで消すのめんどくさい!
そんな悩みを解決するカスタマイズの紹介です。3~15日は「セール中」文言、それ以外は通常通りの文言を設定することが可能です!

WordPressのカスタマイズ rabbit_icon

定型文を挿入するショートコード

コピペでOK!WordPressで定型文を挿入する方法【一括管理で楽々執筆】

maipyon

サービス料金など、色々な記事で掲載しているのに年に1度は変わる数字ってありますよね。
それを一元管理し、毎回料金を調べなくても良くするための定型文挿入のためのショートコードです。

WordPressのカスタマイズ rabbit_icon

隠すボタンを作ってみる

CSSコピペでOK!クリックで要素の表示・非表示を切り替えるボタンを作る方法

完成品(実物)
読んでくれてありがとう・・・!!

maipyon

長くなるけど、見ない人は見ないよなぁ・・・悩む。ってところで意外とよく使うカスタマイズです。特にプログラムのコードとか。(コードの掲載方法も工夫してデザイン変えてやってます。)お問い合わせページで法人向けに実績を隠している人がいて、こんな使い方が・・・!ってたまげた。

WordPressのカスタマイズ rabbit_icon

便利なグラフを作る

【プラグインなし】WordPressへグラフを挿入する方法を解説!【Chart.js】
完成品(実物)




maipyon

ブロガーなら、絶対PVやら収益のグラフを載せてる記事が1記事はありますよね。
折れ線グラフとか折れ線+棒グラフも可能で、見やすくできるのでオススメです。

ホバー(マウスならタップ)で数値を見れるので、ユーザーにとっても見やすいんですよね。


WordPressのカスタマイズ rabbit_icon

おしゃれなチェックボックスを追加する

チェックボックスをCSSで装飾してWordPress記事内で使おう【コピペでOK】
完成品(画像)

チェックボックスサンプル

maipyon

チェックボックスと、チェックした数を表示をします。1つ以上あてはまったあなたは~~~みたいな使い方をすると面白いかもなぁと思って作ってみました。

WordPressのカスタマイズ rabbit_icon

サイドバーを追尾させてみる

【CSSだけで】サイドバーをスクロール追従させる方法【position:sticky】

maipyon

サイドバー、スクロールに追従してきていますか?していないならタダの空白。かなりもったいない!
PV上昇にもつながるので、是非追従するようにカスタマイズしてみて欲しい!

有料テーマだと対応しているものがあるのですが、対応していないテーマで自作するときは参考になると思います。


WordPressのカスタマイズ rabbit_icon

色々な囲み枠を追加する

CSSコピペするだけ!ボックスデザイン(囲み枠)25選【色別サンプル62種】

maipyon

ぶっちゃけ当サイト一番人気の記事。
色違いサンプルを多数用意しているので、なにかしら使ってみたい囲み枠が見つかると思います!

WordPressのカスタマイズ rabbit_icon

おしゃれな見出しに変更する

CSSコピペするだけ!今すぐ使える見出しデザイン例21選【色別サンプル44種】

maipyon

これまた何時間もかけてめちゃくちゃ頑張った記事。
色違いサンプルを多数用意しているので、なにかしら使ってみたい見出しのデザインが見つかると思います!

WordPressのカスタマイズ rabbit_icon

色々な吹き出しを追加する

CSSコピペするだけ!吹き出しデザイン14選【色別サンプル19種】

maipyon

吹き出しの基本的な作り方の紹介から、色々なデザインサンプルまで多数揃っています!
中には動く吹き出しもあるので試してみて欲しいです!

商品紹介プラグインの見た目をカスタマイズ

Rinkerのカスタマイズ rabbit_icon

Rinkerをおしゃれにしてみる

CSSコピペでOK!Rinker(リンカー)のデザインをカスタマイズしよう!
完成品(実物)

maipyon

Rinkerを使っている人は、ぜひデザインをカスタマイズして使ってみて欲しいと思います!
コピペで即終了するので、まだやっていない方はぜひ。

Rinker×COPIAのカスタマイズ rabbit_icon

Rinker×COPIAでもおしゃれにしてみる

【COPIAに対応】RinkerをCOPIAに合わせてCSSカスタマイズ!【コピペでOK】
完成品(画像)

COPIAのデザイン変更後

maipyon

1つ上で紹介したデザインと全く同じにはなるのですが、キャンペーン挿入プラグイン『COPIA』を使用している場合のカスタマイズ方法を紹介しています。
COPIAを使っている方はコチラを参考にしてください。

カエレバ・ヨメレバのカスタマイズ rabbit_icon

カエレバ・ヨメレバをおしゃれにしてみる

CSSコピペで完了!カエレバ・ヨメレバのデザインをカスタマイズ
完成品(画像)

カエレバ・ヨメレバのデザイン完成品

maipyon

カエレバ・ヨメレバを使っている方はこちらを参考にデザインカスタマイズをしてみてください!

SANGOのカスタマイズ集

ここからは、有料テーマのSANGOを使用している方のみが使えるカスタマイズになっています。

SANGOのカスタマイズ rabbit_icon

おしゃれなサイトマップを作ってみる

【SANGO】誰でも簡単におしゃれなサイトマップを作る方法
完成品

雑記ブログのサイトマップ

特化ブログのサイトマップ

maipyon

よくあるサイトマップは、文字のリンクがずらずら壁のように並んでいる・・・。
サイトマップをつくるなら、どうせなら画像付きで記事紹介をしたい!と思って作ってみました。

カテゴリだけを紹介している『雑記ブログ型』と、記事を重点的に紹介する『特化ブログ型』の2種類の作り方を紹介しています!


SANGOのカスタマイズ rabbit_icon

SANGOでフッターをおしゃれにする

【SANGO】フッターにロゴを入れる&デザイン変更カスタマイズ!
完成品の画像

SANGOフッター

maipyon

SANGOのフッターは、最初は「HOME」って書かれているんですよね。それをロゴにすることでおしゃれにしちゃおう!っていう記事です。
読者にはフッターまで見てもらえるように良い記事作りを頑張ります(笑)

SANGOのカスタマイズ rabbit_icon

人気記事ランキングのデザインを変更する

【SANGO】ブログの回遊率を改善!カテゴリ別人気記事&デザイン変更
完成品の画像

カテゴリー別人気記事

maipyon

人気記事ランキングをカテゴリー別にして、デザインも変更しちゃいます!PCの人は実物が画面右に出ていると思います!
同じカテゴリー内の記事を見たい人は多いので、回遊率UPに繋がります。

WordPressカスタマイズのまとめ

ということで、使えそうなカスタマイズ集を紹介しました。

maipyon

是非色々な記事を見てもらえると嬉しいです!

一部の記事ではfunction.phpをいじる部分もあるので、そこは自己責任でお願いします。

ブ ロ グ デ ザ イ ン に 凝 り す ぎ る の は ほ ど ほ ど に し ま し ょ う 。

こだわりが強いから仕方ないんです。でもまだまだ直せるところがあるんじゃないかと奮闘してしまう・・・。

また、当サイトで使っているツールについては以下の記事で紹介しています。

WordPressブログで使っている神ツールまとめ【月間2万PV達成】 WordPressブログで使っている神ツールまとめ【月間2万PV達成】 ブログ歴2年の私が、取捨選択しながら現在WordPressブログで使っているツールについてまとめました。使用しているツールに変更点があれば、その随時この記事を更新したいと思います!

気になる方もいると思うので、是非読んでみてください!

なお、無料テーマでカスタマイズしまくるのはオススメしません。
多くの時間を無駄にしてきましたし、どうあがいても有料テーマには敵わないという事を実感しました。

実際に私は有料テーマに乗り換えてPVも上がったので、『【PV爆上げしました】WordPressの有料テーマおすすめ5つを比較』にて紹介している有料テーマがオススメです。

有料テーマのメリットについても触れています。
【初心者向け】WordPressのおすすめ有料テーマ5つを比較【PV爆上げ】 【初心者向け】WordPressのおすすめ有料テーマ5つを比較【PV爆上げ】 WordPressの有料テーマのおすすめをブログ歴3年・本業でも様々な有料テーマを使ってきた私が紹介します。私自身、有料テーマでPVが一気に上昇しただけでなく、色々なメリットがあったので必須だと感じています。

それでは色々なページを読んでカスタマイズを楽しんでくださいね!