どうも～♪ 本のソムリエ（見習い補佐）のだるまです。
さて「ブログの作り方」の2回目です。今回からはHTMLやCSSを編集して本格的にブログを作っていきますよ。ただ一つずつ説明していくのは面倒くさいので、細かい説明は参考になったブログのリンクを貼るだけにします。このブログは「雑食系読書ブログ」ですからね（笑）
※まだ前回の記事を見ていない方は、ぜひそちらからご覧ください。
⇒「要注意事項と役立つコツを知っておこう - Blogger（ブログの作り方01）」
まずブログを始めるとやるべきことがたくさんあります。テンプレートを選んだり、背景やレイアウトを選んだり・・・必要なガジェットを追加することも大切ですね。ただ、こういったことはそれほど難しくないので説明は省略します。
こういった設定が完了したことを前提として、編集方法を紹介していくのでそのつもりで読んでくださいね。それでは始めましょう～♪
《注意！》この記事はBloggerの「ｼﾝﾌﾟﾙ･ﾃﾝﾌﾟﾚｰﾄ」に関してのものです。その他のブログやテンプレートでは記事の通りに反映されない可能性があります。
目 次
- １．文字を見やすくしよう
- ２．見出しをカッコよくしよう
- ３．「引用」を目立たせよう
ⅰ．フォント書式の変更
ⅱ．行間をあける
ⅲ．文字を大きくする
ⅰ．見出しの変更手順
ⅱ．見出しデザイン例
ⅲ．クラス属性の見出し
<補>色選びで役立つサイト
ⅰ．CSSだけで変更する
ⅱ．Bloggerでの注意点
ⅲ．「リンク」も目立たせる
１．文字を見やすくしよう
ⅰ．フォント書式の変更
Bloggerの初期設定ではあまり読みやすいフォント（文字のデザイン）はありません。なのでCSSで追加する必要があります。CSSを追加する場合は【カスタムＣＳＳ（テンプレート⇒カスタマイズ⇒上級者向け）】で行います。
ここから変更しておけば修正したくなった場合も簡単に直せます。また編集欄の下にブログのデモ画面があるので、コードが正しく反映されているか確認しながら編集できます。
では、まずはフォント書式から変更しましょう。以下のコードを【カスタムCSS】にコピペしてください（※モバイルでコードがはみ出している場合はスワイプしてご覧ください）。
/* 全てのフォント書式 */
* {
font-family:"meiryo","メイリオ","ＭＳ Ｐゴシック",sans-serif;
line-height: 1.7;
}※詳しい説明は以下の記事で確認してくださいね。
⇒「Bloggerのフォントをメイリオに変更する方法｜メモロウ」
ⅱ．行間をあける
上記コードの「line-height: 1.7;」の部分はフォントではなく、行間（正確には行の高さ）を調節するコードです。フォント変更だけでなく行間も広くとることで、より文章が読みやすくなります。なので、ついでに付け加えておきましょう。
行間の数値はそれぞれの好みに変更してください。「1.0」を基準にして数値を上げるほど行間は広がります。
ⅲ．文字を大きくする
さらに文字の大きさも変更しましょう。小さいと読みづらいですからね。
/* 全てのフォントサイズ */
.main {
font-size: 14px;
color: #444;
}ここでは文字の色も調節しています（color: #444;）。数値や色はそれぞれの好みに変更してください。
目次に戻る
２．見出しをカッコよくしよう
次は見出しです。見出しとは文章の前に配置することで、章や節を分かりやすくするものです。小見出しや準見出しなど複数設定できます。このデザインを工夫することで文章が非常に読みやすくなります。
ⅰ．見出しの変更手順
見出しデザインの変更では「ｈタグ」というものを編集することになるのですが、少々複雑な作業が必要になります。これはBloggerの初期設定で「ｈタグ」が見出し以外にも使われていることが原因です。
順序としては①日付とガジェットタイトルに使われている「ｈタグ」を取り外します。②さらに「ｈタグ」の順番も入れ替え ③見出しの装飾をして見やすくしていきます。
※詳しくは以下の記事を参考にしてください（「ガジェットタイトルの装飾」は次の記事で行うので省略してもらって構いません）。
⇒「Bloggerシンプルテンプレートの記事タイトルをh3からh2に日付をh2からdivに変更｜メモロウ」
《追記！》上記の記事では「コメント欄」の編集は行われていません。しかし「ｈ4タグ」に装飾をする場合は、ここも編集する必要があると思います。
編集の仕方は上記の日付で行ったように、「コメント欄のｈタグ（ｈ4）」を「divタグ」などに変更します（私は【カスタムＣＳＳ】から編集しやすくするために「ｈ4」を「ｈ5」に変更しています）。
※下記の記事も参考にしてみてください（少し分かりにくいですが、おそらく５箇所編集する必要があります）。
⇒「Blogger：見出し設定(6)Hタグ編集の記録｜P--Q」
ⅱ．見出しデザイン例
私の見出し（一部だけ）のCSSはこんな感じです。ｈ3は「章見出し」、ｈ4は「節見出し」に使っています。
h3{
padding-left:10px;
margin:20px 0 10px 0;
border-radius:5px;
background: #494a41;
font-size:22px;
color: #ffffff;
}
h4 {
position: relative;
border-bottom: 2px solid #b3ada0;
padding-left:15px;
margin:20px 0 10px 0;
font-size: 18px;
font-weight: bold;
}
h4:after {
position: absolute;
bottom: -2px;
left: 0;
content: '';
width: 20%;
border-bottom: 2.2px solid #494a41;
}h３のポイントは「border-radius:5px;」でしょうか。これで見出しの角に丸みをもたせています。ｈ4のポイントは「:after擬似要素」で線を重ねて２色のアンダーラインに見せています。
※他にも見出しのデザインで参考になるブログがありますので、ぜひご覧ください。
⇒「コピぺでOK！CSSのみで記事タイトルのデザインをおしゃれにする方法15」
⇒「H1一つでここまで出来るCSS見出しデザインのアイデア9個｜SQUEEZE」
ⅲ．クラス属性の見出し
Bloggerでは「ｈタグ」が1～6まであるようなので、それらを駆使すれば事足りるとは思います。ただ多種多様な見出しを使いたくなり、「ｈタグ」が足らなくなった場合に増やす方法もあります。念のために覚えておきましょう。
その方法とは「クラス属性」というものです。「クラス属性」とはそれぞれの「hタグ」に名前を追加することによって、使える「hタグ」を増やすものです。まずは【カスタムＣＳＳ】にクラス属性のｈタグを追加しましょう。例えば以下のように設定します。
h3.main {
padding-left:10px;
margin:20px 0 10px 0;
border-top: 1px solid;
border-bottom: 1px solid;
border-left: 5px solid;
border-right: 1px solid;
border-radius: 5px;
background: #ffffff;
font-size: 22px;
font-weight: bold;
}ここでは名前を「main」としています。こうすることで「h3.main」という見出しが新たに使えるようになります（私はこの見出しを「あとがき」で使っています）。ただ注意しておくことはクラス属性の見出しは【カスタムＣＳＳ】にコードを書いただけでは使えません。
使うときには【記事作成画面】でＨＴＭＬを編集しなければいけません。上記の見出しの場合は以下のようにします。
<h3 class="main">
あとがき</h3>このように見出し文を「クラス属性」のコードで囲えば【カスタムＣＳＳ】で設定したデザインが適用されます。
※以下の記事も参考になるので目を通してみてください。
⇒「スタイルシートの class と id の使い分け｜All About デジタル」
<補>色選びで役立つサイト
※また、見出しのカラーで迷ったときは以下のサイトが役に立つと思います。
⇒「色見本と配色サイト - color-sample.com」
※「和色」専用のサイトもあります。私のブログではこちらを多用しています。
⇒「和色大辞典 - 日本の伝統色465色の色名と16進数」
目次に戻る
３．「引用」を目立たせよう
ⅰ．CSSだけで変更する
記事を作っているときに、他人の文章や事例の一部を使用したくなるときがあります。こういった時には「引用」といって文章を借りてくるのですが、自分の文章とは分けて表示する必要があります。
Bloggerにも「引用」機能はあるのですが、非常に地味でわかりにくいです（【文章作成ツール】の右から3つ目にあります）。そこでこのデザインを編集して、もっと「引用」箇所が分かりやすくなるようにしましょう。
※以下の記事がわかりやすかったですよ（画像を使わずCSSだけで編集できるので簡単です）。
⇒「blockquoteタグをCSSだけで格好良いデザインにする【画像不要】｜おーとえすとさいと」
ⅱ．Bloggerでの注意点
ちなみに私の場合はこんな感じにしています。
ちょっと地味だけど画像を使わず簡単に作れます。「左上のマーク」は変更可能ですが、Bloggerでは制限があって選択肢は少ないようです（泣）
コードは以下のようになっています。
/* 引用 */
blockquote.tr_bq {
background-color:#ddd;
padding:1em;
margin: 0 0px 0 0px;
position:relative;
z-index:1;
}
blockquote.tr_bq:before {
content:"\"";
font-size:600%;
line-height:1em;
font-family:"ＭＳ Ｐゴシック",sans-serif;
color:#ffffff;
position:absolute;
left:0;
top:0;
z-index:-1;
}Bloggerの場合は「blockquote」の後に「.tr_bq」を挿入しなければいけません。それと「引用マーク」も上記のブログのやり方では上手くいかないので変えてあります（「"“"」から「"\""」へ）。
ⅲ．「リンク」も目立たせる
「引用」と同じように「リンク」も初期設定では地味すぎるので、分かりやすくデザインの変更を行いましょう。ちなみに「リンク」とは他人のブログ記事やサイトなどを紹介したいときに使う機能です（【文章作成ツール】の真ん中あたりにあります）。
※「リンク」のデザイン変更は以下の記事が分かりやすかったです。
⇒「記事内の関連リンク、外部リンクをCSSの追加のみで目立たせる方法｜FEBRUARY29」
更に！Bloggerの「リンク」にはアンダーラインがついてないので、アンダーラインも追加しておきましょう（このコードは上記で追加した「リンク」のみに適用されます）。
a.inlink,
a.exlink {
text-decoration: underline;
}目次に戻る
あとがき
さて、これで記事は見やすくなりました。『記事は見栄えより中身！』といっても、ある程度は見やすさも工夫すべきでしょう。
手を加えすぎて表示速度が遅くなっては意味がありませんが、私の紹介する編集方法はシンプルなものが多いので問題にならないと思います。
※次は記事以外の「ガジェット」や「ページ」を編集して、ブログを洗練させていきましょう。
⇒「ガジェットとページを使いこなそう - Blogger（ブログの作り方03）」
0 件のコメント:
コメントを投稿