校正オプションsubstringを新規作成し、PDFのサムネイル画像にresizeImgの校正オプションを適用する方法
この記事では、先日メールサポートで質問をいただいたメディアに登録したPDFのサムネイル画像にresizeImgの校正オプションを適用する方法についてご紹介します。 PDFのサムネイル画像をカスタムフィールドで表示するためには、{hoge@thumbnail}のような変数を使いますが、resizeImgの校正オプションは/media/001/xxxx.jp...
カスタマイズ
エントリー一覧のときに、タイトルと一緒に表示されるステータスを出力したくないときのカスタマイズ
エントリー一覧などでエントリータイトルと一緒に表示される【下書き】、【非公開】などのステータスの状況を出力しないようにする方法をご紹介します。 サイト全体に対応する方法 /private/config.system.default.yamlの900行〜908行目付近にあるステータスの設定をconfig.system.yamlに空の状態で記述すると、実現で...
複雑なCSVインポートをやってみる
CSVインポートを使うことにより、一度にエントリを新規作成やアップデートすることができ、便利に利用できます。 この記事では、少し複雑な項目である、画像やカスタムフィールドグループのインポートについて紹介していきます。 メディアのカスタムフィールド メディアのIDを指定して、メディアのカスタムフィールドを...
カスタムルールをつくる
a-blog cms にはルール機能があり、デバイス毎にテーマやコンフィグを変更したり、 あるカテゴリの場合は別の設定を行うといったことができるようになっています。 サイト制作にはかかせないルール機能ですが、標準のルールで設定できる項目は少なく、もう少し柔軟な設定をしたいと言う時があります。 そこで、Ver. 2.11...
Ver. 2.11より新しく追加された機能についてドキュメントを書きました
アップルップルのフロントエンドエンジニア 堀です。 先日、a-blog cms Ver.2.11をリリースしました。みなさんはもうご利用いただけましたか？ 現在、新しく追加した機能について急ピッチでドキュメント化を進めているところです。取り急ぎ、エントリーの一括変更機能や、ログイン機能、またリッチエディターユニットに...
TinyPNG API を使って、画像を最適化してみよう
この記事は Advent Calendar 2019 の25日目の記事となります。さまざまな a-blog cms に関する記事が公開されていますので是非ごらんください。 画像を最適化してファイルサイズを小さくすることでパフォーマンスをよくすることができます。 これを実現するために「ロスレス圧縮」機能が a-blog cms にはありますが、サ...
Backpax.jsを使ってパララックスユニットを作ってみよう
みなさんは背景画像にパララックス効果をつけたい場合にどのライブラリを選定して実装していますか？意外と背景画像にパララックスエフェクトをつけるのは難しいと思います。なぜなら、背景画像の大きさに応じてパララックスのスピードを調整しないといけないし、スマートフォンサイズの時は別画像にしてパララックスさ...
クエリストリングの値をグローバル変数として取得する
a-blog cms ではクエリストリングを取得するために「%{QUERY} 」や「%{QOL}」などのグローバル変数 が用意されています。これらのグローバル変数はURLエンコードされているため使用場面によってはURLデコードする必要があるかもしれません。また、クエリストリングの変数名まで取得するようになっているためそのままでは...
Ver. 2.10より新しく追加された機能についてドキュメントを書きました
アップルップルのフロントエンドエンジニア 堀です。 先日、a-blog cms Ver.2.10をリリースしました。みなさんはもうご利用いただけましたか？ 現在、新しく追加した機能について急ピッチでドキュメント化を進めているところです。取り急ぎ、メディア機能と、管理画面のカスタマイズについて記事を書きました。 まだまだ...
chart.js を活用した円グラフのカスタムユニットを作る方法
一般的にグラフをサイトに貼り付けるのであれば、上記のようにエクセルで描いたグラフをキャプチャした画像を用意して画像ユニットにアップするかと思いますが、エクセルなどを使う事なくユニットに数値などを設定するだけでグラフが描けるようなユニットの作成を目指してみようと思います。 グラフを描くことができる ...