カテゴリ一覧から記事を探す

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

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

読者の悩み

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

こんな悩みに答える記事になっています。

ありがたいことに、色々なカスタマイズ記事が多くの人に読んでもらえています。
その中で、カスタマイズ方法を一覧にまとめないと探しにくいなぁ・・・ということを感じてきました。

私が使用したテーマはStinger8SANGOの2つ。

どちらでも多くのカスタマイズをしてきて、沢山のカスタマイズノウハウが溜まりました。
やっぱカスタマイズ楽しーーー!

そこで、様々なカスタマイズを一気に紹介したいと思います!

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

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

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

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

テーマによっては(手順通りやっているのに)うまくいかなかったり、人為的なミスでおかしくなってしまったり、テーマのアップデートでデザインが崩れてしまったり・・・。
特に、テーマのアップデートでデザインが崩れるのは自己解決以外の方法はないので、カスタマイズ前に把握しておいていただけますと幸いです。
カスタマイズに不慣れで、これから始める人はぜひご一読ください。
カスタマイズ方法についても、特定のテーマ専用のカスタマイズが含まれるので、タイトル部分にご注意ください!

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

  • WordPressのカスタマイズ
    おそらく、どのテーマでも使えます。
  • Rinkerのカスタマイズ
    Rinker使用者はぜひ。
  • SANGOのカスタマイズ
    テーマ「SANGO」でのカスタマイズをおすすめします。
  • Stinger8のカスタマイズ
    テーマ「Stinger8」でのカスタマイズをおすすめします。

maipyon

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

WordPressのカスタマイズ rabbit_icon

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

【プラグインなし】WordPressの目次の作り方を解説【コピペで簡単】
  • 必須度 carrotcarrotcarrotcarrotcarrot 絶対目次は必要!
  • 難易度 carrotcarrotcarrotcarrot_graycarrot_gray 普通にできると思う
  • 便利度 carrotcarrotcarrotcarrotcarrot_gray 読者にとって便利!

maipyon

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

WordPressのカスタマイズ rabbit_icon

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

【WordPress】タイトルを画像に変更しておしゃれなデザインにする方法
  • 必須度 carrotcarrotcarrotcarrotcarrot ブログタイトルを覚えてもらうためにも必須!
  • 難易度 carrotcarrotcarrotcarrotcarrot_gray 画像の作成がめんどくさいかも・・・。
  • オリジナル度 carrotcarrotcarrotcarrotcarrot ブログテーマに合わせたものにすると◎
完成品

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

maipyon

ブログのタイトルは「ブログの顔」とも言える場所。いい画像を描けるかと言われるとNOなので、私はココナラでお安くたのみました!おしゃれなサイトを目指すなら絶対やっておこう!

WordPressのカスタマイズ rabbit_icon

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

CSSコピペで完了!「あわせて読みたい」リンクをWordPressで設置しよう!
  • 必須度 carrotcarrotcarrotcarrot_graycarrot_gray おしゃれなリンクは何かしら欲しい
  • 難易度 carrotcarrot_graycarrot_graycarrot_graycarrot_gray コピペで楽勝!初心者でもOK!
  • よく見る度 carrotcarrotcarrotcarrotcarrot_gray 割と多くのブログで見かけます

maipyon

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

WordPressのカスタマイズ rabbit_icon

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

【WordPress】プラグインなしでブログカードを作る方法【コピペで完成】
  • 必須度 carrotcarrotcarrotcarrotcarrot_gray よりシンプルでおしゃれなリンクはこれ
  • 難易度 carrotcarrotcarrotcarrot_graycarrot_gray いじるファイルがいつもと違うのが怖いかも
  • 便利度 carrotcarrotcarrotcarrotcarrot コードで楽々作成できるリンクなので超便利
完成品(本物)

maipyon

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

WordPressのカスタマイズ rabbit_icon

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

WordPressのフォントを変更する方法【プラグインなし】
  • 必須度 carrotcarrot_graycarrot_graycarrot_graycarrot_gray 文字さえもかわいくしたいという人におすすめ
  • 難易度 carrotcarrotcarrotcarrotcarrot_gray ちょっと特殊なことをするのでめんどいかも
  • オリジナル度 carrotcarrotcarrotcarrotcarrot 他にはないかわいいサイトに仕上げれる!

maipyon

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

WordPressのカスタマイズ rabbit_icon

ファビコンを設定してみる

WordPressのブログでファビコンやアイコンを画像一枚で設定する方法
  • 必須度 carrotcarrotcarrotcarrotcarrot ファビコンは実はSEO的にも必須だったり
  • 難易度 carrotcarrotcarrotcarrot_graycarrot_gray 画像の用意がめんどくさいかもしれません
  • おしゃれ度 carrotcarrotcarrotcarrotcarrot 私は意外とファビコン見ますよー!(笑)

maipyon

ファビコンは、chromeのタブとかにある正方形のアイコンのこと。みんなつけてるけど、ブログを始めたばかりの人は見落としているかもしれないので、これを機に設定してみて欲しい!

WordPressのカスタマイズ rabbit_icon

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

【コピペでOK】期間によって内容を変えるキャンペーン中ショートコード【WordPress】
  • 必須度 carrotcarrotcarrotcarrot_graycarrot_gray これだけで収益UPに繋がります
  • 難易度 carrotcarrotcarrotcarrot_graycarrot_gray コピペするだけで終わります!
  • 便利度 carrotcarrotcarrotcarrotcarrot 頻繁に更新しなくてもよくなる

maipyon

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

WordPressのカスタマイズ rabbit_icon

隠すボタンを作ってみる

CSSコピペでOK!クリックで要素の表示・非表示を切り替えるボタンを作る方法
  • 必須度 carrotcarrotcarrotcarrot_graycarrot_gray 時々使いどころが出てくる
  • 難易度 carrotcarrotcarrot_graycarrot_graycarrot_gray 記事内にコピペで即終了!
  • 便利度 carrotcarrotcarrotcarrotcarrot 話が長くなっちゃうときに便利

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

maipyon

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

WordPressのカスタマイズ rabbit_icon

便利なグラフを作る

【プラグインなし】WordPressへグラフを挿入する方法を解説!【Chart.js】
  • 必須度 carrotcarrotcarrot_graycarrot_graycarrot_gray 収益とかPVとか出す人はオススメです
  • 難易度 carrotcarrotcarrotcarrotcarrot_gray ちょっと難しい部分があるかも・・・
  • 便利度 carrotcarrotcarrotcarrotcarrot_gray グラフに動きがでて画像よりも良い

maipyon

ブロガーなら、絶対PVやら収益のグラフを載せてる記事が1記事はあるよね。ぜひ記事に飛んで実際のグラフを見て欲しい!重くなる(ちょこっと)のはそのページだけだし、折れ線グラフとか折れ線+棒グラフも可能なので、是非試してみて欲しい!

WordPressのカスタマイズ rabbit_icon

カテゴリーページを充実させる

WordPressでカテゴリーページに説明文・子カテゴリへのリンクを表示する方法
  • 必須度 carrotcarrotcarrotcarrotcarrot_gray カテゴリーページの充実はPV上昇に◎
  • 難易度 carrotcarrotcarrotcarrotcarrot_gray 書き込む場所が難しいかもしれません
  • オススメ度 carrotcarrotcarrotcarrotcarrot 人によってはPV上昇すると思います!

maipyon

カテゴリーページ、カスタマイズしてますか?意外とPVがあるカテゴリーページに一工夫加えて、読者により分かりやすい かつ 見てもらえるページを作りましょう!

WordPressのカスタマイズ rabbit_icon

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

チェックボックスをCSSで装飾してWordPress記事内で使おう【コピペでOK】
  • 必須度 carrotcarrot_graycarrot_graycarrot_graycarrot_gray 必要な人は少ないと思います・・・。
  • 難易度 carrotcarrotcarrot_graycarrot_graycarrot_gray 記事内に追加するだけ!簡単作成!
  • 使える度 carrotcarrotcarrotcarrotcarrot_gray 使いこなせると面白いサイトになりそう
完成品(画像)

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

maipyon

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

WordPressのカスタマイズ rabbit_icon

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

【CSSだけで】サイドバーをスクロール追従させる方法【position:sticky】
  • 必須度 carrotcarrotcarrotcarrotcarrot PV上昇にもつながるはず!
  • 難易度 carrotcarrotcarrotcarrotcarrot 簡単に終わる人もいるかも
  • 便利度 carrotcarrotcarrotcarrot_graycarrot_gray 空白よりは断然マシ!

maipyon

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

WordPressのカスタマイズ rabbit_icon

色々な囲み枠を追加する

CSSコピペするだけ!ボックスデザイン(囲み枠)25選【色別サンプル62種】
  • 必須度 carrotcarrotcarrotcarrotcarrot 見やすいブログの第一歩!
  • 難易度 carrotcarrot_graycarrot_graycarrot_graycarrot_gray コピペで楽々即終了~!
  • おしゃれ度 carrotcarrotcarrotcarrotcarrot 良い囲み枠が見つかるはず!

maipyon

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

WordPressのカスタマイズ rabbit_icon

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

CSSコピペするだけ!今すぐ使える見出しデザイン例21選【色別サンプル44種】
  • 必須度 carrotcarrotcarrotcarrotcarrot カスタマイズするならまずはここ!
  • 難易度 carrotcarrot_graycarrot_graycarrot_graycarrot_gray コピペで楽々即終了~!
  • おしゃれ度 carrotcarrotcarrotcarrotcarrot 変わった物もあるので見て欲しい

maipyon

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

WordPressのカスタマイズ rabbit_icon

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

CSSコピペするだけ!吹き出しデザイン14選【色別サンプル19種】
  • 必須度 carrotcarrotcarrotcarrot_graycarrot_gray 吹き出しを使ってないなら必須
  • 難易度 carrotcarrot_graycarrot_graycarrot_graycarrot_gray こちらもコピペで即終了~
  • おしゃれ度 carrotcarrotcarrotcarrotcarrot_gray 良い吹き出しが見つかるはず!

maipyon

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

Rinkerのカスタマイズ rabbit_icon

Rinkerをおしゃれにしてみる

CSSコピペでOK!Rinker(リンカー)のデザインをカスタマイズしよう!
  • 必須度 carrotcarrotcarrotcarrotcarrot 収益に直接かかわる部分!
  • 難易度 carrotcarrotcarrot_graycarrot_graycarrot_gray Rinkerを使っていれば一瞬!
  • おしゃれ度 carrotcarrotcarrotcarrotcarrot_gray レスポンシブですっきりなデザイン
完成品(実物)

maipyon

Rinkerを使っている人は、ぜひデザインをカスタマイズして使ってみて欲しいと思います!コピペで即終了するので、まだやっていない方はぜひ。カエレバ・ヨメレバでも同じ感じのデザインカスタマイズを紹介しています。

SANGOのカスタマイズ rabbit_icon

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

【SANGO】誰でも簡単におしゃれなサイトマップを作る方法
  • 必須度 carrotcarrotcarrotcarrotcarrot 綺麗なサイトマップでPV上昇
  • 難易度 carrotcarrotcarrot_graycarrot_graycarrot_gray SANGOなら楽々簡単!
  • 便利度 carrotcarrotcarrotcarrotcarrot_gray プラグインなしで作れるよ

maipyon

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

SANGOのカスタマイズ rabbit_icon

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

【SANGO】フッターにロゴを入れる&デザイン変更カスタマイズ!
  • 必須度 carrotcarrotcarrotcarrot_graycarrot_gray おしゃれにするならやっておきたい
  • 難易度 carrotcarrotcarrot_graycarrot_graycarrot_gray 画像を用意するだけなので楽々簡単
  • オリジナル度 carrotcarrotcarrotcarrotcarrot_gray できればここも統一させたいですね!
完成品の画像

SANGOフッター

maipyon

SANGOのフッターは、最初は「HOME」って書かれているんですよね。それをロゴにすることでおしゃれにしちゃおう!っていう記事です。フッター見る人ってどれくらいいるのかなぁ・・・。

SANGOのカスタマイズ rabbit_icon

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

【SANGO】ブログの回遊率を改善!カテゴリ別人気記事&デザイン変更
  • 必須度 carrotcarrotcarrotcarrotcarrot_gray 回遊率もあがるカスタマイズ
  • 難易度 carrotcarrotcarrotcarrotcarrot_gray やること多めかもしれません
  • かわいい度 carrotcarrotcarrotcarrotcarrot_gray かわいい度ってなんやねん
完成品の画像

カテゴリー別人気記事

maipyon

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

Stinger8のカスタマイズ rabbit_icon

関連記事を2列にしてみる

【コピペでOK】WordPressの関連記事を2列以上でタイル状に表示する方法
  • 必須度 carrotcarrotcarrotcarrot_graycarrot_gray 見やすくなるので、おすすめ
  • 難易度 carrotcarrotcarrotcarrotcarrot_gray やること多めです・・・。
  • 便利度 carrotcarrotcarrotcarrotcarrot_gray 関連記事は読者がよく見る重要部分

maipyon

Stinger8限定っぽくはなるのですが、関連記事を2列で表示させる方法を紹介しています。1画面に多くのリンクがあることでPVアップが狙えそう・・・とおもってやってみたカスタマイズでした。

WordPressカスタマイズのまとめ

ブログのデザインにこだわりすぎて画像が多くなってサイトが重くなる時もありますのでご注意を!
サイトの速度はSEO的にも重要です。

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

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

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

デザインについてもっと知りたいなら、以下の本もオススメです。
Webデザインの変更理由って、最終的に「儲けたい」とか「PV上昇につなげたい」に繋がっていると思っていて、それなら最初から稼げるようなサイトデザイン学んだ方がよくない?という感じで読んでもらえればと思います。