2018年07月27日

さくらブログでcssに新しい要素を追加する

ここでは、cssにコードを書き込んで、見出しや枠に囲まれた文章を書く方法を紹介しています。

htmlとcssの関係

上の見出しを見て下さい。装飾がされていて目立ちますよね。
ブログの記事編集画面でhtmlのソースを見ると、以下のようになっています。
<h3>htmlとcssの関係</h3>
次に、cssを見てみます。h3タグを設定している部分は以下のようになっています。
h3{
      font-weight:normal;
      font-size:18px;
      padding: 7px;
      margin:.5em 0;
      border-left:solid 7px #67b5b7;
      border-bottom:dotted 2px #67b5b7;
}
上4行は文字のサイズや余白を指定し、下の2行は横の飾りと下の線を書くように指定しています。

つまり、cssで設定していれば、コード編集画面でタグを使うだけで見出しが作れるのです。
css コピペ とかで検索すればサンプルがたくさん出てくるので、好きなものを使ってみて下さい。
改造すれば自分だけの見出しも作れます。

cssで文字が枠に囲まれるようにする

ブログを書いていると、たまに
こんな感じで
枠内に文字を書きたい時、ありますよね。
これは、cssに新しい要素を追加することで実現できます。

私がこのブログで使っている枠線は、以下のように設定しています。
.box {
         padding: 0.5em;
         background: whitesmoke;
         margin:20px;
         border: solid 1px #006a6c;<>
}
背景色と枠線が設定されているのがわかりますね。
cssで設定ができたら、divタグのとこでクラスを指定してあげると使うことができます。
具体的には、記事作成画面でソースコードを以下のようにすると、追加した設定を使うことができます。
<div class="box">文字</div>
posted by とり at 00:55 | Comment(0) | さくらブログ
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: