スキップしてメイン コンテンツに移動

美しい見出しでブログを飾ろう!CSSで最初の1文字/最初の1行だけスタイルを適用する。

美しい見出しでブログを飾ろう

ブログで、見出しは凝りたいけど、HTMLを直接編集するのはちょっと …
という人に、CSSだけで、少し凝った見出しを作成するテクニックを紹介します。

今回作るもの

↓のイメージのような見出しを、CSS だけで作ります。

今回作る見出し

(1) HTMLを作る

見出しを表示するHTMLを作ります。

<h3>
  美しい見出しでブログを飾ろう!<br/>
  CSSだけで最初の1文字・1行目にスタイルを適用する。
</h3>

HTMLはこれだけです。
シンプルなので、HTMLを直接編集する必要はなく、ブログのエディタだけでも書けると思います。

(2) CSSで見出しを装飾する

続いてCSSの部分です。
今回は、<h3> タグに装飾します。

/** h3タグに適用するスタイル */
h3 {
  background: #eee;
  width: 480px;
  padding: 140px 20px;
  font-size: 15px;
}

/** 最初の1文字目に適用するスタイル */
h3:first-letter {
  font-size: 60px;
  line-height: 1;
  float: left;
  margin-right: 7px;
}

/** 最初の1行目に適用するスタイル */
h3:first-line {
  color: rgba(128, 23, 23, 0.5);
  font-size: 25px;
}

CSS の貼り付け方

今回紹介した見出しを使うには、上で紹介したCSSを自分のブログに貼り付ける必要があります。
各ブログサービスでのCSS貼り付け方法は、以下を参考にしてください。

  • WordPress

[ダッシュボード] -> [外観] -> [テーマの編集] -> 右側の[style.css]

  • はてなブログ

[デザイン] -> [カスタマイズ] -> [デザインCSS]

  • Blogger

[テーマ] -> [カスタマイズ] -> [上級者向け] -> [CSSを追加]

CSS の解説

CSSなんて興味ないよ!って方は読み飛ばしてください (笑)

まず1つ目の h3 { … } の部分です。
なんの変哲もないCSSです。
H3タグ 全体のスタイルを指定しています。

/** h3タグに適用するスタイル */
h3 {
  background: #eee;     /*背景色*/
  width: 480px;         /*幅*/
  padding: 140px 20px;  /*内部の余白*/
  font-size: 15px;      /*フォントサイズ*/
}

<実行結果>
H3全体ステイル適用後

次は h3:first-letter { … } の部分です。
:first-letter擬似要素を使って、先頭1文字目にスタイルを効かせています。

ポイントとなるのが、float: left;としている部分です。
この指定で、1文字目だけ回り込みして、2行分の高さを採るようにしています。

/** 最初の1文字目に適用するスタイル */
h3:first-letter {
  font-size: 60px;    /*1文字目だけフォントを大きくする*/
  line-height: 1;     /*行間*/
  float: left;        /*回り込み*/
  margin-right: 7px;  /*右側の余白*/
}

<実行結果>
first-letter擬似要素適用後の実行結果

最後はh3:first-line { … } の部分です。
:first-line擬似要素を使って、1行目にスタイルを効かせています。

/** 最初の1行目に適用するスタイル */
h3:first-line {
  color: rgba(128, 23, 23, 0.5);   /*1行目の文字色を薄い赤に変更*/
  font-size: 25px;  /*1行目は2行目に比べて文字サイズを少し大きく*/
}

<実行結果>
今回作る見出し

まとめ

最近は、WordPressを筆頭に、ITの知識がなくても、手軽にブログが始められます。
その為か、ブロガーさんの数は、今では約700万人程度いると言われています。

すさまじい数ですね…

そんな世の中なので、自分が書きたいと思った記事は、既に他の人が記事にしている事が多々あります。

同じ内容であれば、読者は見やすい・綺麗なサイトを選んでくれるハズです。
なので、こういった小さい改善も頑張っていきましょう♪

あっ… 当たり前ですが、ブログは内容が一番大事です!

スポンサーリンク
スポンサーリンク
スポンサーリンク

コメント

このブログの人気の投稿

axiosの使い方まとめ (GET/POST/例外処理)

axiosの使い方まとめ (GET/POST/例外処理)最近何かとよく使うJavaScriptでAJAX通信を行うaxiosについて、簡単に使い方をまとめました。GETリクエストをaxiosで送るまずはGETリクエストをaxiosで送る方法です。const res =await axios.get('/users') console.log(res.data)分割代入の記法を使うと、以下のようにも書けますconst{data}=await axios.get('/users') console.log(data)クエリパラメータ (URLパラメータ)を指定クエリパラメータを指定する方法は2つあります。1つ目は、axios.getに指定するURLに直接記述する方法です。axios.get('/user?id=123')2つめは、axios.getの第2引数に、オプション指定する方法です。axios.get('/user',{ params:{ id:123}})POSTリクエストをaxiosで送る次はPOSTリクエストをaxiosで送る方法です。JSON形式でPOSTするJSON形式でPOSTする場合は、axios.postの第2引数に、送信するデータをJavaScriptオブジェクトで指定します。const res =await axios.post('/user',{ id:123, name:'Yamada Tarou'})application/x-www-form-urlencoded形式でPOSTするapplication/x-www-form-urlencoded形式でPOSTする場合は、URLSearchParamsを使います。var params =newURLSearchParams() params.append('id',123) params.append('name','Yamada Tarou')const res =await axios.post('/user', params)axios でファイルをアップロードする画像などのファイルを、axiosでアッ…

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決する

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決するタイトルの通りですが、Windows 8 以降では Windows Form アプリケーションで、コントロールの ImeMode に Katakana や KatakanaHalf を設定しても、カタカナになってくれません。なぜ ImeMode が効かないのか?Windows 8 以降、IME Mode の切り替えは、ユーザー単位で切り替わるようになった為、アプリから IME Mode 制御が出来ないようになりました。
(IME をON にした場合、常に ひらがな モードになます)※ Windows 7までは、IME Modeの切り替えはアプリ単位で行われていた為、問題なくアプリから IME制御が行えました。対処方法Windows 8 以降、IMEの制御は、InputScope クラスの利用が推奨されています。
しかし、InputScope クラスは、WPF、Windows ストアアプリでしか使えない為、Windows Formアプリでは使用できません。
(Windows Form はもう使うな!という事でしょうか (涙) )結論としては、コントールパネルの設定で、IMEの制御をユーザ単位から アプリ単位に変更する事ができます。
これで、Windows Formアプリでも 従来通りIMEの制御を行う事が出来ます。おわりにこの方法だと、アプリをインストールする端末すべてに設定が必要となり、とっても面倒です。。。
しかし、今の所これしか方法がない状態です。
これからは Windows Formではなく、WPFや Windows ストアアプリで作れという事ですかね (^^;)

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]MailKitを使ってメールを送るサンプルコードです。(C#)UTF8/iso-2022-jpのエンコーディング指定、GMail/YahooのSMTPサーバで送るなど、4つのサンプルコードでMailKitの使い方を紹介します。MailKitって何?2017年に.NET標準のSystem.Net.Mail.SmtpClientが廃止予定となり、Microsoftより今後はオープンソースライブラリである、MailKitに置き換えるとアナウンスがありました。既にSmtpClientは非推奨になっており、今後は廃止されていきます。現在、SmtpClientを使用したソースコードには、Visual StudioからMailKitを使うよう警告が出るようになっています。さっそく、MailKitを使ってメールを送信するサンプルコードを作っていきます。UTF8でメールを送信文字エンコーディングを、UTF8でメールを送信するサンプルコードです。
MailKitは、デフォルトの文字エンコーディングがUTF8なっている為、シンプルなコードでメールを送信する事ができます。var host ="<smtp server name>"; var port =25;// or 587using(var smtp =new MailKit.Net.Smtp.SmtpClient()){//SMTPサーバに接続する smtp.Connect(host, port, MailKit.Security.SecureSocketOptions.Auto);//認証が必要な場合は、以下のコメントを解除//smtp.Authenticate("<id>", "<password>");//送信するメールを作成する var mail =new MimeKit.MimeMessage(); var builder =new MimeKit.BodyBuilder(); mail.From.Add(new MimeKit.MailboxAddress("",&quo…