エアコン工事はエスキージャパン※注意としては、必ずテキストエディタでこのタグを入れてください。"> 初心者の説明するCSSが判りやすい!これでCSSが実行可能 | 合同会社エスキージャパン

方法、手法

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

    携帯電話が圏外になったら15cm移動してみて

    街中で携帯電話が圏外になったら、1歩踏み出して移動してみる。街中で携帯…

  3. 方法、手法

    しゃっくりを止める方法

    4.飲み物を口に含んだ状態で10秒カウント5.カウント終了後、吸いとっ…

  4. 方法、手法

    画像で画像を検索する方法

    私はふだんあまりテレビを見ることが少ないのでもしかするとメジャーなのか…

  5. 方法、手法

    Excelで、ひたすら数値を入力する作業にはこれを設定すべき

    単純な作業だったとしても、創意工夫を怠ってはいけません。このように設定…

  6. 方法、手法

    ブログに全国の天気予報を貼り付ける方法

    ブログに天気予報を貼り付ける目的は、ユーザビリティの向上が目的だと思い…




役に立つ記事

気になる記事

笑える記事

follow us in feedly
  1. 思い出

    『備忘録』 阪神・淡路大震災の記憶
  2. 方法、手法

    車のオイル交換は上抜きと下抜きではどちらが良いのか?
  3. 考え方

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

    『適量のお酒は健康に良い』は嘘
  5. メモ

    大雪警報は全国統一なのでしょうか?
PAGE TOP
%d人のブロガーが「いいね」をつけました。