【はてなブログ】に慣れてくると見栄えやデザイン面を変えてみたいなぁと思ったりしませんか？
ブログのカスタマイズは確かにハードルが高いです。
CSSコードによっては、プログラム上で干渉し合いバグが発生することがあります。
この記事では、本ブログ上でバグらなかったコードで
- 【箇条書き】をチェックマーク
- 【番号付きリスト】を丸付き番号
に変更するやり方を届けします。
が、ご自身の責任の上おこなってください。
今後の為にも【テスト用】サイトを作成し、そこで試されるのが得策です。
【テスト用サイト作成方法】参考記事はこちらをどうぞ。
是非、挑戦してみてくださいね。
- スポンサーリンク -
【はてブ】箇条書きを丸付き数字とチェックマークを表示
<CSS>コードと<HTML>コードを利用し、難しく聞こえますが大丈夫です。
はてなブログの場合：
<CSS>コードは【デザイン】の中に貼る
<HTML>コードは、記事を書く【HTML編集】に貼る
記事作成時に便利な【定型文貼り付け】機能を使うことでグッと簡単になります。
やってみましょう。
番号付きリストを丸付き番号表示に
丸付き番号が不要の場合は、ツールバーの【番号付きリスト】アイコンを押せばデフォルトの物で表示されます。
■色の変更箇所■
22行目：数字の背景色
23行目：数字色
【HTMLコード】
- あああああ
- いいいいい
- ううううう
確認方法：【編集見たまま】ではなく、【プレビュー】で確認
番号追加：最後の箇条書き後ろで改行
定型文編集：定型文右端【・・・】ー【編集】
- あああああ
- いいいいい
- ううううう
ーサンプル②ー
【丸付番号】は背景を白。背景色付ボックスでは丸付番号の背景を合わせる必要あり。
- あああああ
- いいいいい
- ううううう
- ボックス作成<HTML>タグを【定型文】に作成
- 【ここに文字】部分に【丸付番号】を定型文から貼る
- 完成
こちらを参考にどうぞ
【オシャレな囲み枠コード】
箇条書きをチェックマーク表示に
【はてなブログ】は、箇条書きマークが【・】とシンプルな物が標準です。
悪くはないけど奇抜でもなくアクセント代わりになりそうなものに変えてみませんか？
- あああああ
- いいいいい
- ううううう
こんな感じでボックス付きなんですけど、やってみよう！
【CSSコード】右上アイコンでコピー
＊アイコンは【はてなブログ】利用者は標準で使える【blogicon】利用
■変更箇所■
18行目：アイコン変更【利用可能アイコン】
21行目：アイコン色変更
分かりやすい名前にしよう
【HTMLコード】
- あああああ
- いいいいい
- ううううう
補足：
確認方法：【編集見たまま】ではなく、【プレビュー】で確認
番号追加：最後の箇条書き後ろで改行
定型文編集：定型文右端【・・・】ー【編集】
こちらも併せてご参考にどうぞ
【オシャレな囲み枠のコード】
- スポンサーリンク -
【はてブ】箇条書きを丸付き数字とチェックマークにまとめ
勿論ブログはコンテンツが重要です。
『読み手が見やすく理解しやすいサイト』に育てるには、デザインもある程度重要だと考えています。
少しずつブログを育てるつもりで挑戦してみられてはどうですか。
