|
テーマ:暮らしを楽しむ(384840)
カテゴリ:ブログ運営
イントロダクション楽天ブログは、カスタマイズの自由度が低く、運営側も力を入れていない。 「ブログを始めるときに、なぜ私は楽天ブログを選択してしまったんだ…」 と思うけど、もう遅い。 世の中は、有料サーバーをレンタルし、アドレスを購入して、WordPressなるものでブログを運営する時代らしい。CSSを駆使すれば、カスタマイズも自由自在。 でもそこまでするのはめんどくさい。 ウェブサイトからブログを経由して、一周回って戻ってきた感があるよね。 中高生の時、HTMLやCSSをいじくってウェブサイトを作っていた私。 時代の変化についていけてません。 「無料ブログでもHTMLある程度使えるし、その中でなんか見やすいように、ちょっとおしゃれに出来んかなあ」 と思いまして。 「CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選」 を参考に、無料ブログでも使い勝手がいいようカスタムしてみました。 素人使用ですが、コピペで使えるのでお好みで試行錯誤してみてください。 (詳しい方で、「ここのタグこうした方がいいよ」というアドバイスがあればコメントください。) 基本仕様色見本には、「WEB色見本 原色大辞典」の skyblue #87ceeb を使っています。 見出し(目次)って青が多いし、ブログのテンプレートを変更しても違和感がない色です。 私は、テンプレートにあわせて linen #faf0e6 を使っています。 色を変えたい時は、#以下の6桁の数字コードを変更してください。 (ワードやメモ帳の置換機能を使うと便利です。) 文字テンプレートを変更したときに文字色が自動で変わるよう、タイトル文字色は指定していません。 (「白文字かどまる」のみ、白抜きなので文字色が白になっています。) 見出しに文字を入れるには、「下線」などと書いてあるところの文字を変えてください。 文字が見やすいように太字にしていますので、太字をやめるときは、「<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~)を使い分けて、読みやすい記事を心がけたい。 まあ一番の解決策は、無料ブログをやめることかもしれないけども! お気に入りの記事を「いいね!」で応援しよう
最終更新日
2020.01.07 04:17:32
コメント(0) | コメントを書く
[ブログ運営] カテゴリの最新記事
|