- 2020.06.10
jQueryプラグイン「Colorbox」のレスポンシブ対応
jQueryプラグインのモーダルウィンドウプラグイン、「Colorbox」をレスポンシブ対応するための方法です。 [crayon-607b4d31ee635180902684/] 上記のように、「 maxWidth」「 maxHeight」を指定することで、スマートフォンなどのモバイル端末で閲覧した時に画像が画面からはみ出てしまうのを防げます。
Javascript／jQuery
JQueryプラグインなどJavascriptに関すること
- 2020.05.21
CKEditorで、styleなしのspanタグを許可する
CKEditorで、スタイル無しの<span>タグを手入力しても消えてしまうようでした。 <span>タグ自体は、文字のサイズなどのスタイルを変更すると自動で入るのですが、スタイルなしの状態の<span>のみでしたら、入力しても消えてしまいます。 CKEdiorの「config.js」に下記を追加すると、許可されタグが消えなくなりました。 [crayon-607 […]
- 2020.05.14
jQueryプラグイン iziModal の矢印をクリックした時の線を消す
「 iziModal 」はとてもお洒落なモーダルウィンドウを実装できるjQueryプラグインです。 グループ化した時にナビゲーション（矢印）を表示できるのですが、クリックした時に、線が出てしまいます。 フォーカスした際に出る線ですので、CSSでこれを無効にすることで非表示にできます。 ちなみにこの矢印は、<button>タグで作られています。 [crayon-607b4d31eea9b […]
- 2020.01.29
bxsliderがスマホ で動作しない
bxsliderがPCビューでは動作するのですが、スマホビューでだけ動作せず、少し時間を取られてしまったのでメモです。 リセットで、全ての要素に max-width:100%; を設定してしまっていました。 これを削除したら、動作しました。 [crayon-607b4d31eebf3745576403/] PCでは動作するのに、スマホだけで動作しないって時は、スマホ用のスタイルを見直すと問題が発見 […]
- 2019.08.13
- colorboxq,
jQuery colorbox の閉じるボタンを上部に表示（移動）
colorboxで表示する画像が高めの場合などで、「閉じるボタン」が下の方に表示され、分かりにくい場合があります。 その場合は、ボタンを上に付けると分かりやすいと思います。 colorboxは欄外をクリックでも閉じる事ができますが、分かりにくいユーザーもいると思うので、閉じるボタンの表示は必要です。 ボタンを新設する方法もありますが、単純にボタンを上に表示するだけなら、CSSを変更する方法が手軽だ […]
- 2019.08.06
jQueryで自動で番号（連番）を付ける
セクションごとに番号を振りたい 見出しなどに、番号を振る時があると思います。 （よくあるのが「～～の流れ」） LISTを使うのもありですが、装飾したい場合など、表示場所を独立した場合などには使えません。 また、手動で数字を振るのは、メンテナンス性が悪いです。（間に項目追加したりとか） jQueryを使用して自動で連番 そんな時は、jQueryで番号を振るのが便利です。CSSでする方法もありますが、 […]
- 2018.01.03
CKEditorでTHやTDタグに追加したクラスが消えないようにする
WEBサイトの更新システムなどでよく利用される、WYSIWYGエディターのCKEditor、すごく便利です。 管理画面を導入する必要があるサイトへはよく導入しています。 CKEditorはデフォルトで、ソースエディターで直接、thやtdタグ などへclassを付けた場合に、 自動的に削除してしまう仕様になっています。 これを許可するようにしたい場合は、config.js のファイルのプロパティを編 […]