これまで、コピペでできるだけ終わるようなブログカスタマイズの記事を書いてきました。
ありがたいことに、当サイトでは色々なカスタマイズ記事が多くの人に読んでもらえています。
![maipyon](https://maipyon.net/programming/wp-content/uploads/2021/10/maipyon.jpg)
いいなと思ったデザインはとりあえず自作できないか考える。
こんにちわ。maipyon(@maipyon8)です。
カスタマイズ記事が多くなる一方、カスタマイズ方法を一覧にまとめないと探しにくいということを感じてきました。
一応他にもちょこちょこあるのですが、需要が高く、かつ誰でもできそうなカスタマイズのみを当ページで集めました。
ということで、今回の記事ではこれまでに紹介してきたカスタマイズを一気に紹介します!
WordPressをカスタマイズをする前に
WordPressのカスタマイズは、カスタマイズ方法によっては特に危険なく終わりますが、そうでない場合もあります。
コピペで終わるようなものばかりなので、そうそうミスは起きないと思いますが・・・
それでも、カスタマイズは自己責任でよろしくお願いします!
また、カスタマイズに不慣れな方は、まず以下の記事を一読いただけると助かります。カスタマイズの基本を書いています。
![maipyon](https://maipyon.net/programming/wp-content/uploads/2021/10/maipyon.jpg)
カスタマイズ方法についても、特定のテーマ専用のカスタマイズが含まれるので、タイトル部分にご注意ください!
- WordPressのカスタマイズ
おそらく、どのテーマでも使えます。 - 商品紹介プラグインのカスタマイズ
Rinker・カエレバの使用者はぜひ。
前書きが長くなりましたが、好きなものを選んでカスタマイズをお楽しみください!
WordPressで使えるカスタマイズ集
![](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
![rabbit_icon](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
目次をプラグインなしで作成
![【プラグインなし】WordPressの目次の作り方を解説【コピペで簡単】](https://maipyon.net/wp-content/uploads/2019/01/77d2a296ff13141e8c92251440907aa0.png)
![ブログに目次を取り入れる](https://maipyon.net/wp-content/uploads/2019/01/0d40a5e4a645fc6b96e767d64ac0878e-e1547031017579.jpg)
![maipyon](https://maipyon.net/programming/wp-content/uploads/2021/10/maipyon.jpg)
今ではどのブログにもある目次。
プラグインに頼ってデザインが崩れている人を見かけることもあったし、「オリジナルデザインの目次も作りたい!」という人にはオススメ!
目次の上に広告を挟む方法も紹介しています!
![](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
![rabbit_icon](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
ブログタイトルを画像(ロゴ)に変更する
![【WordPress】タイトルを画像に変更しておしゃれなデザインにする方法](https://maipyon.net/wp-content/uploads/2018/12/32779a3f8f886ead678f4533c4aedf0d-1.jpg)
![ぴょんなことからトップページ](https://maipyon.net/wp-content/uploads/2019/01/pyontop-1.png)
![maipyon](https://maipyon.net/programming/wp-content/uploads/2021/10/maipyon.jpg)
ブログのタイトルは「ブログの顔」とも言える場所。いい画像を描けるかと言われるとNOなので、ココナラでお安くたのみました!おしゃれなサイトを目指すなら絶対やっておこう!
![](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
![rabbit_icon](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
合わせて読みたいリンクを作成する
![CSSコピペで完了!「あわせて読みたい」リンクをWordPressで設置しよう!](https://maipyon.net/wp-content/uploads/2018/12/f034df243b935ad1ec50fb428da45558-1.jpg)
![maipyon](https://maipyon.net/programming/wp-content/uploads/2021/10/maipyon.jpg)
ブログにおいて、PVを上げるためにもリンク先の記事は読んで欲しいもの!リンクをより目立たせるためにも、なにかしらおしゃれなリンクにはしておきたいかも。
![](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
![rabbit_icon](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
ブログカードを作ってみる
![【WordPress】プラグインなしでブログカードを作る方法【コピペで完成】](https://maipyon.net/wp-content/uploads/2019/02/e525139de8073d0cc24cfe1c1a4f1dba-1.png)
![maipyon](https://maipyon.net/programming/wp-content/uploads/2021/10/maipyon.jpg)
リンクをもっとシンプルでおしゃれなものにしたいなぁ・・・どうせなら画像もつけたい。と思って作ってみました。抜粋文あり・なしの2パターンのデザインで紹介中です。超愛用中で、かつプラグインいらずなのでかなりありがたいものになるんじゃないかなと!
![](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
![rabbit_icon](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
ブログのフォントを変更してみる
![WordPressのフォントを変更する方法【プラグインなし】](https://maipyon.net/wp-content/uploads/2018/09/e36f2b9f3997516cffb23b31100a7b4e.jpg)
![maipyon](https://maipyon.net/programming/wp-content/uploads/2021/10/maipyon.jpg)
ブログテーマがかわいい感じだから、文字さえもかわいくしたいなぁ・・・みたいな人に見て欲しい記事。
・・・といいつつも、文字色の変更や、文字の大きさの変更方法も書いています!
実は、真っ黒な文字色って目が疲れるからちょっとグレーにしてたりする。
![](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
![rabbit_icon](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
定型文を挿入するショートコード
![コピペでOK!WordPressで定型文を挿入する方法【一括管理で楽々執筆】](https://maipyon.net/wp-content/uploads/2021/02/0d664598297131b4507fa5e9c6464df7.png)
![maipyon](https://maipyon.net/programming/wp-content/uploads/2021/10/maipyon.jpg)
サービス料金など、色々な記事で掲載しているのにその後変わる数字ってありますよね。
それを一元管理し、毎回料金を調べなくても良くするための定型文挿入のためのショートコードです。
![](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
![rabbit_icon](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
隠すボタンを作ってみる
![CSSコピペでOK!クリックで要素の表示・非表示を切り替えるボタンを作る方法](https://maipyon.net/wp-content/uploads/2019/02/bb34682673cd714ce2b876da171c5195-1.png)
![maipyon](https://maipyon.net/programming/wp-content/uploads/2021/10/maipyon.jpg)
長くなるけど、見ない人は見ないよなぁ・・・悩む。ってところで意外とよく使うカスタマイズです。
特にプログラムのコードとか。
お問い合わせページで法人向けに実績を隠している人がいて、こんな使い方が・・・!ってたまげた。
![](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
![rabbit_icon](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
便利なグラフを作る
![【プラグインなし】WordPressへグラフを挿入する方法を解説!【Chart.js】](https://maipyon.net/wp-content/uploads/2019/02/c44e210f1b638db66c54dbbad5b5de8a.png)
![maipyon](https://maipyon.net/programming/wp-content/uploads/2021/10/maipyon.jpg)
ブロガーなら、絶対PVやら収益のグラフを載せてる記事が1記事はありますよね。
折れ線グラフとか折れ線+棒グラフも可能で、見やすくできるのでオススメです。
ホバー(マウスならタップ)で数値を見れるので、ユーザーにとっても見やすいんですよね。
![](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
![rabbit_icon](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
おしゃれなチェックボックスを追加する
![チェックボックスをCSSで装飾してWordPress記事内で使おう【コピペでOK】](https://maipyon.net/wp-content/uploads/2019/06/5223e0d9dbd692c141b0fa7dd60f7319.png)
![maipyon](https://maipyon.net/programming/wp-content/uploads/2021/10/maipyon.jpg)
チェックボックスと、チェックした数を表示をします。
1つ以上あてはまったあなたは~~~みたいな使い方をすると面白いかもなぁと思って作ってみました。
![](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
![rabbit_icon](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
サイドバーを追尾させてみる
![【CSSだけで】サイドバーをスクロール追従させる方法【position:sticky】](https://maipyon.net/wp-content/uploads/2019/01/ef3614b5618641bfd638cb5c650caf91.png)
![maipyon](https://maipyon.net/programming/wp-content/uploads/2021/10/maipyon.jpg)
サイドバー、スクロールに追従してきていますか?していないならタダの空白。かなりもったいない!
PV上昇にもつながるので、是非追従するようにカスタマイズしてみて欲しい!
有料テーマだと対応しているものがあるのですが、対応していないテーマで自作するときは参考になると思います。
![](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
![rabbit_icon](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
色々な囲み枠を追加する
![CSSコピペするだけ!ボックスデザイン(囲み枠)25選【色別サンプル62種】](https://maipyon.net/wp-content/uploads/2019/02/c706c7bdbcc4aec2753f6d0be8a3c446.png)
![maipyon](https://maipyon.net/programming/wp-content/uploads/2021/10/maipyon.jpg)
ぶっちゃけ当サイト一番人気の記事。
色違いサンプルを多数用意しているので、なにかしら使ってみたい囲み枠が見つかると思います!
![](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
![rabbit_icon](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
おしゃれな見出しに変更する
![CSSコピペするだけ!今すぐ使える見出しデザイン例21選【色別サンプル44種】](https://maipyon.net/wp-content/uploads/2020/08/584f52698bc85ef2b75f591fc11b0f85.png)
![maipyon](https://maipyon.net/programming/wp-content/uploads/2021/10/maipyon.jpg)
これまた何時間もかけてめちゃくちゃ頑張った記事。
色違いサンプルを多数用意しているので、なにかしら使ってみたい見出しのデザインが見つかると思います!
![](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
![rabbit_icon](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
色々な吹き出しを追加する
![CSSコピペするだけ!吹き出しデザイン14選【色別サンプル19種】](https://maipyon.net/wp-content/uploads/2019/04/2a83fbbf979ae150470d65d7df1486bb.png)
![maipyon](https://maipyon.net/programming/wp-content/uploads/2021/10/maipyon.jpg)
吹き出しの基本的な作り方の紹介から、色々なデザインサンプルまで多数揃っています!
中には動く吹き出しもあるので試してみて欲しいです!
商品紹介プラグインの見た目をカスタマイズ
![](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
![rabbit_icon](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
Rinkerをおしゃれにしてみる
![CSSコピペでOK!Rinker(リンカー)のデザインをカスタマイズしよう!](https://maipyon.net/wp-content/uploads/2019/03/ac2abd187dd10532467c5576776fe2f7.jpg)
![](https://m.media-amazon.com/images/I/31hKY4wBzDL._SL160_.jpg)
![](https://maipyon.net/wp-content/plugins/yyi-rinker/img/arrow-right.png)
![maipyon](https://maipyon.net/programming/wp-content/uploads/2021/10/maipyon.jpg)
Rinkerを使っている人は、ぜひデザインをカスタマイズして使ってみて欲しいと思います!
コピペで即終了するので、まだやっていない方はぜひ。
![](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
![rabbit_icon](https://maipyon.net/wp-content/uploads/2020/05/rabbit-icon.png)
カエレバ・ヨメレバをおしゃれにしてみる
![CSSコピペで完了!カエレバ・ヨメレバのデザインをカスタマイズ](https://maipyon.net/wp-content/uploads/2018/08/e1e45b825ffdd2ce788655d9e4273c0d.jpg)
![カエレバ・ヨメレバのデザイン完成品](https://maipyon.net/wp-content/uploads/2018/08/yomereba-e1543804205404.png)
![maipyon](https://maipyon.net/programming/wp-content/uploads/2021/10/maipyon.jpg)
カエレバ・ヨメレバを使っている方はこちらを参考にデザインカスタマイズをしてみてください!
WordPressカスタマイズのまとめ
ということで、使えそうなカスタマイズ集を紹介しました。
![maipyon](https://maipyon.net/programming/wp-content/uploads/2021/10/maipyon.jpg)
是非色々な記事を見てもらえると嬉しいです!
一部の記事ではfunction.phpをいじる部分もあるので、そこは自己責任でお願いします。
ブ ロ グ デ ザ イ ン に 凝 り す ぎ る の は ほ ど ほ ど に し ま し ょ う 。
こだわりが強いから仕方ないんです。でもまだまだ直せるところがあるんじゃないかと奮闘してしまう・・・。
また、当サイトで使っているツールについては以下の記事で紹介しています。
気になる方もいると思うので、是非読んでみてください!
なお、無料テーマでカスタマイズしまくるのはオススメしません。
多くの時間を無駄にしてきましたし、どうあがいても有料テーマには敵わないという事を実感しました。
実際に私は有料テーマに乗り換えてPVも上がったので、『【PV爆上げしました】WordPressの有料テーマおすすめ5つを比較』にて紹介している有料テーマがオススメです。
それでは色々なページを読んでカスタマイズを楽しんでくださいね!