webツール

Affinger6のトップページをおしゃれに見やすくカスタマイズした

こんにちは!今日は、私のホームページをどうやってカスタムしているか、備忘録も兼ねて記録しておこうと思います。

今までこういうのあんまり見せてこなかったんですが、絶対、ためになる!!!と思って。

個人で活躍して発信したい生徒ちゃんもどんどん増えてきて、是非自分のサイトを作る楽しさを味わって欲しいなと思っておりますので、これからそちらに関しての記事も書いていこうと思います!一応、元WEBデザイナーなので😂(めちゃ下手くそで向いてなかったけどw)

 

自分の備忘録も兼ねて、まとめます!

ちなみに私が使っているテンプレートはaffinger6です。

 

こちらからAFFINGER6のテンプレ購入できます😼

 

海外のおしゃれなテンプレとか色々買ってみたんですが結局これが一番使いやすいです!なぜなら、特にCSSをいじらなくても結構初期からついてる変更機能が多い!めちゃ使いやすいのでおすすめ。

てことで、いきましょう〜!

ショートコードを文字列として表示させる方法

ショートコードを文字列として表示させるには、ショートコードの[ ]を2重にすれば良い!

[st-mybutton-mini url="#" title="m o r e ❤︎" rel="" fontawesome="" target="" color="#fff" bgcolor="#ddd" bgcolor_top="" bordercolor="" borderwidth="" borderradius="5" fontsize="" fontweight="" fontawesome_after="fa-angle-right" shadow="#ddd" ref="" beacon=""]
[/st-cmemo]

 

ホームページの中に、ブログ一覧を表示させる

これ、いろんなサイトを見てどこも「phpコードを書かなきゃ全カテゴリーの記事一覧ページは作れない」みたいなの書いてたんで絶望してたんですが、めっちゃ簡単にできました。

こちらのサイトを参考にしました。

普通のデフォルトの状態だと、トップページがいきなりブログになっているので、きちんとホームページ化するためにフロントページが必要で。

設定>表示設定画面からこの設定にしました。

まず「Blog」という固定ページを作り、投稿ページを、「Blog」に設定するだけ。それだけですぐできた。。今までの苦労は何だったの!🥺!?!??!

これにより、全カテゴリーの記事が一覧になったページができました。このページ必須すぎる😭

 

また、フロントページを設定すると、固定ページの名前が出力されてしまうんですが、それを消すために<!--mikaroland.com -->という書き方をしました。

トップページにカテゴリーごとの最新記事を表示+もっと見るボタンの追加!

トップページをもっと見やすくするために、このような形に変更しました。

 

おすすめのカテゴリーが表示され、そのカテゴリーについての記事一覧にもすぐに飛べる!という導線を作ってみました。

【AFFINGER5】トップページにカテゴリごとの最新記事を表示するカスタマイズ

↑参考にしたのはこちらのサイトです。

私が使用したコードはこちら。

[st-catgroup cat="7" page="6" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,1" slide_date="" slide_more="" slide_center="on" fullsize_type=""]

[st-mybutton-mini url="https://mikaroland.com/category/beauty/" title="m o r e ❤︎" rel="" fontawesome="" target="" color="#fff" bgcolor="#ddd" bgcolor_top="" bordercolor="" borderwidth="" borderradius="5" fontsize="" fontweight="" fontawesome_after="fa-angle-right" shadow="#ddd" ref="" beacon=""]

slide_centerはonにしとくべき。

slide_moreは不要。(それぞれにmoreがつくとくどい)

pageでいくつ記事を表示するか、、、みたいなとこですね。

buttonのコードの部分では、好きなカテゴリーのURL貼れば良いだけです。

 

[st-catgroup cat="表示したいカテゴリID" page="表示したいページ数" order="降順、昇順の指定" orderby="並び方法" child="子カテゴリーの表示の有無" slide="スライドショー化の有無" slides_to_show="スライドショー表示時の列数" slide_date="日付表示の有無" slide_more="続きを読む"]

 

というところでしょうか✨

今回初めて(正確に言えば、webデザイナーをしていた4年ぶりに)webに関しての記事を書いてみました!自分の備忘録にもなるし、今後もこうやって色々投稿していきたいと思います。

-webツール
-, , ,

© 2021 MIKA ROLAND Powered by AFFINGER5