AFFINGER

【AFFINGER】トップページを固定ページでカスタマイズする方法

 

AFFFINGERを使っているブログへのアクセスも増えてきたから、そろそろトップページを編集したいなぁ。スライド記事とか2列の記事とかどうやってやるんだろう?

 

こんな疑問に答えます。

 

本記事の内容

・【AFFINGER】固定ページを作成する

・【AFFINGER】スライド記事を設置する

・【AFFINGER】2列で記事を表示する

・【AFFINGER】当ブログの設定

・【AFFINGER】トップページを固定ページでカスタマイズする方法:まとめ

 

当ブログを例に、カスタマイズ例を画像付きで解説していきます。

 

この記事を読むことで、これからAFFINGERを編集する際のトップページ作りの役にたつはずです。

 

この記事は5分で読めるのでスライドページや2列記事を取り入れたい方は参考にしてみてください!

\ AFFINGER公式サイト/

AFFINGER5の詳細を見る

【AFFINGER】固定ページを作成する

 

デフォルトでは新着記事の一覧になってますが、固定ページを編集することでサイトの表示を変えることができます。

 

まずは、トップページの固定ページを作成します。

 

サイドバーから【固定ページ】▶︎【新規作成】で新しくページを作りましょう。

 

タイトルは自分でわかるものにしてあればOKです!

 

【AFFINGER】スライド記事を設置する

 

スライド記事は、記事IDの指定もできますし新着記事の表示もできます。

 

当ブログでは一番上に、新着記事のスライドページとして表示しています。

 

スライド記事の表示手順

  1. タグ
  2. 記事一覧 / カード
  3. カテゴリー一覧(スライドショー)

 

上記の手順で進むと以下が表示されます。

 

設定詳細

st-catgroup cat:カテゴリID
page:ページ数
order:新しい記事から表示[desc] 古い記事から表示[asc]
orderby:並び方 [id、date、modified、ran]から選択
child:子カテゴリID
slide:スライドのオンオフ
slides_to_show:デバイス毎の表示枚数
slide_date:日付のオンオフ
slide_more:続きを読む部分の表示
slide_center:モバイル端末の前後の記事の一部表示
fullsize_type:画像のみ表示[card] 画像とテキスト表示[text]

 

なお、当ブログの設定は以下の画像のとおり。

サイトのイメージに合わせてスライド記事をカスタマイズしてみましょう!

 

【AFFINGER】2列で記事を表示する

 

2列記事は、サイトをみやすくするために有効な表示方法ですね。

 

当ブログではPC、タブレットは2列の設定でモバイルは1列表示です。

 

2列記事の表示手順

  1. タグ
  2. レイアウト
  3. PCとTab
  4. 左右50%

 

上記の手順で進むと以下が表示されます。

 

 

つぎに、左右にそれぞれ【カード】を配置します。

 

この状態のプレビューは、新着記事がふたつ並んだ形となっています。

 

【投稿】▶︎【投稿一覧】で記事のIDが確認できるので、【id"ここ"】にIDを入力すれば記事を指定することも可能です。

 

当ブログの2列表示の設定は、以下です。

 

ごちゃごちゃして難しそうですが、やってみると意外とかんたんですよ!

 

【AFFINGER】当ブログの設定

 

当ブログの設定で、参考になる箇所があれば使ってみてください。

 

当ブログの設定

  • サムネイル画像を大きく
  • 抜粋の非表示
  • CSSの追加

 

順番に解説します。

 

サムネイル画像を大きく

当ブログはサムネイル画像を、できるかぎり大きく表示をしています。

 

サムネイル画像設定への移動手順

  1. AFFINGER5管理
  2. デザイン
  3. サムネイル画像設定

 

上記画像の箇所にチェックを入れて『save』します。

 

抜粋の非表示

抜粋がなにかというと、冒頭文のことですね。

 

この記事の場合だと...

 

この記事の抜粋

AFFFINGERを使っているブログへのアクセスも増えてきたから、そろそろトップページを編集したいなぁ。スライド記事とか2列の記事とかどうやってやるんだろう?

この部分を表示させるかどうかの設定です。

 

抜粋設定への移動手順

  1. AFFINGER5管理
  2. デザイン
  3. 抜粋設定

 

上記画像の箇所にチェックを入れて『save』します。

 

CSSの追加

CSSの追加はお好みでという感じですが、当ブログの追加CSSを参考までに載せておきます。

 

追加CSSへの移動手順

  1. 外観
  2. カスタマイズ
  3. 追加CSS

 

記事の枠を消去

.st-cardbox {
padding: 0px;
border: 0px ;
margin-bottom: 50px;
box-shadow: none ;
width: 100%;
}

サムネイル画像周りのボーダー消去

.kanren dt img {
border: solid 0px #f9f9f9
}

タイトルカラーとセンター表示

a.st-cardlink, a .st-cardbox h5, a .st-cardbox p {
text-decoration: none;
color: #7b7b7b;
text-align: center;
background-color: #f9f9f9;
}

タイトルのフォントサイズ

.post dd h5.st-cardbox-t {
font-size: 14px;
}

 

【AFFINGER】トップページを固定ページでカスタマイズする方法:まとめ

 

AFFINGERで、トップページを使ってカスタマイズする方法を解説しました。

 

今回の編集の主役の「スライド記事」と、2列表示の「レイアウト」はどちらも『タグ▼』から表示できます。

 

ひとつの画像サイズが小さくなったので、読み込み速度も改善につながったような気がしてます!

 

今回は以上です。

 

最後まで読んでくれてありがとうございます!

\ AFFINGER公式サイト/

AFFINGER5の詳細を見る

-AFFINGER