【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法

 

 

アフィンガーを購入しました。かっこいいブログサイトをデザインしたいので初心者の僕にもわかりやすく教えてほしいな。できればeisukeブログみたいな感じにしたいんだけど。

 

こんな疑問にお答えします。

 

本記事の内容
  • アフィンガーのカスタマイズ【トップページ編】
  • アフィンガーのカスタマイズ【フォント編】
  • アフィンガーのカスタマイズ【サイドバー編】

 

今回はアフィンガーのデザインをカスタマイズする方法を紹介します。

 

読者が当ブログサイトを見たときに「デザインに凝ってるので、なんか記事が信用できそう」と思ってもらえるようなクオリティを重視で作りました。といっても難しいテクニックなどはありません。

 

今回は初心者でも簡単にカスタマイズできるように画像を駆使して説明してゆきますので安心して読み進めていってください。

 

それではアフィンガーのカスタマイズ方法をご紹介します。

 

 

アフィンガーのカスタマイズ【トップページ編】

 

まずはサイトの顔と言えるトップページのカスタマイズについて念入りに説明します。

 

固定ページを新規追加する

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
【固定ページ】⇒【新規追加】

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
固定ページのタイトルを【トップページ】と入力

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
【外観】⇒【カスタマイズ】

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
【ホームページ設定】⇒

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
【ホームページの表示】⇒【固定ページ】にチェックを入れる

【ホームページ】⇒【トップページ】を選択する

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
【公開】ボタンをクリックして設定を保存する

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
×ボタンを押して終了する

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
【固定ページ】⇒【固定ページ一覧】を選択する

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
【トップページ―フロントページ】と表示されていれば完了です。

 

これでトップページを作るための下準備が終わりました。次はスライドショーやカードのレイアウトの仕方を説明します。

 

カテゴリ一覧スライドショー(新着記事)

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
eisukeブログのトップページにある赤枠のスライドショーの作り方を説明します。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
【固定ページ】⇒【固定ページ一覧】⇒【トップページ】を開きます。

「新着記事」と「おすすめ記事」と入力して、【見出し3】で設定します。

まずは新着記事のスライドショーを作成します。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
【タグ】⇒【記事一覧】⇒【カテゴリ一覧】を選択する。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
次のようなショートコードが表示されます。そのショートコードの意味は以下の通りです。

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法

 

コードの意味

  1. st-catgroup cat="カテゴリID指定"
  2. page="表示数"
  3. order="desc"
  4. orderby="id"
  5. child="on"
  6. slide="スライドショーのon,off"
  7. slides_to_show="列数の指定"
  8. slide_date=""
  9. slide_more="ReadMore"
  10. slide_center="off"

ちなみに僕の設定は以下の通り。

  • カテゴリID指定⇒0
  • 表示数⇒5
  • スライドショー⇒on
  • 列数の指定⇒3,3,2
  • readmore⇒続きを読む
  • その他は初期設定のまま

ポイント

カテゴリID指定を「0」にすることでカテゴリ問わずに新着記事をスライドショーに表示できます。

特定のカテゴリだけを表示させたい場合は以下の手順で「カテゴリID」を選んでください。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
【投稿】⇒【カテゴリー】を選択する。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
赤枠の数字がカテゴリIDとなります。

スライドショーで表示したいIDを先程の新着記事のショートコードに入れておけば大丈夫です。

注意ポイント

記事IDと混同しないようにしましょう。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
次はおすすめ記事の赤枠内のバナー風ボックスの設定の仕方を説明してゆきます。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
【タグ】⇒【ボックスデザイン】⇒【バナー風ボックス】⇒【基本】を選択します。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
以下のようなショートコードが現れます。

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法

 

 

変更は2か所

  1. title="タイトル
  2. backgroud image="画像URL"

タイトルはお好きなものをショートコードの中に直接入力しましょう。

ちなみに画像URLは背景画像として表示されます。無くても問題はありませんが、見栄え的には入れたほうがいいでしょう。

次は画像URLの検索方法と挿入方法を説明してゆきます。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法

【メディアを追加】を選択する。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法

  1. バナー風ボックスの背景画像に使いたいメディアを選択する。
  2. 右側の【URLをコピー】クリックする。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
【ビジュアル画面】を【テキスト画面】に変更しておく。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
ショートコード内の

backgroud image="画像URL"に

先程コピーしたURLを直接貼り付けます。

注意ポイント

” ”の間にURLを入れること。” ”を消してしまうとうまく表示されません。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法

次は赤枠内の【カード】を設定してゆきましょう。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
【カード】を選択します。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
次のようなショートコードが表示されます。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法

 

 

変更する場所は、

id="記事ID

だけです。

記事IDの調べ方は以下の通りです。

注意ポイント

カテゴリIDと混同しないようにしましょう。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
【投稿】⇒【投稿一覧】を選択します。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
この画面のID欄にある数字が記事IDとなります。

この記事IDを先程のショートコードの

id="記事ID

に直接入力すれば反映されます。

次は今作ったカードをPCから閲覧した場合、記事の抜粋を表示させない設定を行います。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
【AFFINGER5管理】⇒【AFFINGER5管理】を選択します。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
【デザイン】⇒【抜粋設定】を選択します。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
赤枠のチェックボックスにチェックを入れてください。

画面内にあるSAVEもしくは保存を忘れずにクリックしましょう。

 

列レイアウト+カテゴリ設定(おすすめ記事)

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法

パソコンから見たレイアウトを上記のように2列で並べたいときの方法を説明します。

※スマホでは1列で表示されます。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法【タグ】⇒【レイアウト 】⇒【PCとTab】⇒【左右50%】を選択します。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法

上記のような黄色と青の枠が挿入されます。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
【バナー風ボックス】と【カード】のショートコードを黄色枠の【このテキストは最後に消してください(50%)】の下に入れます。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
こんな感じになればOKです。

もう一つの【バナー風ボックス】と【カード】のショートコードも青色枠の【このテキストは最後に消してください(50%)】の下に入れます。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
最後に赤枠内の【このテキストは最後に消してください(50%)】を削除します。

最後に【更新】ボタンを押してください。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
このように表示されれば大丈夫です。

 

アフィンガーのカスタマイズ【フォント編】

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法

 

2つ目はフォントのカスタマイズについて説明します。

  1. フォントの種類
  2. フォントの大きさ
  3. フォントの行間

の3つです。

 

フォントの種類

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
フォントの設定を行ってゆきます。

【AFFINGER5管理】⇒【AFFINGER5管理】を選択します。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
【デザイン】⇒【フォントの種類】を選択します。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
〇全体―その他(優先)

〇記事タイトル・見出し―その他(優先)

共に空欄に以下のコードを入れておけばOKです。

font-family:Noto, "Hiragino Sans", Helvetica, Arial, sans-serif;

フォントサイズ

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
次はフォントサイズの設定です。

【AFFINGER5管理】⇒【AFFINGER5管理】⇒【デザイン】⇒【フォントサイズ】を選択します。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法

スマートフォンのサイズ

  1. 基本(Pタグ)  16
  2. 記事のタイトル      18
  3. H2タグ                  18
  4. H3タグ                  18

PCのサイズ

  1. 基本(Pタグ)  17
  2. 記事のタイトル      25
  3. H2タグ                  25
  4. H3タグ                  20

 

文章の行間

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法

スマートフォンの行間

  1. 基本(Pタグ)  30
  2. 記事のタイトル      36
  3. H2タグ                  30
  4. H3タグ                  36

PCの行間

  1. 基本(Pタグ)  34
  2. 記事のタイトル      50
  3. H2タグ                  40
  4. H3タグ                  40

最後に【SAVE】で保存しましょう。

 

見出し(H2, H3)について

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
【外観】⇒‘【カスタマイズ】を選択します。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
【各テキストとhタグ(見出し)】⇒

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法

【H2タグ】を選択します。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法

 

 

H2タグの変更

  1. 文字色:#333333
  2. 背景色:#f7f7f7
  3. 背景色(グラデーション上部):#f7f7f7
  4. ボーダー色:#4865b2
  5. ボーダー色サブ:#4865b2

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
赤枠内を変更します。

  • 左ラインデザインに変更
  • 左の余白 40
  • 上下の余白 20

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
【H3タグ】を選択します。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法

H2タグの変更

  1. 文字色:#333333
  2. 背景色:#f7f7f7
  3. 背景色(グラデーション上部):#f7f7f7
  4. ボーダー色:#febe31
  5. ボーダー色サブ:#febe31

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法

赤枠内を変更します。

  • 左ラインデザインに変更
  • テキストを中央寄せ
  • 左の余白 20
  • 上下の余白 0

 

アフィンガーのカスタマイズ【サイドバー編】

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法

 

最後はサイドバーの設定を説明します。

サイドバー項目

今回サイドバーに入れるのは

  1. 人気記事一覧
  2. 検索
  3. アーカイブ
  4. カテゴリ

の4項目です。

 

人気記事一覧

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
プラグインでWordpress Popular Posts をダウンロードして有効化します。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
【サイドバートップ】【利用できるウェジット】から『Wordpress Popular Posts 人気記事一覧』を移動させます。

 

このWordPress Popular Postsのいいところは、PV数の多い順番にサイドバーの記事を並べ替えてくれる機能があるところです。つまり人気順に自動的に並べ替えてくれるので手間暇が一切かかりません。

 

検索・アーカイブ・カテゴリー

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
【外観】⇒【ウェジット】を選択します。

 

【初心者必見】アフィンガーのeisukeブログ風カスタマイズ法
【サイドバーウェジット】【利用できるウェジット】から『検索』『アーカイブ』『カテゴリー』を移動させます。

 

まとめ

 

今回はアフィンガーのeisukeブログ風にカスタマイズする方法について説明してきました。

 

僕はブログサイトの細部にまでこだわることで、ブログ運営が楽しくなってきて読者愛されるブログに成長してゆくと思っています。

 

皆さんも、いろいろアフィンガーをいじってみて、自分に合ったブログサイトを作り上げてゆきましょう。

 

また、ワードプレスのテーマに興味がある方はこちらをご覧ください。厳選の無料・有料テーマについて熱く語ってます。

© 2020 eisukeブログ