bloggerのカスタマイズに苦戦中

今までFC2、シーサー、WP（ワードプレス）と…あと一つ何だったかな？読み方がわからないのですが、これらしか使ったことがないためbloggerは初めてとなります。

そのため記事作成の前にテンプレートの初期設定やらのカスタマイズに苦戦しております。

他のサービスに比べると使い慣れていない分、まだまだ私にとって使い勝手の悪さが目立ってしまっていますが…。

追加cssでカスタマイズ

見出しの見栄えを変更

まずやったことは「見出し」の見栄えを変えたことです。デフォルトのままでは見にくいし、可愛くなかったので見栄えを”最初のままよりはちょっとマシ”くらいになるようにしました。

参考にさせていただいたのは、実際に表示される見栄えの通りに表示させるためのコードをコピペするだけでOK！というサイトです。

こうしたサイトをたくさん見つけることができたので、それらの中から選ばせてもらいました。まだまだ自分の中で改善の余地はありますが、最初に比べたら大分マシになったので気に入っています。

サイトでコピーしたコードをこちらの「追加CSS」に貼りつけるだけでいいという手軽さだったので、ほかにも気になる部分を修正。

見出しの余白を調整

次に気になったのは見出しの余白です。確かにコードをコピペすれば見栄えを変えることはできました。

ですが記事本文のテキストと重なって表示されたり、上下の余白がほとんどなくギュッと詰まった感じで窮屈な仕上がりだったので、こちらも上下の余白をmarginで設定してテキストかぶりや窮屈な見た目を解消。

行間の調整

個人的なこだわりというか、他の人はあまり気にならないところだとは思うのですが、私は行間が少し広めに空いてないとダメな人です。

行間が狭いサイトの文章は読む気になれないので、自分で記事を作成するときも行間を広めに設定しています。

そうすると文章量が多くなるほど縦スクロールも増えてしまうので、スマホなどで見た時にどうかな。という点は気になるところではありますが、それでも操作性よりも読みやすさに重きを置きたい私としては、行間の調整も欠かせません。

初めての失敗から学んだこと

追加CSSがいつまでもそこにいてくれない

他のブログサービスでは追加CSSの欄に記入したものは、日にちが経ってもいつまでもそこに居続けてくれるのですが、こちらは昨日追加した分が欄から消えhtmlの方へ移動していました。

これも知らなかったので設定したらその場所にずっとい続けてくれるものと思って、昨日設定したものを今日編集しようとしたら消えていたことに驚きました。でもこれが普通なのかな？わかりませんが。

ということで自分が追加した分はテラパッドなどにコピーを残しておくのがいいと思います。そうしないとhtmlの中から探し出すのはとても大変。昨日追加した分が581行目とか、とんでもないとこにいたりするのでバックアップはこまめにとっておいた方がいいと思います。

エディタを使いこなすまでの失敗

記事作成にはこちらのエディタを使うよりも、最初にテラパッドでタグ入りで編集したものをコピーしてエディタに張り付けた方が私は楽。

本文となる文章は出来上がった状態なので、あとはエディタでフォント装飾や画像の挿入をして公開。という作業の方が楽でした。

どうしてかというと他のブログサービスではあまり見られなかった「標準」と「段落」の切り替えを忘れてしまうからです。これらの違いは＜div＞なのか＜p＞なのか。ですよね。

なのでこの切り替えを忘れて後から気づいてからの修正が大変＆面倒くさい。この作業で実際に昨日泣きました。

自己紹介の記事を作成ビューだけで編集後プレビューでの見栄えは問題なかったのですが、公開直前にはじめてhtmlを確認してガッカリ。

タグの置き換えはすぐできるのですが、一瞬理解できなかったのはdivでbrが囲われていること。html初心者同然の私はそれを見て泣いた。

こうした失敗をあと何回繰り返したら使いこなせるようになるだろうか。

改行タグが統一されていない

bloggerを利用するのが初めてなので以前はどうかわかりませんが、作成ビューとhtmlビューとで編集するビューによって使用される改行タグが違うことにも気づきました。

作成ビューでエンターを押しての改行だとスラッシュが入るbrとなるのですが、htmlビューでシフトを押しながらエンターを押しての改行だとスラッシュが入らないbrとなる。ということを調べて初めて知りました。

なぜ？

画像サイズの設定での失敗

画像を挿入するにあたって画像サイズを小・中・大・特大・元のサイズ（原寸大）から選べるのですが、私は今まで縦472横640で画像を圧縮してからアップしていたので、単純に今まで通り原寸大表示にしてもレスポンシブが当然働いてくれるのだろう。と思っていました。

しかし現実は甘くなかった。
小から大までは確かにレスポンシブが働いてくれるのですが、原寸大はそのサイズで固定だったので、例えばパソコンで見る分には問題なくてもスマホやタブレットで確認すると画像がはみ出てしまいました。

そこで思ったのは座標を指定してクリックさせるタイプの画像にはもってこいなのでは？ということです。

一枚の画像の中に複数のリンクを設定し、クリックする場所によってリンク先が異なる画像を表示させたいときに使えそうですね。

以前、WPでそれをやったことがあるのですが、PCもモバイルも関係なくすべての画像がレスポンシブで表示されてしまうのに対し、それが座標までは対応していないので、それはそれで苦労した覚えがあります。

いつか機会があったらやってみたいです。

まとめ

昨日からスタートして今日で2日目の更新となりますが、今回は見栄えのカスタマイズで実際にやってみたことを綴ってみました。ちなみにテンプレートは公式のもので、できるだけシンプルなものを選んで使っています。

というのもまだ非公式のテンプレをいじりまくれるほどのスキルがないので、まずは基本操作を覚えることから。ということでまだまだ苦戦しそうな予感ですが、自分で調べながらいじることに楽しさを感じているので頑張ります。