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

方法、手法

初心者の説明する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;
}

 

 

 

follow us in feedly

ブログ記事を応援してくれる方はポチッっと下のボタンを押してね
人気ブログランキング

そして、この記事をツイッター投稿してくれるなら下のボタンを押してね

 

関連記事

  1. 方法、手法

    白湯が魔法の水と言われるのはなぜ?

    白湯は、たくさんの効能が期待できるため、まさに「魔法の水」のようですね…

  2. 方法、手法

    有線のネットワークしかない場合に、Wi-Fi機器をネット接続する方法

    今の時代になっても、Wi-Fi環境がなく、有線LANしかないビジネスホ…

  3. 方法、手法

    使い捨てカイロの作り方

    鉄が、塩水で錆びることは、なんとなく知っていると思いますが、その錆びる…

  4. 方法、手法

    AdSense サイト運営者向けポリシー違反レポート対応

    どうも、「ポリシー違反の疑いがあるページがあります」ってことらしいです…

  5. 方法、手法

    ジェットコースターだって怖くなくなるよ!恐怖の克服方法

    怖いと感じるのは脳脳の扁桃体が恐怖を感じると、人はからだのいろんなとこ…

  6. 方法、手法

    最近のクルマのフォグランプが黄色くない理由

    フォグランプを点灯させることにより、自分の存在を周りにアピールすること…

A language is translated.

笑える記事

役に立つ記事

気になる記事

スポンサードリンク

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

follow us in feedly
  1. 方法、手法

    ブレインストーミングと10個のチェックリスト
  2. 考え方

    ガス給湯器の交換を考える時期とは
  3. 考え方

    ハリウッド映画でありそうな惑星衝突が現実にあるかもしれない!
  4. 方法、手法

    数字当てゲームの説明書
  5. 考え方

    ルームエアコンは本当にクリーニングで綺麗になるのだろうか
PAGE TOP
%d人のブロガーが「いいね」をつけました。