記事本文の特定の文字を修飾する

今回は特定の範囲の文字列の修飾についてお話します。 まず記事本文の特定の文字の修飾について確認するために、管理画面の〔投稿〕-〔新規投稿〕をクリックして、ビジュアルエディタとテキストエディタの画面の画面を出しました。ビジュアルエディタと、テキストエディタの切り替えは、右上の2つのタブをクリックするだけです。

インライン要素とブロック要素
インライン要素とブロック要素

ビジュアルエディタでは、文字色を変えたり、太字や斜体にしたり、基本的な文字の修飾ができます。ただ、標準の状態のビジュアルエディタでは、できることが限られているので、テキストエディタで修飾したい特定の文字にタグを指定することができます。 ここで、注目したいのが、<span style>と、<div style>や<p style>との違いです。

インライン要素
in-lineとは『行内』の意。インライン要素とは、たとえば、文字列を太字にしたり、斜体にしたりするように、行内で特定の文字に意味を持たせます。<span>タグもインライン要素で、図のように、span styleで文字色や背景色を指定しても、文字列は一文として表示されています。

ブロック要素
一方、ブロック要素は、<h1>や<h2>タグといった見出し、段落をあらわす<p>、論理的な意味は持たない<div>など。そのため、spanタグで指定されたときと違い、divやpで指定された部分は改行が入ったり、背景として色がついている範囲が 違ったりしています。
divとpについては、次の項目でも取り上げます。

補足:カラーネーム
色の指定は『#16進数』のカラーコードで表記されますが、CSSはブラウザ上で利用できるカラーネーム(色名)が定義されています。そのため、#ff0000はred、#FFC0CBはpinkと、カラーコードでもカラーネームでも指定することができます。『カラーネーム』で検索すれば、どんな色の名称が定義されているか、たくさんのサイトを閲覧することができます。

 

抜粋表示『この記事の続きを読む』を修飾する

さて、インライン要素とブロック要素の違いを踏まえたうえで、いぜんに設定した抜粋表示の『この記事の続きを読む』の部分を修飾したいと思います。

これまでの設定結果
これまでの設定結果

『この記事の続きを読む』は、記事に続いて現れる文字列ですが、投稿記事の本文中に、1回1回記述されているわけではなく、functions .phpやcontent.phpの編集で、自動的に表示されるように設定したものでした。このうち、『この記事の続きを読む』という文字列を出力する設定は、functions .phpにあります。

これまでのテーマの関数
これまでのテーマの関数

/* 自動抜粋表示の設定 */
function my_excerpt( $length ) {
global $post;
$content = mb_substr( strip_tags( $post -> post_content ), 0, $length );
$content .= ‘…&nbsp;&nbsp;&nbsp;’ . ‘<a href=”‘. get_permalink($post->ID) . ‘”>’ . ‘この記事の続きを読む’ . ‘</a>’;
return $content;
}

 

①functions.phpの編集
管理画面の〔外観〕-〔テーマの編集〕をクリック、子テーマのフォルダから『テーマのための関数』(functions.php)を選択します。
次ぎに、『この記事の続きを読む』を出力している部分をブロック要素にします。
下から2行目の’…&nbsp;&nbsp;&nbsp;’は記事の『…』の部分は続けて改行しないで出力という設定ですから、その後の<a href=○○>~</a>までの部分が『この記事の続きを読む』を1つのブロックにします。そこで使用するのが、<div>タグか<p>タグです。

補足:使い分けが悩ましい<div>と<p>
<div>と<p>は、どちらを使っても同じ結果が得られるという場面も多いです。ただ、両者はまったく同じものではありません。
まず、divは子要素にブロック要素も内包できますが、pはインライン要素しか内包できないため、pで指定された箇所をすべてdivで置き換えることはできますが、divで指定された箇所をすべてpに置き換えることはできないという文法上のルールがあります。そのため、文法だけ考慮して、論理的な意味を考えなければ、<div>にしておけば問題ないともいえます。でも、ちゃんと意味を考えて、<div>と<p>を使い分けておかないと、あとから設定を見直したときに、かえって構造が分かりにくい。ただ、両者の意味合いから、ここはdivなのか、pなのか考えると、迷う場面もあるわけです。

pはparagraphの意、『段落』という論理的な意味を持ちますが、divはdivison、分けられた状態をさし、論理的な意味を持ちません。つまり、指定するブロックの範囲が、『段落』という概念に嵌るものならpが適切だし、段落という意味合いに嵌らないのならdivが適切ということになります。
自動的にトップページに表示される抜粋表示上の『この記事を読む』は、トップページだけ眺めると、記事本文に連続して表示される部分ですら、pでも良いように思いますが、私は本来の記事とは別もの、自動的に表示されるものという視点が強いので、divを使ったほうがわかりやすいと思いました。実際、divで指定される例も、pで指定される例もあり、製作者の解釈、意図が反映される側面もあるのでしょう。

 

div class属性を設定
div class属性を設定

 /* 自動抜粋表示の設定 */
function my_excerpt( $length ) {
global $post;
$content = mb_substr( strip_tags( $post -> post_content ), 0, $length );
$content .= ‘…&nbsp;&nbsp;&nbsp;’ . ‘<div class=”my-excerpt”><a href=”‘. get_permalink($post->ID) . ‘”>’ . ‘この記事の続きを読む’ . ‘</a></div>’;
return $content;
}

スタイルシート編集のためにclass属性を設定する
今、やっていることは、『この記事の続きを読む』の部分を、他の文字列とは異なるブロックにすることにすること、そして、自動的に表示されるブロック内の文字列に対して、スタイルシートで修飾を指定するための準備です。
スタイルシートで設定するために、このブロックにクラス名を指定します。スタイルの適用対象に名前を付与するのが、class属性です。ここでは、<div>から</div>で囲まれたブロックに、『my-excerpt』という名をつけました。

設定が終了したら、『ファイルの更新』ボタンを押します。

②ここまでの結果を確認する
『この記事の続きを読む』をdivで囲ったため、……のあとに表示されていた文字列が改行されて表示されました。

ブロック要素として表示された
ブロック要素として表示された

 ③スタイルシートの編集をする
管理画面の〔外観〕-〔テーマの編集〕をクリックし、子テーマのスタイルシート(style.css)を編集します。
先ほど、class属性を設定したブロック部分だけに適用される設定です。

『この記事の続きを読む』を修飾
『この記事の続きを読む』を修飾

/* この記事の続きを読む */
.my-excerpt a {
float: right;
width: 140px;
padding: 0.2em 1em;
color: #ffffff;
text-decoration: none;
background: #ddbcff;
border: 3px outset #d68dd6;
}

補足:padding
値を1つ指定した場合:指定した数値が[上下左右]をさす。
値を2つ指定した場合:記述した順に[上下][左右]をさす。
値を3つ指定した場合:記述した順に[上][左右][下]をさす。
値を4つ指定した場合:記述した順に[上][右][下][左]をさす。

補足:boderの種類
none(線なし)、solid(単線)、double(2本線)、groove(立体的に窪んだ線)、ridge(立体的に隆起した線)、inset(ボーダーで囲まれた領域全体が窪んだ印象になる線)、outset(ボーダーで囲まれた領域全体が立体的に隆起した印象になる線)、dashed(破線)、dotted(点線)などがあります。

④結果を確認する
図のような結果になりました。

ブロック要素の修飾
ブロック要素の修飾

長くなりましたので、今回はここまで。
次回以降は、タイトル部の設定や、コンテンツエリアの幅の調整などのお話になります。