記事一覧
flexでgapを使うときのwidth指定
<ul class="flex"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li></ul>
@function flexWidth($gap: 20px, $columnCount: 3) { @return calc((100% / $columnCount)
gitでコミット間の差分をZIPで抽出するコマンド
git archive ブランチ名 --format=zip -o zipファイル名.zip --prefix=data/ `git diff --name-only --diff-filter=d 変更前コミット番号 変更後コミット番号`
カラーミーのテンプレートで日時の条件分岐で表示を変更する方法
例えば「2021年4月1日10:00になったら特設ページへのリンクを表示したい」というようなことをしたいときに使います。
カラーミーのテンプレートはSmartyで作られているので、その機能を利用することで手軽に指定できます。
コード例<{assign var="targetDate" value="202104011000"}><{if $targetDate <= $smarty.now|d
サイトの文字サイズを変更するボタンの作り方
間違ったWebアクセシビリティとして名高い、文字サイズ変更ボタンの作り方です。ぜひ滅ぼしましょう。
完成形
HTML文字サイズ<button class="size-button" data-font="12">小</button><button class="size-button active" data-font="16">中</button><button class="size-bu
Web2.0っぽいボタンをCSSで作る
10年前に流行っていた、光沢＋グラデーションで装飾されたリッチなボタンを作るというお仕事がきたので、CSSで実現してみました。
完成形
HTML<a href="#" class="c-button"><span>最先端のボタンデザイン</span></a>
文字をspanタグで囲まなくてはいけなかったところに、技術的な敗北感を感じています。悔しい。
CSS（Sass）.c-button
【WordPress】とりあえず入れておくプラグイン10個 - 2019年
2019年2月時点で、普段使っているプラグインです。どれもWordPressのインストールに合わせて有効化・設定をしています。自分用の覚書ですが、参考になれば幸いです。
All In One WP Securityセキュリティ対策を一通り設定できるプラグインです。WordPressを利用している以上セキュリティ対策は欠かせないので必須のプラグインです。他のセキュリティ対策プラグインでも良いと思い
【WordPress】ブロックエディターで保存に失敗するときの対処方法
WordPress5をインストール、アップデートしていざブロックエディター（Gutenberg）を使おうとすると、「更新に失敗しました」というエラーが表示され、保存できなくなることが稀にあります。
下書き保存や公開ボタンを押したときだけでなく、自動保存もされないことから、どうしようもない状況になってしまうんですね。
クラシックエディターでは保存できるのに、ブロックエディターでは失敗するという謎
【WordPress】ブロックエディターの使い方
WordPress5.0から採用されたブロックエディター（Gutenberg）の基本的な使い方をご紹介します。主にビジネスサイトで新着情報等を更新する際に使うことが多い機能に絞ってご紹介しますので、全ての機能を知りたい方は別のサイトをお探しください。この記事は更新担当者向けの情報となります。
ブロックエディターとは以前はビジュアル表示とテキスト表示を切り替えることができるWYSIWYGエディタ（
【WordPress】 Toolset TypesのPost繋がりで新規追加するときに下へ追加させる方法
WordPressで手軽にカスタム投稿タイプやカスタムフィールドを追加・管理できるプラグインとして、Toolset Typesというものがあります。Toolset Typesについての詳しい説明はいつか書くかもしれませんが、このノートではタイトルの内容に関するちょっとしたカスタマイズをご紹介します。
Toolset Typesを利用していて一番不満だったのが、Post繋がり（relationsh
Bootstrapでgridの間隔を変更する方法
新規にBootstrapベースでサイトを作ることも少なくなってきたとは思いますが、既存のWordPressテーマをカスタマイズする際に必要となることは多くあると思います。
Bootstrapで最も利用頻度が高いのがgridシステムですが、最大の欠点は要素同士の間隔が固定されてしまっていること。gridは使いたいけど間隔を狭くしたい、広くしたいというときには以下のcssを追加しておくことで簡単に対
CSSだけで点線の吹き出しを作る方法
吹出口まで含め、枠が点線となる吹き出しをCSSだけで作れます。
完成イメージ
コード<div class="balloon"> <p>ここにテキストが入ります。</p></div>.balloon { position: relative; max-width: 400px; padding: 20px 8px; text-align: center; background-c
【WordPress】キャプション付きの画像を追加する際にwidthを指定させない方法
WordPressで記事を投稿するとき、「メディアを追加」ボタンからキャプション付きの画像を挿入しようとすると、思っていたより画像の横幅が大きくなってしまうことがあります。
原因はcaptionのショートコードでstyle属性にwidthが指定されてしまうため。対策としてよくあるのはstyle属性を削除してしまうとか、cssでwidth: 100% !important;を付けるとか色々あるよう