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

方法、手法

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

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

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

  2. 方法、手法

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

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

  3. 方法、手法

    アルミホイルの便利な利用方法

    アルミホイルって、料理以外にもいろいろ使えることがわかりました。ほんの…

  4. 方法、手法

    女性に好感の持たれる体臭を目指すための対策 

    最近では、「スメハラ」なんて言葉もあります。悪意はなくても、知らない間…

  5. 方法、手法

    へこんだ畳の修復方法

    準備するものは、「水の入った霧吹き」と「ドライヤー」のみです。まず、畳…

  6. 方法、手法

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

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




役に立つ記事

気になる記事

笑える記事

follow us in feedly
  1. 考え方

    洗濯機はカビの製造工場みたいなもの
  2. 方法、手法

    知的財産(特許)関連のリンク集
  3. 考え方

    タイムマネジメント(時間管理)とは
  4. 方法、手法

    文章の『、』は、どのタイミングで打てばいいのか
  5. 思い出

    『備忘録』 阪神・淡路大震災の記憶
PAGE TOP
%d人のブロガーが「いいね」をつけました。