cssでPhotoshopのように画像にエフェクトを追加する方法 | バシャログ。こんにちは。koyaです。 今回はcssプロパティbackdrop-filterでエフェクトを追加する方法について紹介します。 実装 早速ですが実際のコードがこちらになります。 See the Pen bg-filter by bashalog (@bashalog) on CodePen. 画像はフリー写真素材ぱくたそ さんの物を使用させていただきました。 解説 backdrop-filterにはオプションが10種類あり、ブラー、セピア、グレースケールなどのよく使うエフェクトもあります。
【MovableType.net】アクセシビリティチェック機能を試してみた | バシャログ。
こんにちは、ishida です。 健康診断に行ったのですが、体重が過去最高を記録してしまいました。 ダイエット始めようと思います。 さて今回は、MovableType.netの機能として去年10月に登場したアクセシビリティチェック機能についてです。 機能があることは知っていましたが、使う機会がなかったので放置してましたがやっと使うことが出来ました。 使い方 ブログメニューから設定->全般の画面で、アクセシビリティチェックを有効にします。 あとは記事やウェブページ、テンプレートからプレビューボタンを押すと以下のようなウィンドウが表示されます。 レポートをみるをクリックすると詳細が表示されます。 適合レベルは、「WCAG2.0 (JIS X 8341-3:2016) 」レベル A 〜 AAA 準拠のチェックが可能となってます。 使ってみて MovableType.netに組み込まれているので、
【CS-Cart】注文確認書のカスタマイズ【管理画面のみ】 | バシャログ。
シーブレイン アドベンドカレンダー2019 はじまりました！ トップバッターはkyamashitaです。 今回はCS-Cartの注文確認書カスタマイズについて紹介します。 カスタマイズ方法について 管理画面のみと、変数やスニペットを追加する方法があります。 今回は管理画面からのみのカスタマイズを紹介します。 カスタマイズ前 初回はこのようなイメージになっています。 今回は下記のようなカスタマイズをしてみます。 "商品名"列のコードを別の列に移動する。 "割引"と"税"の列を削除する。 修正対象 まず 管理画面 > デザイン > ドキュメント > 注文確認書 > に遷移し、 商品一覧 を選択します。 ■"商品名"列のコードを別の列に移動する。 "カラムの追加"から下記の設定で追加します。 名前： コード コード： <p style="vertical-align: top; text-ali
Sassでテーマ用CSSを作成する | バシャログ。
どうもfujiharaです。この時期でも暑く感じるのは自分だけでしょうか？ 本日はテーマ用CSSを作成する際に調べていたらSassの !defaultがすごく便利だったのでご紹介します。 Default Values Default Values この値は Sassで変数を使用する際に値の最後に追記すると既に変数として宣言されている場合は、変数を上書きしません。 テーマ用設定 以下のようにファイル構成をします。 --src --_base _variables.scss ... --themes theme-a.scss theme-b.scss common.scss ファイル _variables.scss $mainColor: green !default; $heading1Color: orange !default; ... common.scss import "_base
WordPress 記事編集時にカスタムCSSを効かせる | バシャログ。
どうもfujiharaです。夏の終りのこの季節過ごしやすくて一番好きです 本日はWordPress 5系からGutenberg に変わったんですが、TinyMCEでカスタムCSSを効かせる方法をご紹介します。 はじめはGutenbergでもやってたんですが、それ以外の設定が多すぎてまずはTinyMCEでご紹介させてください。。 使用前 カスタマイズの前後でどう変わるかお見せします。 before after 方法 2つの手順で行っています。 読み込みCSSの追加 TinyMCEの Body に特定のクラスを追加 読み込みCSSの追加 add_action('after_setup_theme', function () { add_editor_style("assets/css/common.css"); add_editor_style("assets/css/editor_reset
Wordpressで投稿の本文中に別投稿タイプの記事の情報をショートコードで埋め込む | バシャログ。
そしてこのフィールドを表示する条件のところを投稿タイプ、等しい、店舗情報にしてください。 ここまでで店舗情報が作成できるようになったので、適当に入力して店舗情報の投稿を1つ作ってください。 通常の投稿タイプから店舗情報を呼び出す。 ショートコードの作成 WordPressでショートコードを追加するには、add_shortcodeという関数を使用します。 add_shortcode('ショートコードのタグ', 'コールバック関数'); 第一引数にショートコードを判別するためのタグの文字列を入れます。例えば、[some_shortcode]でショートコードを呼び出したい場合、add_shortcodeの第一引数にsome_shortcodeと入れます。 そして第ニ引数でコールバック関数名の文字列を指定します。 ショートコードで呼び出すコールバック関数を定義していきます。 function ge
【 WordPress】ユーザーIDを秘匿する方法 | バシャログ。
こんにちは。koyaです。 ちょっと前までスケボーにハマって毎日のように練習に行っていましたが、最近は暑すぎて引きこもりがちです。 OculusQuestがOculusGoのアプリに対応するらしく期待して待っています。 今回はWordPressのセキュリティ対策の中でも、ユーザーID関係の対策についてご紹介します。 何故ユーザーIDが大事なのか WordPressは初期設定だとURLの最後に/wp-adminと入力するだけでログイン画面へ遷移することができます。 ログイン画面で求められるものがユーザーIDとパスワードのみのため、ユーザーIDが発覚すると残る砦がパスワードだけになってしまいます。 パスワードだけではリスト攻撃されてしまうのでユーザーIDを秘匿することは重要です。 ではどのようにして秘匿すれば良いのでしょうか。 管理者IDを非公開にする。 WordPressは初期状態だとhtt
Docker Compose でWordPress環境を作ってみる | バシャログ。
こんにちは、ishidaです。最近、猫カフェにハマってます。 Dockerを先日インストールしたので、WordPress環境を作ってみたいと思います。 開発環境 ・macOS Mojave 10.14.4 ・Docker version 18.09.2 Docker Composeとは 公式サイトには、 Compose とは、複数のコンテナを使う Docker アプリケーションを、定義・実行するツールです。Compose はアプリケーションのサービスの設定に、Compose ファイルを使います。そして、コマンドを１つ実行するだけで、設定した全てのサービスを作成・起動します。 と書いてあります。 コマンド１つだけで、複数のサービスを作成・起動が出来るようになります。 超便利ですね。 Docker のインストール まずはDocker Desktopをインストールしていきましょう。 公式サイトか
node.jsでスクレイピングしてみる | バシャログ。
初めまして。4月入社の山崎です。これが初投稿になります。 今回はnode.jsでスクレイピングをします。 経緯 とあるサイトをリニューアルしていて、旧サイトの静的ページからテキストなどのコンテンツを持ってきて新サイトのHTMLタグの中に貼り付けていくという作業はよくあると思います。 僕もとあるサイトのリニューアル時にそういった作業をやっていたのですが、旧サイトのよくある質問の質問と回答のページが分かれており、回答ページに行ってテキストをとってきてHTMLに貼り付けていました。 ただ、その質問も全部で100個くらいあり、1つ1つコピペするのは面倒くさいので、スクレイピングで特定のURLに一括アクセスし、テキストを引っ張ってきて、新サイトのHTML構造に埋め込み、HTMLを自動生成しようと思ったのがきっかけです。 僕はシェルスクリプトはほぼ書けず普段JSを使うことが多いため、node.jsを使
今更ながら、モーダルを作ってみる | バシャログ。
Oculus Questの予想を超えた性能の良さに感激しつつ、毎晩ライトセーバーを嬉々として振り回し続けている kouraku です。おはこんばんちわ。 さてさて今回は、モーダルを作ってみたいと思います。 これもよくライブラリにお世話になりがちなのですが、CSSでflexを使うのが当たり前になって来た昨今、要素を画面中央に配置することなど、もはや朝飯前。 表示非表示を切り替え、そこにアニメーションをつける程度であれば、わざわざライブラリを使うほどでも無いわけです。 いやむしろ、こだわったデザインや細かな動きなどの注文が来ると、ライブラリを使ったがためにエラく面倒なことをする羽目になることも多々ありますよね。 ということで、できるだけシンプルなモーダルを作りたいと思います（アニメーションは省きます）。 まずはポイントを確認 上記でも軽く触れたとおり、モーダルのコンテンツが画面中央に配置される
今更ながら、スクロール連動でフェードインさせてみる | バシャログ。
Oculus Questを購入し、24日の到着を待ちわびている kouraku です。おはこんばんちわ。 さてさて今回は、スクロール連動で要素を下から上にふわっとフェードインさせる機能を作ってみたいと思います。 まずはポイントを確認 スクロール連動で押さえておくポイントは以下３点です。 スクロール値 → $(window).scrollTop 連動対象となる要素の位置 → $('要素').offset().top 画面の高さ → $(window).height() あとは、画面のどのくらいの位置に入ったらフェードインさせるかも考えておくと良いと思います。 これらのポイントを踏まえて、 $(window).on('scroll') のタイミングで、 スクロール値と要素の位置を比較し、 一定の条件に適合した場合クラスを付与する といった一連の処理をつくることができれば完成しそうですね。 では
参考にしたい！ローディングやオープニングアニメーションが素敵なサイトまとめ | バシャログ。
こんにちは。sitoです。 みなさま連休の予定ばっちり決まっているのでしょうか。 sitoは連休に向けて、kourakuから教えてもらった『Beat Saber』を買うかどうかむちゃくちゃ悩んでいる今日このごろです。機材一式そろえることを考えると結構高い！ でも、たぶん、買うんだと思います。たぶん。 さて、今回は、ローディングやオープニングアニメーションがかっこいいサイトをピックアップしてみました。 LARGO Inc. https://largo.studio/ オープニングのロゴや、キャッチコピーのアニメーションがかっこいい。 ARCHI SITE MOBIUS https://asmobius.co.jp/ メインビジュアル表示のアニメーションから、その後のスライドショーまで一貫してかっこいいです。 UZU BY FLOWFUSHI https://www.uz.team/jp/ 下
【MySQL】大量のデータを登録する際に処理時間を大幅に削減する方法 | バシャログ。
みなさんこんにちは。 最近散歩にはまっているyamashitaです。あまりにも不健康な生活をしているので始めてみましたが楽しいです。 休みの日に会社の近くに行くのは少し抵抗ありますが、馬車道から元町辺りまで歩いて帰ってくるのオススメです。 まあそれも桜の季節と共に終わりを迎えそうですが。 次は5月頃に港の見える丘公園のバラが見頃になるらしいのでフラッと言ってみたいですね。 さて今回は大量のデータをデータベースに登録する際にかかる時間を大幅に削減する方法について紹介します。 状況としてはお客さんから預かったCSVファイルを読み込み、それを登録するという物でした。 LOAD DATA INFILE 構文 大量のデータを登録する際に一つずつINSERTするのではなく、一つのファイルを読み込んでその中身を一気に登録します。 この時お客さんからもらえるCSVファイルとデータベースの構成が全く一緒なら
【Adobe XD】便利なプラグイン紹介 | バシャログ。
こんにちは。sitoです。 みなさん、XDのプラグイン、使ってますか？ 最近どんどん便利なプラグインが増えているようなので、sitoもいくつか導入してみました。 その中で、使ってみて便利だったプラグインをご紹介します。 Remove Decimal Numbers 図形等をリサイズしていて、小数点がついてしまったときに、整数（小数点以下切り捨て）に直してくれるプラグイン。 今まで手で地道に消していたので、めっちゃ楽になりました！ Stark カラーブラインドのシミュレーションと、コントラストチェックができるプラグインです。 カラーブラインドシミュレーションはアートボードごと、コントラストは２つのレイヤーを選択してチェックすることができます。 Ikono フリーアイコンサイト「ikonate」のプラグインです。 XD内でアイコンを選択して配置できるようになります。 線の太さを選択できたり、ア
今更ながら、親ボタンの周りに子ボタンを扇状に表示させてみる | バシャログ。
PSVR用『Beat Saber』が遂に発売されました！気分はジェダイで毎日ノリノリな kouraku です。 おはこんばんちは。 さてさて今回は、JS（jQuery）を使って、マテリアルデザインのFab（Floating Action Button）をクリックした時に、そのボタンの周りに子Fabが扇状に現れる、という動きを作ってみたいと思います。 今回作成する内容 親Fabをクリックすると、周辺に子Fabが扇状に表示。 子Fabが1個の時は親Fabの真上の位置(rotateZ(0))に表示。 子Fabが2個以上のとき、1番目の子Fabは親Fabの真上の位置、 最後の子Fabは親Fabの左側の位置(rotateZ(-90deg))、 間の子Fabは等間隔の位置(rotateZ(0〜90の間))に表示。 子Fabを扇状に表示させるには 例えば子Fabが2個あったとして、 1個目の子Fabを
プロトタイピングツール「figma」を使ってみた | バシャログ。
こんにちは、koyaです。 昨年から始めたスノーボードですが、今年の冬は毎週末スノーボードに行ってます。 常連のコンビニの店員にも「日焼けしたね」って言われてしまうくらい日焼けしました。日焼け止め大事。 さて、タイトルの通り今回は最近ぼちぼち名前を見かけるようになった「figma」を使ってみたので紹介しようと思います。 figmaとは 簡単に言うとsketchと AdobeXDのいいとこ取りをしたプロトタイピングツールです。 Figma: the collaborative interface design tool. このツール、基本無料で利用することが出来ます。 さらにブラウザベースのため、環境に左右されることなく使えます。 無料でここまで出来るので、大きいチームで使う場合以外はフリープランでも問題ありません。 figmaの良いところ ブラウザベースで誰でも使える コンポーネントが使い
【WordPress】Gutenberg入門①Gutenbergってどんなもの？ | バシャログ。
いきなり寒くなりましたね。年末年始まで風邪をひかずに頑張りたいyanagimachiです。 さて先日、WordPress5.0 “Bebo”が出ました。もう5.0.1も出ています。 今回の大きな変更といえば新しいエディタ「Gutenberg（グーテンベルク）」です。 今までのビジュアルエディタやテキストエディタ、よくあるWYSIWYGエディタとは違い、ブロックベースのエディタです。いわゆる見たまま編集ができるようになり、だいぶ見た目が変わりました。 今までのエディタ Gutenberg 今までの投稿はどうなるの？ タイトル＋本文＋カテゴリのシンプルな投稿で比較してみます。 ビジュアルエディタで入力した簡単なHTMLの場合 ビジュアルエディタで入力した簡単なもの（タグでいうとp,em,strong,ol,ul,li,blockquote使用）の場合、Gutenbergに変えたところ、本文が全
今更ながら、格子状に並べたボックスをフェードイン・フェードアウトさせてみる | バシャログ。
先日注文した冷凍イカが届いたので、これまでやったことがなかった下処理に挑戦中の 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
【WordPress】Gutenberg入門②ブロック：一般ブロック | バシャログ。
明けましておめでとうございます。 年末年始に引きこもっていたら、寒さへの耐性がなくなってしまったyanagimachiです。 慌ててユニクロの極暖を買ってきました。 さて、今回はGutenbergのブロックについて勉強していきたいと思います。 ※WordPress5.0.2で確認 Gutenbergエディタ右上の「ブロックを追加」で出てくる 一般ブロック フォーマット レイアウト要素 ウィジット 埋め込み とブロックを選択しているときにのみ出る インライン要素 の6つの種類のブロックがあるようです。 段落 サイドバーでの説明：ブロックを使って、いろいろな物語を組み立ててください。 タグ：p できる：テキスト（左寄せ、中央寄せ、右寄せ）、太字、イタリック、リンク、打ち消し サイドバーでできる：文字サイズ（小、通常、大、特大）、ドロップキャップ（先頭文字を大きくする）、背景色、文字色、追加CS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【WordPress】一部のブロックだけ使いたい、それ以外は非表示にしたいという時に使えるプラグイン「Block Manager」 | バシャログ。
