焼豚の海で溺れたい

俺はヤジブタ、45歳。色々なところに出歩くのが好き!早く痩せて人間に戻りたいよ〜

【スーパー初心者①】CSSをコピペするだけでは見出しはできない⁈ はてなブログでCSSに苦戦している仲間達へ

 こんにちは、ヤジブタです。ブヒッ!

はてなブログを始めて、

「そろそろ記事を装飾したいな」

「他のブログみたいに色々な見出しにしてみたいな」

と思ってたけど、うまくできないそこのあなた!私の仲間ですね^^;

頑張ってブログをカッコ良くしていきましょう!

 

 

どこにコピペするのか?それすらわからない

ネット上で見出しの作り方を検索すると、親切に教えているサイトがありますよね?

「CSSをコピペするだけでOK!」みたいなタイトルのページです。

そのサイトを見て、私もカッコ良い見出しを作ろうと頑張りましたが、正直いってよくわかりませんでした。

だって、「どこにコピペするのか?」それすらわからなかったですから。

若い人は読んだだけでスラスラできるかもしれませんが、40代半ばの私にはチンプンカンプン。

ブログを始めるまでは、ブログはWordのようなものだと想像していました。

Wordは仕事で使っているので、きっとすぐにできるだろうと。

でも、意外と細かいこともいちいち入力して設定しなきゃいけないんですよね。

私が理解するのに時間がかかったことを、掘り下げて説明したいと思います。

ここに寄ってくれた方のお役に立てれば嬉しいです!

 

そもそもHTMLとかCSSって、なんなんだ~と思いました。

HTMLは、「Hyper Text Markup Language」の略です。

簡単な文章を書くくらいのようなものです。

CSSは、 「Cascading Style Sheets」の略です。

書いた文章に色付けたり、見出しを作ったりなど華やかな装飾の部分です。

 

HTMLで文章を書くだけなら、はてなブログでそのままできると思います。

少し大きさ変えたり、色を付けたりはボタン押すだけなのでWord感覚でできます。

 

わからないのはCSSだと思います。

Wordでいうところの「Word Art」や「挿入」です。

見出しを作ったり、目次を作って下のページに飛んだり、四角い色のついた装飾にしたり。

自分でやってみるまでは、ボタンを押すだけで、それくらいのことはすぐにできるだろうと思っていました。

 

まずブログ初心者の方は、HTMLについてはサルワカさんのブログがとてもわかりやすく教えてくれているので、それを見て勉強してください。
saruwakakun.com

 私はサルワカさんのブログを見て、とても勉強になりました。

なので「今度はコピペするだけでできるだろう」と思いました。

でもできなかったんですよ、これが^^;
何が初心者の私にとって盲点だったのか?をここでは、それを補足して説明したいと思います!

 

コピペする場所は?

サルワカさんのブログで勉強しました。

何となくわかってきました。

あとは好きなデザインをコピペするだけ。

はい、できません。

 

私は、こんな流れでした。

 

まず、ネット上に「見出しはコピペするだけ」と説明しているサイトがありますが、どこに貼るんだ?ということに疑問を持ちます。

1つずつやっていきましょう!

f:id:hawaiira-men:20190413213038j:plain

「ダッシュボード」から「デザイン」をクリック。

f:id:hawaiira-men:20190413213124j:plain

 

 「工具」の絵をクリック。

f:id:hawaiira-men:20190413213126j:plain

「デザインCSS」をクリック。

 


f:id:hawaiira-men:20190413213218j:plain

「デザインCSS」のウィンドウが開きますので、ボックスの中のどこかをクリック。

 

f:id:hawaiira-men:20190413214042j:plain

さらにウィンドウが開きました。

左枠の数字「4」のところにコピペしてください!

 

f:id:hawaiira-men:20190413220630j:plain

ネットでコピペしてきたCSSを貼って完成!

と、思っていたら…。

(ここでCSSに「h3」と書かれているところも覚えておいてください)

 

見出しが反映されない⁈

やっとできたと思ったら、反映されていないんです。

 

何が間違っているんだ~?

 

☝こんな風にはてなブログのボタンを押して、字を大きくしてませんか?

てっきり私は、これが見出しになると思ったんです。

でも字が大きくなっただけのままです。

ではまた一つずつ。

 

私が勘違いしていた間違った例を踏まえながら説明しますね。

まず、一言だけ記事を書きます。

f:id:hawaiira-men:20190413221005j:plain

1、「見出し」と書きます。

2、文字を大きくするボタンを押します。

3、「中」をクリック。

文字が大きくなるから、これがそのまま見出しになると勘違いしていました。

f:id:hawaiira-men:20190413221007j:plain

では修正します。

「HTML編集」をクリック。

f:id:hawaiira-men:20190413221009j:plain

そうすると、こういう風に表示されます。

<p><span style="font-size: 150%;">見出し</span></P>

これを書き直します。

f:id:hawaiira-men:20190413221838j:plain

<h3>見出し</h3>に変更です。

先ほど出てきた「h3」です。

f:id:hawaiira-men:20190413221416j:plain

 

 「プレビュー」をクリックすると、見出しに反映されました!

 

ポイント

「編集」の画面では、見出しの装飾はされない。

できたかどうかは「プレビュー」で確認してください。

 

もうお分かりかもしれませんが、「h3」という名札を付けた簡単なプログラムをCSSという引き出しにしまっておいて、HTMLの画面で「h3」のプログラムを使うよ~と引き出しから出して表示したんです。

ふぅぅ、大変でしたよ。

おじさんはこれを理解するのに2日かかりました^^;

わからな過ぎて、ゲロはきそうでした。

これがわからなくてブログを辞めてく人いるんじゃないかな?俺だけかな?

 

 

 

 スマホ画面に見出しが反映されていない⁈

PC用では、見出しができているけど、スマホには見出しが反映されていないじゃないか⁈

これも苦戦しましたよ~。

では、やってみましょう。

f:id:hawaiira-men:20190421183208j:plain

 「ダッシュボード」から「デザイン」をクリックした後に、今度はスマホの絵をクリック。

f:id:hawaiira-men:20190421183220j:plain

①「ヘッダ」とクリック。

②ここをクリックして、先ほどのCSSをコピペする。

 

f:id:hawaiira-men:20190421184745j:plain

スマホ画面の確認をしたい時は、「プレビュー」の後に、「スマートフォン」をクリック。

そうするとスマホ画面の見出しを確認できました!

 

いやぁ、わかりずらいですよね?
私は、自動でスマホも変化してくれると勘違いしました。

「PC」と「スマホ」は別々に設定しないといけないんです。

ポイント

PCのCSSは「工具」の絵から設定

スマホのCSSは「スマホ」の絵から設定

よく言えば、PCとスマホで使いわけできるんですけど、初心者比率が高い「はてなブログ」としては非常にわかりずらいんじゃないでしょうか⁈

 

はてなブログでの見出は「h3」から

本やネットでは、

「h1」:大見出し

「h2」:中見出し

「h3」:小見出し

「h4」

「h5」

「h6」:h6まで設定できる

と書いてありますが、

 

はてなブログでは、設定が変なので、こんな感じです。
「h1」:ブログタイトルだから使わない
「h2」:スマホのブログ説明だから使わない
「h3」:中見出し
「h4」:小見出し
「h5」、「h6」:使わない・どっちでも良い
これくらいの方が、初心者には良さそうです。混乱してしまいます。

 

「h2」で入力した悪い例

f:id:hawaiira-men:20190417161750j:plain

 上で「h2」は使わない方が良いと書きました。

実際に設定すると、こうなってしまうという悪い例です。

 

私の失敗、「/* </system> */」は重要⁈

途中、何度コピペしてもできなくて消してる間に、下のタグも一緒に消してしまってたんです。

/* </system> */

/* <system section="background" selected="pixel-01"> */

 

これも重要なんでしょうか?

とりあえず消してしまった人は戻しましょう。

これについて、誰か教えてヘルプミー⁈

 

見出しができると一気に楽しくなりますね!

まだ、コピペできるようになっただけですけど^^;

あとは、どんな装飾にするかだけです。

少しでもお役に立てたなら嬉しいです!ブヒッ⁈