details要素でスライドダウンのアコーディオンをシンプルに実装したい
- Other
- #CSS
FAQなどで開閉ボタンを実装したいことがあると思います。detailsやsummaryでの実装を考えましたが、よくあるスライドダウンがうまく動きませんでした。そこで調べてみたところ、CSSだけで下記のコードで実装することができました。 HTML <details> <summary>Q. 質問</summary> A. 回答 </details&g...
-
-
a-blog cmsのコンフィグセットの活用について
- a-blog cms
この記事は、a-blog cms Advent Calendar 2024の15日目の記事です。書こうと思っていたことを去年のAdvent Calendarにすでに書いていることに気が付き、焦って内容を練り直しております。 今回はVer. 2.10以降で導入された「コンフィグセット機能」について具体的な事例を交えて、ほんの少し深堀りできればと思います。 ...
-
a-blog cmsの管理画面を使いやすくするtips
- a-blog cms
- #管理画面
この記事は、a-blog cms Advent Calendar 2023 の22日目の記事です。 a-blog cmsには色々な機能が用意されていますが、その分どのように使うかは開発者に委ねられてしまいます。今回はa-blog cmsのサイトを約10年間運用・制作してお客様の反応も伺う中で、管理画面で必ず行うようになってきたことがありますので、紹介し...
-
_221211_133306_1.jpg)
a-blog cmsのカスタムフィールドを動的化して、データベースのように扱う
- a-blog cms
- #Corrector
この記事は、a-blog cms Advent Calendar 2022 の11日目の記事です。今回は、カスタムフィールドの動的化についてです。 「カスタムフィールドを動的化する」とは a-blog cmsではカスタムフィールドを繰り返し追加できるカスタムフィールドグループがあります。カスタムフィールドグループのテンプレートタグをエスケー...
-
a-blog cmsを導入したサイトで特定のディレクトリ以外をリダイレクトする
- a-blog cms
a-blog cmsを導入したサイトで、親ブログ（日本語版）は新しいサイトにリダイレクト、それ以外の子ブログ（英語版、中国語版、韓国語版）はリダイレクトさせない場合、下記のように.htaccessを追加します。 RewriteRuleでリダイレクトを設定できますが、RewriteCondでリダイレクトの条件を設定します。（今回の場合は「!...
-
a-blog cmsのメンテナンスでよく使うSQL
- a-blog cms
以前、a-blog cms案件のリニューアルで使えるSQLコマンド をご紹介しましたが、CSVインポートでやらかしてしまった場合などに使える、より実践的なSQL文をメモします。 より実践的である分、危険度の高い操作となりますので、本記事を参考にSQLを発行する場合はバックアップを取得の上自己責任でお願いいたします。 エン...
-
a-blog cmsのセキュリティを高める方法
- a-blog cms
この記事は、a-blog cms Advent Calendar 2021 の9日目の記事です。Advent Calendarに取り上げる内容を迷っていて、皆さんに投票していただきました。投票ありがとうございました！ Advent Calendar 9日目のネタはほとんど書き終わっているけど、どっちにするか悩み中— ジェノベーゼ寺崎 (@genovese115) December ...
-
a-blog cmsの拡張アプリ開発時によく使う記述
- a-blog cms
- #PHP
- #拡張アプリ
この記事は、a-blog cms Advent Calendar 2021 の3日目の記事です。 拡張アプリとは a-blog cmsではほとんどのことを標準機能で実装できますが、「拡張アプリ」を使用することで、WordPressやMovable Typeでいう「プラグイン」と同様に、サイトに標準機能にない独自の機能を追加することができます。「拡張アプリ」には...
-
a-blog cmsでmp4ファイルのサムネイルを作成する校正オプション
- a-blog cms
- #Corrector
Webサイトで動画を掲載するときはYoutubeやVimeo、商用用途のものだとJSTREAMやBrightcoveなどの動画配信サービスを利用すると良いですが、容量がそれほど多くないものや、ユーザからの投稿を受け付ける場合はmp4ファイルを直接掲載することもあります。 a-blog cmsでmp4ファイルを掲載する場合、ffmpegを使用してサムネ...
-
コピペでOK！a-blog cmsで使える校正オプション
- a-blog cms
- #Corrector
この記事は、a-blog cms Advent Calendar 2020 の17日目の記事です。 a-blog cmsでは変数の出力に対して 校正オプション を設定することで、変数を加工することができます。（Movable Typeでいうグローバルモディファイア、VueやBladeなどのテンプレートエンジンでいうフィルタのようなものですね。） あらかじめ便利な...
-
フォームで「お問い合わせ種別」によってメールの通知先や、入力項目を変える
- a-blog cms
この記事は、a-blog cms Advent Calendar 2020 の10日目の記事です。 お問い合わせフォームで「お問い合わせ種別」など選択した内容によって、メールの通知先を変えたり、入力項目を変えたりしたいといったご要望があるかと思います。今回はa-blog cmsで実装する方法をご紹介します。すでに取り上げられているかもしれま...
-
Custom Field Suiteでセレクトボックスの選択肢を全て取得する
- WordPress
WordPressのプラグインでAdvanced Custom Fieldsを使用できなかったので、Custom Field Suiteを利用した案件があったのですが、絞り込みのシステムでチェックボックスやセレクトボックスで選択肢を全て表示する必要がでてきました。 CUSTOM FIELD SUITE で 選択肢 を全て取得する方法 では項目に決まった文字列をつけて...
-
ローカル環境でa-blog cmsのテンプレートを見るためのJavaScript
- a-blog cms
a-blog cmsのテンプレートは、a-blog cmsをインストールした環境でないと閲覧できません。このJavaScriptはページに読み込むだけで、a-blog cmsを入れていないローカル環境（XAMPPやMAMPなどのサーバ環境、PreprosやGulpなどのビルド環境）でa-blog cmsのテンプレートが閲覧できるようになります。 2021年1月18日、@exte...
-
グローバル変数と独自モジュールを使ってa-blog cmsの多言語サイト制作をラクにする
- a-blog cms
この記事は、a-blog cms Advent Calendar 2019 の24日目の記事です。 a-blog cmsで多言語サイトを構築する場合、子ブログを使って管理する方法と、エイリアスを使って表示するテーマを切り替える方法に分かれます。今回はそれぞれの方法のメリット、デメリットと、制作しやすくするちょっとしたコツをご紹介したいと思い...
-
Headless CMSとしてのa-blog cms
- a-blog cms
この記事は、a-blog cms Advent Calendar 2019 の17日目の記事です。 Headless CMSとは これまでのCMSはフロントエンド（表示画面）とバックエンド（入力画面やプログラム）が同居したものがほとんどでしたが、セキュリティ意識の高まりやサーバ環境の変化（NetlifyなどのCDNやサーバレス環境の浸透）に伴って、APIをコ...
-
a-blog cms案件のリニューアルで使えるSQLコマンド
- a-blog cms
2016年に導入したa-blog cms案件のリニューアルを担当しました。2016年9月のオープンから2019年9月まででお客様のほうで執筆された記事数は約1,000件。バージョンも2.1.1.1から2.10.19にバージョンアップすることにしました。 a-blog cmsはブロック型のエディタで出力されるタグが決まっているのが特徴ですので、リニュ...
-
Web制作の費用の決め方――稼働時間から人日と費用を算出するツールを作成しました
- Column
Web制作やシステム開発の仕事をしていると、見積を出すときの価格設定に悩んだり、お客様から見積の根拠を聞かれることが多くあるかと思います。安請け合いしてしまって割に合わないと感じたり、お客様と費用感が合わずに失注になることも、よくある悩みかと思います。 そこで、今回はあまりにも語られ尽くされたネタで...
-
Amazon Lightsailにa-blog cmsをインストールする
- a-blog cms
- #AWS
- #lightsail
- #Linux
AWS（Amazon Web Services）が提供するVPSサービスである「Amazon Lightsail」に「a-blog cms」をインストールしたので覚え書きします。今回は開発環境として1ヶ月3.50ドル（現時点で379円）のサーバを立ち上げました。 Amazon Lightsailは、Webサーバの立ち上げに必要な機能がパッケージにまとまっており、簡単かつ低額...
-
a-blog cmsでPNGからJPGに変換する校正オプション
- a-blog cms
- #Performance
- #Corrector
a-blog cmsで構築してお客様に納入したサイトですが、トップページのメインビジュアルエリアや記事のサムネイルにPNG形式で写真のような画像を登録していて、ファイルサイズが合計14,200KBほどになっていました。 急ぎ登録されている画像をPNGからJPGに変換する、下記のような校正オプションを作成しパフォーマンスの改...
