ブログの記事で、文字のまわりを四角い枠でかこみをつくってみたいとおもったことありませんか？
今日はその方法について記事にしてみました。
はてなブログでの方法をかいていますが、エディターをつかってもできますので、参考にしてください。
サンプル
イメージとしては下のような感じで、文字のまわりをかこみをつくって。
今日はとてもいい天気です
- 今日はとてもいい天気です
- 明日もとてもいい天気らしい
- 明後もとってもいい天気らしい
この方法について説明していきます。
かこみをつくる前に、はてなブログのHTML編集をつかう
はてなブログでの記事作成で、HTML編集を選択。
HTML編集上で、この下のコーディングくわえる必要があります。
.surround1 {
border:2px #000000 solid;
padding: 20px 40px;
}
これは、cssとよばれるものです。これをのちほど説明する場所にコーディングする必要があります。
HTMLとは
HTMLとはざっくり説明すると
- Hyper Text Markup Languageの略
- Webブラウザをつくるためのプログラム言語。
- さまざまなタグをつかってテキスト(文字)を表示できる
- テキストに特殊なタグ文字を使います。
タグというものは、「<」「>」に囲まれたもののことをさします。
例をあげると、<p>、<strong>、<div>などさまざまあります。
HTMLでは、このタグを使ってテキストを書いてくのです。
CSSとは
CSSとはざっくり説明すると
- Cascading Style Sheetの略語
- テキストのサイズ、色などを設定することができる
- Webページを見やすくすることができる
今回はスタイルタグに、CSSを書いていきます。
スタイルタグというのは「<style></style>」のことです。
文字にかこみをつくるCSSをコーディング
HTMLのなかにある<style></stlyle>スタイルタグを一番最初に設定。
さきほどの、CSSでかいたコードをスタイルタグのなかにコーディングします。
<style>
.surround1 {
border:2px #000000 solid;
padding: 20px 40px;
}
</stlyle>
これは、指定された部分を囲むCSS コード。
かこみたい文字をHTMLで指定する
かこみたい文字を選びます。
たとえば先ほどの「今日はとてもいい天気です」に囲みをつけてみましょう。
文字が<p></p>のタグでかこまれています。
<p>今日はとてもいい天気です<p>
このテキストに<p>タグを次のよう変更します。
<p class = "surround1">今日はとてもいい天気です<p>
先頭のpタグのなかに class="surround1" をコーディング。
これで完成です。
<style>
.surround1 {
border:2px #000000 solid;
padding: 20px 40px;
}
</stlyle>
<p class = "surround1">今日はとてもいい天気です</p>
これをエディター上でコーディングすればオッケーです。
さいごに
今回は、HTMLとCSSをつかって文字にかこみを作る方法について説明しました。
はてなブログは、とくにHTMLやCSSをよくわからなくても、ブログはかくことができます。
ですが、HTMLやCSSをしっておくと、ブログのデザインをより自分らしいスタイルに変化させることができます。
