ジプシーナースが鍼灸院開業資金集めのために「AFFINGER6」で自分らしいトップページ作りに挑戦した件‼

「AFFINGER6」は「Cocoon」に比べて細かくカスタマイズすることができます。

ブログ型にもサイト型にも設定することができるので、ブログ上級者にはとても満足できるテーマだと思いますが、初心者にはとにかく難しいと感じました。

「Cocoon 」のスキンのような色だけ変えれば自分らしいブログが作れるテンプレートは「AFFINGER6」では課金しないとダメみたいなので、1からカスタマイズして作りました。

「AFFINGER6」はPCバージョンとモバイルバージョンとで見え方も変わってくるので、両方の設定が必要でした。

ブログ初心者のジプシーナースが「AFFINGER6」でブログ作りの過程についてまとめました。

参考にしていただけたらと思います。

AFFINGER6で作るトップページ完成モデル

今回、カスタマイズしたトップページの完成です。

PCバージョン

モバイルバージョン

AFFINGER6のトップページデザイン

AFFINGER6のマニュアルによると↑↑↑このようなレイヤー構成になっているそうです。

これを参考にトップページを作成していきます。

ヘッダー部分作り

ヘッダー部分はこんな感じに作ってみました。

ヘッダーロゴ

＊管理画面から「外観」＞「カスタマイズ」＞「ロゴ画像/サイトのタイトル」でロゴ画像を使用しています。

「旧プティパ」のヘッダーにも使用した画像を活用しています。

それなりに気に入っていたので、使用できてよかったです。

フッターにも同じ画像を使用しています。

ロゴ画像にタイトルとキャッチフレーズを入れてあるのであれば、必要ないのでAFFINGER管理＞ヘッダーから「ヘッダー（及びフッター）にキャッチフレーズを表示しない」にチェックをします。

モバイルバージョンではロゴ画像を使用していないのでタイトル文字色は#9e5e6bで設定しています。

ヘッダー背景

＊管理画面から「外観」＞「カスタマイズ」＞「基本エリア設定」＞「ヘッダーエリア」でヘッダー背景画像を使用しています。

あってもなくても良いですが、よくわからないヘッダー一番上のライン色を#f78a80、ライン高さを５pxで設定しています。

ヘッダー下背景

＊管理画面から「外観」＞「カスタマイズ」＞「各メニュー設定」＞「PCヘッダーメニュー」でヘッダー下背景画像を使用しています。

PCバージョンの部分です。

ボーダー色すべて#ff91b5で、文字色は#a33066で設定しています。

ヘッダーカード

統一感を持たせるためにすべてこの背景を使用しています。

＊AFFINGER管理＞ヘッダー下/おすすめ＞ヘッダーカードで設定できます。

を入力します。

Kagayaはカテゴリーをヘッダーカードにしてみました。

表示デザインもこの画面でカスタマイズすることができます。

ヘッダー部分は完成しました。

フッター部分作り

フッター部分はこんな感じにしてみました。

フッターにタイトルとキャッチフレーズはらないので消したかったのですが、どうも消せないみたいなのでヘッダーに使用したロゴを表示してみました。

＊管理画面から「外観」＞「カスタマイズ」＞「基本エリア設定」＞「フッターエリア」

こんな色で設定し「フッターの背景色を100%にする」と「グラデーションを横向きにする」にチャックして完成です。

本体背景

＊管理画面から「外観」＞「カスタマイズ」＞「基本エリア設定」＞「背景色」

ブログのメインとなる背景色は#f7e5e3と#edf5f4で水玉(斜)にしてみました。

サイドバーのデザイン

サイドバーは「検索」「プロフィール」「カテゴリー」「最新記事」「アーカイブ」で構成しています。

管理画面から「外観」＞「ウィジェット」で表示の順番を編集できます。

「サイドバーウィジェット」部分に「検索」「プロフィール」「カテゴリー」「最新記事」「アーカイブ」のウィジェットを設置していきます。

検索フォーム作り

こんな感じに丸くしてみました。

Cocoonの時のように立体にしたかったけど、それができるプログラミング知識がないのでできませんでした。

＊管理画面から「外観」＞「カスタマイズ」＞「オプション(その他)」＞「検索フォーム」

プロフィールカード作り

＊管理画面から「外観」＞「カスタマイズ」＞「オプション(その他)」＞「プロフィールカード」

使用したいヘッダー画像とアバター画像を設定して背景色なども決めます。

プロフィールカードのボタン作り

詳しいプロフィールに飛べるようにボタンを作成してみました。

プロフィール記事のURLを入力しテキスト内に「詳しいプロフィール」と入力し、ボタンの色を決めます。

自己紹介文の作成

＊管理画面から「ユーザー」＞「プロフィール」

ユーザー名と自己紹介文を入力していきます。

サイドバータイトル作り

＊管理画面から「外観」＞「カスタマイズ」＞「見出しタグ(hx)/テキスト」＞「ウィジェットタイトル(サイドバー)」

グラデーションアンダーラインに変更（※要ボーダー色）にチェックをします。

スマホスライドのデザイン

スマホでサイドバーを表示させているとダラダラと下に長くなってしまうのでAFFINGER管理＞全体設定で「スマホのサイドバーを非表示にする」にチェックします。

消したサイドバーの代わりにスマホスライドに設置してみました。

スマホスライドは右側に設置したいのでAFFINGER管理＞メニュー＞スマホスライドメニューでメニューの位置を右にします。

新しいメニューを作成

＊管理画面から「外観」＞「メニュー」

メニュー名をわかりやすいように「スマホ用メニュー」と入力する。

スマホスライドに掲載させたいページにチェックします。

Kagayaはカテゴリーを載せたいのでカテゴリーにチェックをしました。

メニュー設定で「スマホスライドメニュー」にチェックします。

スマホスライド作り

＊管理画面から「外観」＞「カスタマイズ」＞「各メニュー設定」＞「スマホメニュー(スマホヘッダー)」

スマホスライドの背景画像に使用しています。

ウィジェット設置

スマホスライドはサイドバーの代わりにしているので「検索」「プロフィール」「カテゴリー」「最新記事」「アーカイブ」で構成しています。

「スライドメニュー内下に表示」部分に「検索」「プロフィール」「カテゴリー」「最新記事」「アーカイブ」のウィジェットを設置していきます。

オリジナルボタン作り

「06_STINGERオリジナルボタン」を「スライドメニュー内下に表示」に設置してカスタマイズします。

①HOMEボタン

②お問い合わせボタン

③サイトマップボタン

アイキャッチ画像の統一

「Cocoon」の時のアイキャッチはPowerPointで適当に作っていました。

それほど違和感はなかったのですが「AFFINGER6」に変更してから、アイキャッチの色がワチャワチャしてうるさい感じがします。

記事の修正とともにアイキャッチも変更していこうと思います。

無料の画像編集の「Canva」でアイキャッチを作成していきます。

PowerPointの画像では限りがありますが、「Canva」はフリー画像も豊富にあります。

同じようなテイストで画像を作ることができるので、ブログも落ち着いた感じになると思います。

まとめ

AFFINGER6でのブログ作りで行った事は

• トップページのカスタマイズ
• サイドバー(スマホスライド)のカスタマイズ

をして自分好みのブログ型を作りました。

AFFINGER6のカスタマイズは自由度が高く細かな設定することができます。

初心者にはかなり難しいですが設定方法がわかってくると、かなり細かいとことまで設定ができるのでカスタマイズがおもしろいです。

ブログの顔でもあるトップページ作りに時間がかかりましたが、何とか枠組みは出来上がった感じです。

AFFINGER6でブログ作る方の参考にしていただけたらと思います。