はてなブログで表や囲いを使いたい！便利に使って読みやすいブログにしよう
どもどもー！ブログ初心者の味方、すばるです(^^)/
皆さんは、はてなブログで記事を書いている時に「はてなにこんな機能があったらいいのにな…」と思う事ありませんか？
私はブログ初心者で『HTML』や『CSS』という物をほぼ知りません。
その為「こんな機能があったら…」と思った時はすぐにGoogleで調べる様にしています。
このページででもそうですが、そうして見つかった便利なコードや編集方法はどんどん紹介ページとして増やしていこうと思います。
ブログを書く事に慣れている人であれば、全然無関係な話になるのでしょうが私の様にブログを始めたけれど分からない事ばかり！という人にとって役にたてばいいなと思っています。
ちなみに私が記事を書くときは「見たまま編集」という編集方法を使用しており、ふと疑問に思い調べてみると「はてな表記」という編集方法での解説がたくさん出てきます。
なのではてな表記で書けばいいのかなと思った事もありますが、見たまま編集は記事を書いているそのままの状態で公開されるという私にとってはありがたい編集方法なので、今更変えるのはちょっとしんどいです…
今後、はてなブログスペシャリストを目指していく人であればもしかしたら「はてな表記」で書き続けていった方が良いのかもしれませんが、私と同じ様に「見たまま編集」じゃないとちょっと…という人は参考にしてみてください。
それでは今回の紹介に参りましょう。
記事を書くときに文字を囲いたいとか思いませんか？
私の場合、たくさんの人にブログを読んでもらいたいのでページの「読みやすさ」や「見やすさ」をとても気にします。
読みづらいページは読んでいてとても苦痛に感じる可能性があり、全てを読み切る前にやめてしまうという事になりかねません。
じゃあどうやったら読みやすくなるのか？
- 読みやすい句読点を意識する
- 段落を分ける
- 見出しを付ける
- 記号や線などの装飾を加える
という事が必要になってきます。
ただ、はてなブログのショートカットツールには限りがありその中での装飾しか行う事が出来ないという現状です。
これを可能にするのがHTML編集ページに打ち込むコードという訳です。
HTMLなんて英数字の羅列ばかりで意味が分からない。という気持ちはよくわかりますが、色々調べていくと親切なブロガーさん達がそのままコピペをするだけで使用できる紹介ページを作ってくれていたりします。
コピペして囲いを作ってみよう！
今回は私がその「親切なブロガーさん達」の一人になって、読んでくれている皆様に展開していきます。
こんな感じの囲いが作れるよ＼(゜ロ＼)(／ロ゜)／
▲この囲いを作る為には以下のコードをHTML編集へコピペしてください。
<div style="border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border: 1px solid #006400; margin-top: 15px; margin-bottom: 15px; padding: 15px;">
囲いの中へ入れたい言葉や文字
</div>
コピペすると…
囲いの中へ入れたい言葉や文字
こうなりましたね。中の文字はHTML編集内でも、見たまま編集内でも変更する事が出来ますので、枠さえ入れてしまえばその後に文字を変更したり増やしたりするのは簡単です。
枠のアレンジ版もあるゾ
囲み線が1種類でもあるととても助かりますが、色々なバリエーションの囲いを入れれると幅が広がると思います。その為、アレンジの仕方も覚えておくと良いと思います。
<div style="border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border: 1px solid #006400; margin-top: 15px; margin-bottom: 15px; padding: 15px;">
- 赤色の項目→数字を変えると線の太さを変えれる
- 青色の項目→文字を変えると線の種類を変えられる
- 緑色の項目→数字を変えると線の色を変えられる
線の色を変える場合は『原色大辞典』←クリック
をもとに変えたい色の色コードを持ってくると良いでしょう。
アレンジバージョンの例として…
アレンジ版の紫色の太さを3に変えた点線囲いだよ(^^)/
とこの様にアレンジを加える事が出来ます。
やった事としては…
やった事としては…
-
1px → 3px へ変更
-
solid → dotted へ変更
-
#006400 → #9400d3 へ変更
しただけです。
ベースとなる一つのコードさえ知っておけばアレンジは比較的簡単になります。
線の種類の英語に関しては…
-
「solid」1本線で表示されます
-
「double」2本線で表示されます
-
「groove」立体的にくぼんだ（へこんだ）線で表示されます
-
「ridge」立体的に隆起（ふくらんだ）線で表示されます
-
「inset」上と左の線が暗く、下と右の線が明るく表示されます
-
「outset」上と左の線が明るく、下と右の線が暗く表示されます
-
「dashed」破線で表示されます
-
「dotted」点線で表示されます
上記の８パターンの囲い線を使用する事が出来ますので、色々試して使ってみてください。
分かり易いのは『1本線』『2本線』『破線』『点線』でしょうか。
「inset」と「outset」は囲いの色がグラデーションしている様にも見えるので、オシャレなイメージです。
表を作る
表（テーブル）を作る方法は以下のコンテンツ内で紹介しています。
記事内に表を入れ込みたい場合は参考にしてください。
おわりに（まとめ）
ブログ初心者にとってブログの装飾はとても大変です。
何せ知らない事ばかりですからね…私自身も知らない事だらけで悩む事も調べるのに時間を使って記事を書く時間が無くなってしまうという事が良くあります。
苦労した経験があるからこそ、私と同じ様に苦労している人の役に立てればと思ってこのようなページも作成していくので、これから投稿していくページの中に「使えそう」と思う物があれば参考にしてみてください(^^)/
++++このブログはシェアフリーです++++
↓よかったらポチっとお願いします( *´艸｀)
