Sakurai– Author –
-
【CSS】hoverとnth-childを両方指定したいときの書き方
：から始まる擬似クラスを複数つけたいときの記述方法 【記述順序を間違えると動作しない】 記述の順番が決まっているため順番間違えには注意。 nth-childで指定した要素にhoverの擬似クラス要素を指定するときはhoverを先に書きます。 /* hoverが動く */ ... -
WordPress カスタム投稿タイプのターム名を取得する方法
CPT UIで新規タクソノミーを作成し、タクソノミースラッグを入力しておく。 作成したタクソノミーを開いて、新規にタームを作成する。 get_termsでタームを取得後、foreach処理を加える タクソノミースラッグ: summmer-event表示させたいテキスト:サマーイ... -
Figmaで図形を斜めにする方法
Figmaは初期状態でオブジェクトを斜めにするツールがありません！(2023年5月25日現在）そこでプラグインを入れます。使うプラグインは「SkewDat」です。 SkewDat SkewDatで斜めにしたオブジェクトのcssは transform: matrix でインスペクターに表示され... -
Colorbox.jsでモーダルウィンドウにスライダーを入れる
Colorbox.jsを使うとオプションの設定でモーダルウィンドウ内にスライダーを入れることができます。 ColorboxはjQueryで動くレスポンシブ対応のモーダルウィンドウです。 Colorbox - a jQuery lightboxColorbox Examplesデモページ //クラス要素を指定しな... -
「Format HTML in PHP」PHPのコード整形をするVS Codeプラグイン
【Format HTML in PHP】 JSbeautifyを使用して、PHPファイル内のHTMLコードにフォーマットするプラグイン。 Format HTML in PHP 標準のキーボードショートカット（ファイル＞環境設定＞キーボードショートカット）のオプション画面では、名前が「PHPでHTML... -
Prepos＋Localでオートリロードが出来なかった
タスクランナーで有名なものに「gulp」がありますが、CUIツールのため設定が面倒くさい。そこでできることは限られるけれど本格的なタスクランナーの代替で使えるPreposというWEB開発者にとっての神アプリがあります。 Preposを使う理由の一つに「オートリ... -
Figmaでテキストプレビューをできるようにする方法
デザインツールFigmaではPhotoshopのようにテキストツール上でフォントを選んでいるときにフォントのプレビューができません。 フォント名でしかフォントが選べない… そこでFigmaのフォントプレビューを実現するためにFigmaのプラグインの「Better Font Pi... -
Figmaにプラグインを入れる方法・消す方法
Figmaの初期機能が足りないときにはFigmaのCommunityで公開されている「プラグイン」を入れることで機能拡張ができます！ Figmaプラグインには無料・有料があり、有料のものは「サードパーティ決済」の表記があります。Figmaのアプリ版・ブラウザ版で同じ... -
「Converter for Media」 WebPに変換して表示を軽くできるWordPressプラグイン
画像圧縮のためのWordPressプラグインが「Converter for Media」です。 今回は「Converter for Media」についての解説です。難しい設定が入らずにサクサク導入できるのが強み。 有料のPro版も用意されていますが基本的には無料版で十分な機能を持っていま... -
WordPressオリジナルテーマでfunctions.phpが読み込まれないときにすること
意外なところでハマりました。 【WordPressのfuctions.php】 WordPress5.8のオリジナルテーマを作る時に必要となるファイルがfunctions.phpです。オリジナルテーマ作成時になんど書き換えてもfunctions.phpが反映されないことがありました。 【function.ph... -
Twenty Twenty-Three のヘッダーリンクやメニューの編集方法
ブロックエディタの使い方を知らないと編集が大変になりました。 【従来のヘッダー編集方法】 外観 ＞メニュー からヘッダーのメニューを作って変更してました。 【Twenty Twenty-Three のヘッダー編集方法】 [1]管理メニュー ＞ サイトを編集 を選... -
Gulpのインストール方法
Gulpのインストールには「npm」のコマンドを使います。(「npm」のコマンドを使うためにNode.jsの事前インストールが必要) Node.jsのインストール方法 >> ■Gulpインストールまでのコマンド cd webpro npm init -y npm install gulp -g npm install gulp --s... -
Node.jsのインストール方法
Node.jsを入れようと調べていくとコマンドラインからインストールする方法ばかり出てきますが、(昔の手法）2023年現在は公式のインストーラーが用意されています。 今回は「LTS推奨版」のMac インストーラーを使います。 【Node.js公式インストーラーを使... -
「EWWW Image Optimizer」 WebPに変換して表示を軽くできるWordPressプラグイン
EWWW Image Optimizerのインストール方法 WordPress5.7では非対応と出てしまったので急遽WordPressのアップデートを行いました。 メニュー ＞ プラグイン ＞ 新規追加 より「EWWW Image Optimizer」をインストールし有効化ます。 EWWW Image Optimize... -
CSSで線の上に文字を乗せる
割とよく見ることのある中央に線が引かれている左端に見出しが置かれているデザインのコーディング手法解説。 border-topで記述すると文字の下に線が重なってしまいますのでひと手間工夫が必要です。 このタイプは大きく分けて2つやり方があります。 線と... -
Swiperの丸（ページネーション)のデザインカスタマイズの方法
スライドショープラグインのSwiperの丸部分である「ページネーション」のデザインを変更します。 ページネーションは「スライドショーが今何番目のものであるか？」を表示させるためのもので、Swiperではカスタマイズが可能です。 初期状態の場合はページ... -
Swiperのスライド矢印のデザインを変更する
Swiperの矢印デザインを変更するには 矢印にかかれているCSSを上書きして違うデザインにする最初からある矢印はafter疑似要素のCSSで作られているので、この疑似要素を非表示にして新しい画像を背景画像として読み込ませる。もしくは疑似要素を非表示にし... -
Google mapを埋め込むときのCSSパターン手法
Google mapはiframe呼び出してサイト内に埋め込みますが、単純にiframeで埋め込む以外に加工して埋め込む以外に1処理加えることがほとんどです。 この記事はGoogle mapを埋め込むときの手法を紹介します。 【Google mapの埋め込み方法】 Googlemapを開いて... -
Notionテンプレートを使ったコード管理が便利だった
便利だよ！便利だよ！と言われつづけて全く使っていなかったNotionを少しずつ触り始めています。アカウントを作ったときはただのクラウドメモツールかな？ぐらいにしか思ってなかったので放置していたのですが、html,cssのコード管理に使うと便利なことに... -
よく使われているスライドショーJSライブラリ
【Slick JS】 有料ブログテーマAffingerでも使われているスライドショーライブラリ。基本的なスライドショーのスタイルは押さえてあります。 シンプルにカスタマイズしていけるのが使われている理由かなと感じました。 スワイプブレークポイントごとの設定... -
枠線で囲むタブCSSデザインのhtmlコーディングで詰む。
【枠線で囲むタブCSSデザインのhtmlコーディングで詰む。】 タブのCSSデザインが大変だったのでメモ。 文字で説明すると難しいのですが、タブとタブの間をあけて枠線で囲むけれど、タブの下はくっついているように見せるデザインの指定です。 【目標デザイ... -
[JavaScript]スクロールで表示させるボタンブロックをつくる
【目的】 スクロールして画面を下げていくと突然表示させるブロックを作りたい 【対応】 目標とする要素をgetElementById等で取得して、その要素の高さをgetBoundingClientRect()で取得。 console.logでスクロールしていくとどれくらいの高さになっている... -
kusanagiで「All-in-One Migration」が実行できない
「All-in-One Migration」プラグインをオンにしたら以下のエラーが出た。 All-in-One Migration は /***/wp-content/ai1wm-backups/.htaccess ファイルを作成できません。親フォルダーのパーミッションを変更するか、support@servmask.com までメールでお... -
Advanced Custom Fieldsで管理画面の表示フィールドの順番を入れ替えるやり方
WordPressプラグイン「Advanced Custom Fields」はカスタムフィールドを拡張するときに利用するプラグイン。 Advanced Custom Fields – WordPress プラグイン | WordPress.org 日本語 記事内容以外で、記事ごとに付け足したい内容を付け足すときに便利なの... -
「Slick.js」スライダーのボタンを押したときにスライドが止まるときの対処方法・使い方
スライダープラグイン「Slick.js」でスライダーのボタンを押すとautoplayに設定したスライドの動きが止まると言われてしまいました。 【状況】 ボタンを押すと1度スライドが動くが止まる。マウスカーソルをブラウザから外すと再びスライダーが動き出す こ... -
Javascriptでdisplay:blockを使って切り替えるとtrタグのレイアウトがずれる原因
Javascriptでdisplay:block,display:noneを切り替えて要素の表示・非表示をする場合があります。 同じ方法でtable trの表示・非表示を切り替えた場合レイアウトズレが発生します。 原因はtrタグの初期設定されているdisplayの値がblockではないことが原因... -
jQueryUIのカレンダー「Datepicker」のオプション・カスタマイズ
「Datepicker」はjQueryのライブラリで、カレンダー機能を簡単に実装できるライブラリ。お問い合わせフォーム等で、inputのテキストフォームや、カレンダーアイコンをクリックしたときに表示されるカレンダーがありますよね？カレンダーの日付を選ぶと選ん... -
jQueryUIのカレンダー「Datepicker」の基本・ダウンロード・日本語化
「Datepicker」はjQueryのライブラリで、カレンダー機能を簡単に実装できるライブラリ。お問い合わせフォーム等で、inputのテキストフォームや、カレンダーアイコンをクリックしたときに表示されるカレンダーがありますよね？カレンダーの日付を選ぶと選ん... -
mixhostサーバーのWordPress設定方法
レンタルサーバーであるmixhostサーバーを使ったWordPressの設定方法を紹介します。 mixhostサーバーの特徴として といった利点があります。 ですが、コントロールパネルが専門的で少々わかりにくく、 他のレンタルサーバーをつかったことがないとわからな... -
【WordPress】ログインしているかどうかチェックするphpの書き方
このブログはWordPressを使っている。 WordPressではログインしているユーザーのみに表示させたいものがあった場合などに使える関数がある。 この場合のテンプレート関数の書き方。■設定環境 WordPressバージョン 4.2.2 is_user_logged_in()を使用する方法...
