Sakurai– Author –

<div class="ribbon-container"> <div class="ribbon-icon"> <img src="icon.png" alt="アイコン"> </div> <h2 class="ribbon-title">タイトルテキスト</h2> <...

【検証バージョン】 Photoshop 25.11.0 【アセット書き出しがなくなった？】 PhotoShopで拡張子をつけるとアートボードサイズやレイヤーのアイテムで書き出せる便利な機能が アセット書き出し です。 ファイルか編集にあったハズなのに見当たらず苦労しま...

：から始まる擬似クラスを複数つけたいときの記述方法 【記述順序を間違えると動作しない】 記述の順番が決まっているため順番間違えには注意。 nth-childで指定した要素にhoverの擬似クラス要素を指定するときはhoverを先に書きます。 /* hoverが動く */ ...

CPT UIで新規タクソノミーを作成し、タクソノミースラッグを入力しておく。 作成したタクソノミーを開いて、新規にタームを作成する。 get_termsでタームを取得後、foreach処理を加える タクソノミースラッグ: summmer-event表示させたいテキスト:サマーイ...

Figmaは初期状態でオブジェクトを斜めにするツールがありません！(2023年5月25日現在）そこでプラグインを入れます。使うプラグインは「SkewDat」です。 SkewDat SkewDatで斜めにしたオブジェクトのcssは　transform: matrix　でインスペクターに表示され...

Colorbox.jsを使うとオプションの設定でモーダルウィンドウ内にスライダーを入れることができます。 ColorboxはjQueryで動くレスポンシブ対応のモーダルウィンドウです。 Colorbox - a jQuery lightboxColorbox Examplesデモページ //クラス要素を指定しな...

【Format HTML in PHP】 JSbeautifyを使用して、PHPファイル内のHTMLコードにフォーマットするプラグイン。 Format HTML in PHP 標準のキーボードショートカット（ファイル＞環境設定＞キーボードショートカット）のオプション画面では、名前が「PHPでHTML...

タスクランナーで有名なものに「gulp」がありますが、CUIツールのため設定が面倒くさい。そこでできることは限られるけれど本格的なタスクランナーの代替で使えるPreposというWEB開発者にとっての神アプリがあります。 Preposを使う理由の一つに「オートリ...

デザインツールFigmaではPhotoshopのようにテキストツール上でフォントを選んでいるときにフォントのプレビューができません。 フォント名でしかフォントが選べない… そこでFigmaのフォントプレビューを実現するためにFigmaのプラグインの「Better Font Pi...

Figmaの初期機能が足りないときにはFigmaのCommunityで公開されている「プラグイン」を入れることで機能拡張ができます！ Figmaプラグインには無料・有料があり、有料のものは「サードパーティ決済」の表記があります。Figmaのアプリ版・ブラウザ版で同じ...

画像圧縮のためのWordPressプラグインが「Converter for Media」です。 今回は「Converter for Media」についての解説です。難しい設定が入らずにサクサク導入できるのが強み。 有料のPro版も用意されていますが基本的には無料版で十分な機能を持っていま...

意外なところでハマりました。 【WordPressのfuctions.php】 WordPress5.8のオリジナルテーマを作る時に必要となるファイルがfunctions.phpです。オリジナルテーマ作成時になんど書き換えてもfunctions.phpが反映されないことがありました。 【function.ph...

ブロックエディタの使い方を知らないと編集が大変になりました。 【従来のヘッダー編集方法】 外観 ＞メニュー からヘッダーのメニューを作って変更してました。 【Twenty Twenty-Three のヘッダー編集方法】 [1]管理メニュー ＞　サイトを編集　を選...

Gulpのインストールには「npm」のコマンドを使います。(「npm」のコマンドを使うためにNode.jsの事前インストールが必要) Node.jsのインストール方法 >> ■Gulpインストールまでのコマンド cd webpro npm init -y npm install gulp -g npm install gulp --s...

Node.jsを入れようと調べていくとコマンドラインからインストールする方法ばかり出てきますが、(昔の手法）2023年現在は公式のインストーラーが用意されています。 今回は「LTS推奨版」のMac インストーラーを使います。 【Node.js公式インストーラーを使...

EWWW Image Optimizerのインストール方法 WordPress5.7では非対応と出てしまったので急遽WordPressのアップデートを行いました。 メニュー　＞　プラグイン　＞　新規追加　より「EWWW Image Optimizer」をインストールし有効化ます。 EWWW Image Optimize...

割とよく見ることのある中央に線が引かれている左端に見出しが置かれているデザインのコーディング手法解説。 border-topで記述すると文字の下に線が重なってしまいますのでひと手間工夫が必要です。 このタイプは大きく分けて2つやり方があります。 線と...

スライドショープラグインのSwiperの丸部分である「ページネーション」のデザインを変更します。 ページネーションは「スライドショーが今何番目のものであるか？」を表示させるためのもので、Swiperではカスタマイズが可能です。 初期状態の場合はページ...

Swiperの矢印デザインを変更するには 矢印にかかれているCSSを上書きして違うデザインにする最初からある矢印はafter疑似要素のCSSで作られているので、この疑似要素を非表示にして新しい画像を背景画像として読み込ませる。もしくは疑似要素を非表示にし...

Google mapはiframe呼び出してサイト内に埋め込みますが、単純にiframeで埋め込む以外に加工して埋め込む以外に1処理加えることがほとんどです。 この記事はGoogle mapを埋め込むときの手法を紹介します。 【Google mapの埋め込み方法】 Googlemapを開いて...

便利だよ！便利だよ！と言われつづけて全く使っていなかったNotionを少しずつ触り始めています。アカウントを作ったときはただのクラウドメモツールかな？ぐらいにしか思ってなかったので放置していたのですが、html,cssのコード管理に使うと便利なことに...

【Slick JS】 有料ブログテーマAffingerでも使われているスライドショーライブラリ。基本的なスライドショーのスタイルは押さえてあります。 シンプルにカスタマイズしていけるのが使われている理由かなと感じました。 スワイプブレークポイントごとの設定...

【枠線で囲むタブCSSデザインのhtmlコーディングで詰む。】 タブのCSSデザインが大変だったのでメモ。 文字で説明すると難しいのですが、タブとタブの間をあけて枠線で囲むけれど、タブの下はくっついているように見せるデザインの指定です。 【目標デザイ...

【目的】 スクロールして画面を下げていくと突然表示させるブロックを作りたい 【対応】 目標とする要素をgetElementById等で取得して、その要素の高さをgetBoundingClientRect()で取得。 console.logでスクロールしていくとどれくらいの高さになっている...

「All-in-One Migration」プラグインをオンにしたら以下のエラーが出た。 All-in-One Migration は /***/wp-content/ai1wm-backups/.htaccess ファイルを作成できません。親フォルダーのパーミッションを変更するか、support@servmask.com までメールでお...

WordPressプラグイン「Advanced Custom Fields」はカスタムフィールドを拡張するときに利用するプラグイン。 Advanced Custom Fields – WordPress プラグイン | WordPress.org 日本語 記事内容以外で、記事ごとに付け足したい内容を付け足すときに便利なの...

スライダープラグイン「Slick.js」でスライダーのボタンを押すとautoplayに設定したスライドの動きが止まると言われてしまいました。 【状況】 ボタンを押すと1度スライドが動くが止まる。マウスカーソルをブラウザから外すと再びスライダーが動き出す こ...

Javascriptでdisplay:block,display:noneを切り替えて要素の表示・非表示をする場合があります。 同じ方法でtable trの表示・非表示を切り替えた場合レイアウトズレが発生します。 原因はtrタグの初期設定されているdisplayの値がblockではないことが原因...

「Datepicker」はjQueryのライブラリで、カレンダー機能を簡単に実装できるライブラリ。お問い合わせフォーム等で、inputのテキストフォームや、カレンダーアイコンをクリックしたときに表示されるカレンダーがありますよね？カレンダーの日付を選ぶと選ん...

「Datepicker」はjQueryのライブラリで、カレンダー機能を簡単に実装できるライブラリ。お問い合わせフォーム等で、inputのテキストフォームや、カレンダーアイコンをクリックしたときに表示されるカレンダーがありますよね？カレンダーの日付を選ぶと選ん...