WordPressカスタマイズに役立つ記事13選【CSSをコピペするだけ】

「WordPressで運営しているブログを、もっと読みやすく、もっとおしゃれにカスタマイズしたい。でも、技術的なことはまだまだ初心者だから、簡単に実践できる方法を教えて欲しい。」

この記事ではこういった要望に答えます。

本記事の内容

  • WordPressのカスタマイズに役立つ厳選13記事
  • 他サイトのCSSをGoogleChromeで調べる方法
  • デザインは程々に【まずは記事執筆に集中】

ブログ運営に慣れてくると、「あのサイトみたいにもっとカスタマイズしたいなー」と、もっとブログを良くしようと誰しも思うでしょう。

しかし、カスタマイズにはHTMLとCSSなどの知識が必要になります。
カスタマイズしたくても、コードの文字列を見ただけで、尻込みしていた方がいたかもしれません。

そこでこの記事では、WordPressをカスタマイズするために、コピペで簡単に実践できる厳選記事を紹介します。

WordPressのカスタマイズに役立つ厳選13記事

カスタマイズに関する記事を解説しているサイトは以下の通りです。

  • サルワカ
  • コピぺっと
  • Webクリエイターボックス
  • LOPAN
  • Webliker
  • UX MILK
  • Nx World

このサイトの中から、厳選記事をピックアップして紹介します。

サルワカ

「サルワカ」は、Web制作やデザインツールを中心に紹介しているメディアです。
当サイトで使っているテーマ「SANGO」の開発元でもあります。

ユーザー目線が徹底されているので、専門的な内容だとしても情報が整理され、画像付きで手順が解説されています。

さらに、戦略的に運営されているので、運営方針からも学べることが多くあります。
noteの有料記事ですが「サルワカの収益、マネタイズ、SEO対策の考え方まとめ」を読んでみることをおすすめします。

コピペで実践できる厳選記事

厳選記事CSSで作る!押したくなるボタンデザイン100(Web用)
厳選記事CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
厳選記事【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30

こぴぺっと

「こぴぺっと」は、コピペで使えるコードを備忘録的にまとめているメディアです。
Webデザイナーに重宝される、ブックマーク必須の便利サイトでもあります。

記事内容の表現方法をカスタマイズをするにあたって、必要なコードは全て詰まっていると言っても過言ではないです。

使い方としては、公開しているコードをベースにして、自分好みのデザインに組み替えることをおすすめします。

コピペで実践できる参考記事

厳選記事コピペでできる!cssとhtmlのみで作る記事ブロック7選
厳選記事コピペでできる!CSSとhtmlだけできるちょいとシャレた見出し12選
厳選記事コピペでできる!cssとhtmlのみで作る記事などのニュースカード/ブログカード 7選

Webクリエイターボックス

「Webクリエイターボックス」は、Web関連の実践記事が豊富に公開されている個人ブログです。

ちなみに運営者のManaさんが去年発売した「1冊ですべて身につくHTML&CSSとWebデザイン入門講座」は今だに売れ続けている良書です。

コピペで実践できる参考記事

厳選記事CSSで見出し固定+レスポンシブ対応の表を作成
厳選記事【第3弾】少しのコードで実装可能な15のCSS小技集

LOPAN

「LOPAN」は、HTML・CSSのデザイン例を中心に紹介している個人ブログです。

運営者の木村さんは「プロとして恥ずかしくない 新・CSSデザインの大原則」を出版していたりします。

コピペで実践できる参考記事

厳選記事動くリンク下線
厳選記事マウスオーバーエフェクト

Webliker

「Webliker」は、サルワカと同様、Web制作系の記事を中心に紹介している個人ブログです。

豊富なコード例と画像付きで解説しているので、Web制作の学習にも役立ちます。

コピペで実践できる参考記事

厳選記事【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ

UX MILK

「UX MILK」は、UXクリエイターのために作られたメディアです。

海外の翻訳記事がメインなので翻訳記事にありがちな読みづらさはありますが、デザインのトレンドや動向を学ぶことができます。

コピペで実践できる参考記事

厳選記事HTMLとCSSのコピペですぐに実装できる見出しデザイン14選

Nx World

「Nx World」は、WordPressのカスタマイズを中心とした備忘録的なブログです。

Web制作における便利ツールや素材サイトなども数多く紹されています。

コピペで実践できる参考記事

厳選記事CSSで複数行に対応したアニメーション付きアンダーライン(下線)を実装する方法

ナオ

カスタマイズの参考になる厳選記事はこんな感じです。この記事を実践するだけで、ブログをおしゃれにカスタムできます。

他サイトのCSSをGoogleChromeで調べる方法

他サイトで参考にしたいデザインがあった時、GoogleChromeを使ってCSSを調べる方法があります。

方法としては、Chromeのデベロッパーツール(検証機能)を利用します。
手順は次の2ステップです。

調べたいデザインのあるページで右クリックをして「検証」を選択します。

「Elements」から調べたいデザインの要素を探します。要素を選択すると「Styles」にCSSが表示されます。(ここではh2のCSSを選択しています。)

他サイトがどのようなコードで書かれているのかをチェックすることは、デザインの幅が広げるために有益です。

デザインをそのままマネするのではなく、自分が運営するブログの世界観に合うようにカスタマイズすると良いかと思います。

ナオ

デザインのCSSをまるっきり把握することができるわけではないので、参考程度に留めておきましょう。

デザインは程々に【まずは記事執筆に集中】

デザインにこだわり始めて、カスタマイズに夢中になると、光の速度で時間が過ぎ去ります。

しかし、いくらデザインにこだわったからといって、直接的に実益を得られるわけではないですよね。

あくまでもブログ運営の本質は記事(コンテンツ)なので、デザインは程々に、ある程度のところでキリをつけるようにしましょう。

ナオ

もし有料テーマを利用しているなら、テーマ内のカスタマイズで十分に収益化できるので、まずは記事を積み上げることに集中した方が生産的だと思います。

というわけで以上です。