【コピペで実践】WordPressのカスタマイズに役立つブログと記事13選

「WordPressブログをオシャレにカスタマイズしたい。HTMLやCSSなどの技術的なことはまだまだ初心者だから、簡単に実践できる方法で教えて欲しい。」

ブログ運営をしていく過程で、こういった要望は誰しも持ちますよね。

そのため、この記事では、カスタマイズに役立つブログとコピペで実践できる参考記事を紹介します。

カスタマイズに役立つブログと記事13選

デザイン系ジャンルのブログの中でも、実践できるコードを紹介しているブログを中心にまとめてみました。

サルワカ

「サルワカ」は、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をChromeで調べる方法

カスタマイズの参考に、他ブログのCSSをChromeで調べる方法があります。

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

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

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

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

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

まずは記事執筆に集中した方が効率的

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

カスタマイズに夢中になると一瞬で時間が過ぎさります。

ユーザー視点に立ってデザインを整えることは大切ですが、直接的に実益を得られるわけではありません。

あくまでも実益に繋がるのはコンテンツなのであって、カスタマイズはある程度のところでキリをつけましょう。

というわけで以上です。