ブロックエディタが抜群に使いやすくなるプラグイン「Snow Monkey Editor」 | バシャログ。
こんにちは。koyaです。 先日今シーズン最後のスノーボードをするために越後湯沢まで行きましたが、ボードやシューズが泥まみれになってしまいました。 例年であれば4月末まで営業しているようなゲレンデも3月末には営業終了していそうです。ただでさえコロナで外出が億劫なのに暖冬も重なって今年は散々でした。 今回紹介する「Snow Monkey Editor」はブロックエディタで記事を書く際に欲しい機能が詰め込まれているプラグインです。 ダウンロードはこちらから出来ます→Snow Monkey Editor Snow Monkeyというとテーマの方をイメージしますが、こちらのプラグインはSnow Monkeyのテーマでなくても使用可能です。 Snow Monkey Editorはインストールをすると記事編集画面の右側に「スタイル」とスノーモンキーアイコンがついたブロック表示設定項目が追加されます。
ApexCharts.js - Open Source JavaScript Charts for your website
What is ApexCharts? ApexCharts is a modern charting library that helps developers to create beautiful and interactive visualizations for web pages. It is an open-source project licensed under MIT and is free to use in commercial applications. DOWNLOAD VIEW DEMO Built for developers Integrating visualizations with ApexCharts is as simple as it can get with extensive API docs and 100+ samples ready
CSSで見出し固定＋レスポンシブ対応の表を作成
2022年4月27日 CSS, HTML, Webサイト制作 料金表やサービスプランの比較、タイムテーブルなどなど、使う場面が多い割には制限も多く、初心者には少しとっつきにくいと思われがちな表。今回はあると便利な表の見出し固定やレスポンシブ対応の方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 見出しの行を固定する 表の中の行が増えてくると、スクロールした時に表の見出しが画面から見えなくなり、なんの値だったのかがわかりづらくなります。そんな時のために、行数の多い表では一番上にくる見出しの行を固定しておくといいですね。 まずはベーシックな表を作成します。table タグに border-collapse: collapse; を指定することで、セル間のスペースがなくなってフラットな見た目になりますよ。 HTML <table> <tr class="heading"> <th>車
フェッチ API の使用 - Web API | MDN
フェッチ API は、リクエストやレスポンスといったプロトコルを操作する要素にアクセスするための JavaScript インターフェイスです。グローバルの fetch() メソッドも提供しており、簡単で論理的な方法で、非同期にネットワーク越しでリソースを取得することができます。 コールバックベースの API である XMLHttpRequest とは異なり、Fetch は Promise ベースであり、サービスワーカー で簡単に使用できる優れた代替手段を提供します。Fetch は、CORS やその他の HTTP 拡張機能などの高度な HTTP 概念も統合します。 基本的なフェッチリクエストは、以下のコードを見てください。 async function logMovies() { const response = await fetch("http://example.com/movies.
flatpickr
Introductionflatpickr is a lightweight and powerful datetime picker. Lean, UX-driven, and extensible, yet it doesn’t depend on any libraries. There’s minimal UI but many themes. Rich, exposed APIs and event system make it suitable for any environment. This “lean” philosophy translates to less size and better performance, with a bonus of not having to load 8 libraries for a calendar. Dive right int
GitHub - ankurk91/vue-flatpickr-component: Vue.js component for Flatpickr datetime picker :calendar:
CSSで画像を正方形にトリミングして縦横比を維持したまま可変してくれる方法 | RECOOORD
HOMEHTML&CSSCSSで画像を正方形にトリミングして縦横比を維持したまま可変してくれる方法 CSSで画像を正方形にトリミングして縦横比を維持したまま可変してくれる方法 HTML&CSS Photoshopでトリミングした画像をそのまま表示できればいいのですが、Webサイトだと画像サイズが均等じゃないものを表示する場面が出てきます。 例えばWordPressのようなCMSで、画像を出力する際など投稿者によってサイズがバラバラだったりします。 そこで今回はCSSで画像をトリミングし、縦横比を維持したまま可変してくれる方法を紹介していきます。 実装のサンプル まずはデモをご覧ください。 PCで見られている方はウィンドウサイズを縮めたりしてみてください。画像の縦横比は維持されていると思います。 基本的にはHTMLとCSSだけで実装することが出来ます。 HTMLの記述 <ul> <li><i
CSSの便利な疑似セレクタ「:empty」と「:blank」、その違いと賢い使い方
エラーメッセージを実装する際、エラーがある時とエラーがない時の区別は「:empty」や「:blank」を使用すると、非常に簡単にスタイルを定義することができます。 「:empty」と「:blank」、その違いと実際にどのように使用するのか、どちらが便利なのかを紹介します。 :empty and :blank 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 私は誤解していた 「:empty」と「:blank」の違い 「:empty」と「:blank」を実際に使用する場面 「:empty」の方が十分ではないと思った理由 「:empty」と「:blank」のサポートブラウザ まとめ 私は誤解していた 私は1ヵ月前のツイートで、「:empty」と「:blank」についてひどい誤解をしてました。 「:empty」は有用ではなく、「:bla
【Tips】Macのsshで「IdentitiesOnly yes」の時パスワードが保存されない問題を解決する方法 | ソフトアンテナ
Macのsshで、~/.ssh/configに「IdentitiesOnly yes」を指定すると、毎回上記画面のようにパスワードの入力を求められるようになり困っていました。「パスワードをキーチェーンに保存」にチェックしても毎回このウィンドウがポップアップしてしまうのです。 「IdentitiesOnly yes」を指定しなければ良いのですが、「IdentitiesOnly yes」無しの設定が増えすぎると「Too many authentication failures」と言われログインできなくなってしまう問題があります。また、パスフレーズ無しの秘密鍵を使うという最終手段(?)は、セキュリティの観点からできれば使いたくありませんでした。 打つ手なしかなと思い諦めかけていたところ、偶然、意外な解決方法があることを発見しました。以下その方法を説明します。 公開鍵id_rsa.pubを~/.s
[JS]0.6kBの超軽量！基本的なDOM操作を実行するためだけに開発されたシンプルなライブラリ -nanoJS
要素にclassを加えたり、変更したり、要素を削除したり、::beforeや::afterを加えたり、要素の表示位置を取得したり、変更したり、クリックやホバーのイベントを設定したり、基本的なDOM操作を実行するためだけに開発された超軽量ライブラリを紹介します。 jQueryは使うけど、$関数や上記の挙動しか利用しないという人には、特にぴったりなスクリプトです。 nanoJS nanoJS -GitHub nanoJSの特徴 nanoJSのデモ nanoJSの使い方 nanoJSの特徴 トータル100行、0.6kBの超軽量スクリプト。 jQueryに似た構文が利用でき、オブジェクトの連鎖的もサポート。 それぞれのメソッドは単独で機能するため、削除・追加することも可能。 IE9対応（addClass, removeClass, toggleClassのみ非対応）。 nanoJSのデモ ドキュメ
![[JS]0.6kBの超軽量！基本的なDOM操作を実行するためだけに開発されたシンプルなライブラリ -nanoJS](https://cdn-ak-scissors.b.st-hatena.com/image/square/40cbc63a058df9588ea63a08df7cc3661edb7792/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201802%2F2018053005.png)
PHPMailerの使い方
今回はあらゆるところで使われているPHP用のメール送信ライブラリphpmailerの使い方を紹介します。 脆弱性がPHPMailer5.2.18より下のバージョンで発生するので新しいバージョンをお使い下さい。現在の2017年6月現在のバージョンは5.2.23です。 とても簡単にメールを扱えるライブラリーになります。phpでもmail関数が使えるので簡単にメール送信は実装できるのですが、添付ファイルやらHTMLメールなど付加機能をつかるととたんに難しくなるので一括できるこのアプリケーションで実装していきましょう。 ⇒公式サイトはコチラ 因みに当社のフォームはPHP用の強力なコンポーネントベースのメールライブラリ - Swiftmailerを使っております。 ライブラリの使い方 PHPMailerはPHP用の完全な機能を備えたメール作成および転送クラスです。 まずはcomposerでインストー
Iota
Say hello to iota. A responsive micro-framework for the grid spec powered by CSS custom properties. 1 class. That's right, one little class is all you need to get up and running. A few additional modifiers are available to unlock further layout possibilities. 584 bytes gzipped. Iota is tiny. Like, really tiny. Depending on how you set it up, Iota's filesize can be reduced even further. Because, yo
jquery.simple-scroll-follow
HTML <aside>Element to follow</aside> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="jquery.simple-scroll-follow.min.js"></script> CSS aside { position: absolute; } JavaScript $('aside').simpleScrollFollow(); position: absolute is required. 追尾する要素にはposition: absoluteが必須です。 It is not required, but for preventing a screen flickers on Google Chrome, the following is
Micromodal - Tiny javascript library for creating accessible modal dialogs
Introduction Micromodal.js is a lightweight, configurable and a11y-enabled modal library written in pure JavaScript It enables you to create WAI-ARIA guidelines compliant modal dialogs, with confidence and with minimal configuration. At just 1.9kb minified and gzipped, its a tiny library for big change. Following are some of the interactions handled by the library:- Closing modal on overlay click
Web制作者は要チェック！モーダルダイアログをアクセシブルに実装する超軽量スクリプト -Micromodal.js
ちょうどいいモーダルってなかなか見つからないんだよな、と探している人は要チェックです。シンプルで操作性もよく、アクセシブルに実装する超軽量の単体で動作するJavaScriptのライブラリを紹介します。 WAI-ARIAガイドラインに準拠したモーダルダイアログを実装。 1.9kbの超軽量のJavaScriptライブラリ。 aria属性でモーダルの開閉を切り替える。 オーバーレイをクリックすると、モーダルを閉じる。 escボタンを押すと、モーダルを閉じる。 モーダル内のタブをフォーカス。 モーダル内の最初のフォーカス可能な要素にフォーカスを合わせる。 モーダルを閉じた後、フォーカスされた要素の状態を保持。 Micromodal.jsのデモ デモでは実際の動作を楽しめます。 モーダルを閉じるトリガーは、Closeボタン、Xボタン、オーバーレイのクリック、escボタンが用意されています。
デザインが異なるランディングページも簡単に作成！WordPressの高性能な無料フレームワーク -TypeRocket
コンポーネントベースで、Webサイトやアプリを制作するために設計されたWordPressのフレームワークを紹介します。 レイアウトやコンポーネントを管理して、デザインが異なるランディングページをカスタマイズして作成することができます。 オープンソースで、完全に無料 TypeRocketはGPLライセンスで、すべての機能が無料で利用できます。Pro版はありません。 リピーターフィールド リピーター、ビルダー、エディター、マルチセレクト、イメージ、ギャラリー、その他のフィールドを含む20種類以上のフィールドタイプが用意されています。 ドキュメント TypeRocketを使用するためのドキュメント、チュートリアル、動画が完備されています。 モダンなセキュリティ ミドルウェアを作成し、さらにファイルをパブリックビューの外に保つことができます。 モダンな開発環境 Laravel ForgeやEnvo
かなりオススメ！WordPressのローカル環境が簡単に構築できる、Windowsもmac OSも対応の無料ツール -Local | コリス
WordPressのローカル環境を構築するといえば、XAMPPやInstant WordPressを利用している人が多いと思いますが、これらより簡単に、そして一度のインストールで複数の環境を構築でき、PHPなどのバージョンも簡単に変更することができる高性能な無料ツールを紹介します。 サーバーの知識がない人でも簡単に利用でき、あっという間にWordPressのローカル環境が構築できます。 UIも洗練されて使いやすく、かなりオススメです！ ローカルに、WordPressの制作環境を簡単に構築できます。 WordPressの制作環境は、複数構築できます。 サーバーの知識がない人でも、4クリックするだけでOK。 WordPress日本語版にも対応。 ローカルSSLサポート。 SSH/WP-CLIアクセス。 共有可能なURLを作成して、クライアントに見せることも可能。 柔軟な環境オプション。 PHP
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flexbox Patterns
GitHub - flatpickr/flatpickr: lightweight, powerful javascript datetimepicker with no dependencies
Vue.jsのdatepickerは「vuejs-datepicker」がおすすめ！ | カバの樹
