苦節4年‥私は「見出し」を覚えました。 - スポンサー広告ブログのこと

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

苦節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

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


にほんブログ村 その他日記ブログ 雑感へ

Update notification:Facebook / Twitter / Instagram
e-mail:honjitsunoippai@yahoo.co.jp
© Posted by taka :a

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

- 15 Comments

バカワイン  

そうそう。
FC2の可能性を侮るでない。
でも、使ったからといって、アクセスに大きく影響する訳じゃないけどね。
でも、見映えも読みやすさも、格段に違うんだし、利用した方が良いよね。
勉強おつかれっ!

2018/05/13 (Sun) 18:33 | REPLY |   

ビー玉  

あはは・・見出しを覚えたんだね!おめでとう♪
ずっと、何か拘りがあって使ってないのかなぁ・・って思ってたよ(゚д゚)!
デザインに強いこだわりがあるって思ってたし、見出し作った方がいいよ・・って言った時も実はドキドキだったんだよね( ̄▽ ̄;) 某所梅酒所有者の裏話でしたぁww 私の梅酒が~~~(ノД`)・゜・。

2018/05/13 (Sun) 18:34 | REPLY |   

かーと  

takaさん、こんばんは!

自分はもともとブログの前にウェブサイトを手書きで始めてるので、
スタイルシートやhtmlはあらかじめずいぶんと勉強しましたね!

特にスタイルシートは慣れてくると非常に便利に使えますし!

というか、知らないと手書きでウェブサイトは作れないですしね(;゚ω゚)

fontタグを多用する人もいますが、あれは完全に非効率ですし;

今はもうSNSだけでウェブ活動するならそういう知識は不要ですし、
ブログに関しても既存のスキンを使うだけなら知らなくても大丈夫なだけに、
あえてそのあたりまで勉強する人は減ってきてるのでしょうね!

ではでは、おじゃまいたしました!(゚x/)

2018/05/13 (Sun) 18:37 | EDIT | REPLY |   

あるふぃーる  

見出し!

こっそり楽しみにしております裏話…

わたしも、見出し全く触っておらず…
fc2ってけっこうできますよねー

デザインセンス無いのでできる方憧れです…

2018/05/13 (Sun) 19:40 | REPLY |   

鳥天国  

見出しが必要になるほど文書いてない・・・
原稿用紙半分くらい?

2018/05/13 (Sun) 20:00 | EDIT | REPLY |   

天照 貴之〈Takayuki_ama〉  

No title

HTML、カスケードスタイルシート、JAVAいろんな手法がありますが、以下3つが一番重要だそうです。
・ライティング
・マーケティング
・ブランディング
そこに人間力があれば最強でしょうー。

2018/05/13 (Sun) 20:40 | REPLY |   

ash  

No title

趣味の欄に「WordPress」が増えてる~!!takaさまに合ってたのね!羨ましいわ!新ブログ頑張ってね!応援してます。

2018/05/13 (Sun) 21:21 | REPLY |   

猫山風太郎  

お、なんか別館に変わってる(*´ω`*)
雑記一回目がなんか専門的で、若干らしくない感がw
CSS難しいですよねー。自分も良く分からず適当にやってる(≧ω≦)b

2018/05/13 (Sun) 22:07 | REPLY |   

風のましゅー。  

( ̄。 ̄)ホーーォ

随分たってからわかるって事ありますよね。(((uдu*)ゥンゥン
それが大切な事でも、最終的に理解出来たら問題ないと思うんだ。

…いや。こんなこと書きたかったんじゃないんだが。(笑)

2018/05/13 (Sun) 23:21 | REPLY |   

pope  

なんのこっちゃかさっぱり・・・なんとな~くは超危険だから・・・
ハード専門の(アナログの)元技術屋には理解不可能です!

2018/05/14 (Mon) 03:44 | REPLY |   

まこといろ  

おーー、なんかどんどんバージョンアップしていくのねtakaさん。雑記書けるところがあると、なんか気も楽になったりしない?しかもfc2ってなんか気楽さがあって、私は好きだなー

2018/05/14 (Mon) 11:48 | REPLY |   

marimo  

おお~~~
こんなところでリンクしてもらえるなんて( ´艸`)

あい、私も「ええ、漠然と “これを使って作業してる俺かっこいい” の状態です(。-`ω-)キリッ」の人(笑)

でも、他の人のHPの裏ソースを見て会話するの好きなんだよね~~~^^
暗い子ではないと思う、、独り言もそんなに出てないと思う、、、
でも、あの英字の羅列よ読むの、好きなの♪

2018/05/14 (Mon) 12:37 | REPLY |   

NickNick  

おー、私もh2タグ、ちょっといじってみようかなぁ。。。
楽しいよね。でもあっという間に時間が経つ、、、

そういえば、ビールごめんねー。
いつか当たったらtaka :aさんにあげる、って言ってたのに
忘れ果ててた。セブンイレブンじゃないコンビニで、
ちゃんとしたビールが当たったら、次こそtaka :aさんにあげる!

2018/05/14 (Mon) 15:14 | REPLY |   

たまぞう  

おつかれさまv

がんばれー^^
ついでに画像や背景も自分で作るときっともっと楽しいデスヨ♪

2018/05/14 (Mon) 21:31 | EDIT | REPLY |   

スヤスヤ  

かすけーでぃんぐ…

最新記事に書こうと思ったけど
こちらの記事も気になったのでこちらにコメント!(見てるかな?)

雑記ブログ、おめでとうございます(*´˘`*)♡
カップ麺より実は前の雑記のファンだったのでとても嬉しい♪
(本記事に失礼だぞ!(笑))

スタイルシートは知ってたけど、かすけーでぃんぐ…っていうのね(;´Д`)
HTMLは昔、ブログが無かった頃、サイトを作った時かじったなぁ…
(本当にかじっただけ(笑))
こっちのブログは自由だろうから色々楽しみです(*´ε`*)チュッ♡

2018/05/17 (Thu) 09:08 | REPLY |   

Post a comment

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。