苦節4年‥私は「見出し」を覚えました。

どうも、taka :aです。

さっそく昨日は沢山の温かいコメントありがとうございます‥d(╥ω╥`)✧

びっくりしたww


突然ですが‥以前、HTML*1 やCSS*2 をイジるのが好き（かもしれない）‥などと【本館】で書きましたが、実際のところHTMLやCSSの知識が豊富なわけではありません。

ええ、漠然と “これを使って作業してる俺かっこいい” の状態です(。-`ω-)ｷﾘｯ

たまには自己満足も大切なんですよ？（※自意識過剰とは少し違います）

*1 はいぱーてきすとまーくあっぷらんげーじ（HyperText Markup Language）
*2 かすけーでぃんぐすたいるしーと（Cascading Style Sheets）

h2:first-letter {
color: #b30023;
font-size: 130%;
}

↑こんなヤツね。

Webページというヤツは、HTML（文書構造）とCSS（見栄え）を組み合わせることで成り立っています。

例えば上記の場合‥

「h2:first-letter」：見出し2の最初の文字

「color: #b30023;」：文字の色

「font-size: 130%;」：文字の大きさを指定

これをFC2の場合、「管理画面」→「テンプレートの設定」→「スタイルシート編集」で打ち込むと、見出しの一文字目が変わるんですけれども‥

見出しって何？

↑これですね（笑）

【本館】では「目次」を作成するために「見出し」を使っているのですが‥なんと、FC2の記事でも使えたんですよ「見出し」が(๑°⌓°๑) びっくりですよねぇ‥いろんな意味で

いや、今までFC2を使用しているブログ仲間がですね、それっぽいのを使ってるのは見てたんですけどね‥WordPressを立ち上げた時、よしページをデザインするぞ！と意気込んでいたら「h1」だの「h2」だのという単語が出てきて「これ何やねん！w」などと某所で梅酒を飲みつつ朝方まで “勉強しながら” 作業を進めていたのですが（よくもまぁ我ながら実質3日で仕上げたもんだと‥）、その時に「h1」が “見出しを意味している” ことを知りました。で、調べてみたら‥おい、FC2でも使えるじゃねぇかw と。4年もFC2で記事を書いておきながら、自分のブログでも可能だったことを知った衝撃の朝（2018年5月13日9時頃）

以前、ブログ仲間のmarimoちゃん（＠あさ5時に、ちょっとだけ）に、「ブログで最初の文字だけ色を変えたいんやけど‥」と相談したら、「これをスタイルシートに貼ったら変わるよ〜」とタグを送ってきてくれたんですよね。

ええ、言われるがままにコピーしてペーストですよw

そういえば「h1」は何ちゃらだからtaka :aさんの場合「h2」か「h3」に書き換えてねー、みたいなことを言われた気もするけど‥わかったー、書き換えてみr‥あ、変わった変わった！ ←つまり意味は分かっていなかった‥(-∀-`; )

とりあえず貼ってみよう

h2 {
border-bottom: solid 3px #e0e0e0;
position: relative;
}
h2:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 6px #ff99ab;
bottom: -3px;
width: 17%;
}

h2:first-letter {
color: #b30023;
font-size: 130%;
}

↑上記のコードをスタイルシートに貼って更新

次に記事の新規投稿画面で

<h2>★</h2>

↑このタグを入力し、「★」に見出しで表示させたい文字を入力すると‥

こうなります

「border-bottom: solid」の「px」を変えると線の太さが変わり（数字を増やすと太くなる）、色コード*（「#e0e0e0;」など）を変更すると線の色が変わります。

*「カラーコード 一覧」などで検索してください

2箇所ありますが、「border-bottom: solid 3px #e0e0e0;」こっちは右側の線、「border-bottom: solid 6px #ff99ab;」こっちが左側の線ですね。

「width: 17%;」のパーセンテージを増やすと線の長さが変わり、「bottom: -3px;」を触ると線を上下させられます。

ただし、これを入力してしまうと “ブログなどのページを構成する上で最初から「h2」指定されている箇所（記事の表題やカテゴリーなど）” も丸ごと変わる恐れがあるのと（まぁ統一は出ますけどね）、他にも万が一に備えて “スタイルシートを複製して試す” ことをオススメします。

こんなことを書くつもりではなかった

ええ、こんなことを書くつもりではありませんでしたw

なんか面白い検索ワードで【本館】に辿り着いた人がいらっしゃったので、本当は「【本館】の裏話」をサクッと更新する予定だったんですけど‥

なんでこうなったし(°A°`) ※知りません

はぁ‥なんか疲れた( ´-ω-)（勝手に更新して愚痴るな）

さて、ちょっくら用事を済ませてから【本館】の “下書きを” 始めますかね‥w

あ、そうそう‥今日は「母の日」ですよ皆さん(; ･`д･´) ←

【本館】本日の一杯 -Cupmen review blog-

Update notification：Facebook / Twitter / Instagram
e-mail：[e-mail]
© Posted by taka :a

こちら【別館】のコメント欄では、個人様への返信を自粛しております。ご了承ください‥