ブログ

【カスタマイズ】アフィンガーでブログをおしゃれにする

ブログのデザインをおしゃれにしたいんだけど、アフィンガーを使うとどんなデザインにできるの?

 

そんなお悩みを解決します。

 

本記事の内容

・アフィンガーとは?
・カスタマイズ方法について
・アフィンガーを使っているブロガー紹介

 

私もブログを始めた当初は、デザインについてとても悩んでいました。

 

そこで、今回は画像つきで当ブログ「今日からフリーランス革命」と同じデザインにする方法を伝授します!

 

アフィンガーを使ったら、簡単に真似できるので参考にしてみてください。

 

後半では、アフィンガーを使った有名ブロガーを紹介します!
マーティ

 

WordPressテーマ「アフィンガー5」とは?

SEOにかなり強い

 

アフィンガー5を一言で表すと「稼ぐことに特化したテーマ」です。

 

ポイント

・自由にサイトをデザインできる

・SEO対策がしっかりいしている

・表示速度が早い

・特典やサポートが充実

 

アフィンガー5では管理画面で様々な設定が可能です。

 

デザインから広告管理・SEO対策まですべてアフィンガー5で完結します。

 

アフィンガー5の概要

テーマ名 WING(AFFINGER5版)
料金 14,800円(税込)
使用制限 複数サイト使用OK
SEO内部対策
レスポンシブデザイン
マニュアル・デザインテンプレート ◎(購入者は無料でダウンロードできます)

 

上記の様な感じです。

 

正直、無料テーマでもブログ運営はできますが、有料テーマ(特にアフィンガー)の方がSEO内部対策がしっかりしているので成果が早く出ます。

 

それと私の体験談なんですが、無料テーマから有料テーマに後から移行すると、記事の編集だけでかなりの時間を使います。

 

マーティ
記事編集はめちゃめちゃ大変だったので、有料テーマに変えるなら早めがいいです。

 

>>「アフィンガー5」公式ホームページ

 

アフィンガーのカスタマイズ【当ブログ風】

 

ここからは、アフィンガーのカスタマイズについてご紹介していきます。

 

当ブログのような雰囲気のサイトにしたければ、下記の通り設定すればOKです。

 

トップページ編

まずは全体のアイキャッチとなるトップページから。

 

当ブログのトップページは固定ページで作成しています。

 

固定ページ

 

トップページの編集手順は以下の通りです。

①新着記事のスライドショーを作成

②列レイアウト・カテゴリ・バナー(おすすめ記事外枠)

③ブログカード作成(「おすすめ記事」にする記事を選択する)

 

3段階くらいの作業でトップページは仕上がりますよ。

 

①カテゴリーのスライドショー作成

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

 

トップページの上部にある、スライドショーの作り方についてご紹介します。

 

上記の「固定ページ」の画像にあるように、新着記事・おすすめ記事見出しのh3で作成しています。

 

これから、実際の作り方を紹介しますが、ワードプレスのエディターをClassic Editorのプラグインで有効化して編集を始めてください。(ブロックエディターだと作業が異なる)

 

編集後はブロックエディターに戻してOK!
マーティ

 

固定ページで新規作成

 

それでは、まず「固定ページ」→「新規追加」でページを新規作成しましょう。

 

最初の行でh3新着記事と入力したら、「タグ」→「記事一覧」→「カテゴリ一覧」という流れで、ショートコードを挿入します。

 

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

 

工夫次第では様々なスライドショーにできますが、新着記事をスライドショーとして表示したければHTML下記のように変更してください。

⚠︎画像なのでコピーできません

 

変更点は2つ。

slide="off" → slide="on"

slide_date="" → slide_date="off"

slide_more="ReadMore" → slide_more="続きを読む"

 

すると、下記のようなスライドショーが完成します。

 

フリーランス

運営者情報

当ブログへお越しいただき、ありがとうございます。 マーティもっと自分は頑張れる。 常にこんなことばかり考えていましたが、何も行動せず「できない理由」ばかり探していたのを覚えています。 そんな中、自分を支えてくれたのは「恋人」「家族」「友人」の存在でした。 周囲に恵まれてたからこそ、毎日嫌でも仕事に行こうと思えたし、みんなと会える休日を楽しみに仕事をこなしました。 こうした生活を送る中で、自分の人生で”本当に大切なもの”が見えてきました。 日々の気持ちをとにかくメモに書き、「自分は何のために生きていくか」を ...

続きを読む

退職前にやるべきこと フリーランス

フリーランス

【フリーランスになる】退職する前にやっておくこと8つ【クレジットカードなど】

マーティ フリーランスになる人が退職する前にやっておくべきこと【8つ】 Preparation フリーランスになる方が、退職する前にやっておくべきことは以下のつです。 退職する前にすべきこと とにかく領収書をもらう 確定申告や税金の勉強をする 保険について調べておく 固定費を下げる クレジットカードを作っておく 高額になりそうな医療費は会社員のうちに 自分の市場価値について知る 目標を立てる それぞれを詳しく解説していきます。 ①:とにかく領収書をもらう まずは、事業の売上に関する出費についてはとにかく領 ...

続きを読む

お金・税金

副業用の銀行口座は【ゆうちょ・PayPay銀行】がおすすめ!

マーティ 本文では「ゆうちょ銀行」「PayPay銀行」の2つがおすすめな理由を解説していきます。 こんな方におすすめ これから副業を本格的に始めたい 副業を始めたけど、お金や税金のことがわからない 副業で収益が発生してきたから、急いで銀行口座を作りたい この記事を読めば、副業用の口座選びに悩むことがなく、口座開設までスムーズに終わらせることができます。 本業が忙しい方こそ、空き時間をすべて副業の時間にできるように”環境作り”は早めに済ませておくと良いですね。 ゆうちょとPayPay銀行の副業口座はこんな人 ...

続きを読む

雑記

【U-NEXT vs Netflix】両方使ってわかった3つの違い

※本ページの情報は2021年9月時点のものです。最新の配信状況は U-NEXT サイトにてご確認ください。 マーティ先に結論だけ比較します! U-NEXTはこんな方におすすめ 幅広いジャンルの作品を見たい 漫画や書籍も楽しみたい まずは無料トライアルでお試ししたい Netflixはこんな方におすすめ オリジナル作品を中心に見たい 語学の学習に役立てたい 無料トライアルがないので注意 それぞれに強みがあるので、目的によってしっかり検討したいところです。 マーティさらに、U-NEXTはアカウントを家族でシェア ...

続きを読む

雑記

【Netflix値上げ】日本で最大13%の値上げの理由は?

料金が高くなると困るな。 オリジナル作品はあんまり見ないから、他のサービスに乗り換えようかな。   そう考える方もいるのではないでしょうか。   Netflixはオリジナル作品が充実していて、Netflixじゃないと見れない作品が多くあります。   しかし、オリジナル作品をあまり見ない人にとっては、Netflixに登録している事は損になります。   なぜなら、映画やドラマ・アニメ・韓流を見るなら、他にもコスパがいい動画配信サービスがあるからです。   乗り ...

続きを読む

 

 

②列レイアウト・カテゴリ・バナー(おすすめ記事外枠)

 

続いては、カテゴリ一覧の下の「おすすめ記事」の部分の作り方について解説します。

 

アフィンガー上では、「レイアウト」というタグを変更することで、2列の記事表示ができるようになります。

 

「タグ」→「レイアウト」→「PCとTab左右50%」→「左右50%」

 

「左右50%」まで選択すると、(黄色)(水色)の列が表示されます。

 

次は、そのままカテゴリーの名前とリンクのバナー風ボックスを作成します。

 

バナー風ボックス

 

バナー風ボックスも先ほどの手順で、「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」と挿入します。

 

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

 

以下のポイントを変更すればOK。

  • st-flexbox url=”リンク先URL”
  • title=”カテゴリーのタイトル”
  • backgroud_image=”タイトルの背景画像”

 

これで②も終了です。

 

③ブログカード作成(「おすすめ記事」にする記事を選択する)

ブログカード

 

ブログカードの配置はとても簡単。

 

「バナー風ボックス」の後で改行をして、「カード」というボタンを押すだけ。

 

すると下記のようなコードが表示されます。

 

このコードの変更点は1つ。

id="組み込みたい記事のID"

※記事のIDは「管理画面」→「投稿一覧」の記事タイトル欄にある数字のこと。

 

記事を4つ表示させたければ、この作業を4回繰り返すだけです。

 

最後に、「管理画面」→「AFFINGER5 管理」→「デザイン」→「抜粋設定」で、「PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする」にチェックを入れると、ブログカードがタイトルだけの表示になります。

 

「PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする」にチェックを入れる

 

以上でトップページは完成です。

 

アフィンガーを使っているブログサイト紹介

 

「アフィンガー5」だと他にも様々なデザインが楽しめます!

 

数あるアフィンガーサイトの中から、特に参考になるサイトをご紹介します。

 

 

マーティ
すべてアフィンガー5でデザインできます!

 

幼児教材ガイドブック

幼児教材ガイドブック

 

幼児教材の比較サイトです。

 

サイトの色だけではなく、イラストや写真にまでこだわっているのが伝わります。

 

マーティ
コンテンツもかなり充実!

 

DEVICEZ

DEVICEZ

 

DEVICESデヴァイシーズは理化学機器の擬人化をコンセプトにしたサイトです。

 

同じアフィンガーを使っているとは思えないくらい、デザインの種類が異なっています。

 

マーティ
キャラクターがかっこいい!

 

てっぺのマネーハック

てっぺのマネーハック

 

題名の通り、借金地獄から復活したサラリーマンがお金の知識を発信するサイトです。

 

当ブログと同じ、列レイアウト・バナーデザインが使われていてなんだか親近感が湧きます。

 

マーティ
お金の勉強記事がたくさん!

 

NOJI BLOG

NOJI BLOG

 

ブログ情報や人に役立つ情報を発信しているサイト。

 

落ち着いたデザインで統一感がありますね。

 

マーティ
私もNOJIさんのTwitterをフォローしてます!

 

HAYAMIZ BLOG

HAYAMIZ BLOG

 

ブログの作り方を始め・スマホ/PC・ネットのノウハウを発信するサイト。

 

ヘッダーがインパクトあってとてもお洒落です。

 

マーティ
私も参考にしたいデザインがたくさんありました!

 

まとめ:WordPressテーマなら「アフィンガー5」

 

結論、私も「アフィンガー5」を使ってとても満足しています。

 

有名ブロガーも使用者が多いので、参考にできるサイトが多く、デザインに対するモチベーションが高まります。

 

冒頭でも書いた通り、テーマの移行は記事数が増えるほど大変な作業になります。

 

なので、無料テーマ・有料テーマで迷うくらいなら、

 

とりあえず有料テーマ買った方が間違いないかな!
マーティ

 

私もそんな感じでした。
※お金をかけた事で意欲も上がり、成果も生まれました。

 

まずは、公式ホームページからチェックしてみて下さい。

 

購入はコチラ

AFFINGER公式サイト

「稼ぐ」に特化したWordPressテーマ

 

-ブログ