affinger5

【affinger5】おしゃれ&見やすさ重視 初心者向けのカスタマイズ

eyecatch

当サイトの運営はエックスサーバー で行っております。


悩んでる人
affinger5を買ったのはいいけど、カスタマイズの仕方がわからないよー
最初は何が何だか分からないよね、、

今回は初心者向けの簡単なカスタムの例を紹介するよ!!

わたし

記事通りに進めると完成するデザイン

まずは、記事通りカスタマイズしていくと

どんなサイトになるのかを紹介します。

カスタム完成形1

カスタム完成形2

カスタム完成形3

大枠としてですが、

上記のようなデザインになります。

上から

  1. スマホミドルメニュー(カテゴリ)
  2. 新着記事5つ(スライドショー)
  3. おすすめ記事
  4. 過去の記事一覧

 


それでは順番に紹介していきます。

また、今回のデザインは

"Tsuzuki Blog"さんの記事を参考にしています。

ここに無いカスタマイズをしたい方は、

是非参考にしてみて下さい。

スマホミドルメニュー(カテゴリ)

ミドルメニュー完成形

まずはサイトロゴの下にある

カード型のヘッダーリンクです。

ダッシュボード→AFFINGER5 管理→

おすすめ記事一覧→おすすめヘッダーカード

と進みます。

1. 画像URL

ダッシュボード→メディア

→画像を選択→リンクをコピー

で背景にしたい画像を選びます。

2. テキスト

表示したい文字を書きます。

画像ではアイコンを入れるために

複雑になっていますが、

日本語で問題ありません。

3. リンク先URL

ここには飛んでほしいURLを記入します。

カテゴリの場合は

ダッシュボード→投稿→

カテゴリ→(ホバーして)表示

でURLを得ることができます。

また、カテゴリに飛ばす必要は無いため

人気の記事をリンクとして貼るのもOKです。

4. デザイン

背景をぼかすor暗くするを選択できます。

「スマホ閲覧時高さを倍にする」

は、四角の高さが倍になります。

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

新着記事スライド完成形

続いては、新しく書いた記事が

スライドショーで流れるカスタマイズです。

ホームページを固定ページでつくる

これを行うために、まずはホームページを

固定ページで作っていきます。

すぐに終わりますので、臆せずいきましょう。

ダッシュボード→固定ページ→

新規作成と進みます。

固定ページ作成

タイトルは「トップページ」とし、

画像のように新着記事と書いた後、

タグ→記事一覧→カテゴリー一覧

と進みます。

st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off"

それぞれの意味ですが、

重要なところだけ抜粋します。

  1. cat="" →新着記事を出したいカテゴリー(0の場合は すべて、複数ある場合は , で区切ってカテゴリIDを記入)
  2. page="" →いくつの記事をスライドさせるか
  3. child="" →子カテゴリーも表示するか
  4. slide="" → スライドショー(自動)するか
  5. slide_to_show="" → 大画面,中画面,少画面で横に何記事表示するか(スマホは少画面)
  6. slide_more="" → Readmoreの表示を変更

自分の好みのデザインに仕上げてみて下さい!

おすすめ記事の作成

おすすめ記事完成形

続いては、おすすめ記事のつくり方です。

バナー部分と記事部分に分けて説明します。

先程作った固定ページに続けて書いていきます。

おすすめ記事完成

(画像は最終的なかたち)

 バナー部分を作成

1. レイアウトを左右分割に

バナー作成1

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

と選択するとレイアウトが2つに分かれます。

(スマホでは縦に1列表示になる。)

バナー作成2

2. バナー風ボックスの追加

バナー作成3

タグ→ボックスデザイン→バナー風ボックス

 

→基本

で以下のような文字列が出てくる。

st-flexbox url="" rel="nofollow" target="" fontawesome="" title="タイトル" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="" blur="on" left="" margin_bottom="0"

(表示上、"[]"を抜いています。)

  1. st-flexbox url="" 飛ばしたいリンク先
  2. title="" 表示したいタイトルを記入
  3. height="" ボックスの高さを設定
  4. fontsize="" 文字の大きさを設定

主には上記の点を変更します。

私の場合は、

height="50"

fontsize="150"としています。

before

おすすめbefore

after(少しスッキリしました)

 記事部分を作成

st-card id="idを記入" label="" bgcolor="" name="" color="" fontawesome="" readmore="off"

/st-card

記事部分に関しては、

上記のショートコードを使います。

(表示上”[]”を抜いています。)

記事idを記入することで、

その記事を表示させることができます。

これでカスタマイズはほぼ終了です!

(私の場合、記事部分の周りの余白が

気になったため少し狭くしたことと、

文字のサイズを小さめにしています。

別の記事で紹介しようと思います。)

ホームページの設定

カスタマイズお疲れさまでした!!

あとは、作った固定ページを

ホームに設定すれば終わりです。

ダッシュボード → 外観 →

カスタマイズ → ホームページ設定

からホームページの表示を固定ページに、

ホームページをトップページに変更します。

 

続いて、

AFFINGER5 管理→トップページ→

記事一覧→固定ページ指定のフロントにも新着記事一覧の表示

にチェックを入れることで、

過去記事も表示されるようになります。

まとめ

以上、affinger5のレイアウトのカスタマイズを紹介いたしました。

細かいレイアウトの変更に関しては、

別の記事で紹介しようと思います。

ぜひ、覗きにきて下さい!!


関連記事

AFFINGER5_beginner_eyecatch

affinger5

【図解】AFFINGER5 初心者向け 管理画面を徹底解説

AFFINGER5を使い始めたばかりの初心者の方に向けて、管理画面の概要をまとめました。
これを見れば最初に何を設定するべきなのか、なにか変えたいときにどこを設定すればよいのか分かります!
ぜひブックマークして、その都度参考にしてみて下さい!

beginner_fontsize

affinger5

【affinger5】ブログカード・新着記事のフォントサイズ変更

当サイトの運営はエックスサーバー で行っております。 悩んでる人ブログカードとか新着記事のフォントサイズってどう変えるの ...

よく読まれている記事

プロジェクターアイキャッチ 1

10万円で手が届く、高画質・高機能のプロジェクターの選び方、おすすめの商品を紹介しています。
解像度、コントラスト、明るさ、機能性、値段などからあなたに最適のプロジェクターを紹介します!
最近増えてきた、モバイル用プロジェクターや変わり種も!

motorscooter_eyechatch 2

当サイトの運営はエックスサーバー で行っております。 悩んでる人日常の足になるような電動バイクってどんな種類がある? 通 ...

vezel_eyecatch 3

ツイートのリンクを目立たせる機能”Twitterカード”について丁寧に解説しています!
affinger5のテーマを使っている方向けの記事となっています。
ブログ初心者の方(わたし)がつまずくところだと思います。参考にしてください。

eyecatch 4

当サイトの運営はエックスサーバー で行っております。 悩んでる人affinger5を買ったのはいいけど、カスタマイズの仕 ...

-affinger5
-, ,

Copyright© りくぶろぐ ~ブログ×ガジェット×モビリティ~ , 2020 All Rights Reserved Powered by AFFINGER5.