web設計 ブログ制作講座

AFFINGER5(アフィンガー)操作マニュアル【便利機能13選】

 

 

ブログ初心者「有料WordPressテーマのAFFINGER(アフィンガー)5ってどうやって使うの?どんな便利な機能があるの?公式サイトにマニュアルっぽいのがあるけど、分かりにくすぎ!」

 

今日は、こういったあなたの悩みを解決します。

 

AFFINGER5(アフィンガー5)操作マニュアル

本記事を読むメリット

この記事を読むことで、AFFINGER5(アフィンガー5)の便利な機能の使い方をマスターでき、たくさんの人に読まれるおしゃれなデザインのサイトをつくれるようになります。

今回紹介するアフィンガー5の便利な機能(よく使うものを抜粋)

  1. サイト名・キャッチフレーズを変える
  2. サイト名・キャッチフレーズ・ヘッダー背景の色を変える
  3. サイト名とキャッチフレーズの上下を逆にする
  4. サイト名・キャッチフレーズをページ真ん中によせる
  5. トップページ上部におすすめヘッダーカードをおく
  6. メニューのカテゴリ項目をページ真ん中によせる
  7. サイドバーにプロフィールや最近の投稿記事を設置する
  8. PCヘッダーメニューの文字と背景の色を変える
  9. サイト・ページ背景の色を変える
  10. 記事タイトル・大見出し・小見出しの背景と文字の色を変える
  11. 記事一覧の左上のカテゴリラベルの文字と背景の色を変える
  12. 同ページ内の記事を2列表示にする
  13. 記事スライドショーをつくる

 

WordPressテーマを変えたばかりで、アフィンガー5の使い方がよくわからない!という方は、本記事を操作マニュアルとしてお使いください。

 

ヘッダーのカスタマイズ

サイト名・キャッチフレーズを変える

WordPress管理画面のダッシュボード→「外観」→「カスタマイズ」→「サイト情報」→【サイトタイトル】、【キャッチフレーズ】を入力→「公開」

「サイト情報」で編集できること

・サイトのタイトル

・サイトキャッチフレーズ

・サイトアイコン

 

サイト名・キャッチフレーズ・ヘッダー背景の色を変える

WordPress管理画面のダッシュボード→「外観」→「基本エリア設定」→「ヘッダーエリア」→【サイトタイトルとキャッチフレーズの文字色】、【背景色】のカラーコードを入力→「公開」

>> HTMLカラーコードを調べる

「ヘッダーエリア」で編集できること

・ヘッダー背景の色(グラデーションも可)

・サイトタイトルとキャッチフレーズの文字色

・ヘッダー背景画像の設置

 

サイト名とキャッチフレーズの上下を逆にする

WordPress管理画面のダッシュボード→「AFFINGER5管理」→「ヘッダー」→「Hヘッダー設定」→【サイト名とキャッチフレーズを上下反対にする】にチェック→「SAVE」

「AFFINGER5管理」のヘッダーで編集できること

・サイト名とキャッチフレーズを上下反対にする

・ヘッダーに記事スライドショーを設置する

・サイト名とキャッチフレーズをページ真ん中によせる
(詳細は、次の項目で解説)

 

サイト名・キャッチフレーズをページ真ん中によせる

WordPress管理画面のダッシュボード→「AFFINGER5管理」→「ヘッダー」→「Hヘッダー設定」→【ヘッダーを分割しない】にチェック→「SAVE」→【ヘッダーエリアをセンタリング】にチェック→「SAVE」

 

 トップページ上部におすすめヘッダーカードをおく

WordPress管理画面のダッシュボード→「AFFINGER5管理」→「おすすめ記事一覧」→「おすすめヘッダーカード」→【画像URL】、【テキスト】、【リンク先URL】を入力→「SAVE」

 

おすすめ記事のヘッダーカードは、4枚(2行2列)までヘッダー下部に設置できます。

本サイトでは、4つ設置しています。

 

メニューバーのカスタマイズ

メニューのカテゴリ項目をページ真ん中によせる

WordPress管理画面のダッシュボード→「外観」→「カスタマイズ」→「追加CSS」→下記コードを入力→「公開」

 

 html
/*ヘッダーメニュー幅*/
header .smanone ul.menu li{
width: 200px !important;
}

注)メニュー項目の位置がセンターからズレる場合は、以下の「200px」の値を変えて調整でします。

 

PCヘッダーメニューの文字と背景の色を変える

WordPress管理画面のダッシュボード→「外観」→「カスタマイズ」→「[+]メニューのカラー設定」→【背景色】、【文字色】、【ボーダー色】、【下層ドロップダウンメニュー色】のカラーコードをそれぞれ入力→「公開」

>> HTMLカラーコードを調べる

 

サイドバーのカスタマイズ

サイドバーにプロフィールやオススメ記事を設置する

プロフィールの設置

WordPress管理画面のダッシュボード→「外観」→「カスタマイズ」→「ウィジェット」→「利用できるウィジェット」で【テキスト】を選択 → 【サイドバートップ】に追加 → テキスト内にプロフ画像と簡単なプロフを書く →「公開」

 

最近の投稿記事の設置

WordPress管理画面のダッシュボード→「外観」→「カスタマイズ」→「ウィジェット」→「利用できるウィジェット」で【最近の投稿】を選択 → 【サイドバートップ】に追加 → 表示させる記事数を設定 →「公開」

 

サイト全体のデザインのカスタマイズ

サイト・ページ背景の色を変える

WordPress管理画面のダッシュボード→「外観」→「基本エリア設定」→「背景色」→【背景色】のカラーコードを入力 →「公開」

>> HTMLカラーコードを調べる

 

記事タイトル・大見出し・小見出しの背景と文字の色を変える

WordPress管理画面のダッシュボード→「外観」→「[+]各テキストとhタグ(見出し)」→「カテゴリ」→【背景色】、【文字色】のカラーコードを入力 →「公開」

>> HTMLカラーコードを調べる

 

記事一覧の左上のカテゴリラベルの文字と背景の色を変える

WordPress管理画面のダッシュボード→「外観」→「[+]各テキストとhタグ(見出し)」→「カテゴリ」→【背景色】、【文字色】のカラーコードを入力 →「公開」

>> HTMLカラーコードを調べる

 

記事のカスタマイズ

同ページ内の記事を2列表示にする

WordPress 管理画面のダッシュボード→「投稿」→「新規追加」→記事編集画面のメニューバー内にある【タグ】→【レイアウト】→【PCとTab(959 px 以上)】→【左右 50 %】

 

記事スライドショーをつくる

WordPress管理画面のダッシュボード→「投稿」→「新規追加」→記事編集画面のメニューバー内にある【タグ】→【記事一覧/カード】→【カテゴリ一覧(スライドショー)】

-web設計, ブログ制作講座

Copyright© Tech-Discovery , 2025 All Rights Reserved Powered by AFFINGER5.