「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さんが去年発売した「１冊ですべて身につく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のデベロッパーツール（検証機能）を利用します。
手順は次の２ステップです。
他サイトがどのようなコードで書かれているのかをチェックすることは、デザインの幅が広げるために有益です。
デザインをそのままマネするのではなく、自分が運営するブログの世界観に合うようにカスタマイズすると良いかと思います。
ナオ
デザインは程々に【まずは記事執筆に集中】
デザインにこだわり始めて、カスタマイズに夢中になると、光の速度で時間が過ぎ去ります。
しかし、いくらデザインにこだわったからといって、直接的に実益を得られるわけではないですよね。
あくまでもブログ運営の本質は記事（コンテンツ）なので、デザインは程々に、ある程度のところでキリをつけるようにしましょう。
ナオ
というわけで以上です。
