よもやまチョモランマ

サンプル記事

WordPress随時更新 Flash

アイキャッチがあったり、記事内に画像があったり、コードがあったり、目次があったり、見出しがあったり、カテゴリーやタグのアイコンがあったり・・・と、このブログもかなり複雑になってしまった。CSSいじりにくいったらありゃしない。

というわけで、全部盛りのサンプルページを作っておくことにしました。

目次

アイキャッチと挿入画像

まず、アイキャッチ。
アイキャッチそのものは、素だとただのimgタグです。
マージンをつけたければテンプレートでクラスをつけるわけですが、上下の要素にマージンつければまかなえそう。
そしてこのサイト、アイキャッチより記事内画像が優先されて一覧に出るんですね。
わたしのアイキャッチ不精にも困ったもんですね。

続いて画像を入れてみる。

同じ数値のはずなのに上下で余白が違って見えてモヤモヤする。



テキストから1行空けて連投してみた。
ｐで区切られたせいか、微妙な空き具合になった。

ｐのマージンと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をあてても上書きできない。
そのぶんｐのマージンを少なくすると、今度はimgがくっつきすぎてしまうし、むずかしい・・・

見出しと目次

もちろん、見出しをつけて目次も生成してみる。
この目次がCSSの行数くっててなんだかなぁ。

見出し4

あと、最初なんにも考えずｈ2つけちゃって、あとからｈ3以下のほうがいいよなって思い直して、地道に打ち直すという作業が発生したので、本文中の見出しは設計段階でよくよく気を付けたほうがいいぞ、諸君。

アイコン

で、あとは、日付と並ぶカテゴリーやタグのアイコン。
もはや絶対に使わないであろうタグにしておこう。「Flash」とか。
あとでキーワードやアーカイブで絞り込んだときにこの記事が紛れ込んじゃったら、ごめんなさい。

同じコードを「single.php」と「index.php」で使いまわしたいんだけど、indexのほうはパーマリンクの中になるせいか、リンクにならなかったり、体裁崩れたりするんだよねぇ・・・どうしたもんかねぇ・・・

文字修飾

テキストエディタのクイックタグも一通り使っておこう。

「ｂ」

太字にします。挿入されるタグは＜strong＞。

「i」

斜体にします。これも挿入されるタグは＜em＞。

「link」

リンクをはります。
【参考】WordPressのテキストエディタを便利にする「クイックタグ」とは？（カスタマイズ方法有）
クイックタグについてはこちらの記事が参考になります。

「b-quoe」

＜blockquote＞ですね。「引用」に使います。

「del」

打ち消し線。でもなんか＜del datetime=” で始まる長いタグが入りますね。謎。

「ins」

下線。いわゆる付け足し部分。これもdelと同じタグが入るな。不気味。

「img」

画像を挿入します。
URLを入力しろと出てきます。ディレクトリフォルダの画像を使う時に使うのかな。コピペでよくね？
普通は「メディアを追加」で画像をアップロードしちゃいますよね。

「ul」「ol」「li」

リストを作成します。

  • ul項目1
  • ul項目2
  • ul項目3
  1. ol項目1
  2. ol項目2
  3. ol項目3

「code」

プログラムコードを載せられるらしい。
body {
line-height: 150%;
letter-spacing: 1px;
}
どう？　プラグイン要らなさそう？

「more」

「続きを読む」機能を埋め込むそうです。
この行の最後に＜!–more–＞があります。
どう？　下も普通に表示されてる？　何か設定するのかしら？

まとめ

出来上がってみたら・・・これはすごい！
この１ページだけですべてのCSSが調整できる！
テンプレートにサンプルページがある理由がようやく（いやなんとなくわかってたけどでも心の底から）わかりました。
これからはまず真っ先にこれ作ろう。

最後に

ココ　↓

じつは2行空けてるんだけど、吐き出されるページでは1行分しかスキマがないですよね。
「打ったテキスト通りに表示しろよ！」っていつも思うんですけど、どう思う？

≪ next post
prev post ≫