wordpressでHTMLとCSS【俺のサイト】テーマ「simplicity」

下記行き詰っている人のために情報整理し、simplicityの見た目を変えていくヒントを共有しています。

“<a>～</a>”の通常の段落の説明はわかったけど、 wordpressの『カスタムHTML』使って記述したリンク（”<a href=xx>xx</a>”）の装飾をしたい。よくわからないから調査した結果になります。

HTMLとCSSの紹介で、よさげなサイトってある？
HTMLとCSSの紹介はあるけど、CSSの定義する場所はどこ？
simplicityを使ってるんだけど？

HTMLとCSSの紹介で、よさげなサイトってある？
おすすめデザイン（ HTMLとCSSの紹介）

HTMLとCSSの紹介で、よさげなサイトってある？

『さるわか』：【CSS】文字装飾の基本を総まとめ！初心者向けに解説

下記説明があるので、HTMLとCSSの定義の仕方がわかりやすいです。

基本的なやり方をここで学ぶべし。

後で説明する用語として『HTMLコード』『CSSコード』を覚えておきます。

文字の基本設定と装飾
CSSの文字設定【応用編】
文字の位置を変える（中央・右寄せ）
一部の文字だけ設定を変える

学べるサンプル(HTMLコード)：”<p>サンプルの文</p>”のカスタマイズ

『さるわか』：HTMLのリンク＜aタグ＞の書き方を初心者向けに解説

aタグでリンクを作る方法を学ぶべし（”<a href=xx>xx</a>”）

リンク”a href”について、ちょっとだけ理解しよう。（ここは何となく）

後で説明する用語として『HTMLコード』『CSSコード』を覚えておきます。

見て億ポイントは下記。

『【参考】特定のリンクのデザインのみ変えるには？』

補足：HTMLコードとCSSコード

ここで、一旦補足説明。ここまでで、HTMLコードとCSSコードの２つがでてきました。

wordpressでは、カスタムHTMLが、見出しやリストのメニューと並んで選ぶことができます。

カスタムHTMLに、今まで出てきた『HTMLコード』に該当する記載をします。（ASPを利用していたりして、コードを張り付ける際にも、『HTMLコード』を使うことがあると思います。）

で、CSSコードはどこに？？となりました。

やり方は２つあります。それを次から説明します

１つめ：Simplicityのテーマ設定にあるCSSに追記する

①wordpressの『外観』→『テーマエディター』を選択

②『Simplicity2 child: スタイルシート (style.css)』の編集となるように、「編集するテーマの選択」で『 Simplicity2 child 』を選びます。

③『選択したファイルの内容: 』にCSSを記載します。

イメージは、下記外部サイトを参照

『CSSやHTMLに詳しくない私でもできた「Simplicity２」のカスタマイズ』（外部サイト）

※注意点：CSSの設定には、クラスとしての言葉を定義する必要があります。この辺は、後述するおすすめデザイン（ HTMLとCSSの紹介）を見てください。

２つめ：１つの記事内で定義する。

またまた、『さるわか』さんの出番ですが、下記記事の『方法3：インライン（HTMLタグの中にCSSを書く）』が該当します。

『さるわか』：CSSはどこに書く？外部CSSファイルの読み込み方＆インラインでの書き方

内容の抜粋は、下記の通り、styleをつかって、タグの中に一緒に宣言しちゃう方法です。サンプルの太字部分になります。

タグの中にCSSを書くときは、<タグ名 style="CSSをここに書く">という形になります。このstyle=""はstyle属性と呼ばれます。

<h1 style=”color: orange; border-bottom: solid 2px black”>例文見出し</h1> <p style=”color: orange”>これは例文です</p>

さるわか