このエントリーは「a-blog cms Advent Calendar 2023」の14日目の記事で、
【後編】a-blog cmsのトライアル「ablogcms.io」を試してみたの続編です。
今回は、SFTPの接続〜少しだけテーマのカスタマイズに挑戦します！
テスト環境構築フォームに入力したメールアドレスに、ablogcms.ioからのメールが届いているはずなので確認します。すると、SFTP情報というものが記載されています。
SFTPはFTPとどう違うのでしょうか？
SFTPもFTPもファイルを送受信する仕組みですが、SFTPは情報を暗号化して送受信するので、FTPより安全みたいです。
初心者の私はFileZilla（ファイルジラ）を使うことにしました。
FileZillaの見方
左側が自分のPC、右側がサーバーのエリアです。
サーバーに繋いでみる
では早速自分のPCとサーバーを繋いでみましょう。
サーバーからbundle.cssをダウンロードして、エディターで開けます。
エディターはVisual Studio Code、通称VS Codeにしました。
丸角にしたいので、クラス名slick-slide imgにborder-radius: 24px;を追記して保存。
ローカルのbundle.cssをドラッグして、サーバーのbundle.cssに上書きします。
これでスライダーの画像が丸角になりました。
丸角だと、横にスライドする動きとマッチしていないので、動きをフェードに変更してみます。
サーバーの/themes/beginner/jsの中のindex.jsをダウンロードして、VS Codeで開きます。
「// トップページのスライダーの設定」のところにfade: true,を追加し保存し、このindex.jsをドラッグして、サーバーにあるindex.jsに上書きします。
スライダー画像がサンプルのままだと味気ないので、画像を差し替えます。
スライダーの画像の上にカーソルをおくと右上に「モジュール」ボタンが表示されるのでクリックし、画像を差し替えます。
するとこんな画面になるので…
今は、ラベルに「お知らせ」が表示されていますが、これを子カテゴリーの名前に変更したいと思います。
管理画面のログイン情報はablogcms.ioからのメールに記載されているので、ログインしてみましょう。
ログインできたら、スライダーの上に設置してある、「管理ページ」ボタンをクリックします。
左側のメニュー「カテゴリー」をクリックし、緑色の「新規カテゴリー作成」ボタンをクリックします。
カテゴリー名・コードネームを適当に書いて、親カテゴリーは「お知らせ」を選択します。
最後に「作成」ボタンをクリックします。
次に、既にあるお知らせのエントリーのカテゴリーを「お知らせ」から「お知らせ子カテゴリー」に変更して保存します。
サイドメニューのエントリー＞エントリー一覧＞該当するエントリーを「編集」ボタンでエントリー編集画面に行くことができます。
管理画面左側のメニュー「モジュールID」をクリックし、トップページお知らせ用モジュールの「設定」ボタンをクリックします。
条件設定のタブを開いて、ページ中程「引数」という項目にカテゴリーIDに表示したい子カテゴリーを設定して保存します。
ページを見てみると、ちゃんと子カテゴリーの名前が表示されていました。
でもここで1つ疑問が…
子カテゴリーが増えるたびに、モジュールの条件設定の引数を触らなければいけないのか？
周りに助けを求めると
引数は「お知らせ」のままで、階層のカテゴリーを「下階層のカテゴリーのみを対象とする」にすればいい
とのことでした。
ということでやってみます。
これで子カテゴリーが増えても大丈夫なようになりました！
スライダーの画像同様、ロゴの上にマウスカーソルを合わせると編集ボタンが表示されるのでクリックし、編集画面からSVGのロゴに差し替えました。
あれ？リンク切れしてる？？
SVGに対応していないようです。
サーバーの/themes/beginner/admin/blogの中のfield-bade.htmlをダウンロードして、VS Codeで見てみます。
date-typeがimageになっているのでここをallにして保存し、サーバーのfield-bade.htmlに上書きします。
SVGが表示できました！
でもすんごい小さい！！
ので、bundle.cssを編集します。
クラスsite-logoの幅をどのデバイスでも共通のサイズ120pxにします。
今回はロゴの右にテキストは置かないので、余分なマージンもコメントアウトで消しました。
また、スマホの時もセンタリングにしたいので、.site-nameにtext-align: center;を追加しておきます。
これを保存して、サーバーのbundle.cssに上書きします。
これでいい感じのサイズになりました。
今は正方形にトリミングされている画像の比率を変更してみます。
サーバーの/themes/beginner/include/entryの中にあるのsummary-top.htmlをダウンロードして、VS codeで開きます。
[resizeImg(120,120)]でトリミングサイズを指定しているみたいです。
16:9の比率にしたいので、ここを[resizeImg(213,120)]に変更してみます。widthも同じように213に変更します。ついでにnoImageのサイズも変更しておきましょう。
これで保存して、サーバーのsummary-top.htmlに上書きします。
とっても長くなってしまったので、画像の差し替えとスタイルの調整については割愛しますが、仕上がりはこんな感じになりました。
一番の関所はお知らせの子カテゴリーの出し方で、モジュールの条件設定＞階層のカテゴリーを「下階層のカテゴリーのみを対象とする」…。
これには気づけませんでした。
慣れていないので逐一サーバーにアップして動きを確かめたのですが、慣れている人ならもっとスマートにできると思います。
