＃５．カラーパレットを使ってHTML・CSSデザインを楽しもう！！

どうも、yamaです。
今回のキーワードは"カラーパレット"、"カラーチャート"です。

自分でブログを運営していると、もっといろいろデザインに凝りたいとか欲が出てくることはないでしょうか。

今やHTML、CSSともにGUIで設定すればサクサクッと自動的にソースが出力されてしまうようなサイトまで存在しています。ゼロからソースを書き書きしていくことは少なくなっていることでしょう。

たとえば、自分のブログをこういうデザインにしたいとか思ったら、それを検索すればすぐに"自分の求めていた結果"とその"テンプレート"が手に入ってしまうわけです。

そんな、HTML・CSSデザインをより一層楽しくさせるのは、やはり"色"ではないでしょうか。HTMLで色を指定したいけど、自分の頭で思い描いている色ってコードでどう書くの？

そんな疑問を解決するのが、"カラーパレット"・"カラーチャート"です。

"カラーパレット"・"カラーチャート"とは、色とコードの対比表のことです。たとえば、探したい色を指定すると、その色に対応するコード（16進数・RGB値）がすぐに手に入るのです。

オシャレにキメるぜ！と思っても、色値が分からなければWEBでは表現できません。上述のキーワードで検索すれば沢山出てきますので、自分の使いやすいサイトを探してみてください。

参考までにここでもひとつ紹介させていただきます。

サイト名：HTMLカラーコード
サイトURL：http://html-color-codes.info/japanese/

このサイトでは画面上の色をクリックすると、その色に該当するコードが16進数・RGB値の両方で出力されます。

このように楽にコードが見つかるため、HTMLデザインをもっと楽しめるようになると思います。ぜひ活用していきましょう！

＃３．Bloggerでトップページを記事一覧形式にする方法

Bloggerで標準テンプレートを使って記事を書いていると、ブログのトップページには投稿された記事が新しい順に並び、しかも記事全文が表示されています。

これは2017年2月現在のBlogger標準テンプレートの仕様でしょう。

Bloggerのデフォルト表示記事数は"７"に設定されています。そのまま記事を書き続けると、トップページには"７記事が全文表示された状態"で投稿順に並ぶという状態になってしまいます。

これでは見るほうも大変です。とくにスマホからの閲覧者にとってはスクロール地獄だと思います。

やはり、トップページには記事の冒頭文のみ、かつ一覧形式で表示するのが見やすいと思います。

そんなときに便利な機能が、この「続きを見る」リンクの設定です。

以下に【作成】と【HTML】での設定手順を説明します。

設定は一瞬で済むので簡単です。

目次

• 【作成】から"続きを読む"を設定する
• 【HTML】から"続きを読む"を設定する

【作成】から"続きを読む"を設定する

リンクを差し込みたい箇所にカーソルを合わせて、上図右側の赤枠のアイコンで設定できます。

【HTML】から"続きを読む"を設定する

リンクを差し込みたい箇所に、<!--more-->タグを埋め込んでください。

それでは、このタグの設定前と後で、トップページ上でどう表示が変化するのか見てみましょう。

設定前

設定後

"さしすせそ"の後に<!--more-->タグを記述したことで、トップページ上では、冒頭から"さしすせそ"まで表示され、そのあとに【続きを読む】リンクが表示されました。

この「続きを読む」リンクは自分の好みの箇所に埋め込むことができます。これを組み込むことでトップページがものすごく縦長のページになってしまう状態を改善することができるのです。

ぜひ試してみてください！

＃２．Bloggerで行間調整する方法

どうも、yamaです。
今回はBloggerで行間幅を変更する方法です。

Bloggerのデフォルト設定だと行間が狭いので見辛いと思います。多少の幅を持たせて見やすくしていきましょう。

設定は以下の手順で行います。

左メニューの「テンプレート」→「カスタマイズ」をクリックします。

「上級者設定」→「CSS」で以下のコードを貼り付けます。

.post-body {
line-height: 1.7;
}

最後に「ブログへ適用」ボタンを押して完了です。

これでブログ本文に対して設定がされます。調節するには上図の画面から"1.7"の部分を任意の値に変更します。この数字が隙間間隔になります。