MENU
カテゴリー

初心者OK!AFFINGER6の使い方【デザイン・カスタマイズの教科書】

\目次にジャンプ /

こんな悩みをかかえていませんか?

  • AFFINGER6を買ったけどカスタマイズの方法が全然わからなくてパソコンと一生にらめっこしてる
  • え、記事一覧をカード型にするのに別売りテーマを買わなきゃなんですか?!ぎゃふんとなっている
  • AFFINGER6を少しいじったけど…もしかしてAFFINGER6ってダサい?となっている
  • デザイン済みテーマを適応したものの、あたいの理想はこんなとちゃう!となっている
うきだいら

そんな悩みは今日でお別れです。地平線の彼方へさよならしましょう

そんなことが言えるぐらいAFFINGER6の使い方・カスタマイズ方法についてまとめました。

このコンテンツでできるようになること

このコンテンツでは次のようなブログをステップバイステップで作ることで、AFFINGER6のカスタマイズができるようになります。

サンプルグログのイメージ図

デザインはなにも考えず3秒で作ったのであれですが、以下のようなものをひととおり設定していくので読み終わる頃にはAFFINGER6でやりたいことはだいたいできる状態になります。

  • ヒーロヘッダー
  • サムネイルスライドショー
  • ヘッダーカード
  • ボックスメニュー
  • タブ式カテゴリー
  • 記事一覧のカード化
  • ボックスメニュー
  • 人気記事ランキング
  • ランキングを複数作成
  • スッテプの作成
  • タイムラインの作成
  • 各種カラー設定

このコンテンツの進め方

STEP
1.AFFINGER6をダウンロード

AFFINGER6をダウンロードしていない方は、まずここのコンテンツを見ながらダウンロードしてください。

ダウロード期限が過ぎたあとのダウロード方法も紹介しています。

STEP
2.AFFINGER6の初期設定

AFFINGER6はカスタマイズのクセが強いテーマなので、まずカスタマイズがしやすいよう初期設定をしていきます。

STEP
3.AFFINGER6のカスタマイズ1

サイト全体のカラー設定から、プロフィールカード、サムネイルスライダーなど、AFFINGER6の機能を使って一通り設定していきます。このステップでAFFINGER6の使い方がほぼほぼ理解できるようになります。

STEP
4.AFFINGER6のカスタマイズ2

3の続きです。長くなったのでわけました。

STEP
5.AFFINGER6をCSSでカスタマイズ

AFFINGER6の機能だけでは再現できない、記事一覧のカード化などの方法を紹介しています。HTMLやCSSがわからない方でもコピペで再現できるようになっています。

STEP
6.AFFINGER6の投稿機能の使い方

投稿画面での装飾機能やブロックの使い方を紹介しています。投稿管理画面は直感的に操作がしやすい箇所なので、見なくてもわかると思いますが、ホスピタルの鬼と呼ばれる男としては紹介せずにはいられませんでした。

大まかな流れとしてはこんな感じです。

順を追って説明しているので初心者の方は順番通りに進めることをおすすめします。

WordPressの操作に慣れている方であれば、どこから見ても問題ありません。長いだけで難しい操作などはないのでパッと見ただけでも対応できると思います。

このコンテンツを読む上での注意点

このコンテンツは新規wordpressにAFFINGER6をインストールする前提で進めています。

なので、運用中のWordPressを使ってここで紹介しているコンテンツのカスタマイズをするときは、必ずバックアップをとってから進めてください。

なぜなら別テーマからAFFINGER6を適応すると、ほぼ確実にデザインが崩れます。カスタマイズ状況によってはべらぼうに崩れます。

「崩れたって、もともと使ってたテーマに戻せばえんやろがい!おおん!」
そんな強気な方もいるかもしれませんが、戻しても直らないこともありえます。

なのでカスタマイズする前にすぐ戻せるようバックアップを必ずとってください。

バックアップの方法はなんでもいいですが、「all-in-one wp migration」というプラグインを使うと簡単です。

以下のページでバックアップ方法を簡潔にまとめてあります。

目次

AFFINGER6の使い方まとめ

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる