読者です 読者をやめる 読者になる 読者になる

トワイライツ・ノーツ

日記と本と、時々Web

ブログを楽に運営するためにしていること その2

ブログを楽に運営するためにしていること その1 - たそがれノート

前回の続きです。今回はタグとかCSSの話も入っています。
Webクリエイターの学校にも通ったのでがっつりその辺りをいじろうと思えばできますが、あまり大したことはしてないです。

そこに時間を取られ過ぎてもしょうがないと思いますし、人のソースコードを見て大幅にいじるってかなり面倒なもので……。

今回は、いかに毎回の手間を省くかという感じの内容です。

下書き投稿の使い方

今は大抵のブログサービスにメール投稿という機能があって、その中でも『下書き投稿』というのがあります。
私の場合、ネタを思いついた時や書きかけの記事は、下書き投稿にタイトルをつけてどんどん保存していきます。

ブログ用にネタ帳とかは持ち歩いていませんし、ブログの下書き自体をメモ帳とか書きかけの記事の保存に使っています。出先ではメールの下書き投稿で送ってしまったりすることも多いです。

こうしておくと、ブログの下書き記事を見るだけでネタ・書きかけ・見直し前・投稿待ちなどの記事が全部入っている状態になるので、管理がしやすい。

管理する場所が増えると煩雑になるので、ブログ管理画面を見れば大概のことは足りるようにしています。

html編集と見たまま編集を使い分けること・段落変えと改行の違い

見たまま編集だと、ソース上変なタグになることがあります。

<p> </p>

ものすごくよくある例だと、一行空けたいだけなのに上のようなタグが大量生成されてしまうところ……。

インポートした過去記事に関しては諦め気味ですが、ソースとして汚いし記事の見栄えも悪いので、新しく記事を書く時に、投稿前にちまちまと手作業で直していました。

これを解決する方法というのが、見たまま編集で改行する時に『Shift+Enter』で改行することです。そうするとちゃんと改行タグの『<br />』になってくれます。

ちなみにEnterのみの改行とShift+Enterの改行は何が違うかというというのはこちらのページを見て知りました。


Wordにおける段落替えと改行の違い (EnterとShift+Enterの違い) - いろいろ備忘録日記

Enterは段落(paragraph)を変える。
Shift+Enterは段落を変えずに改行(break)をする。
ということみたいです。これを知ってから入力が非常に捗っています。


入力は基本は見たまま編集で行い、コピペやカット、ソースコードの調整・編集にhtml編集という具合に使い分けています。
見たまま編集でコピペすると、変にタグまで巻き込んでしまう時があるので、html編集は欠かせません。

文章のテンプレートを作っておく

最近少し記事の書き方を変えました。
具体的には、見出しをつけるようになったことと、続きを読むに格納するようになったこと。
前は見出しもなしに、だーっと長い文章を書いていましたが……他の方のブログを拝見すると、見出しがあると格段に見やすいんですよね。
そういう訳で、見習いました。

今のテンプレートは、見出しなどのタグも含めてこんな感じです。

(エントリータイトル)←これは自動でタグ付けされる
リード文←『続きを読む』以下に格納されない部分
<p><!-- more --></p>←ここから下の記事を『続きを読む』にする
<h3>見出し</h3>
<p>文章。<br />
文章。<br />
文章。<br /></p>
※以下、必要なぶんだけ<h3>見出し</h3>~<p>文章</p>を繰り返し

書評など少し違う場合もありますが、基本的にはここから大きくは外れないように書いています。

自分用マイルールというか、こういうことを決めておくととっても楽です。

CSSを使いまわす

上記でテンプレートは凝らないと言いましたが、いじることで毎回の手間を減らせるところであれば、話は別です。

たとえば私の場合、毎回記事を書く度に、手動で調節しているところがありました。
具体的に言うと、見出しの上に、毎回<br />(改行タグ)を3つ付けていたんです。

その部分が前の段落とくっついていると見にくい、というのが理由でしたが、別にそんなことをしなくても、『記事中の見出しタグに対して、上部にスペースを空ける、という指定をCSSですれば必要ない』ということに気がつきました。

そういう訳で、ちょっとしたCSSを書き足しています。

ちなみにこんな感じ。

.entry-content h3 {
margin-top: 3em;
}
※エントリー中の見出しの上に3文字分のスペースを空けるというCSS

この指定のおかげで、毎回『<br /><br /><br />』で見出し上部のスペースを調整する手間がなくなりました。

あとは、リンクの色とか文字のサイズとか……どんなテンプレートに変えたとしても、毎回変える部分があるんですよね。
という訳で、毎回手動で調整しているところや、テンプレートを変えても使いまわせるようなCSSを作って使用しています。
こういう準備をしておくと、気分でブログデザインを変えたくなった時でも楽です。