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

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

 

クリエイティブなことについてインスピレーションを与えてくれるツールはそれほど多くはないと思うのですが、AFFINGER4(アフィンガー)はWordPressテーマにおいて、いまのところ僕の最高峰にそびえたっています。こんなの数十年前のAdobe Illustrator以来です。

 

スポンサーリンク

 

こちらのサイトのテーマはSTINGER7(2016年9月)ですが、もうすぐカットオーバーとなる別サイトはSTINGER PLUS+でベースを作り、待ちに待ったAFFINGER4(無料配布バージョン)で運用をめざしています。しかし、ここが追い込みどころだというのに、もう別のサイトを作ってみたくてたまらない。AFFINGER4を知れば知るほど、新しいコンテンツのアイデアがこんこんとわいてくるのです。

その意味で、AFFINGER4はそらよりのようなWordPress初心者でも気軽に使える敷居の低いツールになるべきだと思います。何かを表現したい人がWebをステージに選ぶとき、シンプルでカスタマイズしやすいAFFINGER4は、たとえアフィリエイトに興味がなくても、強力な味方となってくれるはずです。だぶんある一定以上のスキルを持つ人向けに作られているようですが、そのため省略されがちな上級者の常識から平たく、わかりやすく説明することで、より多くの方に広めたいと思います。

そこで今回は、サイトデザインでみんながこだわりたいであろう文字(フォント)まわりのことを初心者向けに解説します。

文字まわりの変更の多くはダッシュボードを利用します。ただ一部、style.cssに変更を加えなくてはならないところもあります。この記事ではコピー&ペーストで簡単にできるようにしてあるので安心してください。

 

affinger4title

 

カスタマイズの前に

作業に取り掛かる前にカスタマイズのおさらいです。今回は子テーマにあるstyle.cssにコードを書き入れます。その方法がわからない方は、まず下のサイトをご確認ください。STINGER6のケースですが、テーマのダウンロードと子テーマ、style.cssの格納場所、日本語テキストエディタの注意点などがわかります。

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

WordPress初心者がSTINGER6の文字・タイトルを子テーマでカスタマイズ!

 

記事タイトルや見出しの文字の変更

まずデフォルトに近い状態を見てみましょう。

midashihenkou1

h2とh3の見出しはダッシュボード「外観」→「カスタマイズ」→「各テキストとhタグ(見出し)」でそれぞれ背景や線、色などを変更してあります。

注目していただきたいのは記事タイトルと見出しのフォントです。英数文字が太く、日本語が細くなっています。

これは「游ゴシック」という種類のフォントがWordPressテーマAFFINGER4によって指定されているにも関わらず、そらよりのWindows7が認識できず別のフォント(日本語はMSPゴシック)に置き換わってしまっているからです。

さて「游ゴシック」とは何でしょう。これは「Windows8.1以降、OSXMavericks以降、システムに標準で搭載されるようになった新しいフォント(*)」で、これさえ指定しておけば、共通で表示されるものです。このほかに「游明朝体」があります。
*出典:フォントブログ

しかしそらよりのPCはWindows7。いい加減に買い換えろよ、という話ですが、同様の環境の方はまだまだ少なくないと思います。そこで、これを解除します。

 

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

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

midashihenkou4

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

midashihenkou5

 

するとデフォルトの日本語フォントが適用され、次のようになります。

midashihenkou2

本テーマの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に変更したい部分の記述を加えることにしました。

 

記事タイトルと見出しの変更

まず出来上がりをお見せしておきましょう。

midashihenkou3

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

/* 記事タイトルをboldからノーマルに */
.post .entry-title {
font-weight:normal!important;

/*-- ここまで --*/
}

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

※変化が見られない場合、ブラウザの設定からキャッシュを削除してみてください。
Google Chromeなら「設定」画面の最下段から「詳細設定」を表示し、「プライバシー」の項「閲覧データの消去」をクリック。「次の期間のアイテムを消去」で「過去1日」または「1時間以内」を選び、「キャッシュされた画像とファイル」のみにチェックマークを入れます。最後に「閲覧履歴データを消去する」をクリックします。

 

/*h2をboldからノーマルに
------------------------------------*/
h2 {
font-weight:normal!important;

/*-- ここまで --*/
}

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

2016年10月2日追記

h1の変更を忘れていました。h1は検索ボックスの検索結果を表示するページのタイトルに使用されています。現状はboldのままであるため太くなっています。これをnormalに変えたい場合は、上記の見出しh2のコードの「h2」を「h1」に変えてご利用ください。

 

見出しh3はデフォルトで適用されているメイリオboldのままです。背景や線、色は先述のとおりダッシュボード「外観」→「カスタマイズ」→「各テキストとhタグ(見出し)」で設定・変更できます。

 

「段落」の文字をやや大きく、行間を空ける

次に「段落」に手を加えます。こちらのコードは次のとおりです。

/*段落の文字サイズ
------------------------------------*/
p {
font-size: 16px;
line-height: 32px;
margin-bottom: 24px;

/*-- ここまで --*/
}

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

なお文字色は「color: #」の後に数字を加えたコードを記述すれば変更できます。色の検討には「原色大辞典」が便利です。

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

 

ぱんくず、カテゴリー、投稿日などの文字色を変える

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

※「投稿日時・ぱんくず・タグ」に「背景色」とありますが、これは「文字色」の誤りかと

midashihenkou7

 

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

/*各投稿記事のぱんくずカテゴリー
------------------------------------*/
#breadcrumb ol li a {
text-decoration: none;
color: #20b2aa;

/*-- ここまで --*/
}

 

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

midashihenkou6

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

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

 

スポンサーリンク

AFFINGER4
稼ぐサイトの設計図-AFFINGER4公式ガイド
【こちらからご購入いただくと公式サイト8500円(税込)が優待特別価格8000円(税込)に!】

 

 

スポンサーリンク

スポンサーリンク

こんな記事も読まれています

ブログ人気ランキングに参加しています
にほんブログ村 ライフスタイルブログ 暮らしを楽しむへ

おススメ記事

スプレー容器 1

  春夏秋冬、汗っかきさんにとって気を緩めてよい季節なんてありませんよね。朝夕と昼の温度差が激しかったりしようものなら、うっかり服装のチョイスをまちがえ、外出先で大汗をかくということしばしば ...

デカ容器01 2

  昨晩、終電を逃した人の家までついていきインタビューするテレビ番組を観ていました。人気なのでご覧になった方も少なくないと思います。そこで深夜にもかかわらず娘の帰りを待っていたお母さんが、大 ...

パスワード作成 3

  パスワードがいくつもあって管理できない、と昔から言われ続けていますが、いっこうに改善される気配がありません。 でもパスワードを使う場面はますます増えています。 もしもご自分のパスワードの ...

求人広告250 4

  就職、転職には人それぞれ、さまざまな理由があります。この記事は次のような人のためのものです。たとえば長くその会社で働きたい。たとえば人間らしい心を捨てずに働きたい。たとえば尊敬できる人に ...

補色01 5

  夏休みの想い出に友達と撮った記念写真。でも、後ろをふと眺めると壁や茂みにたくさんの人の顔が写っている。心霊写真のお馴染みのパターンですが、さすがに最近はテレビで取り上げることもなくなりま ...

パーティ開け11 6

  ポテチの袋、いつもどうやって開けてますか? 友達やパートナーとシェアして食べるとき、普通に開けたら、開封口の向きが気になって、ちょっと不便ですよね。横から手を入れるのも汚れて面倒。 つい ...

355百均カラカラ 7

  キャットフードのストック、お宅ではどのように管理されていますか。わが家には2匹のお猫様がいらっしゃって、猫缶とサイエンスダイエットなどのいわゆるカラカラを小分けにしてあげています。猫缶は ...

-WordPress, モバイル&PC
-

Copy Protected by Chetan's WP-Copyprotect.

Copyright© そらより , 2017 AllRights Reserved.