ワードプレス

ワードプレスのカスタマイズに役立つサイト3.5個

ワードプレスのカスタマイズをするようになると、調べないと分からないことが沢山あります。なんてったって、プログラミング?CSS?HTML?PHP?何も知らない状態からブログを始めた僕なので。。

ということで、今僕が頻繁に利用しているサイトをまとめて紹介する記事です。ちなみにこのブログはWordPressの公式テーマ「Twenty Twelve」をベースにカスタマイズしています。

以下のサイトは、ブックマーク・お気に入りしておくことを全力でおすすめします。

色の名前とカラーコードを参照できるサイト

CSSの中によく出てくるこの記述。

color: #7a8285;

「記事の見出しはブルーにしたいな」とか

「ブログタイトルの背景は少し薄いグレーかな」とか

その思いを反映させるために必要になるのがカラーコードです。

red #ff0000  /  yellow #ffff00  /  blue #0000ff

こんな感じで全ての色にカラーコードが割り当てられています。このサイトなら、求める色とそのカラーコードを簡単に探すことができます。

色の名前とカラーコードを参照できるサイト

HTMLとCSSの辞書になるサイト

このブログは基本的にはコピペさせてもらったコードばかりで構成されています。でも、オリジナリティを出すために、少しずつアレンジして今の形を作ってきました。

コピペで拝借してきたコードに手を加えるときに役に立つのがこのサイトです。コードの意味が分からない場合は適宜参照することにしています。

HTMLとCSSの辞書になるサイト

現在のウィンドウサイズが分かるサイト

サイトを閲覧しているデバイスのサイズに合わせて、レスポンシブに対応することが、Google先生の評価(SEO順位)を上げるためには必須になっているようです。

つまり、パソコンから見てる人にはパソコン用の画面、スマホから見てる人にはスマホ用の画面を、自動的に判別して表示する必要があるんです。

これをレスポンシブデザインと呼ぶとのこと。そのためにCSSをカスタマイズするのですが、うまくできたか確認したいときに役に立つのがこのサイト。

現在のウィンドウサイズが分かるサイト

ブラウザのウィンドウ幅を調節しながら、自分のサイトがレスポンシブに対応できるかを確認することができます。

レスポンシブデザインに対応させるとき、カスタマイズの過程でCSSが崩れてしまったとき、大活躍してくれました。

そのときにこのサイトも役に立ったので合わせて紹介しておきます。

iPhone/iPadの画面ピクセル数が分かるサイト

まとめ

インターネットの世界は親切な方が沢山いて、様々な情報を分かりやすくまとめてくれています。ぜひ利用してみて下さいね。