サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
kaminarimagazine.com
ウェブMONDAY 2019 / 9 / 16 Contact Form 7でselectボックスの中身を別の要素から自動で設定する。<php><wordpress> こんにちは。 佐藤です。 今日はwordpressのフォーム製作の定番プラグイン 「Contact Form 7」 このプラグインのselectボックスの中身を phpで簡単に自動設定する方法を解説します。 ちなみにselectボックスと言ってますが、別にselectボックスじゃなくても出来ます。 ただ、分かりやすく説明するためにselectボックスに絞って解説していきます。 ※今回は応用することが前提となっており、 コピペだけで実装できるものではなく、多少の知識が必要となります。 予めご了承ください。 実装するには「wpcf_form_tag」というフィルターフックを使って実装していきます。 という訳でまずは以下をfunc
要点 Sassにおける除算で / (スラッシュ) は非推奨となり、将来的に廃止されます。 Dart Sass 1.33.0 以降では非推奨(deprecated) と表示されます。 Dart Sass 2.0.0 以降では / による除算は廃止予定です。 代替として math.div を使うよう勧告されています。 math.divの使い方 @use "sass:math"; /* sassファイル行頭で記述 */ .example{ width: math.div(24px, 16px) * 1rem; } math.divが使えないんだけど? Sassの実装によっては使えません。 今回対応が必要なのは Dart版Sassを使っている環境だけなので、特にwarningが表示されない環境でしたら無理に移行しなくても良いです。 なんでこんな変更を? https://sass-lang.com/
ウェブMONDAY 2019 / 9 / 2 コピペで出来る!YouTubeの情報を隠しながらYouTubeを画面サイズに合わせて自動再生させる方法。<YouTube Player API><javascript> こんにちは。 佐藤です。 よく企業のホームページなんかでTOPページに動画が表示されてたりしますよね。 今日はそんな感じの表示をYoutubeの動画を使ってYoutubeだとばれにくいように 動画を画面いっぱいに再生させる方法をご紹介します。 もちろん応用すれば好きなサイズで表示させられます。 完成品はこんな感じです。 というわけでまずはHTMLから <div class="top-movie-box"> <div id="cover" class="movie-cover"> <div id="movie"></div> </div> </div> お次にjavascript
ウェブFRIDAY 2020 / 2 / 21 Adobe Fonts のWEBフォントを使う際の注意点/他のWEBフォント配信サービスとの比較 Adobe Creative Cloud のライセンスに含まれる Adobe Fonts(旧Adobe Typekit)では各種フォントが使い放題な上、WEBフォントも利用可能です。 WEBフォントを使えば、指定フォントがインストールされていないパソコンでも全く同じ表示ができます。アクセス数による制限もありませんのでかなり自由に使えますが、注意点もあります。 WEBフォント使用時の注意 注意すべきなのはWEBフォントでの使用は再販不可という点です。 なので、例えば弊社が自社サイトでWEBフォントを使う分には問題ありませんが、 弊社が受託して制作したウェブサイトでWEBフォントを利用するのはライセンス違反となります。 参考:フォントのライセンスのF
先日ふとサンテ40(目薬)とガラスの仮面のキャンペーンサイトを見返したくなって探したところ、すでにキャンペーン終了のため閉鎖されていました。URLだけは http://sante40-tsukare.me/ だとわかったんですが・・・ そんなときでもウェブサイトを見る方法が幾つかあります。 1.Googleキャッシュ Googleがサイトデータ回収のロボットを巡回させた際に収集したデータを表示させることができます。削除/閉鎖されてすぐのサイトだったら残っている可能性が高いです。 件のサイトはかなり前のサイトなので使えないですね。 2.魚拓系サイト その時点でのウェブサイトを保存してくれるサービスです。誰かが保存したサイトがこちらに残っている可能性があります。 ウェブ魚拓(https://megalodon.jp/) Webpage Archive(http://archive.is/) 件
こんにちは。 佐藤です。 最近作業してて驚いたのですが、 スライダープラグインbxSliderがアップデート後のchromeで スライド内のリンクをクリックしても反応しなくなってました。 ※クロームバージョン: 73.0.3683.86(Official Build)(64 ビット)(windows) 同じ現象はbxSliderだけじゃないでしょうし 今後のchromeのアップデートで直る可能性も大いにあるのですが その保証もありませんし、いつになるかもわからないので対応策のご紹介です。 対応策① 「mousedown」で対策する //単純なタイプ、ページ内リンクだけの場合は基本これでOK $(document).on('mousedown','.bx-viewport a',function(){ window.location.href = $(this).attr('href');
ウェブWEDNESDAY 2018 / 10 / 31 All-in-One WP Migrationのインポート可能ファイルサイズが512MBから30MB等へ減少した件について WordPressサイトのお引越し等に便利な All-in-One WP Migration ですが、無料版ではインポート可能なサイズが 512MB という制限がありました(有料版は無制限)。 ですが、バージョン 6.78 から(?) その制限が非常に厳しくなり、30MBに減少しています。 (※エックスサーバーの場合) きっつー さて、なぜこうなってしまったか。 まず根本の説明なのですが、ウェブサーバは規定された以上のサイズのファイルを受け取ることができません。 これを今までは分割アップロードする手法で対応していたのですが、無料版ではそれをなくしてしまったようです。 そのためファイルサイズ上限はサーバーの設定(お
ウェブTUESDAY 2016 / 10 / 11 スライド系jQueryプラグイン(slick等)で一瞬表示が乱れるのを防ぐ方法 ※ ここでは slide-sampleクラスに対してスライドを実行するよう記述しています。 ところがこの機能ですが、最初の一瞬だけ画像が縦に並んで見える問題があります。 画像を読み込んでからでないと動作できないプラグインはどうしてもそうなってしまいますね。 そこでそういった症状を軽減するには、head要素内にscript要素を作り、下記を挿入します。 (function(){ var html = document.getElementsByTagName('html')||[]; html[0].classList.add('enable-javascript'); window.addEventListener("load", function(){ ht
Sassにはmixinという便利な機能があるのですが、どうもベンダープレフィックスの自動挿入等、クロスブラウザ対応のための機能ばかりが紹介されている傾向が強いです。 ここでは自分がよく使っている便利なmixinを紹介してみます。 随時追加していく予定です(気が向いたら)。 目次 省略型 justify : 両端揃えの設定 line-truncate : 文字が溢れた際の表示を … にする(1行のみ) lines-truncate : 文字が溢れた際の表示を … にする(複数行対応, Chrome/Safariのみ) absolute : position:absolute; および top / right / bottom / left の設定を一括設定 aspect-ratio : ブロックの縦横比を設定 font-rem : remを使用して文字サイズ等を指定 full-width :
ウェブFRIDAY 2018 / 2 / 16 カスタムフィールドで画像を繰り返し登録する。<WordPress> こんばんは。 佐藤です。 ワードプレスでカスタムフィールドを使う時、一番有名じゃないかなと思うプラグインがやっぱりこれ。 「Advanced Custom Fields」 だと思います。 僕もよくお世話になります。 特徴はとにかく使いやすく、高機能です。 ただ今日は別のプラグインを紹介したいと思います。 「Toolset Types」 別にAdvanced Custom Fields でいいじゃん? とか思うかもしれませんが、彼には彼なりにいいところがあるので紹介していきます。 というわけで ここがすごい!!男前だよ「Toolset Types」先輩 その① 画像の登録を一つのフィールドで複数可能です。 こんな感じ 画像の「Add new」の部分をクリックすると項目が増えガン
ウェブTUESDAY 2017 / 7 / 25 WordPressプラグイン Contact Form 7 で送信するメールに Return-Pathを設定する方法 追記:この処理は現時点ではエックスサーバー限定での挙動かもしれません(Return-Path ヘッダを強制的に付与するサーバー)。カラフルボックスではReturn-Pathが設定できませんでしたが From: のアドレスにエラーメールがきちんと返ってきます。 メールヘッダの Return-Path というのがありまして、これは 「メールを送信し、宛先不明などで不達の際にエラーメールが届くメールアドレスを指定する」 という情報です。これを設定しないとエックスサーバーの場合 【契約名】@svXXXX.xserver.jp (弊社の場合例えば kaminarisama@sv2324.xserver.jp ) というメールアドレスに
このページを最初にブックマークしてみませんか?
『ウェブマガジン カミナリ | 鳥取県米子市のホームページ制作・広告代理店・デザイン』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く