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

 

 

 

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

 

 

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

 

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

 

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

 

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

 

 

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

 

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

 

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

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

 

固定ページのタイトルを【トップページ】と入力

 

【外観】⇒【カスタマイズ】

 

【ホームページ設定】⇒

 

【ホームページの表示】⇒【固定ページ】にチェックを入れる

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

 

【公開】ボタンをクリックして設定を保存する

 

×ボタンを押して終了する

 

【固定ページ】⇒【固定ページ一覧】を選択する

 

【トップページ―フロントページ】と表示されていれば完了です。

 

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

 

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

eisukeブログのトップページにある赤枠のスライドショーの作り方を説明します。

 

【固定ページ】⇒【固定ページ一覧】⇒【トップページ】を開きます。

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

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

 

【タグ】⇒【記事一覧】⇒【カテゴリ一覧】を選択する。

 

次のようなショートコードが表示されます。そのショートコードの意味は以下の通りです。

 

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

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

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

 

【投稿】⇒【カテゴリー】を選択する。

 

赤枠の数字がカテゴリIDとなります。

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

 

次はおすすめ記事の赤枠内のバナー風ボックスの設定の仕方を説明してゆきます。

 

【タグ】⇒【ボックスデザイン】⇒【バナー風ボックス】⇒【基本】を選択します。

 

以下のようなショートコードが現れます。

 

 

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

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

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

 

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

 

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

 

【ビジュアル画面】を【テキスト画面】に変更しておく。

 

ショートコード内の

backgroud image="画像URL"に

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

 

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

 

【カード】を選択します。

 

次のようなショートコードが表示されます。

 

 

 

変更する場所は、

id="記事ID”

だけです。

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

 

【投稿】⇒【投稿一覧】を選択します。

 

この画面のID欄にある数字が記事IDとなります。

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

id="記事ID”

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

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

 

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

 

【デザイン】⇒【抜粋設定】を選択します。

 

赤枠のチェックボックスにチェックを入れてください。

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

 

列レイアウト＋カテゴリ設定（おすすめ記事）

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

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

 

【タグ】⇒【レイアウト 】⇒【PCとTab】⇒【左右50％】を選択します。

 

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

 

【バナー風ボックス】と【カード】のショートコードを黄色枠の【このテキストは最後に消してください（50％）】の下に入れます。

 

こんな感じになればOKです。

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

 

最後に赤枠内の【このテキストは最後に消してください（50％）】を削除します。

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

 

このように表示されれば大丈夫です。

 

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

 

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

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

の３つです。

 

フォントの種類

フォントの設定を行ってゆきます。

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

 

【デザイン】⇒【フォントの種類】を選択します。

 

〇全体―その他（優先）

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

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

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

フォントサイズ

次はフォントサイズの設定です。

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

 

 

文章の行間

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

 

見出し（H2, H3）について

【外観】⇒‘【カスタマイズ】を選択します。

 

【各テキストとｈタグ（見出し）】⇒

 

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

 

 

 

 

赤枠内を変更します。

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

 

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

 

 

赤枠内を変更します。

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

 

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

 

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

の４項目です。

 

人気記事一覧

プラグインでWordpress Popular Posts をダウンロードして有効化します。

 

【サイドバートップ】に【利用できるウェジット】から『Wordpress Popular Posts　人気記事一覧』を移動させます。

 

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

 

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

【外観】⇒【ウェジット】を選択します。

 

【サイドバーウェジット】に【利用できるウェジット】から『検索』『アーカイブ』『カテゴリー』を移動させます。

 

まとめ

 

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

 

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

 

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

 

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