エアコン工事はエスキージャパン※注意としては、必ずテキストエディタでこのタグを入れてください。">

方法、手法

初心者には初心者の説明するCSSが判りやすい!これで今すぐにCSSが実行可能

初心者には初心者の説明するCSSが判りやすい!

 

 

 

 

 

 

WordPressで、ブログ記事を書いていてもなぜか様にならない

記事を投稿するも、他のブログと比較するとなんだか見劣りするような気がする。

 

きちんとしたブログ記事を見ると「見出し」のデザインがかっこいい

見出しをかっこよくするだけで、かなり見栄えがかわるはずって思います。

 

でも、このデザインに関するところをカスタムしようと思った時に必ずぶつかる壁が「CSS」です。

どうも「CSS」を活用すれば、かなりブログ記事の見栄えがよくなるところまでは分かるようになります。

でも、「CCS」を解説している方たちは詳しすぎて、初心者にはかえって判りにくい。

それは、初心者が判らないところが詳しい方には判らなくて、初心者にとっては重要なポイントの説明をすっ飛ばしているため、せっかく詳しく説明しているのに出だしでつまずいていて、その先の説明に手が出ないと思うんです。

 

今の私も初心者です。

初心者の私が、初心を忘れない間にWordPressでの記事内の見出しデザインをCSSで活用して、カスタムした方法を記事にしました。

 

CSSってなに

いやいや、こんなことはどうでもいいはず、とにかく初心者は、一応できればいいのです。

一応、実現できれば一つ目の大きな壁は乗り越えられると私は思っています。

 

 

 

 

 

 

記事の構成

まずは見出しデザインをカスタムするための手順を記載します。

その後、CSSの簡単な解説を初心者なりに記載します。

 

WordPressの見出しデザインをカスタムする方法。

 

「WordPressの管理画面」 - 「外観」 - 「カスタムCSS」

(CSSカスタマイズと間違わないように注意してください、なんて紛らわしいのか)

カスタムCSSを開くと、メモ帳のようなエディタっぽいものが立ち上がります。

ここに下記のタグをコピペしてください。

 

h3#danraku3{
padding: 0.4em 0.5em;
color: #494949;
background: #f4f4f4;
border-left: solid 5px #7db4e6;
border-bottom: solid 3px #d7d7d7;
}

 

次に、投稿記事内の見出しにしたい文字群を下記のタグで囲みます。

 

<h3 id=”danraku3″>エアコン工事はエスキージャパン</h3>

※注意としては、必ずテキストエディタでこのタグを入れてください。

変更の保存を行う。

以上、で作業は終了です。

さぁ、プレビューしてみて下にあるように表示されていれば大成功です。

 

エアコン工事はエスキージャパン

 

今回は、見出し3を使用しました

見出しは1~6までありますので、この手順で6個とも登録しておけばいいと思います。

タグ内の 3 の数字を変更すればOKですよ。

 

見出しデザインも世の中には豊富に提供されています。

参考までに見出しデザインを提供しているサイトのリンクを貼っておきます。

 

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

 

CSSの超簡単な説明

Webページを作成するのに最初は、HTMLしかありませんでした。

ですので、HTMLを駆使すれば、テキストをデザインすることも可能なのです。

後に、CSSが登場しました。

それからはHTMLの負担を減らし、役割分担をするようになりました。

デザインに関する部分はCSSにお任せしようとなったわけです。

 

HTMLタグで、CSSタグを見てくださいと指示します。

CSSでは、それを実現するタグがあり、それを表現しています。

 

ですので、CSSはHTMLと同じフォルダーにある必要があります。

初心者にありがちなのが、「WordPressの記事と同じフォルダーのCSSはどこなんだ?」だと思います。

別の部分にCSSタグがあっても読めませんので、思ったように表現できません。

 

詳しいCSSサイトにはこの部分は当然知っている者として説明はされていませんので、初心者は出だしでつまずいているかもしれないと思い記事にしました。

 

 

 

 

参考

WordPressの記事のテキストにはタグが無くても文字を表示していますが、本来は

で囲む必要がありますが、省略されています。

しかし、実際は

で囲まれています。

なので、カスタムCSS に下記のタグを追記すると、通常の文字の大きさや色などを変化さすことも可能です。

 

p{
background-color:black;
color:white;
font-size:27px;
}

 

 

 

ブログ記事を応援してくれる方はポチッっと下のボタンを押してね
人気ブログランキング
そして、この記事をツイッター投稿してくれるなら下のボタンを押してね

関連記事

  1. 方法、手法

    便利なGoogle検索方法(ヤフオクにも使えます。)

    Googleやyahooなどの検索サイトで、検索するときどのようにキー…

  2. 方法、手法

    あずき枕の作り方! 小豆(あずき)の不思議な効能を紹介します。

    あずきが水分を多く含む豆だから、加熱すると、その水分が温かい水蒸気とな…

  3. 方法、手法

    サイトマップを作成する方法 (PS Auto Sitemap)

    サイトマップの設置をしようと検索して、真っ先に登場するのが「Googl…

  4. 方法、手法

    アウトドアや非常時に炎を手に入れる方法

    火があれば、明かりを灯すことも出来ます。火があれば、調理することも出来…

  5. 方法、手法

    A4サイズを封筒にピッタリ収まるように、三つ折りにする方法

    申込用紙や手紙などは、A4サイズが主流です。それを、入れる封筒は、三つ…

  6. 方法、手法

    【ひとつの選択肢】これから犬や猫を飼いたいと検討している人たちへ

    もしも、漠然とペットショップに行こうと考えているなら、私から、もうひと…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

A language is translated.

笑える記事

役に立つ記事

気になる記事

スポンサードリンク

応援していただける方はポチッと!

  1. 方法、手法

    値引きなどにも使える交渉ノウハウ
  2. 考え方

    セミの人間と似ているところ
  3. 考え方

    ガス給湯器のエコジョーズはお得なのか?
  4. トレンド

    モンスト 「十二支再競争」順位予想
  5. 考え方

    温暖化で、北極や南極の氷が溶けて、海水面が上昇するなんてありえない
PAGE TOP