そらより

おもしろいと、かわいいと、おいしいと、うれしい。

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

      2016/10/03

 

クリエイティブなことについてインスピレーションを与えてくれるツールはそれほど多くはないと思うのですが、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からノーマルに */
.entry-title,
.post .entry-title {
font-weight:normal!important;

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

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

/*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はできることが増えた分、どこをどこをいじれば何が変更できるか、見つけるのになかなか苦労します。Web辞典でもできればいいのに、と思います。とりあえず記事投稿スペースの文字まわりだけでもお役に立てれば幸いです。

 

AFFINGER4は現在有料版のみ提供されています。「買いました」という報告がTwitterでも続々。以下からお求めいただけます。

スポンサーリンク

稼ぐサイトの設計図-AFFINGER4公式ガイド

▲公式サイト6500円(税込)が
優待特別価格5500円(税込)に!

 

スポンサーリンク

 

 

クリックしていただけると幸いです
にほんブログ村 ライフスタイルブログ 暮らしを楽しむへ

おススメ記事

歳の差婚250 1
「年の差婚(交際)」の最適年齢を割り出す法則が海外にあった!

数年前から「年の差婚」がブームです。人気キャスターや人気女優、人気歌手が、歳の離 ...

補色01 2
赤い点を30秒間じっと見つめてください。天井を見上げると不思議なことが!

  夏休みの想い出に友達と撮った記念写真。でも、後ろをふと眺めると壁や ...

パーティ開け11 3
「パーティ開け」不要!スナック菓子はもっとスマートにシェアできる!!

ポテチの袋、いつもどうやって開けてますか? 友達やパートナーとシェアして食べると ...

 - WordPress, デジタル , ,

Copy Protected by Chetan's WP-Copyprotect.