広告 AFFINGER6 ブログ

【AFFINGER6】デザイン性の高いトップページを作ろう!

※本ページはプロモーションが含まれています。

 

AFFINGER6トップページ画像

 

・Affinger6を導入したけど、いまいち使いこなせない

・おしゃれなブログページを作りたいけどやり方が分からない。

 

AFFINGER6

「稼ぐ」に特化していて、

SEO対策から機能性、デザイン性まで、すべてにバランスよく優れています!

 

ブログで稼いでいる方の多くが「AFFINGER6」を推奨しています。

ですので、ブログで本気で稼ぎたいならAFFINGER6を選んでおけば、間違いないです!

 

今回の記事では、勇気を出してAffinger6を購入した方向けに、

ブログのおしゃれな作成方法を紹介していきます!

 

作成方法をわかりやすく紹介するので、ブログを開いた状態で作業していきましょう!

ブログサイト画像

私のブログサイトです!

 

Affinger6を設定できるようになれば、ブログデザインとカスタマイズのレベルが上がります。

 

今回の記事で分かること

  • Affinger6でのブログトップページ作成方法

 

これを機会にAffinger6を使ってみたくなった方は、こちらからどうぞ!

 

おすすめテーマNo.1/

AFFINGER6を購入する

自分の思い通りのブログへ!!

 

 

Affinger6についてもう少し知りたい、導入方法を知りたいという方は、

こちらからどうぞ!

アフィンガー始めようメイン画像
【AFFINGER6の始め方!】オリジナルブログサイトを作ろう!

続きを見る

 

 

ちなみに、まだWordPressブログを持っていない方は、こちらからどうぞ。

【初心者向け】WordPressでブログをはじめよう

ブログ稼ぐ方法メイン画像
【子育てママも可】ワードプレスブログの始め方と稼ぎ方!

続きを見る

 

\当ブログおすすめレンタルサーバー/

 

あゆみ
では、次から本題に入っていきます!

 

Affinger6の設定方法

 

あくまで、私のブログデザインの作り方を参考に設定方法をご紹介します!

その点は、ご了承ください。

 

具体的にお伝えするのは次のような内容です!

  1. ヘッダー・フッターの色を変える
  2. サイト名を変える
  3. サイトアイコンを変える
  4. ヘッダー・フッターメニューを作る
  5. ヘッダー下におすすめ記事を設定する
  6. サイドバーにプロフィールを設定する
  7. サイドバーを設定する
  8. よく読まれる記事を設定する
  9. 見出しレイアウトを変える
  10. トップページを作る
  11. 吹き出しの作り方

 

人それぞれ、必要な部分が異なると思います!

目次にて、必要な部分にとぶこともできますので、有効にご活用ください!

 

①ヘッダー・フッターの色を変える

 

ヘッダーとはブログの最上部です。

ヘッダー画像

 

フッターとはブログの最下部です。

フッター画像

 

 

ヘッダーとフッターの色の変え方ます。

 

「ダッシュボード」>「外観」>「カスタマイズ」>「基本エリア設定」>「ヘッダーエリア」/「フッターエリア」

 

サイドバー画像 AFFINGER6管理サイドバー 基本エリア設定画像

 

 

色の変更画面になりますので、好きな色を設定してください!

カラー選択画像

 

 

色を変えたら「公開」をタップして、ブログに反映させてください。

 

ちなみに、サイトのベースとなる色は

「ダッシュボード」>「AFFINGER管理」>「デザイン」>「カラーパターン」

 

サイト全体の設定ページ画像

 

から選ぶこともできます!

 

 

②サイト名を変える

次に、サイト名を変えてみましょう!

 

私の場合は、メインタイトル「Ayumi Blog」とサブタイトル「お役立ち情報を提供」のところです!

ヘッダー画像

 

 

「ダッシュボード」>「外観」>「カスタマイズ」>「サイト基本情報」>「サイトのタイトル」

 

サイドバー画像  AFFINGER6管理サイドバー画像 サイト基本情報画像

 

あとは、好きなサイトタイトルやサブタイトルを設定して下さい!

サイトタイトルを変更すると、自動でフッター部分のタイトルも変更されます。

 

 

また、サイトタイトルを「中央寄せ」したい場合は、

「ダッシュボード」>「AFFINGER管理」>「ヘッダー」>「ヘッダーエリア」>「PCのみ」

 

ヘッダーページ画像

 

 

「ヘッダーを分割しない」>「save」>「ヘッダーエリアをセンタリング」>「save」

 

 

③サイトアイコンを変える

 

サイトアイコン場所表示画像

 

サイトアイコンとは、ブラウザのタブに表示される画像アイコンのこと

 

さっそく、サイトアイコンを変更していきましょう!

 

「ダッシュボード」>「外観」>「カスタマイズ」>「サイト基本情報」>「サイトアイコン」

 

サイドバー画像 AFFINGER6管理サイドバーサイトアイコン画像

 

 

「画像を変更」から好きな画像をアップロードして下さい!

画像は、「512×512」の正方形がベストです。

 

④ヘッダー・フッターメニューを変える

 

ヘッダーメニュー↓

ヘッダー画像

 

フッターメニュー↓

フッター画像

 

ヘッダー・フッターメニューは、

「ダッシュボード」>「外観」>「メニュー」>「新しいメニューを作成しましょう」

 

「メニュー設定」の「ヘッダー用メニュー」と「フッター用メニュー」にチェック入れる。

そして、「メニューを作成」をクリックします。

 

メニュー画像

 

 

メニューの編集画面になるので、区別するために「メニュー名」を設定してください。

 

メニューに入れたいカテゴリーにチェックを入れて「メニューに追加」をクリック。

 

メニュー項目が表示されるのを確認後、「メニューを保存」をクリックすれば完了です。

 

メニュー構造画像

 

メニューの削除は、メニュー項目の「▼」をクリックして「削除」をクリックするとできます。

ウィジェット画像

 

⑤ヘッダー下におすすめ記事を掲載する

ヘッダー下おすすめ記事画像

 

「ダッシュボード」>「AFFINGER管理」>「おすすめ記事一覧」>「おすすめヘッダーカード」

 

ヘッダー下/おすすめ画像

 

 

  1. アップロードから背景に表示させたい画像をアップロードする
  2. 表示させたいタイトルを設定する
  3. 飛ばしたいブログ記事のURLを「リンク先URL」に貼る
  4. 「保存」をクリック

 

 

カードを4つ作れば、バランスの良いヘッダーになります!

ヘッダー下おすすめ記事画像

 

ちなみに、わたしは背景画像に「イラストAC」という画像サイトを使用しました!

 

 

⑥サイドバーにプロフィールを掲載する

プロフィールカード画像

 

 

「ダッシュボード」>「ユーザー」>「プロフィール」

 

「ニックネーム」「ブログ上の表示名」「メール」「サイト」、「Twitter」と「インスタ」のURL、「プロフィール情報」「プロフィール写真」を入力します。

プロフィール設定画像

 

 

「プロフィールを更新」をクリックすればプロフィール情報入力は完了します。

プロフィール更新画像

 

 

次にサイドバーに表示させましょう。

ダッシュボード」>「外観」>「ウィジェット」>「11_STINGERプロフィールカード」を「サイドバートップ」にクリック&ドラッグ

 

ウィジェット表示画像

 

 

そして、レイアウトを整えていきましょう!

AFFINGER6管理オプション    AFFINGER6管理プロフィール

 

 

「ダッシュボード」>「外観」>「カスタマイズ」>「オプション(そのほか)」>「プロフィールカード」

 

プロフィールカード設定画像

 

 

「影をつける」とお好みで「角丸にする」にチェックを入れて公開します。

 

まだ、アイコンが四角で表示されているはずなので、角丸にましょう。

「ダッシュボード」>「AFFINGER管理」>「投稿・固定記事」>「この記事を書いた人」>「アバター画像を丸くする」にチェック>「save」

 

アバター画像変更チェック場所

 

 

⑦サイドバーを設定する

サイドバーとは、ブログ右側のメニュー欄のことです。

 

わたしはサイドバーに次の項目を表示させています。

  • プロフィール  →紹介済
  • 問い合わせフォーム
  • 検索窓
  • カテゴリー
  • よく読まれる記事 →特殊の為後述

「問い合わせフォーム」「検索窓」「カテゴリー」の表示方法を紹介します!

 

「ダッシュボード」>「外観」>「ウィジェット」

 

ウィジェットページ画像

 

画面左の「利用できるウィジェット」にある「02_STINGER問合せボタン」「検索」「カテゴリー」を、画面右の「サイドバートップ」にクリック&ドラッグするだけでOK。

 

それぞれの項目が入ればそれだけで表示されます。

 

 

また、お問い合わせフォームの作り方は、プラグインから「Contact Form 7」をインストールして、有効化をクリックします。

プラグインCONTACTFORM7

ダッシュボード」に「お問い合わせ」という項目が出るので、クリックして「コンタクトフォーム」へ。

 

 

次のように青いショートコードがでてくるので、コピーします。

ショートコード表示

 

 

次に「ダッシュボード」から「固定ページ」に進み、

  1. 新規追加
  2. タイトル設定
  3. パーマリンク(URL)の編集
  4. コピーした紹介コードをペースト
  5. 公開

 

固定ページ編集画像

 

再度「ウィジェット」に戻り、「02_STINGER問合せボタン」をクリックします。

 

タイトルとお問い合わせフォームのパーマリンク(URL)をコピペして「保存」を押せば、お問い合わせフォームの設定完了です!

サイバートップ詳細画像

 

 

⑧よく読まれる記事を設定する

よく読まれている記事完成画像

 

「よく読まれる記事」は、読んでほしい記事を紹介しやすい場所です。設定しておいた方が吉。

 

「ダッシュボード」>「AFFINGER管理」>「おすすめ記事一覧」

 

おすすめ記事一覧画像

 

「おすすめ記事一覧に表示させる文字」を入力します。

そして、表示させたい記事のIDを「,」でつなぎながら最大5つ掲載できます。

「サイドのスクロールに表示する」にチェックを入れます。

 

表示させたい記事のIDは「投稿一覧」から確認できます。

 

 

⑨見出しレイアウトを変える

見出し2

見出し3

見出し4

参考までに↑

 

「ダッシュボード」>「カスタマイズ」>「各テキストとhタグ」>「H2タグ」/「H3タグ」/「H4タグ」

 

AFFINGER6管理サイドバー  AFFINGER6管理見出し

 

色や見出しの形を自由に変えれば大丈夫です!

 

 

⑩トップページを作る

トップページ画像

 

メインのトップページの作り方を紹介します。

 

わたしは新着記事のスライドショーとレイアウトを用いたバナー風ボックスとブログカードを表示させています。

 

新着記事のスライドショー

トップページの作成は

「ダッシュボード」>「カスタマイズ」>「トップページの設定」>挿入コンテンツに

入力していきます!

 

トップページ設定画像

 

 

スライドショーは、「タグ」>「記事一覧/カード」>「カテゴリー一覧(スライドショー)」とクリックするだけで大丈夫です。

スライドショー場所画像

デフォルトで表示される記事数は「5」です。コードの「page="5"」の数字を、表示させた記事本数に変えれば表示させる記事本数を調整できます。

 

 

次に読んでほしい記事を表示させるには「タグ」>「記事一覧/カード」>「記事一覧」とクリックします。

記事一覧場所画像

 

「id=""」の「""」の間に、

表示させたい記事のIDを「,」でつなぎながら記載して下さい!

 

必ず保存して下さいね!

保存場所画像

 

 

レイアウトを用いたバナー風ボックスとブログカード

おすすめ記事ページ画像

トップページ一番下部分の「レイアウトを用いたバナー風ボックス」を設置していきます。

 

エディタ画面から「タグ」>「レイアウト」>「PCとTab(959px以上)」>「左右50%」

 

エディタ画面画像

 

 

Tab50%/50%の画像

黄色い枠と青い枠それぞれに、タグ機能を使ってコードを書いていきます。

 

 

バナー風ボックスを設置していきます。

 

「ボックスデザイン」>「バナー風ボックス」>「基本」

 

エディタ画像バナー風ボックス基本位置画像

バナー風ボックステキスト

 

 

上画面のように、バナー風ボックスのコードが入力されます。

  • st-flexbox url="リンク先URL(設置しなくても可)"
  • title="タイトル"
  • backgroud_image="背景画像のURL"

画像のURLは「メディア」のライブラリから確認できます。

 

 

 

次に、バナー風ボックスの下のブログカードを設置する手順を紹介します。

バナーボックスとブログカード構造

 

 

図のように、バナー風ボックスのコード下にブログカードのコードを書いていきます

エディタ画面ブログカード位置画像

 

タグから「記事一覧/ショートコード」>「ブログカード」>「参考」を選択するとブログカードのコードが入力されます。

 

コードの説明です↓

  • id="記事ID"
  • label="ラベル(未記入でOK)"
  • bgcolor="カードの背景色"
  • color="ラベルの文字色"
  • readmore="続きを読むのon,off"

 

これで1記事分です。

 

あゆみ
表示させたい記事分、コードを記入する必要があります!

少し大変ですが、頑張りましょう。

 

 

作り終えたら、必ず「公開」してくださいね。

 

 

デフォルトで表示される「新着記事一覧」は、

「ダッシュボード」>「AFFINGER管理」>「トップページ」>「記事一覧」のチェック欄から非表示にできますよ。

 

記事一覧画像

 

 

⑪会話吹き出しの作り方

作り方は、簡単です!

「ダッシュボード」>「AFFINGER管理」>「会話・ファビコン等」>「会話風アイコン」

会話アイコン設定画像

 

 

吹き出しにしたいアイコン画像をアップロードして、名前をつけます!

記事に表示させるのは「タグ」>「会話吹き出し」>「会話」をタップします

 

エディタ画面会話吹き出し位置画像

 

 

吹き出しは通常、記事の左側に表示されます。

記事の右側にアイコンを表示させたい場合は、

「半角スペース+r」と入力すれば、右側に表示されます!

 

まとめ:読者に読まれやすいおしゃれなブログを作ろう!

今回は、AFFINGER6のブログ作成方法をご紹介しました!

知りたいことは、知れましたでしょうか??

 

AFFINGER6は、初心者にも使いやすく、ブログのデザインレベルを高めてくれる有料テーマです。

 

これを機会にAffinger6を使ってみたくなった方は、こちらからどうぞ!

 

おすすめテーマNo.1/

AFFINGER6を購入する

自分の思い通りのブログへ!!

 

Affinger6についてもう少し知りたい、導入方法を知りたいという方は、こちらからどうぞ!

アフィンガー始めようメイン画像
【AFFINGER6の始め方!】オリジナルブログサイトを作ろう!

続きを見る

 

 

ちなみに、まだWordPressブログを持っていない方は、こちらからどうぞ。

【初心者向け】WordPressでブログをはじめよう

ブログ稼ぐ方法メイン画像
【子育てママも可】ワードプレスブログの始め方と稼ぎ方!

続きを見る

 

\当ブログおすすめレンタルサーバー/

 

 

  • この記事を書いた人

あゆみ

28歳子育てママブロガー。 フルタイム看護師として就職→身体の不調あり日勤パート看護師に→副業としてブログ×SNS開始|目標:脱パート|お金、資産運用に関する情報を発信|ママだからこそ我慢しない人生送ろ!|長野県在住0歳と2歳の息子(子猿)と夫4人暮らし

-AFFINGER6, ブログ
-,