MENU
カテゴリー

【5分で完了】AFFINGER6の初期設定のやり方を5Stepで解説

こんな悩みありませんか?

  1. AFFINGER6をダウンロードしたけど次は一体何をしたらいいんだろう??
  2. AFFINGER6の公式マニュアルが重いし読みづらいしで泣けてくる…
  3. 初期設定を済ませたいだけなのになんでこんなに苦労しなきゃなんだ!

安心してください。この記事ではそんなあなたの悩みをぴゃーっと解決します。まずは初期設定からはじまり、カスタマイズしやすくするための設定をちょろりと済ませてしまいましょう。

目次

この記事で紹介している初期設定は、僕があーでもねーこーでもねーと考えたものになります。

公式の初期設定とはほのかに違うので、あらかじめご理解ください。

なお、この記事で紹介している初期設定をすると次の画像のようなブログができます。

ここまでの手順で完成しているWordPressトップページ画面

少し引くぐらいのシンプルデザインですが、このブログをベースとしてカスタマイズしていくので、ご安心ください。それでは、さっそく初期設定を進めていきましょう。

「WordPressの管理画面」にログイン

次の画像はWordPressにログインした後に表示される画面になります。

これ以降の説明は、混乱を避けるためすべてこの管理画面からスタートしています。

例えば「外観」をクリックと説明している箇所は、この画面の左メニューの「外観」をクリックするところからスタートになります。

WordPress管理画面
WordPressのログインURLがわからない場合

WordPressのログインURLは、あなたのサイトURLの最後に、wp-login.phpをくっつけるとログインURLになります。

例えば僕が運営しているこのサイトだと、https://toach.click/がサイトURLになるので、この後ろにwp-login.phpをくっつけるとhttps://toach.click/wp-login.phpとなり、これがWordPressのログインURLになります。

設定を「no-index」にする

no-indexは検索に引っかからないようにする機能になります。

この記事では本格運用前のブログでAFFINGER6のカスタマイズを試している段階と仮定しているのでno-indexにチェックを入れるようにしています。

もし、バリバリ運用中のブログでAFFINGER6のカスタマイズを進めているのであればチェックを入れる必要はありません。

WordPressをno-indexにする手順1。詳細は吹き出しボックスに記載
WordPressをno-indexにする手順2と3。詳細は吹き出しボックスに記載
  1. 「設定」にカーソルをのせ「表示設定」をクリック
  2. 「検索エンジンでの表示」にチェック
  3. 「変更を保存」をクリック

これでno-index設定ができました。

本格運用前にno-indexにする理由

例えばテストのため適当な記事を投稿したりすることもあるかと思います。

そういった記事がインデックス(Googleに登録されること)されてしまうと【質の低い記事を書いているブログ=価値のないブログ】とGoogleに認識されかねません。

なので本格運用前はno-indexにチェックを入れておくようにします。

「AFFINGER6テーマ」の有効化

親テーマのインストール(必須)

AFFINGER6を使えるように親テーマをインストールをしていきます。

AFFINGER6親テーマをWordPressにインストールする手順1と2。詳細は吹き出しボックスに記載
AFFINGER6親テーマをWordPressにインストールする手順3と4。詳細は吹き出しボックスに記載
AFFINGER6親テーマをWordPressにインストールする手順5。詳細は吹き出しボックスに記載
AFFINGER6親テーマをWordPressにインストールする手順6。詳細は吹き出しボックスに記載
AFFINGER6親テーマをWordPressにインストールする手順7。詳細は吹き出しボックスに記載
AFFINGER6インストール後はテーマ一覧に表示される。詳細は吹き出しボックスに記載
  1. 「外観」をクリック
  2. 「新規追加」をクリック
  3. 「テーマのアップロード」をクリック
  4. 「ファイルの選択」をクリック
  5. ダウンロードした「親テーマ(affinger.zip)」を選択
  6. 「今すぐインストール」をクリック
  7. 「有効化」をクリック

子テーマのインストール(任意)

子テーマ(affinger-child.zip)を使う場合は、「テーマを追加」から親テーマと同じ手順で有効化してください。

ファイルを選択するさいに親テーマ(affinger.zip)と間違えないようにご注意ください。インストールすると、テーマ一覧に子テーマが表示されているのが確認できます。

なお、子テーマをインストールするかしないかは、次の「子テーマは不要?」って箇所を読んで、必要だと思った方だけインストールしてください。

AFFINGER6子テーマのインストール(新規追加)。詳細は吹き出しボックスに記載
AFFINGER6子テーマのインストール手順(ファイル選択
子テーマインストール後のテーマ一覧画面
子テーマは不要?

子テーマを使うと読み込むファイルが増えるため少し評価が落ちるという意見があります。

個人的には、んなもんで落ちるかいって思ってますが、なんにせよCSSで少しカスタマイズをするぐらいなら、子テーマは必要ありません。

それぐらいのカスタマイズならWordPress標準機能の追加CSSでことたりるからです。

ただ今後、ブログの特定の場所をバインバイン動かしたり、ビヨーンビヨーンと伸ばしたりするような動的なカスタマイズをしたい方は子テーマいれておいたほうがいいです。

「AFFINGER6プラグイン」の有効化

「投稿機能 」と「目次」に関する2つのプラグインをインストールしていきます。どちらもAFFINGER6を使うのに必要なものなので忘れず追加しましょう。

プラグイン(st-blocks)を追加する手順2と3。詳細は吹き出しボックスに記載
プラグイン(st-blocks)を追加する手順4。詳細は吹き出しボックスに記載
プラグイン(st-blocks)を追加する手順5。詳細は吹き出しボックスに記載
プラグイン(st-blocks)を追加する手順6。詳細は吹き出しボックスに記載
プラグイン(st-toc)を追加する手順7。詳細は吹き出しボックスに記載
  1. 「プラグイン」にカーソルをのせ「新規追加」をクリック
  2. 「プラグインのアップロード」をクリック
  3. 「ファイルを選択」をクリック
  4. 「st-blocks.zip」を選択
  5. 「今すぐインストール」をクリック
  6. 「有効化」をクリック
  7. 「新規追加」をクリックして同じ手順で「st-toc.zip」もインストールして有効化

「Contact Form7」の有効化

次はお問い合わせ機能をつける「Contact Form7コンタクト フォーム セブン」というプラグインを追加します。

このプラグインはAFFINGER6で提供しているものではないので、WordPress公式プラグインから直接ダウロードしてインストールをしていきます。

プラグイン(Contact Form7)を追加する手順1。詳細は吹き出しボックスに記載
プラグイン(Contact Form7)を追加する手順2。詳細は吹き出しボックスに記載
プラグイン(Contact Form7)を追加する手順3。詳細は吹き出しボックスに記載
プラグイン(Contact Form7)を追加する手順4。詳細は吹き出しボックスに記載
  1. 「プラグイン」にカーソルをのせ「新規追加」をクリック
  2. 右上の検索窓に「Contact Form 7」と入力
  3. 表示されたContact Form 7の「今すぐインストール」をクリック
  4. 「有効化」をクリック

AFFINGER6を使うために有効化するものは以上です。

次は初期設定をしていきます。

AFFINGER6 ではじめにやること

はじめにSaveボタンを1回押すという崇高な儀式がAFFINGER6にはあります。

これをしないことにはたとえインドで30年修行しようがAFFINGER6を使いこなすことはできないので、忘れずにやるようにしましょう。

AFFINGER6ではじめるやる設定の手順1から3。詳細は吹き出しボックスに記載
  1. 「AFFINGER管理」をクリック
  2. 「はじめに」をクリック
  3. 「Save」をクリック

「サイドバーの新着記事」を非表示にする

AFFINGER6を有効化すると、サイドバーに「記事一覧」が表示されるんですが、合コンでやたら主張してくるブタゴリラみたいな女の子並みにやっかいな存在なので削除します。ブタゴリラみたいな女の子は削除ちゃダメですよ。

サイドバーの新着記事を非表示にする手順1と2。詳細は吹き出しボックスに記載
サイドバーの新着記事を非表示にする手順手順3。詳細は吹き出しボックスに記載
サイドバーの新着記事を非表示にする手順手順4と5。詳細は吹き出しボックスに記載
サイドバーの新着記事を非表示にする手順手順6。詳細は吹き出しボックスに記載
  1. 「AFFINGER管理」をクリック
  2. 「トップページ」をクリック
  3. 上部メニューの「記事一覧」クリック
  4. 「トップページのサイドバーの新着記事一覧を非表示」にチェック
  5. 「下層ページのサイドバーの新着記事一覧を非表示にする」にチェック
  6. 「save」をクリック

saveをクリックしないと設定が反映されないので忘れないようにしましょう。

なおsaveボタンはAFFINGER管理内に複数ありますが、どれを押しても反映されるようになっています。

「初期ウィジェット」を削除する

「サイドバーウィジェット」に、はじめから設定されているウィジェットも使い勝手が悪いので削除します。容赦なきこと火の如くです。

初期ウィジェットをする手順手順1。詳細は吹き出しボックスに記載
初期ウィジェットをする手順手順2。詳細は吹き出しボックスに記載
初期ウィジェットをする手順手順3と4。詳細は吹き出しボックスに記載
初期ウィジェットをする手順手順5。詳細は吹き出しボックスに記載
初期ウィジェットをする手順手順6と7。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「ウィジェット」をクリック
  2. 「サイドバーウィジェット」をクリック
  3. 「ブロック」3つをすべて削除
  4. 「スクロール広告用」のウィジェットも削除
  5. 空にした「サイドバーウィジェット」に「11_STINGERプロフィール」「05_STINGER最新の投稿一覧」「カテゴリー」を追加
  6. 「11_STINGERプロフィール」のタイトルに「プロフィール」
    「05_STINGER最新の投稿一覧」のタイトルに「最新記事」
    「カテゴリー」のタイトルに「カテゴリー」と記入
  7. 「保存」をクリック

ここでは一般的なブログ構成になるよう最低限のものだけ追加しています。使いたいウィジェットがあれば自由に追加してください。

「グローバルナビゲーション」を作る

グローバルナビゲーションはブログの上の方に設置してある横長のメニューのことです。グローバルナビ、グローバルメニュー、ヘッダーメニューなんて呼ばれてたりもします。

グローバルメニューを作る手順1。詳細は吹き出しボックスに記載
グローバルメニューを作る手順2から4。詳細は吹き出しボックスに記載
グローバルメニューを作る手順5から8。詳細は吹き出しボックスに記載
グローバルメニューを作る手順9と10。詳細は吹き出しボックスに記載
  1. 「外観」にカーソルをのせ「メニュー」をクリック
  2. メニュー名に「グローバルナビ」と記入
  3. 「ヘッダーメニュー」「フッターメニュー」「スマホスライドメニュー」にチェック
  4. 「メニューを作成」をクリック
  5. 「メニュー項目を追加」の「カスタムリンク」をクリック
  6. URLに半角英数字の「#」を記入
  7. リンク文字列に「ホーム」と記入
  8. 「メニューに追加」をクリック
    追加するとメニュー構造に表示される
  9. 同じ手順で「当サイト」「運営者情報」「お問い合わせ」を追加
  10. 「メニューを保存」をクリック

URLに入力した「#」は仮なので、本格的に運用し始めたら変更してください。

「プロフィール」を作る

プロフィール作成は必須ではありません。だたブログの運営者がどんな人なのかを伝えることは、読者さんにも検索エンジンにもプラスに働くので作っておいたほうがよいです。

プロフィールを作る手順1。詳細は吹き出しボックスに記載
プロフィールを作る手順2。詳細は吹き出しボックスに記載
プロフィールを作る手順3。詳細は吹き出しボックスに記載
プロフィールを作る手順4から7。詳細は吹き出しボックスに記載
プロフィールを作る手順8。詳細は吹き出しボックスに記載
  1. 「ユーザー」にカーソルをのせ「プロフィール」をクリック
  2. 「ニックネーム(必須)」に運営者名を記入
  3. 「ブログ上の表示名」でニックネームを選択
  4. 「twitter(URL)」に「#」を記入
  5. 「facebook(URL)」に「#」を記入
  6. 「instagram(URL)」に「#」を記入
  7. 「プロフィール情報」に「テキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキスト。」を記入
  8. 「プロフィールを更新」をクリック

仮で入力しているものなので、ご自身のtwitter、facebookアカウントがあれば、そちらのURLを記入してください。プロフィール文章も同じです。

なお、ここで記入した情報がサイドバープロフィールや、記事下のライター情報に反映されます。

「テストコンテンツ」のインストール

テストコンテンツのダウンロード

記事やカテゴリーが設定されていないと、カスタマイズしづらいのでテストコンテンツ用意しました。まだ記事などを投稿していない人はダウロードして使ってください。

すでに記事を投稿してる方はフルシカトして「AFFINGER6のカスタマイズ」に進んでください。

テストコンテンツをダウンロード
ダウンロード

以下のリンクを「右クリック」後に「名前をつけてリンク先を保存」をしてください。

テストコンテンツのインストール手順

テストコンテンツをインストールする上での注意事項

テストコンテンツをインストールすると以下のコンテンツがWordPress内に自動生成されます。

「記事×15」「カテゴリ×8」「タグ×20」「画像ファイル×15」「音楽ファイル×1」「コメント×12」「ユーザー×1」

これらのコンテンツはデザインなどを確認するために使うものなので、一通りAFFINGER6の使い方を覚えた後は必ず削除してください。削除の方法は「テストコンテンツの削除」で解説しています。

テストコンテンツをインポートする手順1。詳細は吹き出しボックスに記載
テストコンテンツをインポートする手順2。詳細は吹き出しボックスに記載
テストコンテンツをインポートする手順3。詳細は吹き出しボックスに記載
テストコンテンツをインポートする手順4から6。詳細は吹き出しボックスに記載
テストコンテンツをインポートする手順7と8。詳細は吹き出しボックスに記載
  1. 「ツール」にカーソルをのせ「インポート」をクリック
  2. WordPressの「今すぐインストール」をクリック
    ※インポーターの実行と表示されている場合は次に進む
  3. 「インポーターの実行」をクリック
  4. 「ファイルを選択」をクリック
  5. ダウンロードした「test-contents-ukidaira.xml」を選択
  6. 「ファイルをアップロードしてインポート」をクリック
  7. 「添付ファイルをダウンロードしてインポートする」にチェック
  8. 「実行」をクリック

ここまでで、初期設定は完了です。

次からAFFINGER6の機能使ってカスタマイズしていきます。

AFFINGER6の使い方まとめ

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

アフィリエイト切っ掛けでWEB業界にどっぷり浸かり、10年以上WEB関連のお仕事で食べてる人。個人から法人成りし新規で始めたサービスがうけて誰しもが知るビックネーム企業数社と契約することに成功。勝ち確定や!と思われたやさきコロナ化に突入。フルマラソンで調子良く走ってたら空から隕石が降ってきたぐらいの衝撃を受ける。ビックネーム企業との契約が見事に全部打ち切り。「わいにBtoBは向いてなかったんや・・」と現在は猫3匹と自由気ままに生きる毎日。

コメント

コメントする

目次