kusanagiで「All-in-One Migration」が実行できない
「All-in-One Migration」プラグインをオンにしたら以下のエラーが出た。 All-in-One Migration は /***/wp-content/ai1wm-backups/.htaccess ファイルを作成できません。親フォルダーのパーミッションを変更するか、support@servmask.com までメールでお問い合わせください。 All-in-One Migration は /***/wp-content/ai1wm-backups/web.config ファイルを作成できま ...
Advanced Custom Fieldsで管理画面の表示フィールドの順番を入れ替えるやり方
WordPressプラグイン「Advanced Custom Fields」はカスタムフィールドを拡張するときに利用するプラグイン。 Advanced Custom Fields – WordPress プラグイン | WordPress.org 日本語 記事内容以外で、記事ごとに付け足したい内容を付け足すときに便利なのがカスタムフィールドです。 この「Advanced Custom Fields」は拡張性がありすぎて使い方になれるまでの初期設定がちょっと大変なのですが、 今回はフィールド順番を入れ替える ...
「Slick.js」スライダーのボタンを押したときにスライドが止まるときの対処方法・使い方
スライダープラグイン「Slick.js」でスライダーのボタンを押すとautoplayに設定したスライドの動きが止まると言われてしまいました。 状況 ボタンを押すと1度スライドが動くが止まる。マウスカーソルをブラウザから外すと再びスライダーが動き出す このときにSlick.jsでスライド対応していた部分はスライドボタンをCSSのabsoluteで位置変更していたことを思い出しました。 そのためマウスカーソルが乗っているときのオプションが用意されているのでは?という結論に達したところカーソル系のオプションがあ ...
Javascriptでdisplay:blockを使って切り替えるとtrタグのレイアウトがずれる原因
Javascriptでdisplay:block,display:noneを切り替えて要素の表示・非表示をする場合があります。 同じ方法でtable trの表示・非表示を切り替えた場合レイアウトズレが発生します。 原因はtrタグの初期設定されているdisplayの値がblockではないことが原因です。 trの場合の初期値はblockではなく「table-row」 そのためtrの表示・非表示をする場合、displayを使ってtable-rowとnoneを切り替えるとうまくいきます。 tableで使うタグのd ...
jQueryUIのカレンダー「Datepicker」のオプション・カスタマイズ
「Datepicker」はjQueryのライブラリで、カレンダー機能を簡単に実装できるライブラリ。お問い合わせフォーム等で、inputのテキストフォームや、カレンダーアイコンをクリックしたときに表示されるカレンダーがありますよね?カレンダーの日付を選ぶと選んだ日程がテキストフォームに値として入るといった仕組みができあがります。 カスタマイズ 用意されているオプションを利用することでカレンダーをカスタマイズできます。 当月カレンダーに先月、翌月の日付を表示させる 当月カレンダー内の月初と月末に前月と翌月の日 ...
jQueryUIのカレンダー「Datepicker」の基本・ダウンロード・日本語化
「Datepicker」はjQueryのライブラリで、カレンダー機能を簡単に実装できるライブラリ。お問い合わせフォーム等で、inputのテキストフォームや、カレンダーアイコンをクリックしたときに表示されるカレンダーがありますよね?カレンダーの日付を選ぶと選んだ日程がテキストフォームに値として入るといった仕組みができあがります。 jQueryUIの設定 Download Builder | jQuery UIよりライブラリファイルをダウンロードします。/download/のページでどのコンポーネントをつける ...
mixhostサーバーのWordPress設定方法
レンタルサーバーであるmixhostサーバーを使ったWordPressの設定方法を紹介します。
【WordPress】ログインしているかどうかチェックするphpの書き方
このブログはWordPressを使っている。 WordPressではログインしているユーザーのみに表示させたいものがあった場合などに使える関数がある。 この場合のテンプレート関数の書き方。
WordPressのphpにjQueryを使用して動かす
前提 通常のjQueryの記述は以下の$(function()~ もしくは$(document).ready(function()~~で記述しますが、 WordPressの場合には書き方が変わります。 $(function(){ // 処理 }); もしくは $(document).ready(function(){ //処理 }); WordPressでのjQueryの書き方 jQuery(function($){〜〜 で書き始める。 jQuery(function($){ //処理 $('. ...
スライダープラグイン「slick.js」の使い方・カスタマイズ方法/ スライドドットの大きさを変える、色を変える
「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タグですが、 アクションを起こせる範囲を指定するため、レスポンシブ対応させるとなると手間がかかります。 areaタグをレスポンシブ対応させる方法 結論 ・javascriptライブラリ「jQuery-rwdImageMaps」で対応可能 CDNから読み込み、もしくはダウンロードしてきてライブラリを読み込ませます。 ジェネレーターでイメージマップを作成後、タグに使うimgに usemap="#image-map"を書いてrwdImageMap ...
position: stickyが効かない、IE11対応
position: stickyが効かない、IE11対応 結論 ・親要素全てのoverflow属性値をvisibleに変更する ・IE11はそもそも「position: sticky」が効かないのでstickyfill.jsのライブラリを使用 position: stickyが効かない場合の解決方法【CSS】 - termina.ioを参照した。 親要素全てのoverflow属性値をvisibleに変更する。 この状態になっているかどうか?はディベロッパーツールのコンソールを開き $(".stickyをつ ...
disabledにしたチェックボックスのデザインを変更する方法
disabledにしたチェックボックスのデザインを変更する方法 結論 ・disbaledを適応させたときのチェックボックスのデザインはブラウザに依存するため背景色を変えたりチェックマークを変えたりすることは不可能。 ・CSSの「appearance: none;」を使って チェックボックス自体を見えなくしてから before,after要素でチェックボックスのデザインを指定することは可能。 ・「appearance: none;」が効かないIE11ではこの手法は使えない。 「appearance: non ...
右クリック禁止処理サイトでhtmlソースを確認する方法
右クリック禁止処理サイトでhtmlソースを確認する方法 WEBサイト修正依頼が来た時に,「右クリック禁止処理」がされているサイトほど嫌なものはないです。 手間が何重にも増えますしね。 右クリック禁止処理サイトでもhtmlソースを見ることはできます。 Google Chromeを使います。 結論 ・Google Chromeのディベロッパーツールを使用する ・URLの頭に「view-source:」をつけて確認する このどちらかを使います。 ・Google Chromeのディベロッパーツールを使用する 右ク ...
IE11でテーブルの枠線が消えるバグの対処方法
IE11でテーブルの枠線が消える 久しぶりにIE11でハマったのでメモ。 SafariやChromeでは表示されているのにも関わらず、IE11でテーブルの枠線が消えてしまっていた。 原因としては ・tdタグに背景色をつけていた ・tdタグにposition:relativeをつけていた この2点。 tdの背景色がtdにつけた枠線の上から重なってしまい色が上書きされていた。 開発者ツールでbackgroundの要素のチェックを外すと枠線色は表示される。 サンプルコード この場合、tdにposition:re ...
ヘッダーが追尾するメニューのアンカーリンク用CSS
ヘッダーが追尾するメニューを作る場合、positionで設定するのでレイヤーが一番上に来ます。 そのためヘッダー分の高さが隠れてしまい、ページ内アンカーリンクを設定しているとアンカーリンクは動作しているのだけれど、ヘッダーメニューが上から重なってテキストが見えていない… 飛ばした先が意図せず隠れてしまっている!! ということが起こります。 よくあるメニューの作り方ではありますが、地味にめちゃくちゃ調整がめんどくさいわけです。 サンプルコード See the Pen ヘッダーが追尾するメニューのアンカーリン ...
PhotoshopでのSVGファイルの作り方等、SVGのまとめ
svg(エスブイジー)は拡大・縮小に対応した画像ファイル形式のこと。 スマホ、タブレットの普及により近年、幅広いブラウザサイズに対応しなければならず SVG形式の画像を良く見かけますね。特にロゴの画像データはよく見かけます。 多種類の解像度を良いしないといけない場合にSVGが重宝します。 PhotoshopでSVGを書き出す方法 書き出す画像をつくったら メニュ− > ファイル > 書き出し > 書き出し形式を開く。 ファイル形式「SVG」に変更して書き出しを選択。 ファイル形式「SVG」に変更して書き出 ...
jQueryでアコーディオン/ボタンをアニメーション回転させる
jQueryでアコーディオン/ボタンをアニメーション回転させる 基本的にはjQueryでアコーディオン(クリック開閉メニュー)と同様の手法 トリガーとなるボタンの位置は絶対配置で指定。 toggleClassでクラスを追加したときにCSSで回転させる。 回転アニメーションはさせる場合には「transition」の指定が必要。 <ul> <li class="aco"> <a href="">メニュー親</a> < ...
jQueryでアコーディオン(クリック開閉メニュー)
jQueryでアコーディオン(クリック開閉メニュー) slideToggle()を使って実装するのがかんたん。 hover,clickをEventListenerにしてslideToggle()を実行させる例がほとんど。 しかし、slideToggleの場合、css transitionのアニメーションが効かないので ボタンを押してボタンのアニメーションをさせる場合にはアニメーション用のスクリプトを自作しないといけない。 <div class="faq_oya"> < ...
JavascriptでURLパラメータを取得し条件文を作るやり方
[Javascript]「?」を使ったif文の書き方-三項演算子
【CSS】リストタグに点下線を敷く実践的な使い方
久しぶりにつまずいたのでメモ。 before,afterの疑似要素に下線を付けるのではなくspanタグで囲って下線を付ける。 下線の位置を調整するなら疑似要素を使うしかないのですが、before,afterの疑似要素の場合はwidth,height指定しないとだめなときがあるので。 【CSS】リストタグに点下線を敷く実践的な使い方 spanタグからはじめることで、リストの頭につける「リスト項目要素のマーカー(list-style-type)」には下線が付きません。 html A.点線の下線をつけるテストな ...
保護中: ギャラリー
この投稿はパスワードで保護されているため抜粋文はありません。
さくらドメインコンパネにWPXレンタルサーバーのネームサーバーを設定する方法
さくらドメインコンパネにWPXサーバーのネームサーバーを設定する方法
お名前.comのVPSでのWordPress移行作業
お名前.comのVPSでのWordPress移行作業
お名前.comのVPS(KVM)プランでページ表示速度を上げてSEO対策
お名前.comのVPS(KVM)プランでページ表示速度を上げてSEO対策
WordPress 5.5 メジャーアップデート版リリース変更点まとめ
WordPress 5.5 メジャーアップデート版リリース Eckstine WordPress 5.5がリリースされました。 WordPress 5.5の名前は「Eckstine」です。 ジャズボーカリスト「Billy Eckstin(ビリー・エクスタイン)」から命名 主な変更点 ・遅延読み込み (lazy loading)の導入 ・デフォルトで XML サイトマップが含まれるように変更 ・プラグインとテーマの自動更新 ・ブロックエディタの新機能(ブロックカテゴリ変更、ブロックパターン導入、ブロックエデ ...
Nginx+php-fpmで502 Bad gatewayが出たときの対処メモ
Nginx+php-fpmで502 Bad gatewayが出たときの対処メモ
ウェブ作成時にMacで画面上の色を拾って16進法でコピーする方法
ウェブ作成時にMacで画面上の色を拾って、16進法でコピーする方法
「Slick.js」指定できるオプション豊富な定番jQueryスライダープラグイン
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が上がった時の対処メモ
php-fpm+nginxでload averageが上がった時の対処メモ