エントリー編集画面をより使いやすく設定する
このハンズオンの目的 Ver. 2.8 からエントリー編集画面に関するオプションがいくつか追加されています。特にカスタマイズが必要なものではありませんが、新しく追加されたオプション項目をここで確認して、サイト運営者がより使いやすいエントリー編集画面を提供できるようにしましょう。 編集ページの統一 現状a-blog ...
ハンズオン一覧
新機能サブカテゴリーを使ってみよう
この機能は、Ver. 2.10.0 のアルファ版機能になります。製品版では仕様が変わる可能性があります。みなさんのご意見をぜひお聞かせください。 機能紹介 a-blog cms はこれまでエントリーにカテゴリーは１つのみしか設定できない仕様になっていました。これによりシンプルな構造を維持でき、実際のURLと変わらない構造に...
@extendsを使った管理画面のカスタマイズ
Ver.2.9より、@extends機能がさらに拡張され、@sectionの入れ子ができるようになりました。このハンズオンでは、この入れ子を利用して普段記事を書く時に利用するエントリーの編集画面を拡張してみましょう。ハンズオンにはsite2018テーマを使用します。 このハンズオンで行うこと エントリー編集画面の余分な項目を取り...
レスポンシブイメージでユーザーの閲覧環境に最適な画像を表示しよう
このハンズオンではa-blog cms で実装するときに、srcset属性やpicture要素を使ってレスポンシブイメージでユーザーの閲覧環境に最適な画像を表示する方法をご紹介します。 レスポンシブイメージとは？ まずはレスポンシブイメージについておさらいしましょう。 普段、Retinaディスプレイへの画像表示の対応はどうしてい...
複数ステップのフォーム作成とHTMLメールを送ってみよう
このハンズオンでは、複数ステップのフォーム作成と、Ver.2.9よりSite2018テーマのお問い合わせフォームのデフォルト設定になったHTMLメールについて学習していきます。 このハンズオンで行うこと 複数ステップフォームの作成では、現在すでにテーマ内に用意されている「お問い合わせ情報」と「お客様情報」を分割して複...
テキスト置換機能を使ってテキストの修正箇所を一括変更しよう
「このテキスト部分をサイトで一括して置換したいけど、エントリーが多すぎて一つずつ修正するのが大変…。」 皆さんの中に、このような経験をされた方はいらっしゃいませんか？そんな時はa-blog cmsのデータ修正機能を使ってみましょう。Ver. 2.8 まではプロフェッショナル版以上でのみ利用可能でしたが、Ver. 2.9ではス...
A: ポストインクルードで読み込んできたコンテンツにMasonryレイアウトを適応する
a-blog cmsにはACMS.addListener という特定のイベントに対して処理を挟み込めるAPIが用意されています。 このAPIを使うことにより、エントリーのユニットの追加時やカスタムフィールドグループの項目を増やした時など特定のタイミングで任意の処理を挟み込むことができます。 例えば、ポストインクルードで読み込んで来...
B: 外部コンテキスト挿入機能とカスタムフィールドを使ってカテゴリー分けをしてみよう
このハンズオンでは外部コンテキスト挿入機能（ctx）とエントリーのカスタムフィールドを使用してカテゴリー分けをする方法を紹介しています。 通常ではa-blog cmsの標準のカテゴリー設定でカテゴリー分けを行いますが、カスタムフィールドを使うことでURLコンテキストに依存せずにカテゴリーを分けることができます。...
C: ポストインクルードを使ってページ遷移しないカスタムフィールド検索を実装する
今回は、カスタムフィールドの検索結果を別ページとして移動させず、その場で表示される方法を紹介します。 このハンズオンで使っている機能 カスタムフィールド ポストインクルード 少しJavaScriptを書くことになります。JavaScriptで複雑なことはしないため、HTMLとJavaScriptの基礎な知識があれば大丈夫です。 デフォ...
D: スクロールを予測させるテーブルユニットを作ってみよう
先日弊社で新しいOSS（ScrollHint）を公開しました。このJavaScriptを使うと下のデモようにコンテンツが表示エリアをはみ出した時に、そのコンテンツに対してスクロール可能領域にボックスシャドウをかけ、さらにコンテンツが表示エリアに入った瞬間にスクロールを促すためのアイコンが表示されます。 Col1 Col2 Col3 ...