WEB WING|Affinger5 WORDPRESS プラグイン

【AFFINGER5(WING)おしゃれにカスタマイズ】これだけは頑張って編集しておしゃれにしたい!!

投稿日:

 

作業すればするほど、やりたいこと、やってみたいことが増えていくwordpress。

奥が深いー!

 

これはやっておきたい!AFFINGER5のカスタマイズ

  1. サイドバーをおしゃれにカスタマイズしたい。
  2. フォントサイズの文字間、行間、フォントサイズ調整
  3. 吹き出しのアイコンの枠無くしてもいいかもなー。
  4. フォントを游ゴシックにしたい。
  5. 一覧が出たときにタグを表示しないようにしたい。
  6. トップページのタイルデザインを試してみたい!
  7. サイドバーウィジットには新着記事じゃなくて人気記事を出した!
  8. カテゴリーの背景色の変更
  9. 投稿ページのパンくずの上の隙間をなくす
  10. トップページスライダーの写真の高さ(height)を揃えたい
頑張るぞー!

 

まず、サイドバーをおしゃれにカスタマイズしたい!

私のページのサイドバーはデフォルトでははこんな感じでした!

+  いじくる前のデザイン 見たい方は+クリック!

修正前

icatch_affinger_cutmizeカスタマイズ前

 

デフォルトでもいい感じー!

 

管理画面の調整1日目

こんな感じにカスタマイズ出来ました!

 

1日でこれくらい出来たよー!

 

とくに難しいプラグインとかは使わずに、
  • 「外観」→「カスタマイズ」の編集
  • ダッシュボードの機能

それだけでここまで変えることが出来ました!

とにかくいじくりまくるぜ!

 

sudyweb

フォントサイズの大きさ、行間、文字間調整

affinger5のデフォルトだと、モバイルが文字大きい感じがしました。

フォントのサイズと行間調整は、管理画面で出来ちゃったー!

文字間調整はCSSに記載しました!

 

 

+ 文字間調整 CSS 見たい方は+クリック!

/*タイトルh1 文字間隔調整*/
効かせたいところのコード{
letter-spacing: ★;
}

★を大きな数字にするほど文字間が開きます!私は1pxか2px!

 

フォントを游ゴシックにしたい。

管理画面で選択しても効かず、おそらく[Hiravaya]?みたいな名前のフォントが邪魔していました!

CSSに記載して効かせました!

CSSに記述なしで游ゴシック体にしたかったけれど出来ず、テーマ編集→子テーマCSSに記述しました!

 

+ CSSサンプルはこちらです! 見たい方は+クリック!

/*游ゴシック体の設定 */
*, code
{
font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;

}

.entry-title:not(.st-css-no), .post .entry-title:not(.st-css-no) {

font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;

}

#st-magazine dd h3, .st-cardlink-card a, .rankh4:not(.st-css-no), .post .rankh4:not(.st-css-no), #side .rankh4:not(.st-css-no), .originalbtn-bold, .st-header-flextitle, .post h2:not(.st-css-no), .post h2:not(.st-css-no) span, .post h3:not(.st-css-no), .post h3:not(.st-css-no) span, .h2modoki, .h3modoki, .entry-title:not(.st-css-no), .post .entry-title:not(.st-css-no) {

font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif !important;

}

#st-magazine dd h3, .st-cardlink-card a, .rankh4:not(.st-css-no), .post .rankh4:not(.st-css-no), #side .rankh4:not(.st-css-no), .originalbtn-bold, .st-header-flextitle, .post h2:not(.st-css-no), .post h2:not(.st-css-no) span, .post h3:not(.st-css-no), .post h3:not(.st-css-no) span, .h2modoki, .h3modoki, .entry-title:not(.st-css-no), .post .entry-title:not(.st-css-no) {

font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif !important;

}

/*検索内文字 */
#s {
font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;}
/*游ゴシック体の設定 終了 */

これをコピペしてください!

 

 

一覧が出たときにタグを表示しないようにしたい

管理画面から設定OK!

トップページのタイルデザインを試してみたい!

固定ページにオススメ記事を見せる事で解決!

ファーストビューがタイルだったらかわいいかなと!

JETを導入したらできるみたいですね!でも私これで満足ー!

吹き出しのアイコンの枠無くしてもいいかもなー。

CSS記述で、無くしました!

+ 吹き出しの枠を取るCSS 見たい方は+クリック!

/*ふきだしアイコン 丸枠消す*/
.st-kaiwa-face img {
border: none;
}

 

サイドバーウィジットには新着記事ではなく、人気記事を出してみる!

AFFINGER5のデフォルトだと、サイドバーにも新着記事が出ています!

トップページのサイドバーは自分が指定した記事(人気記事)を出力して、投稿記事を見てもらっている時のサイドバーは新着記事を出す。

AFFINGER5管理画面にて変更しました!

ほとんどのことが管理画面で出来るね!
そうだねー!良く見た方がいいよね!

 

カテゴリーの背景色を変えたい!

これはカテゴリーページから変更できます!

 

投稿記事画面、パンくずリスト、タイトル上の隙間を無くしたい

サイドバーのトップと高さを合わせたいの。

+ CSSはこちら 見たい方は+クリック!

/*投稿ページのパンくずの上の隙間をなくす デフォルトは30px*/
main {
padding: 0px 50px 30px;
}

 

トップページスライダーの写真の高さ(height)を合わせたい

これは横着な方法な気もするのですが、これで誤作動が出無いかチェックします。

+ CSS追記 見たい方はクリックして下さい!

/*トップページスライダーの写真の高さ(height)を合わせたい*/
.content-post-slider .post-slide-image img, .post-card-list .post-card-image img {
height: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

}

 

 

まとめ

CSSをいじらなくても十分おしゃれなAFFINGER5!

でもAFFINGER5ならCSSの知識がなくてもネットに情報がたくさん落ちているので簡単にいじれちゃいます!

少しずつ直してはまた戻して、CSSの知識が少しあると助かります!

Copyright© うふふ.TOKYO , 2019 All Rights Reserved.