PART3記事本文の特定の文字を修飾する今回は特定の範囲の文字列の修飾についてお話します。記事本文の特定の文字の修飾について確認するために、管理画面の〔投稿〕-〔新規投稿〕をクリックして、ビジュアルエディタとテキストエディタの画面の画面を出しました。ビジュアルエディタと、テキストエディタの切り替えは、右上の2つのタブをクリックするだけです。インライン要素とブロック要素ビジュアルエディタでは、文字色を変えたり、太字や斜体にしたり、基本的な文字の修飾ができます。標準の状態のビジュアルエディタでは、できることが限られているので、テキストエディタで修飾したい特定の文字にタグを指定することができます。style>との違いです。インライン要素in-lineとは『行内』の意。インライン要素とは、たとえば、文字列を太字にしたり、斜体にしたりするように、行内で特定の文字に意味を持たせます。styleで文字色や背景色を指定しても、文字列は一文として表示されています。ブロック要素は、<h1>や<h2>タグといった見出し、段落をあらわす<p>、論理的な意味は持たない<div>など。divとpについては、次の項目でも取り上げます。補足:カラーネーム色の指定は『#16進数』のカラーコードで表記されますが、CSSはブラウザ上で利用できるカラーネーム(色名)が定義されています。そのため、#ff0000はred、#FFC0CBはpinkと、カラーコードでもカラーネームでも指定することができます。『カラーネーム』で検索すれば、どんな色の名称が定義されているか、たくさんのサイトを閲覧することができます。抜粋表示『この記事の続きを読む』を修飾するさて、インライン要素とブロック要素の違いを踏まえたうえで、いぜんに設定した抜粋表示の『この記事の続きを読む』の部分を修飾したいと思います。.phpやcontent.phpの編集で、自動的に表示されるように設定したものでした。管理画面の〔外観〕-〔テーマの編集〕をクリック、子テーマのフォルダから『テーマのための関数』(functions.php)を選択します。次ぎに、『この記事の続きを読む』を出力している部分をブロック要素にします。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で指定される例もあり、製作者の解釈、意図が反映される側面もあるのでしょう。$content;}スタイルシート編集のためにclass属性を設定する今、やっていることは、『この記事の続きを読む』の部分を、他の文字列とは異なるブロックにすることにすること、そして、自動的に表示されるブロック内の文字列に対して、スタイルシートで修飾を指定するための準備です。スタイルシートで設定するために、このブロックにクラス名を指定します。スタイルの適用対象に名前を付与するのが、class属性です。ここでは、<div>から</div>で囲まれたブロックに、『my-excerpt』という名をつけました。設定が終了したら、『ファイルの更新』ボタンを押します。2ここまでの結果を確認する『この記事の続きを読む』をdivで囲ったため、......のあとに表示されていた文字列が改行されて表示されました。ブロック要素として表示された3スタイルシートの編集をする管理画面の〔外観〕-〔テーマの編集〕をクリックし、子テーマのスタイルシート(style.css)を編集します。先ほど、class属性を設定したブロック部分だけに適用される設定です。#d68dd6;}補足:padding値を1つ指定した場合:指定した数値が[上下左右]をさす。値を2つ指定した場合:記述した順に[上下][左右]をさす。値を3つ指定した場合:記述した順に[上][左右][下]をさす。値を4つ指定した場合:記述した順に[上][右][下][左]をさす。補足:boderの種類none(線なし)、solid(単線)、double(2本線)、groove(立体的に窪んだ線)、ridge(立体的に隆起した線)、inset(ボーダーで囲まれた領域全体が窪んだ印象になる線)、outset(ボーダーで囲まれた領域全体が立体的に隆起した印象になる線)、dashed(破線)、dotted(点線)などがあります。4結果を確認する図のような結果になりました。長くなりましたので、今回はここまで。次回以降は、タイトル部の設定や、コンテンツエリアの幅の調整などのお話になります。『BIOS/UEFI(EFI)』って何だ?関連コンテンツよろしくお願いします(*^_^*)訪問ありがとうございます。