WordPress

AFFINGER4の記事タイトルや見出し、段落、ぱんくず、カテゴリー、投稿日の文字(フォント)と色を変更したい!

投稿日:2016年9月28日 更新日:

AFFINGER4の文字(フォント)まわりのことを初心者向けに解説します。

文字の変更の多くはダッシュボード>外観>カスタマイズを利用します。ただ一部、style.cssに変更を加えなくてはならないところもあります。この記事ではコピー&ペーストで簡単にできるようにしてあるのでぜひご活用ください。

なおここではWordPressの投稿画面の編集プラグイン「TinyMCE Advanced」の使用を前提としています。

 

affinger4title

 

この記事はおもに以下の内容で構成されています。

子テーマのカスタマイズについて

フォント「游ゴシック」を解除

記事タイトルと見出し

「段落」の文字

イエロー、薄赤、グレーのボックス

ブログカード風

おすすめ記事一覧と関連記事一覧

ぱんくず、カテゴリー、投稿日

【AFFINGER5(WING)ver20180613以降についてはこちらの記事をご参照ください】

affinger5wing180613_07
AFFINGER5(WING)ver20180613以降の見出しフォントを細く!記事一覧抜粋文を小さく!

AFFINGER5(WING)はver20180613において、前回の大型アップデートver20180521β版を吸収し、リニューアル正式版としてリリースされました。 そらより ...

続きを見る

【コード変更の実施には以下の点をご注意ください】

ここで示したコードがデザインに反映されないケースがあります

ご使用のバージョン、プラグインなどのさまざま要素が影響するようです。またコードを変更することでデザイン崩れが発生することがあります。その際は変更を加えた部分を削除してください。そらよりはいかなる損害も責任を負いません。自己責任で実施してください。

変化が見られない場合、ブラウザの設定からキャッシュを削除してみてください

Google Chromeなら「設定」画面の最下段から「詳細設定」をクリック。「プライバシーとセキュリティ」の最下段「閲覧データを消去する」をクリック。「次の期間のアイテムを消去」で「過去1日」または「1時間以内」を選び、「キャッシュされた画像とファイル」のみにチェックマークを入れます。最後に「閲覧履歴データを消去する」をクリックします。

付属の子テーマではPCサイズ、タブレットサイズ、スマホサイズがわけられます

付属の子テーマ(詳細後述)で変更を加える場合、特定のタグ内にコードを記入することで、PCサイズ、タブレットサイズ、スマホサイズ、それぞれに限定して変更を加えることができます。もちろんオリジナルの子テーマに同タグを用いても可能です。

たとえばPCサイズに限定した変更を加える場合、以下のPCサイズ指定のタグスペース内に挿入してください。ダブルクリックで再表示すると選択しやすくなります。

デフォルトでは入っていませんが「PCサイズ限定」の文言を加えました。閉じタグを誤って消してしまわないための予備策です。

 

子テーマのカスタマイズについて

作業に取り掛かる前にカスタマイズのおさらいです。今回は子テーマにあるstyle.cssにコードを直接書き入れます。

style.cssのカスタマイズはAFFINGER4Childのダッシュボード「外観」→「テーマの編集」からの方が簡単ですが、慌てん坊のそらよりはよく間違って本テーマをいじってしまうので、手順として馴れた古い方法でやっています。

 

フォント「游ゴシック」を解除

Windows7など古いOSでは「游ゴシック」が認識できず別のフォント(日本語はMSPゴシック)に置き換わってしまいます。また字体そのものが好きではないという方もいらっしゃるでしょう。

そんなときはデフォルトで設定されているフォント「游ゴシック」を解除することができます。

「ダッシュボード「AFFINGER管理」から「サイト全体の設定」の「各見出しGoogleフォントなど」の項目に行きましょう。

midashihenkou4

フォント一覧の最下段に「見出しやタイトルに游ゴシックを使用しない」があります。ここにチェックを入れます。「save」で確定します。

midashihenkou5

 

すると日本語フォントはつぎのようになります。本テーマのstyle.cssをチェックするとデフォルトで指定されているフォントを確認できます。

* {
font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "MS Pゴシック", sans-serif;
margin: 0px;
padding: 0px;
}

WindowsはメイリオまたはMSPゴシック、Macはヒラギノ角ゴという志向を取り入れた、従来から日本語が最も読みやすいとされている標準的な設定です。

これで記事タイトル、見出しh2、見出しh3がすべてメイリオで表示されるようになります。(段落本文は変更前も変更後もメイリオです)

でも、そらよりの好みはもう少し細い方がいい。また段落本文の文字を大きくし、行間も変えたい。そこで子テーマのstyle.cssに変更したい部分の記述を加えることにしました。

 

記事タイトルと見出し

子テーマのstyle.cssに次の記述を加えます。

記事タイトルの文字の太さがboldに指定されていたのでnormalに変えます。子テーマでの上書き変更が確実に反映されるように「!important」も添えておきました。このままコピー&ペーストでご利用いただけます。

 

同様に見出しh2を変更します。

h3(小見出し)、h1(検索結果のタイトル)は上記の「2」の数字を書き換えてください。

各見出しの背景や線、色はダッシュボード「外観」→「カスタマイズ」→「各テキストとhタグ(見出し)」で設定・変更できます。

 

「段落」の文字

つぎにパソコン表示の「段落」に手を加えます。

AFFINGER4のオフィシャルサイトでは基本のフォントサイズの変更方法が公開されています。その方法で「段落」のフォントサイズのみ拡大しようとしましたが、うまくいきません。トップページの記事一覧に表示される導入文章も同時に拡大されてしまいました。そこでここではオフィシャルとは異なる方法をご紹介しています。

そのコードは次のとおりです。

数字の部分をお好きなものに変えてお使いください。

 

なお文字色は「color: #000000;」の「#000000」の部分を好みのWebカラーコードにすれば変更できます。色の検討には「原色大辞典」が便利です。

文字色はダッシュボード「外観」→「カスタマイズ」→「各テキストとhタグ(見出し)」の「一括テキスト色強制変更」でも変更可能です。

 

イエロー、薄赤、グレーのボックス

前項の設定で文字サイズを小さくすると行間が空きすぎると感じるときがあります。とくにイエロー、薄赤、グレーの各ボックスを適用したとき気になったりします。

そこでつぎのコードを挿入しました。

AFFINGER4オフィシャルサイトが例示する基本のフォントサイズの変更方法のそのままではうまくいかず「p」を添えてみたら行間のみ反映されました。

実際にボックスをつくってみると、こうなります。

ボックスをコラムらしく見せたい

これはダミーの文章です。読まないでください、といっても読んでしまう方にお願いです。これはダミーの文章です。読まないでください、といっても読んでしまう方にお願いです。

そんなそらよりをよろしくね

これはダミーの文章です。読まないでください、といっても読んでしまう方にお願いです。これはダミーの文章です。読まないでください、といっても読んでしまう方にお願いです。これはダミーの文章です。読まないでください、といっても読んでしまう方にお願いです。ボックスをコラムらしく見せたいそらよりをよろしくね。

 

ブログカード風

サイト内リンクを貼るとき「ビジュアルエディター」モードのメニューで「ブログカード風」を使用しています。このときクリカブルを示すアンダーラインがうるさいので消しました。

また「ブログカード風」内の本文に「段落」と同じサイズが適用されていたため文字サイズと行間を変更しました。

 

おすすめ記事一覧と関連記事一覧

カスタマイズ>「AFFINGER4管理」で設定できる「おすすめ記事一覧(『投稿・固定記事設定』内)」と「関連記事一覧」の各タイトルのクリカブルを示すアンダーラインがうるさいので消しました。

 

ぱんくず、カテゴリー、投稿日

記事タイトル上のぱんくず、カテゴリー、投稿日などの文字色や背景色はダッシュボード「外観」→「カスタマイズ」→「各テキストとhタグ(見出し)」の「記事タイトル上のカテゴリ」「投稿日時・ぱんくず・タグ」でそれぞれ変更可能です。

midashihenkou7

 

ただこれでは投稿日時とぱんくずが同色になり単調です。そこでさらにぱんくずのみstyle.cssで文字色を変えます。

 

ぱんくずとカテゴリーはこのようになります。

midashihenkou6

ただし内容がかぶるためカテゴリーを非表示にしました。ダッシュボード「AFFINGER管理」→「投稿・固定記事設定」の「記事タイトル上のカテゴリを非表示にする」にチェックを入れて完了です。「投稿・固定記事設定」では「投稿日・更新日を表示しない」設定も可能です。

以上、AFFINGER4の記事投稿スペースの文字まわりの解説でした。

 

こちらの記事もお役にたてるかも、です。

fontsize_percent
AFFINGER4で指定したフォントサイズのパーセントを元に戻したい

AFFINGER4でプラグイン「TinyMCE Advanced 」を使用するとフォントサイズの変更はパーセント(%)方式になっています。相対単位を用いることでレスポンシブ対応 ...

 

-WordPress
-

Copyright© IT-SORAYORI , 2018 All Rights Reserved.