cssでPhotoshopのように画像にエフェクトを追加する方法 | バシャログ。こんにちは。koyaです。 今回はcssプロパティbackdrop-filterでエフェクトを追加する方法について紹介します。 実装 早速ですが実際のコードがこちらになります。 See the Pen bg-filter by bashalog (@bashalog) on CodePen. 画像はフリー写真素材ぱくたそ さんの物を使用させていただきました。 解説 backdrop-filterにはオプションが10種類あり、ブラー、セピア、グレースケールなどのよく使うエフェクトもあります。
ブロックエディタが抜群に使いやすくなるプラグイン「Snow Monkey Editor」 | バシャログ。
こんにちは。koyaです。 先日今シーズン最後のスノーボードをするために越後湯沢まで行きましたが、ボードやシューズが泥まみれになってしまいました。 例年であれば4月末まで営業しているようなゲレンデも3月末には営業終了していそうです。ただでさえコロナで外出が億劫なのに暖冬も重なって今年は散々でした。 今回紹介する「Snow Monkey Editor」はブロックエディタで記事を書く際に欲しい機能が詰め込まれているプラグインです。 ダウンロードはこちらから出来ます→Snow Monkey Editor Snow Monkeyというとテーマの方をイメージしますが、こちらのプラグインはSnow Monkeyのテーマでなくても使用可能です。 Snow Monkey Editorはインストールをすると記事編集画面の右側に「スタイル」とスノーモンキーアイコンがついたブロック表示設定項目が追加されます。
良く使ったな〜・・・と思うSassのmixin | バシャログ。
Oculus Quest、やってます？自分はメチャメチャはまってます。 おはこんばんちわ、kouraku です。今回で最後の投稿となります。 近々、Web業界を引退することとなりました。 ということで、最後に何を書こうか・・・と色々と考えてみた結果、 これまでお世話になったSassのmixinを紹介することに至りました。 「あー、あるよねー」とか、「え？そんなの必要？？？」なんて感じで見ていただければ幸いです（笑） inline-blockでの隙間を削除 // ---- // * ex) @include remove-letterspace(); // ---- @mixin remove-letterspace { letter-spacing: -0.4em; > * { letter-spacing: normal; } } どうせなら子供にdisplay: inline-bloc
今更ながら、スクロール連動でフェードインさせてみる | バシャログ。
Oculus Questを購入し、24日の到着を待ちわびている kouraku です。おはこんばんちわ。 さてさて今回は、スクロール連動で要素を下から上にふわっとフェードインさせる機能を作ってみたいと思います。 まずはポイントを確認 スクロール連動で押さえておくポイントは以下３点です。 スクロール値 → $(window).scrollTop 連動対象となる要素の位置 → $('要素').offset().top 画面の高さ → $(window).height() あとは、画面のどのくらいの位置に入ったらフェードインさせるかも考えておくと良いと思います。 これらのポイントを踏まえて、 $(window).on('scroll') のタイミングで、 スクロール値と要素の位置を比較し、 一定の条件に適合した場合クラスを付与する といった一連の処理をつくることができれば完成しそうですね。 では
WordPressで投稿を差し替える・公開終了を設定するプラグイン「Advanced Schedule Posts」 | バシャログ。
先日LINE Messaging APIの社内勉強会に参加したのですが、なかなか楽しかったので何か作りたくなったyanagimachiです。 そういえば、求人サイトの写真を差し替えまして、普段の感じが伝わるようになった気がします。 よかったら見ていってください。 さて、今回はAdvanced Schedule Postsのご紹介です。 このプラグインはすでに公開した投稿を特定の日時で差し替えたり、公開終了日時を設定できたりします。 最初と違う内容に投稿を差し替えたい、または別の人に違う内容に書き換えてもらって下書きしたものをプレビューで確認した後に差し替え投稿したい！みたいな時あると思います。 そういうときに使うのがこの機能です。 今回は投稿を違う内容に差し替えてみたいと思います。 1. 元の投稿を用意 2. 投稿を複製（Duplicate Postプラグインを使うと簡単です。）し、書き換
WordPress で Ajaxを利用する | バシャログ。
どうもfujiharaです。今年度も残す所1ヶ月となりましたね。 今回はWordPressでAjax を利用する方法を今更ながらご紹介します。 今更感ありますが、過去記事にもなかったのと最近知ったので紹介させてください。 背景 WordPress で Ajaxを使う場合自分でテーマディレクトリにファイル置いて、アクセスとか functions.php 内にRequest URIで判定して処理するような記述を書いていたんですが、 使用しているプラグインとセットで機能を拡張しようとしていて眺めていたら wp_ajax_... って記述を 見つけて覚えました。 WordPress ( add_action ) <php ... add_action('wp_ajax_check_ajax', function() { // 処理を記述 echo json_encode([]); die(); }
WordPressサイトを一瞬でPWA化できる PWA for WordPress【プラグイン紹介】 | バシャログ。
今年の春頃、iOSのServiceWorker対応で、PWA（Progressive Web Apps)がWeb界隈を賑わせましたね。 私は6月にAndroid Bazaar and Conferenceに参加してまいりました。 春は東大の本郷キャンパスでしたが、秋は川崎で開催されます。現在も参加登録できます! 申込はconnpassから。 PWA for WordPress WordCamp Tokyo 2018や、私が参加した日本Androidの会9月定例会で紹介がありました。サイトをPWA化するためには、manifest.jsonとservice-worker.js、他にアイコン用の画像などが必要となります。 これらを非常に簡単に設定してくれるプラグインです！ (利用には対象のWordPressサイトがhttps化している必要があります) 使ってみました！ プラグインをインストールし
今更ながら、格子状に並べたボックスをフェードイン・フェードアウトさせてみる | バシャログ。
先日注文した冷凍イカが届いたので、これまでやったことがなかった下処理に挑戦中の kouraku です。 おはこんばんちわ。 さてさて今回は、JSを使って格子状に並べたボックスに対し、見た目簡単なフェードイン・フェードアウトのアニメーションを付けたいと思います。 なお、アニメーションは以下4種です。 順番通りにフェード 横にフェード 縦にフェード 斜めにフェード HTML・CSS 100個のボックスを表示させるために、HTMLは以下のとおり組みます。 [HTML] <div class="wrapper"> <button class="btnOrder">順番</button> <button class="btnHorizon">横</button> <button class="btnVertical">縦</button> <button class="btnSlant">斜め</b
ブラウザで特定のドメインをブロックする方法 (Chrome 小ネタ) | バシャログ。
どうもfujiharaです。あつすぎて氷ばっかり食べちゃいます。 本日は社内ネットワークから特定のドメインへのアクセスが許可されていない状況を擬似的に作る方法をご紹介いたします。 背景 Webページに YouTubeの埋め込み動画を表示するサイトで、環境によってはYouTubeドメインへのアクセスが許可されていない場合が あるのでその場合はスライドショーを表示して欲しいという要望がありました。 発見 どうやってこの状況を作るかってときにネットを探すと hosts を書き換えればできるよってことでなるほどと思い書き換えました。 そうしたら、「あれ？つながってる」。。ブラウザを一旦閉じるとうまくいきました。 確認方法ですが、Chromeの開発ツールでネットワークタブを見てブロックしたいNameのstatusを確認していました。 何気なく右クリックしたら、なんとありました！ 赤枠部分が上の画像で
ユーザーエージェントってもっとわかりやすくしてくれないかなあと思った話 | バシャログ。
みなさんこんにちは。今日はボーイスカウトの創始者ベーデンパウエルの誕生日でBP祭ですね。yamashitaです。 さてさて、今日はユーザーエージェントについて書きたいと思います。 パソコン、フィーチャーフォン、スマートフォンをそれぞれ分けて適切な表示にする処理を実装する時に困った話です。 早速振り分けてみましょう まずわかりやすそうなところでiPhoneかAndroidのスマートフォンかです。 これは簡単で"iPhone"か"Android"の文字が入っているかどうかを見ればいいのです。 // ユーザーエージェント取得 $ua = $_SERVER['HTTP_USER_AGENT']; if(strpos($ua,'iPhone') !== false or strpos($ua,'Android') !== false){ //スマホの時の処理 } ちなみにiPadも同じ感じで'iPa
順番を指定するCSSを使い倒す！-ほにゃらら-childとほにゃらら-of-typeの違いとその辺の便利な使い方- | バシャログ。
調べてみたところこれだけの種類があります。 全部は覚えられないよ！と思うかもしれませんが、実は10個全て覚える必要はありません。 種類＆ほにゃらら-childとほにゃらら-of-typeの違いがわかれば、組あわせでわかっちゃうんです。 ほにゃらら-childとほにゃらら-of-typeの違いは何？ :first-childと:first-of-typeで違いを見てみたいと思います。 //HTML <dl> <dt>dt</dt> <dd>１番目のdd</dd> <dd>２番目のdd</dd> <dd>３番目のdd</dd> </dl> １番目のddを指定する場合、dd:first-childを使うことはできません。 使うのはdd:first-of-typeです。 ほにゃらら-childは要素すべての順番を指定するもので、例のHTMLの場合は最初の子要素はdtなので指定できないわけです。 そ
【アクセシビリティ】カルーセルで突っ込まれた点をメモメモ | バシャログ。
夜中に何台もの消防車と救急車のサイレンがけたたましく鳴り響き、犬は吠え始め、眠っているところを無理やり起こされたからか、朝から少しぼーっとしている kouraku です。おはこんばんちわ。 さて今回は、前回のHTML/CSS編に引き続きアクセシビリティ：AA レベルのサイト制作を行ったとき、主にslickを使用したカルーセルについて、専門の方から色々と指摘をいただいた内容のいくつかを忘れないようにメモしておこうと思います。 ①各スライド及びスライド選択ボタンに付いている不要なrole属性は削除してね え？なになに、どういうこと！？ 指摘内容はこうでした。 ul要素にrole="tablist"が付与されていますが、対象箇所はタブではありません。対象箇所からrole="tablist"を削除します。 optionロールは選択欄の各選択肢に付与するロールであるため、各イベントを記載するボックス
【アクセシビリティ】HTML/CSSで突っ込まれた点をメモメモ | バシャログ。
来週遅めの夏休みをいただき、東北へ旅行の予定を立てている kouraku です。おはこんばんちは。 さて今回は、とある案件でアクセシビリティ：AA レベルのサイト制作を行ったとき、専門の方から色々と指摘をいただいて、その対応に苦労したり、そんなことしないといけないのか！と思った内容のいくつかを忘れないようにメモしておこうと思います。 ・・・とその前に、アクセシビリティって何？ 「アクセシビリティ」の意味と混同しがちな言葉が「ユーザビリティ」です。ユーザビリティとは、W3Cでは次の内容で定義されています。 Extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specifie
これって使えたっけ？今だからこそ IE8 対応コーディングのポイントをおさらい | バシャログ。
こんにちは。Latinです。 今年は長めの夏休みが取れそうなので、旅行でも行こうと画策しております。 さて今回は、久々にコーディングネタです。 弊社の最近の案件では、対象ブラウザがIE8+という案件がほとんどになってきました。 「安心してください。IE10以上です。」 なんて言われたら嬉しい限りなんですが、まだまだ少ないのが実状です。 「悪夢のIE7対応」を考えなくて良くなっただけでもコーディングはだいぶ楽になりましたが、「IE8」は「IE8」でいろんなクセを持ってますよね。 今回はそんな今だからこそ、「IE8対応のポイント」をまとめてみます。 【IE8の仕様編】 HTML5に対応していない HTML5のサイトで「IE8対応」が必要になってくる場合、ポピュラーな方法としては二つあります。 html5shiv.js などの拡張ライブラリを IE9 以下のIEで読み込ませる HTML5要素自体
【RWD ーレスポンシブー】右にできた謎の余白を消す方法 | バシャログ。
こんにちは。mackyです。 じめじーめな日々のせいなのでしょうか。6月がとても長く感じます。 今日は右にできた謎の余白を消す方法をまとめます。 そもそも余白って？ できあがったサイトをipadやiphoneで表示確認したとき、以下のような余白ができたことはないですか？ 先日、携わった某サイトはiphoneとipadで表示チェックを行ったのですがその際右のスクロールバーの横に白い余白ができてしまいました。ヘッダーも背景画像もそこで切れてしまいます。その時色々試してみて解決した方法をメモしておこうと思います。（サンプルコードは一部内容を変更しています。） サイトの大まかな構成としては、bodyにwidth:100%;。 内側（ipadおよびiphoneで見切れないで表示させたい幅）sectionに固定サイズの1024pxを指定しました。 ipadとiphoneでみてみたら… (※下の図はip
WordPress 4.1から title 要素の作り方が変わるという話 | バシャログ。
映画『インターステラー』を主に TARS 目当てに観てきた kagata です。『キカイダーREBOOT』といい『her／世界でひとつの彼女』といい、今年はロボットや人工知能の出てくる映画が印象に残っています。年末公開の『ベイマックス』も期待。 さて、WordPress の次期バージョン4.1が今月リリースを目指して準備されています。そのバージョン4.1から、title 要素の自動生成という新しい機能が盛り込まれる予定です。バシャログ読者に多いであろうフロントエンド畑の方々や、WordPress テーマカスタマイズの初心者のみなさまにもかかわりがありそうということで、ちょっと調べてみました。 おさらい：これまでの WordPress での title 要素 これまで、WordPress での title 要素はテーマの header.php にテンプレート関数 wp_title() を使っ
CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
スマートフォンサイトのコーディング Tips あれこれ | バシャログ。
ゴールデンウィークはゴールデンに過ごせそうにない Latin です。 今回はスマートフォンサイトのコーディング周りでのあれこれをまとめてみます。 先日の macky の記事、「スマホサイトの矢印付きメニューをCSSのみで実装する。」もあわせてご覧ください。 viewport 系の設定 描画サイズをデバイスの横幅に合わせる、拡大縮小を不可に これが一番よく見る形式でしょうか？ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 文字サイズの自動調整をオフにする 各スマホブラウザでは、横向きにすると text-size-adjust の処理が走り、自動で文字サイズを最適化（拡大）する機能があります。 読
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Fonts正式版に日本語がやってきた！ | バシャログ。
【CSS】img画像の縦横比は元のまま、表示させたいボックスサイズの大きい方に合わせて縮小して表示させる。ついでに上下左右中央寄せで。 | バシャログ。