2017年2月10日

Bloggerのカスタマイズ

Bloggerでブログを始めて1年が過ぎた。
このブログシステムの広告がない、シンプルなスタイルがいい。
それと簡単なカスタマイズや、CSSを使ったカスタマイズもできる。
このブログも少しカスタマイズをしている。

CSSを使わない簡単なカスタマイズは「幅の調整」「Navbarの非表示」「背景色の変更」などだが、
行間の変更はCSSを使っている。
一つは本文の行間である。
初期設定では記事の本文の行間が詰まり過ぎて読みにくいので、もう少し行間を広げてみた。
これは「line-height」を使えばできる。
テンプレート デザイナーでCSSを使って「line-height」を追加してみる。

テンプレート デザイナーの カスタムCSS

Bloggerのダッシュボードから「テンプレート」→「上級者向け」→「CSSを追加」と開くと、
上の画像のようにCSSの追加ボックスが現れる。
ここに

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

と追加すればいい。
このブログは「1.7」を指定しているが、このバランスが良さそうである。
この数字を大きくすれば行間が広がる。

もう一つは、ラベルなどのウジェットの行間が空きすぎていることである。
「最近の記事」の行間がそれである。
このブログでは「ラベル」にラベルウジェットを使っているが、項目も増えてきて、
初期設定の広い行間では間延びするので、もう少し行間を詰めたい。
けれど、このウジェットはリスト形式なので「line-height」では行間を変えられない。
リスト形式の行間を変えるには「margin-bottom」を使う。

同じく「CSSを追加」を開いて

#Label2 li {
margin-bottom: -12px;
}

と追加すればいい。
このブログは「-12px」を指定しているが、このように行間を狭める場合はマイナス値で指定すればいい。

HTMLの編集

「Label2」というのが「ラベル」のIDだが、
これは「テンプレート」→「HTMLの編集」→「ウジェットへの移動」を選ぶとウジェットの一覧が表示されるので、
そこから名前を知ることができる。
例えばラベルウジェットの場合は「Label1」「Label2」と表示されている。

このように、CSSの追加を使えば元へ戻すことも簡単なので、HTMLを直接修正するよりも安全で便利ある。

2 件のコメント :

  1. 今晩は、10年近く昔の話です
    高校生くらいの頃に、娘が先生に手ほどきを受けて
    クラブの発表などにタグを使ってホームページ作りや
    プレゼンなど、パソコンでの作業を時々していました
    高額なソフトを買わなくても、一寸タグを勉強したら
    何とかなりそうだったので、
    無料というニンジンをぶら下げられた馬状態の私は
    少しだけ自分で自分のHPを作れる様になりました
    CSSとか、背景とテキストの行間の調整、少し凝った見出しなど・・・
    それは1年以上は頑張っていたのですが
    其の内に書くことも無くなり、
    そうこうすうるうちにBlogの方へ〜
    で、そのBlogも自然消滅・・・
    この記事を見て、懐かしんだり失望したり!
    今では最早、ちんぷんかんぷんの世界でしかありません( ; ; )

    ではでは、♪お気張りやす♪〜

    返信削除
    返信
    1. こんばんは。
      タグを直接使ってホームページを作られたんですね。
      一般的には「ホームページビルダー」などのソフトを使うのでしょうが、
      HTMLとCSSで記述した方がコンパクトに作れますよね。
      それにしても、タグ記述でHP作成とは凄いですね。
      娘さんだと、学校なので基本的な構造を学ぶ意味もあるのでしょうけど。

      私もソフトウェア開発の仕事をしていたこともあって、
      写真を始める前は、ソフトウェア関係のホームページを開設していましたが、
      いろいろなブラウザに対応させるのが面倒になり、
      写真を始めた時にブログに移りました。
      ブログはHTMLを知らなくても簡単に使えるので、一気に普及しましたね。
      当初は凝った表現ができなかったですが、
      最近はカスタマイズも、ある程度できるようです。

      HTMLも進化につれて複雑になり重くなってきて、
      スタイルシートを使うのが一般的になりましたね。
      タグや要素など懐かしいのでは?

      削除