WING/AFFINGER5

「アフィンガー5/WING」基本設定04 投稿・メインエリア編/テーマを変更した時に私が行った設定

2019年4月28日

wing

 

今回は、メインエリア(記事)で設定を変更した所を書きたいと思います。

 

 

投稿・メインエリアの設定

 

① PCで見た時のメインエリアの幅

「AFFINGER5管理」→「デザイン」→「サイト全体のレイアウト一括設定」の「PC閲覧時のサイトの幅(width※デフォルトは1060px):○○px」

何も設定をしなければ、1060pxですが、私は少し幅を大きくして1150pxにしました。

 

 

② 記事の文字の大きさと行間

「AFFINGER5管理」→「デザイン」→「Aフォントのサイズ」

ここで、PCで見た時、スマホで見た時、タブレットで見た時の、文字のサイズや行間の設定ができます。

私はPCの基本(Pタグ他)だけ、少し大きくして17pxにしました。

 

 

③ 記事の文字色

「外観」→「カスタマイズ」→「[+]各テキストとhタグ(見出し)」→「テキスト色一括変換」

真っ黒よりも少し灰色よりにしたほうが、目が疲れないそうなので、私は「#545454」にしました。

 

 

④ リンクの色とマウスオーバーの色

「外観」→「カスタマイズ」→「[+]各テキストとhタグ(見出し)」→「テキスト色一括変換」→「記事内リンク色」

ここでリンクの色と、マウスオーバー(マウスでリンクの上にカーソル持って来た時)の色の変更ができます。リンクは青っぽい色の方が、ここはリンクですよっていうのが分かりやすいと思います。

 

 

⑤ コメント欄を無くす

AFFINGER5管理」→「投稿・固定記事設定」→「コメント欄を非表示にする」にチェックを入れる。

 

 

⑥ 記事タイトルのデザインと色

「外観」→「カスタマイズ」→「[+]各テキストとhタグ(見出し)」→「記事タイトル」

ここで、文字の色を変更・背景の色を変更(グラデーションも可)・ボーダーの色を変更できるのと、デザインを変更できます。

デザインはこんな感じ。

アフィンガー5タイトルデザイン

 

・テキストを中央寄せ
・デザインを幅一杯に
・背景や吹き出しの角を丸くする
・グラデーションを横向きにする
・背景画像を挿入

なんかもできます。

私は上下にラインが入ったやつにしました。

 

 

⑦ 見出しのデザイン(h2〜h3)

「外観」→「カスタマイズ」→「[+]各テキストとhタグ(見出し)」→「H2タグ」or「H3タグ」

文字の色・背景色・ボーダー色・デザインを変更できます。デザインは上の「⑥ 記事タイトルのデザインと色」と同じです。

 

 

⑧ 投稿日とぱんくずの色

「外観」→「カスタマイズ」→「[+]各テキストとhタグ(見出し)」→「投稿日時・ぱんくず・タグ」

「HOME > ブログ > AFFINGER5/WING >」
「投稿日:2019年4月24日 更新日:

ここで、記事の左上に出る投稿日とぱんくずの色が変更できます。

 

 

⑨ 左上のカテゴリーの色

「外観」→「カスタマイズ」→「[+]各テキストとhタグ(見出し)」→「カテゴリ」

ここで、文字色と背景の変更ができます。

「角を丸くする」にチェックを入れると丸くなります。

カテゴリデザイン

 

 

⑩ SNSボタンの形

「AFFINGER5管理」→「SNS」→「SNS設定」

ここで、デザインの変更ができます。

SNS

設定は
・投稿ページの上にSNSボタンを表示する
・投稿ページのSNSボタンを非表示にする
・固定ページの記事下にSNSボタンを表示する
・固定ページの上にSNSボタンを表示する(※下に表示している場合のみ有効)
・トップページ下のSNSボタンを非表示にする

があります。

 

 

⑪ SNSボタンの色

「外観」→「カスタマイズ」→「オプションカラー」→「SNSボタン」

ここで、色と背景色が変更できます。

アフィンガー5SNS色

 

⑫ 関連記事の色

アフィンガー5関連記事の色

「外観」→「カスタマイズ」→「[+]各テキストとhタグ(見出し)」→「NEW ENTRY & 関連記事の色」

ここで、記事の一番下にある関連記事の色が変更できます。

 

 

⑬ 関連記事にカテゴリーをつける

アフィンガー5関連記事カテゴリー表示

「AFFINGER5 管理」→「投稿・固定記事」→「記事一覧・関連記事一覧などにカテゴリを表示する」にチェックを入れる。

 

 

追記:メインエリアを薄い茶色に変えました。

⑭ メインエリアの背景色

「外観」→「カスタマイズ」→「基本エリア設定」→「mainエリア(記事)」

ここで、メインエリアの背景色を変更することが出来ます。

透過(元の背景色が薄っすら見える)設定したり、周りにボーダー(枠)を入れたりも出来ます。

 

 

ブログ
ブログ関連・アフィンガー5 記事一覧

続きを見る

 

-WING/AFFINGER5

Copyright© 日傘ねこ 便利グッズ&これいいな , 2020 All Rights Reserved.