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

affinger5wing180613_07

WING(AFFINGER5)の見出しのフォントスタイルや記事一覧の抜粋文のフォントサイズの変更方法についてシェアします。「見出しの太さをボールドからノーマルに変更する方法」「記事一覧の抜粋文のサイズを小さくする方法」でお困りの方は必見です!

 

段落本文や見出しのフォントサイズはAFFINGER5管理で

フォントサイズはダッシュボード>「AFFINGER5管理」>「デザイン」で変更する仕様です。

たとえばそらよりブログは2018年6月23日につぎの数値[1]設定しています。全体的にちょっと大きめです。

 

affinger5wing180613_05

またフォントファミリーも、子テーマのstyle.cssを変更しなくても[2]で旧テーマ版に戻せるようになりました。

ちなみに旧テーマ版とは

“メイリオ”, Meiryo, “ヒラギノ角ゴ Pro W3”, Hiragino Kaku Gothic Pro, “MS Pゴシック”, sans-serif

のフォントファミリーです。

そらよりブログでは、美しくWeb上で見慣れたこちらを好んで使用しています。

 

記事のフォントの太さを変える

フォントを全体的に大きく扱っているため、投稿記事や固定記事でデフォルト指定されている記事タイトルと見出しのBold(太い)はNormal(普通)にstyle.cssで変更しています。

以下のタグがそのままご利用いただけます。※個別に変更しやすいようにh1,h2,h3を分けてタグ表記しています。

 

これによりたとえば投稿記事は以下のような表示となります。画像は実際の縮小サイズです。

affinger5wing180613_03

affinger5wing180613_04

 

記事一覧の見出しフォントの大きさ、太さを変える

またトップページの投稿記事一覧も以下のタグで見出しフォントの大きさ、太さを変更しています。

注意

ver20190504では1行目の「dd h3:not(.st-css-no2) a {」を「.kanren h3 a {」に差し替えてご利用ください。

 

これによりたとえば投稿記事一覧は以下のような表示となります。画像は実際の縮小サイズです。

affinger5wing180613_01

 

抜粋文の文字数変更の設定は場所が変わった

なお投稿記事一覧での抜粋文の文字数はver20180521β版からダッシュボード>「AFFINGER5管理」>「デザイン」>「抜粋設定」で変更する仕様となりました。

以前は「おすすめ記事」にあり、Googleに検索をかけても変更の事実が上位にヒットしないので、迷われる方が少なくないと思います。

affinger5wing180613_06

 

記事一覧の抜粋文を小さくしたい

さらにそらよりブログでは記事一覧の抜粋文をデフォルトよりも小さく設定しました。

以下のタグを子テーマのstyle.cssに書き加えています。

 

これによりたとえば投稿記事一覧は以下のような表示となります。画像は実際の縮小サイズです。

affinger5wing180613_02

 

以上、お役立ていただければ幸いです。

 

「WING(AFFINGER5)の見出しフォントを細く!記事一覧抜粋文を小さく!」への4件のフィードバック

  1. はじめまして、柴田と言います。
    僕もアフィンガー5使ってるので参考になります。
    このサイトを見て「真似したい」と思ったので質問しました。
    記事を下へスクロールしていくと、フワッと画像が表示されるのが良いなと感じました。全体の読み込み速度も向上しそうですし。どの様な設定でそうされてるのですか?教えて下さい。

    1. コメントありがとうございます。
      画像表示の件、こうした形態を「フェードイン」と呼びます。
      ダッシュボード>AFFINGER5管理>その他>演出>画像で
      「画像表示をスクロールでフェードイン」を選びます。
      僕は「サイト全体」を選択しています。
      また何か御知りになりたいことがございましたら
      お気軽にお尋ねください。
      引き続きそらよりブログを
      よろしくお願いいたします。

  2. はじめまして。
    スマホ代の節約やITライフハック系の
    ブログを運営している「しぶちん」と申します。

    私もWINGを使用していて、ちょうど探していた
    カスタマイズ方法だったので、大変参考になりました。

    大変ためになるテクニックが多いので、
    今後も参考にさせていただきます。
    どうもありがとうございました。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください