- アフィンガーを購入したけど初期のデザインの仕方が分からない
- なにから始めればいいのか分からない
こんな悩みを解決します！
有料テーマのアフィンガーは出来ることが多すぎて何から手を付けていいか分からない。
という方も多いと思います。
本記事では細かいデザインなどは省き、
ブログをスタートできるぐらいの最低限の初期デザインの設定方法を解説していきます。
デザインは当ブログをもとにし、とにかくすぐにブログをスタートしたいという方向けに簡単なデザイン設定を解説していきます。
こんな方におすすめ
- 初期デザインの設定方法が分からない
- とにかく早くブログをスタートしたい
- 何から手を付けていいか分からない
contents
デザイン：サイト全体の設定
まずはサイトのイメージカラーやフォントサイズを決めてみましょう。
サイトカラー
まずはサイトカラーを決めましょう！
「AFFINGER5管理」→「デザイン」→「カラーパターン」・「デザインパターン」で設定できます。
自分の好きな色とパターンを選ぶだけなので簡単です。
デフォルトにない色でも設定でいますが、サイトイメージを作るためにまずは大まかな色を決めてしまいましょう。
サムネイル画像
記事のサムネイル画像は初期設定のままだと少し小さく表示されてしまいます。
サイズによっては途中で切れてしまい見にくいのでフルサイズで表示されるように設定します。
「AFFINGER5管理」→「デザイン」→「サムネイル画像設定」
- フルサイズにする
- サムネイル画像を大きくする（タブレット以上は1.5倍）
- スマホ（599px以下）でもサムネイル画像を大きくする
これでサムネイル画像を大きく表示することができました。
※初期状態で入っている「Hello World」というページはいらないので削除しておきましょう。
フォントサイズ
フォントサイズは初期設定のままでも特に問題ありませんが、スマホのフォントサイズは少し小さくした方が見やすいです。
「AFFINGER5管理」→「デザイン」→「Aフォントサイズ」から設定が可能で、
PC.タブレット,スマホそれぞれのフォントサイズを細かく設定できるのでいろいろ変えてみて自分好みにしてみましょう。
目安のフォントサイズがすでに書いてあるのでそれをもとに変えるだけで出来ます。
ヘッダーエリアの設定
ロゴ画像
「外観」→「カスタマイズ」から「ロゴ画像」を選択してロゴに設定したい画像をアップします。
ロゴに背景画像を入れたい場合は透過画像を使いましょう。
透過画像を使わなければこのように背景が隠れてしまいます。
透過画像を使えば背景を隠さず表示することが出来ます。
※透過画像はPNG形式で保存します。
ロゴはロゴメーカーで無料で簡単に作成することが出来きるのでおすすめです。
モバイル用に画像を設定したい時はモバイル用に画像をアップします。
- モバイル用ロゴ（またはタイトル）を使用する
- モバイルロゴ用画像サイズ調整（やらなくてもオッケー）
- モバイル用ロゴ（またはタイトル）をおセンター寄せ
この項目にチェックを入れればオッケーです。
キャッチフレーズ
初期設定ではロゴが左詰めになっておりキャッチフレーズが上に来ていると思います。
ロゴ・キャッチフレーズを中央寄せにして、上下反対にさせたい時は、
「AFFINGER5 管理」→「ヘッダー」に移動し下にスライドしていき「H ヘッダー設定」
- ヘッダーを分割しない
- ヘッダーエリアをセンタリング
- サイト名とキャッチフレーズを上下反対にする
これにチェックを入れればオッケーです。
キャッチフレーズを非表示にしたい場合も「Hヘッダー」で設定できます。
サイトタイトルとキャッチフレーズの文字色は、
「外観」→「基本エリア設定」→「ヘッダーエリア」から変えることが出来ます。
ヘッダーエリアの背景画像
ロゴの背景画像は「外観」→「基本エリア設定」→「ヘッダーエリア」から画像をアップ出来ます。
背景画像をアップ出来たら、以下の項目にチェックを入れればオッケーです。
- 背景画像の横位置（やらなくてもオッケー）
- 背景画像の縦位置（やらなくてもオッケー）
- 背景画像を繰り返さない
横位置と縦位置は試しにずらしてみるといいポジションが見つかるかもしれません。
横位置と縦位置はデフォルトの状態で良ければ基本無視で大丈夫です。
背景画像を入れない人は背景色を設定しておきましょう。
ヘッダー画像の設定
初期の状態では下の写真の画像がデフォルトとして入っていると思います。
ここで好みの画像に変更するか、非表示の設定をしましょう。
新しいヘッダー画像をアップする
「外観」→「カスタマイズ」→「ヘッダー画像」から設定することが出来ます。
また、背景画像も設定することが出来ます。
「新規画像追加」からヘッダー画像に使いたい画像をアップして以下の項目をチェックします。
- ヘッダー画像エリアの最低の高さ（高さを上げたい時）
- ヘッダー画像エリアの横幅を100％にする
- 背景画像の横・縦位置
- 背景画像を繰り返さない
- 背景画像をスマホ・タブレットのみにする
複数チェック項目があるので色々試してみて自分好みのヘッダー画像を仕上げましょう。
非表示にする場合
シンプルにしたい方はヘッダー画像を消してしまうのもおすすめです。
「AFFINGER5管理」→「ヘッダー」→「ヘッダー画像」から設定することが出来ます。
非表示にすることころを選べるので自分の好みにカスタマイズしていきましょう。
また、「外観」→「カスタマイズ」→「ヘッダー画像」からでも非表示にすることは出来ます。
メニューの設定
メニューとはここの事を言います。
作っておけばどんなブログなのか一目で分かりやすいので作っておくのがおすすめですが、何もコンセプトや記事のカテゴリーなどが決まって場合はとりあえず後回しで大丈夫です。
「外観」→「メニュー」→「新しいメニューを作成しましょう」から設定することが出来ます。
開けたら「メニュー名」を決めて左の「メニュー項目の追加」から項目を追加します。
項目は以下の通り
- 固定ページ ：作ってなければ無視で大丈夫
- 投稿：投稿した記事を挿入できます
- カスタムリンク：自分でテキストを入力してURLを入れることが出来ます。
- カテゴリー：記事のカテゴリーを追加できます。
当ブログではカテゴリーをメニューに入れています。
それぞれ入れたい項目にチェックを入れて「メニューに追加」を押すと追加することが出来ます。
また、メニューの順番もドラッグ＆ドロップで簡単に入れ替えることが出来ます。
項目の追加が終われば最後にメニューを表示する位置を決めます。
以下の項目にチェックを入れればオッケーです。
- ヘッダー用メニュー
- スマートフォン用ミドルメニュー（スマホ用に表示させたい場合）
これでメニューの設定が出来ました。
ただ初期設定状態ではメニューが左に寄ってしまっていると思います。
真ん中に寄せたいという方はこちらの方のサイトを参考にしてみてください。
追加CSSで簡単に設定が可能です。
ウィジェットの設定
サイドバー
初期設定のサイドバーでは「メタ情報」などの不要な情報が入っていたりするので不要なものは消して、
自分の入れたい情報を入れましょう。
「外観」→「カスタマイズ」→「ウィジェット」→「サイドバートップ」・「サイドバーウィジェット」から設定することが出来ます。
右下の「ウィジェットを追加」から新しい項目を追加することが出来ます。
表示させてい項目を追加していきましょう。
各項目の右端にある三角形をクリックすると詳細設定と削除をすることが出来ます。
「サイドバーウィジェット」の方も同様の操作で設定することが出来ます。
プロフィールカード
プロフィールカードには自分の自己紹介とアイコンを設定しましょう。
プロフィール情報は「ユーザー」→「あなたのプロフィール」から設定することが出来ます。
次にプロフィールカードを作ってきます。
「外観」→「カスタマイズ」→「オプションカラー」→「サイト管理者紹介」から設定することが出来ます。
プロフィールカードを有効にするには「プロフィールカードに変更」にチェックを入れます。
設定項目はこちら
- ヘッダー画像
- アバター画像
- ボーダー・背景・テキストの色
- ボタンの追加・装飾
シンプルにしたい方はアバター画像だけ設定するのもいいかもしれないですね。
背景を入れたい場合はアバター画像の上にある「ヘッダー画像」から画像をアップすることが出来ます。
まとめ
今回はアフィンガー5の最低限の初期デザインの設定方法をご紹介しましたがいかがだったでしょうか？
細かい設定は慣れてからにして、まずはブログをスタートできる状態にしましょう。
本当にできる事が多いので使いこなせるようになってから理想の形を作っていくのがおすすめです！
最後まで読んでいただきありがとうございました。
