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

方法、手法

初心者には初心者の説明する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. 方法、手法

    ファックスをメールで受信する方法

    通常ファックスは、ファックス機器でしか受信できないため、大事なファック…

  2. 方法、手法

    ICAD/SX オペレーション(使い方)応用編

    基本操作ガイド編は、マニュアルのように見ていただくような構成にしました…

  3. 方法、手法

    「知らなかった」では許されない交通ルール。自転車だって例外じゃぁない!

    Z警官は、「まぁいいっか」と見逃すが、几帳面なF警官は、「アウト!」っ…

  4. 方法、手法

    怒りの気持ちと上手に付き合う方法

    どうやって、伝えればいいのか伝える時には、「私(俺)」を主語にして話す…

  5. 方法、手法

    耳掃除をしないほうが良いのは本当なのか?

    Q-tips社からのアドバイス自社の綿棒を使用する方法として、耳の中に…

  6. 方法、手法

    Twitter(ツイッター)のユーザー名を変更したらどうなるのか?

    ユーザー名を変更しても、問題ない。ツイッターも、このあたりは考慮してい…

コメント

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

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

A language is translated.

笑える記事

役に立つ記事

気になる記事

スポンサードリンク

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

  1. 思い出

    片付け上手な人がうらやましい。
  2. 方法、手法

    神輿(みこし)の担ぎ方
  3. トレンド

    【朗報】iPhone SE 再び 片手で操作しやすい4インチは継続される!
  4. トレンド

    金太郎のおはなしって、知っていますか?
  5. 方法、手法

    咳止めシロップの自作方法
PAGE TOP