ここしばらく過去の記事を読みやすくするため、表題のような手を入れております。本日はこれにつきまして、簡単に解説いたします。
過去記事の修正点
まず、なにをしたかということですが、h2タグとblockquoteタグに、以下のようにstyleを設定しております。
その一つは、小見出しのフォントの修正で、h2で規定される見出しをボールド体とすることを指定しています。この指定は、以下のように、h2タグにstyleを指定し、font-weightをboldとしています。
<h2 style="font-weight: bold;">
この修正に合わせて、小見出しに振っておりました章番号を、原則として、削除しています。一部、紹介した書物の章番号を小見出しに用いていた記事では、章番号を残すという、例外的処置をいたしました。
もう一つは、引用部のフォントサイズが大きくなっていたものを、標準サイズとしたこと。この指定は、以下のように、blockquoteタグにstyleを指定し、font-sizeをmediumとしています。引用部は、フォントの色をblueとしておりますが、一部に指定を忘れていた部分につきましてはcolorをblueにする指定を行っています。
<blockquote style="font-size: medium; color: blue;">
フォントのプロパティと値
今回おこないました調整は、全てフォントのプロパティを変更しております。styleで指定できるフォントのプロパティとその値の代表的なものを以下に示します。
color: 文字の色を指定します。値は、red, blue, greenなどの定義済みの値か、#0000ffのように、#に続けてRGBの輝度をそれぞれ16進2桁で並べて指定します。ちなみに、#0000ffはblueです。
font-size: 文字の大きさを指定します。値は、small, medium, large（small, largeの前に、x-, xx-をつけると、拡大・縮小がさらに強調されます）のように文字で指定するか、80%のように、medium（標準サイズ）に対する比率で指定するか、12pxのようにピクセル数で指定します。
font-style: フォントのスタイルをイタリックにします。値はitalicがイタリック、normalが通常です。html4までは、<i>と</i>でイタリックとする範囲を示しており、html5でも、他と異なる表示としたい場所と解釈されますが、このタグは、今後はあまり使わない方が良さそうです。
font-weight: フォントの太さを調整するもので、値をnormal, boldとすることで、標準とボールドの切り替えができます。値を数字で指定する場合は、400が標準で、100から900までの100毎に調整が可能です。ただし、フォントにこれらの太さが準備されていない場合は、変化しない可能性もあります。
<b>と</b>で挟むことによりボールド体とすることが可能で、html5もこれにより強調部分を指定することとなっています。なお、サーチエンジンに強調部分であることを伝達するためには、<strong>と</strong>で挟んだ方が良さそうです。
じつは、以前ご紹介しましたように、フォント関係の属性はfontタグで設定できました。しかしながらこのタグはhtml5では廃止になるということで、WordPressでもその動作が一部不安定となっておりました。ここは、文字関連属性の設定は、styleで行う形に統一するのが良いのではないかと思います。
styleを任意の場所で使うためには
styleは、<h2 style="....">～</h2>や<blockquote style="....">～</blockquote>以外でも、ほとんどのタグで使用することができます。たとえば<a href="...." style="...">～</a>などとしてアンカーテキストの部分のフォントや色を変えることもできます。
タグに挟まれていない部分のスタイルを変更したい場合は次のいずれかのタグを用います。
<span style="....">～</span>：行の内部の任意の場所のスタイルを変更します。spanタグ自体は何の影響も与えません。
<div style="....">～</div>：改行に囲まれたブロックのスタイルを変更します。divタグに囲まれた部分はブロックを形成しますが、それ以外は何の影響も与えません。
2017.8.21追記修正：以下は、より簡単に修正するための手法で、これまでの失敗の記録を一部削除して、成功版に置き換えました。
style.cssを直す
「自分でカスタマイズしよう！WordPressでCSSを編集する方法【初心者向け】」を参考に、style.cssを修正することを試みました。
ダッシュボードの「概観」「テーマの編集」をクリックするとstyle.cssの編集ページが現れます。この最後の部分を以下のようにいたしました。
/* 14.3 Other styles */
/*modified by Y. Seo*/
.entry-content h2{font-weight: bold;}
.entry-content blockquote{color: blue; font-size: medium;}
/********************/
クラスは、h2.entry-content{}のように書くことも行われているのですが、今回はこれではうまくいかない様子です。
また、style.cssを修正しただけでは、古いキャッシュが残っている場合にこの変更が反映されないことがあるようで、私の場合には、全く修正が効いておりません。
そこで、このページを参考に対処したところ、成功いたしました。行ないましたことは、以下の、<!-- Seo Header - Start -->から<!-- Seo Header - End -->をheader.cssの終わりのあたりに挿入することです。
<!-- Seo Header - Start -->
<link href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" rel="stylesheet" type="text/css">
<!-- Seo Header - End -->
</header><!-- #masthead -->
<div id="main" class="wrapper">
body内にstyleタグは置けるか
styleタグは、<style>と</style>で挟まれた部分でスタイルを指定するもので、通常は、ヘッド部分かスタイルファイルに記述するのですが、html5からはstyleタグがbodyに置けるという記述を見つけましたので、これが使えるかどうか、ちょっとテストしてみました。
やりましたことは、以下をbody内の適当なところに記述したこと。これで上と同じことができればよいのですが、、、
<div>
<style>
.entry-content h2{color: red;}
.entry-content blockquote{color: red;}
</style>
<h2>小見出しのテスト</h2>
<blockquote>引用部のテスト</blockquote>
</div>
以下はその実験です。（スタイルタグが置かれているのですが、何も表示されていないはずです）
以下は、テスト用の小見出しです。赤くなれば、上に記述したスタイルが働いたことになります。
小見出しのテスト
引用部のテスト
さて、皆さんの環境ではどのように見えるでしょうか？ Chromeではうまく赤くなりました。
ポイントは、クラス名をタグ名の前に書くことが鍵で、h2.entry-contentのような指定は無視されるようです。なお、WordPressの記事本体はentry-contentというクラス名が付いております。スタイル指定は、範囲の狭い指定が優先されるため、スタイルファイルでentry-contentにスタイル指定がなされておりますと、クラス指定のないタグ指定のみのスタイル指定は無視されてしまいます。
本文書の表現上少々困ったことは、このスタイルタグは、文書の全ての箇所に影響いたします。style.cssは引用部を青くしていたのですが、body中のスタイルタグにより、この効果は打ち消されてしまいました。ただし、文字の大きさやh2タグのボールド体などの効果はちゃんと残っております。
上の引用部のように、スタイル指定をdivタグで囲った部分で行ってみましたが、スタイル定義は外部まではみ出してしまいます。もちろん、文書内の一部のみのスタイルを変えたいなら、タグにstyleを指定すればよいだけの話なのですが、、、
h2タグをmoreの前に移動しました。こうすると、省略表示の際にはmoreより後ろのstyleタグは読み込まれず、style.cssの効果のみが作用します。「続きを読む」をクリックすると、本文後ろのstyleタグも有効になり、h2タグの色が変わる、というわけです。ちょっとおもしろいですけど、応用の途は限りなくゼロに近いですね。