Sakurai

WordPressプラグイン「Advanced Custom Fields」はカスタムフィールドを拡張するときに利用するプラグイン。 Advanced Custom Fields – WordPress プラグイン | WordPress.org 日本語 記事内容以外で、記事ごとに付け足したい内容を付け足すときに便利なのがカスタムフィールドです。 この「Advanced Custom Fields」は拡張性がありすぎて使い方になれるまでの初期設定がちょっと大変なのですが、 今回はフィールド順番を入れ替える ...

スライダープラグイン「Slick.js」でスライダーのボタンを押すとautoplayに設定したスライドの動きが止まると言われてしまいました。 状況 ボタンを押すと1度スライドが動くが止まる。マウスカーソルをブラウザから外すと再びスライダーが動き出す このときにSlick.jsでスライド対応していた部分はスライドボタンをCSSのabsoluteで位置変更していたことを思い出しました。 そのためマウスカーソルが乗っているときのオプションが用意されているのでは？という結論に達したところカーソル系のオプションがあ ...

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

「Datepicker」はjQueryのライブラリで、カレンダー機能を簡単に実装できるライブラリ。お問い合わせフォーム等で、inputのテキストフォームや、カレンダーアイコンをクリックしたときに表示されるカレンダーがありますよね？カレンダーの日付を選ぶと選んだ日程がテキストフォームに値として入るといった仕組みができあがります。 カスタマイズ 用意されているオプションを利用することでカレンダーをカスタマイズできます。 当月カレンダーに先月、翌月の日付を表示させる 当月カレンダー内の月初と月末に前月と翌月の日 ...

「Datepicker」はjQueryのライブラリで、カレンダー機能を簡単に実装できるライブラリ。お問い合わせフォーム等で、inputのテキストフォームや、カレンダーアイコンをクリックしたときに表示されるカレンダーがありますよね？カレンダーの日付を選ぶと選んだ日程がテキストフォームに値として入るといった仕組みができあがります。 jQueryUIの設定 Download Builder | jQuery UIよりライブラリファイルをダウンロードします。/download/のページでどのコンポーネントをつける ...

レンタルサーバーであるmixhostサーバーを使ったWordPressの設定方法を紹介します。

このブログはWordPressを使っている。 WordPressではログインしているユーザーのみに表示させたいものがあった場合などに使える関数がある。 この場合のテンプレート関数の書き方。

前提 通常のjQueryの記述は以下の$(function()~ もしくは$(document).ready(function()~~で記述しますが、 WordPressの場合には書き方が変わります。 $(function(){ // 処理 }); もしくは $(document).ready(function(){ //処理 }); WordPressでのjQueryの書き方 jQuery(function($){〜〜　で書き始める。 jQuery(function($){ //処理 　　　　　$('. ...

「Slick.js」の使い方・カスタマイズ方法 「Slick.js」の使い方・カスタマイズ方法でよくある事例のメモです。 スライドのドットの大きさを変更する CSSで調整できます。 疑似要素の中身にcontent: "•";を使ってスライダードットを再現しています。 スライドのドットの大きさはfont-sizeで変化します。 191行目の.slick-dots li button:beforeのfont-sizeを変更します。 .slick-dots li button:before { font-fam ...

画像内にイメージマップをつくってリンクをつけることができるareaタグですが、 アクションを起こせる範囲を指定するため、レスポンシブ対応させるとなると手間がかかります。 areaタグをレスポンシブ対応させる方法 結論 ・javascriptライブラリ「jQuery-rwdImageMaps」で対応可能 CDNから読み込み、もしくはダウンロードしてきてライブラリを読み込ませます。 ジェネレーターでイメージマップを作成後、タグに使うimgに usemap="#image-map"を書いてrwdImageMap ...

position: stickyが効かない、IE11対応 結論 ・親要素全てのoverflow属性値をvisibleに変更する ・IE11はそもそも「position: sticky」が効かないのでstickyfill.jsのライブラリを使用 position: stickyが効かない場合の解決方法【CSS】 - termina.ioを参照した。 親要素全てのoverflow属性値をvisibleに変更する。 この状態になっているかどうか？はディベロッパーツールのコンソールを開き $(".stickyをつ ...

disabledにしたチェックボックスのデザインを変更する方法 結論 ・disbaledを適応させたときのチェックボックスのデザインはブラウザに依存するため背景色を変えたりチェックマークを変えたりすることは不可能。 ・CSSの「appearance: none;」を使って　チェックボックス自体を見えなくしてから　before,after要素でチェックボックスのデザインを指定することは可能。 ・「appearance: none;」が効かないIE11ではこの手法は使えない。 「appearance: non ...

右クリック禁止処理サイトでhtmlソースを確認する方法 WEBサイト修正依頼が来た時に,「右クリック禁止処理」がされているサイトほど嫌なものはないです。 手間が何重にも増えますしね。 右クリック禁止処理サイトでもhtmlソースを見ることはできます。 Google Chromeを使います。 結論 ・Google Chromeのディベロッパーツールを使用する ・URLの頭に「view-source:」をつけて確認する このどちらかを使います。 ・Google Chromeのディベロッパーツールを使用する 右ク ...

IE11でテーブルの枠線が消える 久しぶりにIE11でハマったのでメモ。 SafariやChromeでは表示されているのにも関わらず、IE11でテーブルの枠線が消えてしまっていた。 原因としては ・tdタグに背景色をつけていた ・tdタグにposition:relativeをつけていた この2点。 tdの背景色がtdにつけた枠線の上から重なってしまい色が上書きされていた。 開発者ツールでbackgroundの要素のチェックを外すと枠線色は表示される。 サンプルコード この場合、tdにposition:re ...

ヘッダーが追尾するメニューを作る場合、positionで設定するのでレイヤーが一番上に来ます。 そのためヘッダー分の高さが隠れてしまい、ページ内アンカーリンクを設定しているとアンカーリンクは動作しているのだけれど、ヘッダーメニューが上から重なってテキストが見えていない… 飛ばした先が意図せず隠れてしまっている！！　ということが起こります。 よくあるメニューの作り方ではありますが、地味にめちゃくちゃ調整がめんどくさいわけです。 サンプルコード See the Pen ヘッダーが追尾するメニューのアンカーリン ...

svg(エスブイジー)は拡大・縮小に対応した画像ファイル形式のこと。 スマホ、タブレットの普及により近年、幅広いブラウザサイズに対応しなければならず SVG形式の画像を良く見かけますね。特にロゴの画像データはよく見かけます。 多種類の解像度を良いしないといけない場合にSVGが重宝します。 PhotoshopでSVGを書き出す方法 書き出す画像をつくったら メニュ− ＞　ファイル ＞　書き出し ＞　書き出し形式を開く。 ファイル形式「SVG」に変更して書き出しを選択。 ファイル形式「SVG」に変更して書き出 ...

jQueryでアコーディオン/ボタンをアニメーション回転させる 基本的にはjQueryでアコーディオン（クリック開閉メニュー)と同様の手法 トリガーとなるボタンの位置は絶対配置で指定。 toggleClassでクラスを追加したときにCSSで回転させる。 回転アニメーションはさせる場合には「transition」の指定が必要。 <ul> <li class="aco"> <a href="">メニュー親</a> < ...

jQueryでアコーディオン（クリック開閉メニュー) slideToggle（）を使って実装するのがかんたん。 hover,clickをEventListenerにしてslideToggle（）を実行させる例がほとんど。 しかし、slideToggleの場合、css transitionのアニメーションが効かないので ボタンを押してボタンのアニメーションをさせる場合にはアニメーション用のスクリプトを自作しないといけない。 <div class="faq_oya"> < ...

[Javascript]「?」を使ったif文の書き方-三項演算子

久しぶりにつまずいたのでメモ。 before,afterの疑似要素に下線を付けるのではなくspanタグで囲って下線を付ける。 下線の位置を調整するなら疑似要素を使うしかないのですが、before,afterの疑似要素の場合はwidth,height指定しないとだめなときがあるので。 【CSS】リストタグに点下線を敷く実践的な使い方 spanタグからはじめることで、リストの頭につける「リスト項目要素のマーカー（list-style-type）」には下線が付きません。 html A.点線の下線をつけるテストな ...

この投稿はパスワードで保護されているため抜粋文はありません。

さくらドメインコンパネにWPXサーバーのネームサーバーを設定する方法

お名前.comのVPSでのWordPress移行作業

お名前.comのVPS(KVM)プランでページ表示速度を上げてSEO対策

WordPress 5.5 メジャーアップデート版リリース　Eckstine WordPress 5.5がリリースされました。 WordPress 5.5の名前は「Eckstine」です。 ジャズボーカリスト「Billy Eckstin（ビリー・エクスタイン）」から命名 主な変更点 ・遅延読み込み (lazy loading)の導入 ・デフォルトで XML サイトマップが含まれるように変更 ・プラグインとテーマの自動更新 ・ブロックエディタの新機能（ブロックカテゴリ変更、ブロックパターン導入、ブロックエデ ...

Nginx+php-fpmで502 Bad gatewayが出たときの対処メモ

ウェブ作成時にMacで画面上の色を拾って、16進法でコピーする方法

Slick.js slickは定番のJavaScriptスライダープラグインです。 jQueryで動作します。 公式サイトでのデモソースパターンとネットでの拡張サンプルコード事例が豊富なので 比較的使いやすいスライダープラグインだと感じます。 slick ライセンス MITライセンス/個人無料・商用無料 slickはjQueryを利用します。 slick デモサンプルURL/公式ドキュメント ポイント slick - the last carousel you'll ever need slick.jsの ...

php-fpm+nginxでload averageが上がった時の対処メモ

[Javascript]「?」を使ったif文の書き方-三項演算子