ぶろぐライフ~パソコン苦手なブログ初心者さんを全力でサポート~

パソコンは苦手だけどブログを始めたい人を全力で応援!15年間パソコン講師を勤めた私が苦手克服のお手伝いをします♪

【はてなブログ】箇条書きを丸付き数字とチェックマーク表示可能にしよう

はてなブログカスタマイズ箇条書きマーク

【はてなブログ】に慣れてくると見栄えやデザイン面を変えてみたいなぁと思ったりしませんか?

ブログのカスタマイズは確かにハードルが高いです。

CSSコードによっては、プログラム上で干渉し合いバグが発生することがあります。

 

この記事では、本ブログ上でバグらなかったコードで

  • 【箇条書き】をチェックマーク
  • 【番号付きリスト】を丸付き番号

に変更するやり方を届けします。

 

が、ご自身の責任の上おこなってください。

今後の為にも【テスト用】サイトを作成し、そこで試されるのが得策です。

テスト用サイト作成方法】参考記事はこちらをどうぞ。

 

是非、挑戦してみてくださいね。

 

 

- スポンサーリンク -  

 

【はてブ】箇条書きを丸付き数字とチェックマークを表示

<CSS>コードと<HTML>コードを利用し、難しく聞こえますが大丈夫です。

はてなブログの場合:

<CSS>コードは【デザイン】の中に貼る

<HTML>コードは、記事を書く【HTML編集】に貼る

 

記事作成時に便利な【定型文貼り付け】機能を使うことでグッと簡単になります。

やってみましょう。

 

番号付きリストを丸付き番号表示に

丸付き番号が不要の場合は、ツールバーの【番号付きリスト】アイコンを押せばデフォルトの物で表示されます。

 

STEP
<CSS>コード貼り付け
ダッシュボード【デザイン】ー【スパナ】ー【デザインCSS】

はてなブログ箇条書きを丸付き番号とチェックマーク表示可能

【CSSコード】右上アイコンでコピー

■色の変更箇所■
22行目:数字の背景色
23行目:数字色
STEP
定型文として<HTML>タグ記憶
【記事作成画面】ー【定型文貼り付け】ー【定型文を作成する】

はてなブログ箇条書きマーク変更

STEP
<HTML>タグ貼り付ける
分かりやすい名前を付けましょう

はてなブログ箇条書きマーク変更
【HTMLコード】

STEP
確認してみよう
番号入れたい個所クリックー【定型文貼り付け】ー【丸付き番号茶色】
  • あああああ
  • いいいいい
  • ううううう
 補足:
確認方法:【編集見たまま】ではなく、【プレビュー】で確認
番号追加:最後の箇条書き後ろで改行
定型文編集:定型文右端【・・・】ー【編集】
STEP
応用編
囲み枠の中に丸付番号表示
 サンプル① 
  • あああああ
  • いいいいい
  • ううううう

ーサンプル②ー
【丸付番号】は背景を白。背景色付ボックスでは丸付番号の背景を合わせる必要あり。

  • あああああ
  • いいいいい
  • ううううう

  • ボックス作成<HTML>タグを【定型文】に作成
  • 【ここに文字】部分に【丸付番号】を定型文から貼る
  • 完成

 こちらを参考にどうぞ
オシャレな囲み枠コード

 

箇条書きをチェックマーク表示に

【はてなブログ】は、箇条書きマークが【・】とシンプルな物が標準です。

悪くはないけど奇抜でもなくアクセント代わりになりそうなものに変えてみませんか?

  • あああああ
  • いいいいい
  • ううううう

こんな感じでボックス付きなんですけど、やってみよう!

 

STEP
<CSS>コード貼り付け
ダッシュボード【デザイン】ー【スパナ】ー【デザインCSS】
はてなブログ箇条書きを丸付き番号とチェックマーク表示可能

【CSSコード】右上アイコンでコピー

*アイコンは【はてなブログ】利用者は標準で使える【blogicon】利用
■変更箇所■
18行目:アイコン変更【利用可能アイコン
21行目:アイコン色変更
STEP
定型文として<HTML>タグ記憶
【記事作成画面】ー【定型文貼り付け】ー【定型文を作成する】
はてなブログ箇条書きマーク変更
STEP
<HTML>タグ貼り付ける
分かりやすい名前にしよう

はてなブログ箇条書きマーク変更


【HTMLコード】
STEP
確認してみよう
番号入れたい個所クリックー【定型文貼り付け】ー【箇条書きチェックマーク】
  • あああああ
  • いいいいい
  • ううううう

 補足:
確認方法:【編集見たまま】ではなく、【プレビュー】で確認
番号追加:最後の箇条書き後ろで改行
定型文編集:定型文右端【・・・】ー【編集】


 こちらも併せてご参考にどうぞ
オシャレな囲み枠のコード

 

- スポンサーリンク -  

 

【はてブ】箇条書きを丸付き数字とチェックマークにまとめ

勿論ブログはコンテンツが重要です。

『読み手が見やすく理解しやすいサイト』に育てるには、デザインもある程度重要だと考えています。

少しずつブログを育てるつもりで挑戦してみられてはどうですか。

にほんブログ村 ブログブログ ブログ生活へ 

f:id:maysun:20220106121849g:plain