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

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

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

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

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コードの2つがでてきました。

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

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

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

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

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

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

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

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

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

CSSやHTMLに詳しくない私でもできた「Simplicity2」のカスタマイズ』(外部サイト)

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

2つめ:1つの記事内で定義する。

またまた、『さるわか』さんの出番ですが、下記記事の『方法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>

さるわか

おすすめデザイン( HTMLとCSSの紹介 )

ちょっとしたデザインで参考になるサイトを列挙します

スポンサーリンク