【情報提供】初心者用ワードプレス学習し直しサイト

--更新日時（20240922）

どうも、＠サトユウです。

いつもながら、プロフィールはこちら🍃

今回の記事はワードプレスの使い方の基本的なコト。

私自身、システムエンジニアなのですが、思いっきりインフラエンジニアなのでフロントサイドの特にWEB系に携わることがほとんどなく（あってもネットワークやサーバ構築など全然WEBに関係ない）ので、ワードプレスはテーマにあるデフォルト設定でカスタマイズが手探りでできる程度。

そこでもう少しオリジナリティのあるサイトを作れないか初心者同様に調べている最中なので、そこで役に立った情報をご連携。

ワードプレスのCSSはデザインやレイアウトを制御する重要な部分ですなのですが、基本的に、ワードプレスのCSSは以下のような構成になっているようです。

1. テーマのスタイルシート

ワードプレスサイトの見た目は主にテーマによって決定されますれ、各テーマにはstyle.cssというスタイルシートが含まれており、このファイルがサイトの全体的なデザインを定義します。

このスタイルシートには、色、フォント、マージン、パディング、その他のスタイリング要素が含まれていますので、基本的には主テーマのスタイルシートのパラメータを変えれば色、フォントなどはかんたんに変更できます。

2. プラグインのCSS

これがやっかいで追加機能を提供するプラグインも独自のCSSを持っていることがあります。プラグインのCSSは、その機能に必要な特定のスタイルを追加します。

例えば、コンタクトフォームプラグイン（Contact Form 7）などは、フォームのフィールドやボタンのスタイルを設定する独自にスタイルシートとしてを持っているので、テーマのスタイルシートを変更するだけではダメで、プラグイン用のスタイルシートにも気を遣う必要がある。

3. ワードプレスのコアCSS

ワードプレスのコア自体もいくつかのCSSファイルを持っており、管理画面（ダッシュボード）のスタイルや標準的なブロック要素のスタイルなど、基本的なレイアウトと機能を提供します。

基本的にダッシュボードやワードプラスを構成するコア（製品そももの構成要素）なので、パラメータを変えることはありませし、製品のコア部分に手を入れると最悪再インストールになる気がするので触る必要はないです。

4. 子テーマのスタイルシート

カスタマイズや特定の調整が必要な場合、子テーマを使用して親テーマのスタイルを上書きすることができます。子テーマのstyle.cssは、親テーマのスタイルシートに追加、またはそれを完全に置き換えることができます。

5. カスタムCSS

ユーザーはカスタマイザーを通じてまたは特定のプラグインを使用して、独自のカスタムCSSを追加することができます。これにより、既存のスタイルを上書きしたり、新しいスタイルを追加したりすることが可能になります。

このように、ワードプレスのスタイルシートは複数の層から構成され（その他のＰＨＰファイルもそうですが）テーマ、プラグイン、ワードプレスのコア、そしてユーザー自身のカスタマイズが組み合わさって、最終的なサイトのデザインが形成されます。

とはいえ、専門家でもないし、そこまでスタイルシートのことばっかり考えていてはいつまでたってもサイトはできないので、いいとこどりできないかなって（ようするに知りたい部分だけ知りたい）思って使ったサイトがこちら。

２．囲み枠をスタイルシートで作りたかったらいいサイトに巡り合えた

例えば、

という画像ではありますが、枠に文字を枠に囲みたいなーって時に、いつもワードプレスのデフォルトに搭載されたテーブルか、ボタンくらいしか使っておらず、どうしても欲しい時には上の画像のように、わざわざ画像を作成してリンクを張るなどしていました。

ですが、これってすごく非効率なんじゃなかろうかとサイト巡回していたら、

というまさにやりたかったことがそのままどのスタイルシートを直せばいいのか、パラメータはどうすればいいのか紹介してくれていました。。（もしかして、当たり前なのかもしれないですが、知らないと意外に貴重な情報でした）

また、こちらのサイトではワードプレス全般にかんする小さいことからやれるように、色々なシチュエーションに合わせてワードプレスの利用方法を紹介してくれていたので、ご紹介してます。

なんだかんだ生成ＡＩなど最先端技術は進んでいるけれども、細部の細部はまだまだ自分でやらないといけない部分が沢山あるんでよね。

ワードプレスを使っている人からしたら当たり前の情報かもしれないけど、どこか同じような人の参考になったら嬉しく思います。

では、またね🍃