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とサーバーを繋いでみましょう。
- 左上のアイコンをクリックしてサイトマネージャーを開く
- 「新しいサイト」ボタンをクリックして、適当に名前をつける
- プロトコルをSFTPにして、メールに記載してあるSFTP情報をそれぞれの箇所に入力する
- 最後に「接続」ボタンを押して完了
スライダーを少しカスタムしてみる
サーバーから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に上書きします。
画像の差し替えとスタイルの調整をする
とっても長くなってしまったので、画像の差し替えとスタイルの調整については割愛しますが、仕上がりはこんな感じになりました。
まとめ
一番の関所はお知らせの子カテゴリーの出し方で、モジュールの条件設定＞階層のカテゴリーを「下階層のカテゴリーのみを対象とする」…。
これには気づけませんでした。
慣れていないので逐一サーバーにアップして動きを確かめたのですが、慣れている人ならもっとスマートにできると思います。