BLOGS

【後編】a-blog cmsのトライアル「ablogcms.io」を試してみた

BLOGS

このエントリーは「a-blog cms Advent Calendar 2023」の14日目の記事で、
【後編】a-blog cmsのトライアル「ablogcms.io」を試してみたの続編です。

今回は、SFTPの接続〜少しだけテーマのカスタマイズに挑戦します!


ablogcms.ioからのメールを確認する


テスト環境構築フォームに入力したメールアドレスに、ablogcms.ioからのメールが届いているはずなので確認します。すると、SFTP情報というものが記載されています。


SFTPって何?

SFTPはFTPとどう違うのでしょうか?
SFTPもFTPもファイルを送受信する仕組みですが、SFTPは情報を暗号化して送受信するので、FTPより安全みたいです。


SFTPソフトを用意する


初心者の私はFileZilla(ファイルジラ)を使うことにしました。

FileZillaの見方

左側が自分のPC、右側がサーバーのエリアです。


サーバーに繋いでみる

では早速自分のPCとサーバーを繋いでみましょう。


  1. 左上のアイコンをクリックしてサイトマネージャーを開く
  2. 「新しいサイト」ボタンをクリックして、適当に名前をつける
  3. プロトコルをSFTPにして、メールに記載してあるSFTP情報をそれぞれの箇所に入力する
  4. 最後に「接続」ボタンを押して完了

スライダーを少しカスタムしてみる


サーバーから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に上書きします。

画像を差し替える

スライダー画像がサンプルのままだと味気ないので、画像を差し替えます。

スライダーの画像の上にカーソルをおくと右上に「モジュール」ボタンが表示されるのでクリックし、画像を差し替えます。
するとこんな画面になるので…


  1. すでに入っている画像の上にカーソルを置くと、バツボタンが表示されるのでクリック
  2. アップロードボタンクリックで画像をアップロード
  3. 「アップロードして挿入」ボタンクリック
  4. 最後に右上の保存を押して、スライダーの編集は完了です!

お知らせのモジュールをカスタムしてみる


今は、ラベルに「お知らせ」が表示されていますが、これを子カテゴリーの名前に変更したいと思います。

お知らせに子カテゴリーを作成する

管理画面のログイン情報はablogcms.ioからのメールに記載されているので、ログインしてみましょう。


ログインできたら、スライダーの上に設置してある、「管理ページ」ボタンをクリックします。


左側のメニュー「カテゴリー」をクリックし、緑色の「新規カテゴリー作成」ボタンをクリックします。


カテゴリー名・コードネームを適当に書いて、親カテゴリーは「お知らせ」を選択します。
最後に「作成」ボタンをクリックします。


次に、既にあるお知らせのエントリーのカテゴリーを「お知らせ」から「お知らせ子カテゴリー」に変更して保存します。
サイドメニューのエントリー>エントリー一覧>該当するエントリーを「編集」ボタンでエントリー編集画面に行くことができます。


モジュール設定を変更する


管理画面左側のメニュー「モジュールID」をクリックし、トップページお知らせ用モジュールの「設定」ボタンをクリックします。


条件設定のタブを開いて、ページ中程「引数」という項目にカテゴリーIDに表示したい子カテゴリーを設定して保存します。


ページを見てみると、ちゃんと子カテゴリーの名前が表示されていました。


でもここで1つ疑問が…
子カテゴリーが増えるたびに、モジュールの条件設定の引数を触らなければいけないのか?

周りに助けを求めると
引数は「お知らせ」のままで、階層のカテゴリーを「下階層のカテゴリーのみを対象とする」にすればいい
とのことでした。
ということでやってみます。


  1. 引数>カテゴリーは「お知らせ」のまま
  2. 階層>カテゴリーは下階層のカテゴリーのみを対象とする」にする
  3. 右上の「保存」ボタンを押して完了

これで子カテゴリーが増えても大丈夫なようになりました!

ロゴを差し替える

スライダーの画像同様、ロゴの上にマウスカーソルを合わせると編集ボタンが表示されるのでクリックし、編集画面から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に上書きします。

画像の差し替えとスタイルの調整をする

とっても長くなってしまったので、画像の差し替えとスタイルの調整については割愛しますが、仕上がりはこんな感じになりました。


まとめ

一番の関所はお知らせの子カテゴリーの出し方で、モジュールの条件設定>階層のカテゴリーを「下階層のカテゴリーのみを対象とする」…。
これには気づけませんでした。

慣れていないので逐一サーバーにアップして動きを確かめたのですが、慣れている人ならもっとスマートにできると思います。