梟茶房(ふくろうさぼう)

男性向け衣食住の役立ち情報ブログ。累計30万PV突破。

【ブログ】はてなブログでタグ(見出し)をつける簡単なやり方を紹介するよ

 ブログ開始以来かたくなにタグを使わなかった博士の心境に変化があった模様。f:id:owl296380:20180417222536j:plain

 

 

タイトル見出しとはなにか?

 

●↑こういうやつ。
〇説明が雑!
●見た目がいいのもそうなんだけどブログの検索時に有利に働く。
 詳しくは「SEO対策」でググろう。
〇だから説明が雑!
●まぁ意味はわからなくてもデザイン的にカッコいいでもいい。
 これが少し面倒だったので知らない人向けに。

 

デザインを選ぼう

 

●このサイトから欲しいデザインを選ぼう。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選


〇わぁ68種類もあって悩むなぁ。
 ってオイ!
●『銀魂』風?
 まぁ選んだら灰色四角で囲まれた部分をコピーしておこう。

f:id:owl296380:20180417222857j:plain

 

はてなブログのデザイン設定

 

●そうしたら「アカウント設定」→「デザイン」を選ぶ。

f:id:owl296380:20180417222658j:plain

●「デザインCSS」の下の白い四角を押す。

f:id:owl296380:20180417222642j:plain

●すると既にこんな文章が入っているはず。

/* <system section="theme" selected="report"> */
@import "/css/theme/report/report.css";
/* </system> */


●この続きにデザインを選んだ文章(ソースコード)を張り付ける。

h2{
position: relative;
padding: 0.5em;
background: #185417;
color: white;
}


h2::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px rgb(149, 158, 155);
}

 

 

文字色と背景色を変える

 

●さっきの文章の一部を見て欲しい。

background: #185417;
color: white;

〇backgroundって背景ですよね。
 この「#185417」っていうので色が決まるんですか?
●そういうこと。
 まぁプログラムとか知っている人には常識なんだけど。
 知らない人は下のサイトで色を選んでこの「#6桁」を書き換えてみよう。

WEB色見本 原色大辞典 - HTMLカラーコード


〇赤なら「#ff0000」黄色なら「#ffff00」ですね。
●文字を変えたければ「color: white」を「color: red」などでいける。
〇これも同じサイトで調べられますね。

 

ブログを書くときはHTML編集を選ぶ

 

●それでブログを書いている人のほとんどが「見たまま」を選んでいると思う。
 ここでタグ見出しを使いたい場合は「HTML編集」で文章を以下のように書く。

f:id:owl296380:20180417223003j:plain

囲まれた部分が見出しになるんですね

<h2>タイトル見出しとはなにか?</h2><br>

●<h2> </h2>の間の文章を見出しに。

 <br>は改行という意味だよ。

 

プレビューで確認

 

●あとは「HTML編集」の右にある「プレビュー」で見れたらOK。
 「見たまま」では表示されないので注意。
 こんなところかな。
〇なんか面倒ですね。
●有名ブロガーほどこのタグ見出し機能を使っている。
 これ自体は無料のはてなブログでも使用できる。
 お金を掛けなくても手間をかければ美味しい料理はできるんだよ。
 まぁ金掛けた方が早いけど。
〇博士!

 

タグをつけると何がいいのか?

 

〇それで急にどうしたんですか?
●それはね。
 梟茶房のように会話劇だとテンポが悪くなるから使っていなかった。
 ただミミズク君が一人語り形式でやっていくときにそれだと困るよね。
〇えっ!?
 博士いなくなるの?
●そういう事も想定しているという話だよ。
〇良かった。
ゴフっ!!
 (血を吐く)
〇えっ!?
●『医龍』呼んで。

医龍(1) (ビッグコミックス)

医龍(1) (ビッグコミックス)

 

 〇えっ!?
次回に…続く。

 

 

ブログ関連

 

↓このアイコンを押すと読者になります

 

↓最初に読むべき記事

 

 ↓カテゴリーまとめ

 

 ↓お問い合わせはこちらまで
メールフォーム

 

有料応援

 

↓この記事が面白かったらアマゾンギフト券を購入して梟茶房を応援しよう

梟茶房のAmazon欲しいものリスト

 

 ↓「note」というサイトにも記事あります

服朗|note

◆世界一簡単な財布の選び方 100円。あなたの財布大丈夫?

◆世界一簡単なスーツの教科書 500円。スーツに隠しルールあり 

 

無料応援

 ↓どちらか好きなアイコンを押すと梟茶房が人気になります

  ブログランキング・にほんブログ村へ 

 

スマホ電子書籍アプリを入れるべし。

電子書籍のおすすめはkindle1択。持ち物を減らすべし - 梟茶房(ふくろうさぼう)

 

↓ここから楽天amazonでお買い物をすると梟茶房が潤います