PR
ノマ@320life
寸暇を惜しんで黙々と本を読み、毎朝淡々と英語などを学んでいます。/小３娘と小１息子を持つ事務職係長/ミニマリスト/腐女子の字書き/[商品リンクに広告利用しています]
キーワードサーチ
▼キーワード検索
カレンダー
カテゴリ
雑記
(39)衣服・服飾・化粧
(66)食事・料理
(114)住まい・暮らし
(159)子ども・育児
(132)投資・懸賞・節約
(31)手帳・文房具
(123)英語・学習
(90)仕事・働く
(61)美容・健康・ダイエット
(22)楽天お買い物
(17)ブログ運営
(33)【読書】未分類
(520)【読書】読書記録まとめ
(38)【読書】絵本
(9)【読書】小説（日本）
(183)【読書】小説（海外）
(24)【読書】エッセイ・コミックエッセイ
(69)【読書】ライトノベル
(43)【読書】ノンフィクション・ルポ・自伝
(53)【読書】政治・歴史・時事問題
(25)【読書】自然科学
(5)【読書】差別・レイシズム
(2)【読書】女であること・フェミニズム
(15)【読書】働くこと・キャリア・転職
(27)【読書】自己啓発・ビジネス書
(27)【読書】勉強法・学習
(13)【読書】本・読書・書店
(18)【読書】時間術
(7)【読書】英語・語学・言語学
(16)【読書】洋書
(1)【読書】家事
(14)【読書】料理
(5)【読書】子育て
(15)【読書】経済・家計・FIRE
(12)【読書】暮らし・生活・インテリア
(40)【読書】ミニマリスト
(16)【読書】運動・美容・健康・ファッション
(7)【読書】手帳・ノート・文房具
(26)【読書】絵・イラスト
(5)【読書】その他ビジュアルブック
(11) 2020.01.06
テーマ： 暮らしを楽しむ(384577)
カテゴリ： ブログ運営
イントロダクション
「ブログを始めるときに、なぜ私は楽天ブログを選択してしまったんだ…」
と思うけど、もう遅い。
世の中は、有料サーバーをレンタルし、アドレスを購入して、WordPressなるものでブログを運営する時代らしい。CSSを駆使すれば、カスタマイズも自由自在。
でもそこまでするのはめんどくさい。
ウェブサイトからブログを経由して、一周回って戻ってきた感があるよね。
中高生の時、HTMLやCSSをいじくってウェブサイトを作っていた私。
時代の変化についていけてません。
「無料ブログでもHTMLある程度使えるし、その中でなんか見やすいように、ちょっとおしゃれに出来んかなあ」
「 CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選 」
を参考に、無料ブログでも使い勝手がいいようカスタムしてみました。
素人使用ですが、コピペで使えるのでお好みで試行錯誤してみてください。
（詳しい方で、「ここのタグこうした方がいいよ」というアドバイスがあればコメントください。）
基本仕様
色
見本には、「 WEB色見本 原色大辞典 」の
skyblue #87ceeb
を使っています。
見出し（目次）って青が多いし、ブログのテンプレートを変更しても違和感がない色です。
私は、テンプレートにあわせて
を使っています。
色を変えたい時は、#以下の６桁の数字コードを変更してください。
（ワードやメモ帳の置換機能を使うと便利です。）
文字
テンプレートを変更したときに文字色が自動で変わるよう、タイトル文字色は指定していません。
（「白文字かどまる」のみ、白抜きなので文字色が白になっています。）
文字が見やすいように太字にしていますので、太字をやめるときは、「<b>下線</b>」の「<b></b>」の部分を削除してください。
下線見出しバージョン
下線
<div style="border-bottom: solid 3px #87ceeb;"><b>下線</b></div>
3pxの数字を変えれば、線を太く・細くできます。
破線
<div style="border-bottom: dashed 3px #87ceeb;"><b>破線</b></div>
点線
<div style="border-bottom: dotted 3px #87ceeb;"><b>点線</b></div>
二重線
<div style="border-bottom: double 5px #87ceeb;"><b>二重線</b></div>
上下線
<div style="padding: 0.5em 0; border-top: solid 3px #87ceeb; border-bottom: solid 3px #87ceeb;"><b>上下線</b></div>
下線（蛍光ペン）
<div style="background: linear-gradient(transparent 70%, #87ceeb 70%"><b>下線（蛍光ペン）</b></div>
装飾バージョン
左線
<div style="padding: 0.25em 0.5em; background: transparent; border-left: solid 5px #87ceeb;"><b>左線</b></div>
ふせん風
<div style="padding: 0.25em 0.5em; background: transparent; border-left: solid 40px #87ceeb;"><b>ふせん風</b></div>
線かどまる
<div style="border: solid 3px #87ceeb; padding: 0.5em; border-radius: 0.5em;"><b>線かどまる</b></div>
かどまる
<div style="padding: 15px 10px; margin:0px 0px 5px 0px; background: #87ceeb; border-radius:10px;"><b>かどまる</b></div>
白文字かどまる
<div style="background: #87ceeb; padding: 0.5em; color: white; border-radius: 0.5em;"><b>白文字かどまる</b></div>
一重線囲み
<div style="background: #87ceeb; box-shadow: 0px 0px 0px 5px #87ceeb; border: solid 2px white; padding: 0.2em 0.5em;"><b>一重線囲み</b></div>
ステッチ囲み
<div style="background: #87ceeb; box-shadow: 0px 0px 0px 5px #87ceeb; border: dashed 2px white; padding: 0.2em 0.5em;"><b>ステッチ囲み</b></div>
水玉囲み
<div style="background: #87ceeb; box-shadow: 0px 0px 0px 5px #87ceeb; border: dotted 4px white; padding: 0.2em 0.5em;"><b>水玉囲み</b></div>
二重線囲み
<div style="background: #87ceeb; box-shadow: 0px 0px 0px 5px #87ceeb; border: double 4px white; padding: 0.2em 0.5em;"><b>二重線囲み</b></div>
エンディング
これまで、写真を間に挟んで文章を区切ったり、余白や太字で区切ったりしていましたが、見出しがあると視覚に緩急がついて、ぐんと見やすくなりますね。
今後、これと見出しタグ（h1～）を使い分けて、読みやすい記事を心がけたい。
まあ一番の解決策は、無料ブログをやめることかもしれないけども！
「見たよ！」の応援、お願いします。
お気に入りの記事を「いいね！」で応援しよう
[ブログ運営] カテゴリの最新記事
-
マシュマロお返事 2024.06.17
-
マシュマロお返事まとめ 2024.06.10
-
ブログ６周年のお知らせ 2024.06.04
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
