AFFINGER5

[AFFINGER5]最初にすべきカスタマイズ!

AFFINGER5は非常にカスタマイズ性が優れたWordPressテーマです。

その一方で、カスタマイズの項目が多すぎて、何からカスタマイズしていけばいいのか分からないと思います。

この記事では最初にすべきカスタマイズについて説明していきます。

トップページのデザインをカスタマイズ

トップページのカスタマイズをしていきましょう。

WordPress画面の外観→カスタマイズをクリックしてください。

AFFINGER5のカスタマイズの項目とサイトのトップページが表示されます。

カスタマイズの項目の一番下にPC・タブレット・スマホ表示できる機能があるので、是非使ってみてください。

ロゴ画像

ロゴ画像の項目を見ていきましょう。ロゴ画像をクリックしてください。

 

ヘッダー、フッター、モバイル用のロゴ画像を表示することができます。私のサイトにはロゴ画像は入れておりませんが、ロゴ画像を入れてオシャレにしたい人は入れてみてください。

カスタマイズの画面をスクロールしてください。

アイコンロゴ画像という項目があると思います。

アイコンロゴ画像はサイトのタイトル前に表示されている画像です。

画像が設定できたら、上の公開ボタンをクリックしましょう。

無料のアイコンフリー素材サイト

FLAT ICON DESIGN

 

ゆう
無料とは思えないほどクオリティーがいいです。 デザインも可愛らしく、本当におすすめです。

FLAT ICON DESIGN

ICOOON MONO

 

ゆう
シンプルなアイコンが特徴的で、アイコンの種類が豊富です。 気に入るアイコンが必ず見つかると思います。

 

 

ゆう
デフォルトは黒色ですが、ダウンロードするときに色を変えることができます。

ICOOON MONO

この二つのサイトから好みのアイコンをダウンロードしましょう。画像サイズは小さめのサイズにしてください。

サイト基本情報

サイト基本情報をクリックしましょう。

サイト基本情報ではサイトのタイトル、キャッチフレーズ、サイトアイコンを設定できます。

サイトアイコンはブラウザーのタグに表示されるアイコンです。

先程紹介したアイコンフリー素材サイトで探してみてください。

ゆう
デフォルトのままだと、オリジナリティーがないので、変更しておきましょう。

サイトアイコンは512 × 512ピクセル以上の正方形にしてください。

ヘッダー画像

ヘッダー画像をクリックしてください。

ヘッダー画像の初期設定はWINGの画像が表示されています。

新規画像を追加をクリックして、ヘッダー画像にしたい画像をアップロードしてください。

2200 × 500 ピクセルの画像を使うと最もうまくいきますと書かれていますが、設定する際に画像を切り取ることができるので、2200 × 500 ピクセルの大きさに近い画像をアップロードしてください。

私はpixabayというフリー画像素材サイトから風景画をダウンロードして、ヘッダー画像に設定しました。

基本エリア設定

基本エリア設定をクリックしてください。

背景色

背景色をクリックしてください。

背景色を黄色にしてみると、ヘッダー、フッター、記事一覧以外の所が黄色になりました。

私はデフォルトの設定にしていますが、自分の好きな色を選んでサイトの見映えを良くしてください。

ヘッダーエリア

ヘッダーエリアをクリックしてください。

ヘッダーエリアの文字の色や背景色を変更できます。

2種類の背景色があり、黒色と青色にしてみると綺麗にグラデーションされます。

フッターエリア

フッターエリアをクリックしてください。

フッターエリアもヘッダーエリアと同じように様々な色に変更することができます。

記事一覧の区切りボーダー

記事一覧の区切りボーダーをクリックしてください。

デフォルトの色はとても薄い色なので、区切られているのか分かりません。区切りをハッキリしたい人は濃い色を選んでおきましょう。

メニューのカラー設定

メニューのカラー設定をクリックしてください。

PCヘッダーメニューをクリックしてください。

ヘッダーメニューの設定をすることができます。ヘッダー同様、色の変更をすることができます。

メニューのカラー設定ではPC表示以外にもスマホ表示の設定もあるので確認してみてください。

HELLO WORLDとサンプルページの記事を削除

HELLO WORLDの記事を削除

WordPressメニューの投稿一覧をクリックしてください。

Hello Worldという記事があるので、題名にカーソルを合わせると、ゴミ箱が表示されるので、ゴミ箱をクリックして完了です。

サンプルページの記事を削除

WordPressメニューの固定ページをクリックしてください。

サンプルページを一読し、ゴミ箱をクリックして削除してください。

サイドバーのメタ情報を非表示にする

メタ情報はサイト管理者のための項目であり、読者には不必要な項目なので、非表示にしておきましょう。

外観→ウィジェットをクリックしてください。

スクロール広告用の中にメタ情報があります。

メタ情報を左にドラッグして、スクロール広告用から外してください。

以上でAFFINGER5の最初のカスタマイズの解説を終わります。

記事が溜まってきたら、サイトのレイアウトを変えれるので、記事を書きまくりましょう。

-AFFINGER5

© 2021 遠回りブログ Powered by AFFINGER5