白兎のまじメモ!検索は「まじメモ」

会社員との兼業ブロガー白兎が語る「超」雑記ブログ!

【見出しカスタマイズ:コピペで簡単】はてなブログの見出しをかっこよくカスタマイズしてみよう。

f:id:shiro-usagi:20190812185334j:plain

白兎(@shirousagi_memo)です!^^。多分ご存知の方少ないですし、しろうさぎ自身も忘れかけてますが一応...WEBデザイナーであります^^。今までなんでブログでHTMLとかCSSをやってないかと言うと...面倒だったんです..(・д・`;)

 

...とは言え

ニーズがあるだろうという事と、HTMLを知らない人からすると簡単にカスタム出来る方法無いかなーと感じますよね?なので出来る限り簡単にカスタム出来るようにコピペだけで対応できるデザインを作ってみました。

 

今日は大見出しです^^...

 

大見出しはデザイン的にもなんですが、実はSEO的にもかなり大事。でもSEOの話ではないのでそれは次回に置いておいて今日はデザインだけ見て下さいね!

 

前からずっとWEBデザインの記事は書きたかったw。やっと書き始めたと思ってくださいませ... ( *・ω・)*_ _))ペコリン.

 

 

 

設定方法!

多分、もう皆さん慣れてると思うのでCSSの設定場所は簡単に説明しますね!白兎のデザインはCSSを開いてコピペで貼るだけ!で、記事挿入方法は「HTML編集からコピペで貼る→文言だけ自分で編集」だけです!

 

では説明しますね。

 

CSSはここで貼る!

  • はてなブログにログインしたら...▼
  • レフトナビのデザインをクリック...▼

f:id:shiro-usagi:20190812174907j:plain

 

  • そしたらスパナマークをクリック...▼

f:id:shiro-usagi:20190812175140j:plain

 

  • そしたら「デザインCSS」をクリックして貼るだけ

f:id:shiro-usagi:20190812175335j:plain

 

知ってる人は大丈夫だと思いますが分からない人は深く考えずにこの場所にコピペして下さいね。でも今ある物も消さないで一番下に追加してあげて下さいね。

 

 CSSとは...

CSSとはカスケーディング・スタイル・シートの略で、HTMLと組み合わせて使用する言語です。HTMLで各要素の意味や情報構造を定義し、CSSでそれらを装飾します。もっと分かりやすく説明しますと、サイト内のコンテンツ部分とデザインを別々に定義しようという考えです。

引用:CSSとは | SEO用語集:意味/解説/SEO効果など [SEO HACKS]

 

実際に使う時は...?

記事を書く時にいつも通り、見出しを選択して下さいね。それだけです^^。今日は「見出し」だけなので「中見出し」などはまた別記事で紹介します!

 

では、行きます^^

 

【見出しカスタマイズ:コピペで簡単】①

①...▼

f:id:shiro-usagi:20190814235727j:plain

CSS
h3{ 
	font-size:26px;
	padding:8px; 
	color:#555;
	font-weight:bold;
	line-height:150%; 
	letter-spacing:1px;
	border-left:10px solid #eee;
	} 

 

かなり見た目シンプルなレフト部分に薄いグレーの帯。このタイプのデザインはかなり使い回しが効くのでオススメです。 

 

②...▼

f:id:shiro-usagi:20190814235843j:plain

h3{ 
	font-size:26px;
	padding:8px; 
	color:#555;
	font-weight:bold;
	line-height:150%; 
	letter-spacing:1px;
	border-left:20px solid #ffedab;
	}

 

今度は帯の太さを倍にした物。単位で言うと【20px】となります。色を変えたい場合は【#ffedab】を変更して下しい。例えば黒なら【#000】でOKです^^

 

③...▼

f:id:shiro-usagi:20190814235940j:plain

h3{ 
	font-size:26px;
	padding:8px; 
	color:#000;
	font-weight:bold;
	line-height:150%; 
	letter-spacing:1px;
	border-left:20px solid #00afcc;
	background-color:#eee;
	width:90%;
	}

 

ちょっと背景に色を入れて帯はそのままのデザイン。

 

④...▼

f:id:shiro-usagi:20190815000114j:plain

h3{ 
	font-size:26px;
	padding:8px; 
	color:#000;
	font-weight:bold;
	line-height:150%; 
	letter-spacing:1px;
	border-bottom:1px dashed #d83473;
	width:90%;
	background-color:#FFF;
	}

 

HTMLは....

<h3><i class="fa fa-book" aria-hidden="true">&nbsp;</i> 見出しSAMPLE</h3>

 

⑤...▼

f:id:shiro-usagi:20190815000218j:plain

h3{ 
	font-size:26px;
	padding:8px; 
	color:#000;
	font-weight:bold;
	line-height:150%; 
	letter-spacing:1px;
	border-bottom:1px double #54917f;
	width:90%;
	}

 

このデザインはよく見るよね。チェックマークね。一番使いやすいデザインかも?と思う。

 

HTMLは....

<h3><i class="fa fa-check-circle-o" aria-hidden="true">&nbsp;</i> 見出しSAMPLE</h3>

 

【補足】

下の2つのデザインは「Font Awesome」を使ってます。簡単にはてなブログに導入できますので使ってみて下さい。方法はこちらの記事でまとめてます

 

 ※補足※ HTMLをページにそのまま表示する方法

難しい事は言いません(笑)こんなサイトがあるのでコレを使いましょう!

www.netyasun.com

 

凄く便利で、ブログでそのまま表示したいソースコードを貼りつけて変換を押すだけです。これは手軽でいい!

 

まとめ

始めてのWEBデザイン記事なのでちょっとデザインサンプル少なくて済みません。今後見出しだけとは言わず沢山のサンプル配る予定です。宜しくお願いします。

 

終わりっ。