サンプル記事

アイキャッチがあったり、記事内に画像があったり、コードがあったり、目次があったり、見出しがあったり、カテゴリーやタグのアイコンがあったり・・・と、このブログもかなり複雑になってしまった。CSSいじりにくいったらありゃしない。
というわけで、全部盛りのサンプルページを作っておくことにしました。
アイキャッチと挿入画像
まず、アイキャッチ。
アイキャッチそのものは、素だとただのimgタグです。
マージンをつけたければテンプレートでクラスをつけるわけですが、上下の要素にマージンつければまかなえそう。
そしてこのサイト、アイキャッチより記事内画像が優先されて一覧に出るんですね。
わたしのアイキャッチ不精にも困ったもんですね。
続いて画像を入れてみる。
同じ数値のはずなのに上下で余白が違って見えてモヤモヤする。
テキストから1行空けて連投してみた。
pで区切られたせいか、微妙な空き具合になった。
pのマージンとimgのマージンの合計?
1emの要素が続いたら、2em空くんじゃないの?
そして連投はbrで続いているけど、imgのマージンのぶんきっちりスキマがあくのでした。
コード
次に、コードを入れてみる。
.single-text p { margin: 1em 0; } .single-text img { border: solid 1px #ccc; margin: 1em 0 0.5em 0; }
一行空けてもういっちょ。
.syntaxhighlighter { /*コード*/ border: solid 1px #ccc; padding: 1em 0; }
一行空けてもくっつけても、マージンが同じなの、なんでだろう?
プラグインがCSS吐き出しているのか、こちらがいくらCSSをあてても上書きできない。
そのぶんpのマージンを少なくすると、今度はimgがくっつきすぎてしまうし、むずかしい・・・
見出しと目次
もちろん、見出しをつけて目次も生成してみる。
この目次がCSSの行数くっててなんだかなぁ。
見出し4
あと、最初なんにも考えずh2つけちゃって、あとからh3以下のほうがいいよなって思い直して、地道に打ち直すという作業が発生したので、本文中の見出しは設計段階でよくよく気を付けたほうがいいぞ、諸君。
アイコン
で、あとは、日付と並ぶカテゴリーやタグのアイコン。
もはや絶対に使わないであろうタグにしておこう。「Flash」とか。
あとでキーワードやアーカイブで絞り込んだときにこの記事が紛れ込んじゃったら、ごめんなさい。
同じコードを「single.php」と「index.php」で使いまわしたいんだけど、indexのほうはパーマリンクの中になるせいか、リンクにならなかったり、体裁崩れたりするんだよねぇ・・・どうしたもんかねぇ・・・
文字修飾
テキストエディタのクイックタグも一通り使っておこう。
「b」
太字にします。挿入されるタグは<strong>。
「i」
斜体にします。これも挿入されるタグは<em>。
「link」
リンクをはります。
【参考】WordPressのテキストエディタを便利にする「クイックタグ」とは?(カスタマイズ方法有)
クイックタグについてはこちらの記事が参考になります。
「b-quoe」
<blockquote>ですね。「引用」に使います。
「del」
打ち消し線。でもなんか<del datetime=” で始まる長いタグが入りますね。謎。
「ins」
下線。いわゆる付け足し部分。これもdelと同じタグが入るな。不気味。
「img」
画像を挿入します。
URLを入力しろと出てきます。ディレクトリフォルダの画像を使う時に使うのかな。コピペでよくね?
普通は「メディアを追加」で画像をアップロードしちゃいますよね。
「ul」「ol」「li」
リストを作成します。
- ul項目1
- ul項目2
- ul項目3
- ol項目1
- ol項目2
- ol項目3
「code」
プログラムコードを載せられるらしい。
body {
line-height: 150%;
letter-spacing: 1px;
}
どう? プラグイン要らなさそう?
「more」
「続きを読む」機能を埋め込むそうです。
この行の最後に<!–more–>があります。
どう? 下も普通に表示されてる? 何か設定するのかしら?
まとめ
出来上がってみたら・・・これはすごい!
この1ページだけですべてのCSSが調整できる!
テンプレートにサンプルページがある理由がようやく(いやなんとなくわかってたけどでも心の底から)わかりました。
これからはまず真っ先にこれ作ろう。
最後に
ココ ↓
じつは2行空けてるんだけど、吐き出されるページでは1行分しかスキマがないですよね。
「打ったテキスト通りに表示しろよ!」っていつも思うんですけど、どう思う?