人気記事ランキング BEST30
当ブログの記事をランキング表示しています。
-
Vue.jsのv-forでTableを表示させてみた
Vue.js ガイド、リストレンダリングで、 v-for で配列に要素をマッピングする と言う項目を参考に、 Table を表示させてみました。 <div id="app"> <table clas... -
HTMLとCSSだけで コンテンツが表示・非表示になるボタン
ボタンを押すとコンテンツが表示し、 もう一度押すとコンテンツが非表示になるボタンの 実装方法です。 わたしのリスペクトしている 寝ログさんの紹介している シンプルなソースを わたしなりにカスタマイズ ... -
Vue.js + vue-good-table でテーブルを表示する
vue-good-table は、 VueJS 用の強力な データテーブルプラグインです。 並べ替え、列のフィルタリング、 ページネーション、グループ化などの 高度なカスタマイズを備えています。 CDN ... -
Google Fonts のパフォーマンスを最適化する
Google Fonts の読み込みついて調べてみました。 「Google Fontsを素早く読み込む」とかで 検索すると「非同期で読み込む」と言った 記事が上位に出てくるのですが、 こんな記事を発見しました。 G... -
DataTables.js の Options 設定
DataTables はHTML のテーブルに、ページ切り替え、ページ当たりの件数設定、ソート、キーワード検索などの機能を簡単に追加できるライブラリです。 DataTables は free open source... -
DataTables で Ajax data の取得と Child rows の追加
DataTables 本体に表示する データを取得します。 Ajax sourceからテーブルの コンテンツデータをロードします。 Ajax (エイジャックス) とは、 「Asynchronous Java... -
ちょっと驚き！な CSSを非同期でロードする方法
非同期でスタイルシートを ロードする最も簡単な方法 と言う記事を見つけました。 The Simplest Way to Load CSS Asynchronously ( CSSを非同期でロードする最も簡単な方法... -
WordPressのget postsで投稿記事を表示する
WordPress 最新の記事一覧を表示する方法 とかで検索すると、かなりヒットするのですが、 色々と参考にして、わたしなりに こんな感じがよいのかなと思い ご紹介いたします。 最近の投稿を5件表示する コー... -
DataTables で Responsive を有効にする際の注意事項
先日、 「DataTables.js の Options 設定」 という記事にて DataTables の Responsive 拡張機能を有効にする 方法をご紹介したのですが、 設定如何で正しく表示されないので 注意事... -
.htaccessファイルが生成されない
WordPressは、パーマリンクの設定をした時に .htaccessファイルを生成する処理を行います。 本来自動で作られる つまりパーマリンクの設定をすれば 勝手に作られるようなのですが、 わたしのWor... -
星評価を表示させるショートコード
寝ログさんで公開されている 「WordPressテーマで 星評価を表示させる ショートコードの実装方法 」 この 星評価ショートコード、 星は、Font Awesome4 を用いて表示させていて... -
WordPress 最近の投稿をドロップダウンメニュー表示する
最近の投稿 20 件を ドロップダウンボックス （ドロップダウンメニュー） 表示してみます。 ヒントは wp get archives にありました。 パラメータ 以下は投稿リストのパラメーターです。そ... -
気象庁のJSONファイルを利用して天気予報を表示してみる
気象庁のJSONデータを取得し、日本地図の都道府県名をクリックすると天気予報を表示します。日本地図はJmap jQuery pluginと言うプラグインを使用しています。 気象庁のJSONデータ 気象庁のWe... -
DataTables の Custom toolbar elements と Buttons extension
DataTablesはテーブルの周りにDOM要素を挿入してDataTables機能を制御します。このメカニズムを利用して独自のカスタム要素を挿入することもできます。 Custom toolbar elements ... -
鉄道遅延情報のJSONをテーブル(表)で表示してみた
JSONについて調べていると、鉄道comのRSSを集計して、遅延ちえんしている電車を返すJSONを提供しているサイトを発見しました。 JSONの発信元 上記、鉄道遅延ちえん情報のjsonの発信元は何なのかな？... -
「Contact Form 7」を必要なページにだけ読み込む
「Contact Form 7」で「reCAPTCHA」を Ver.3にすると 全てのページに「reCAPTCHA で保護されています」のバッジが画面右下に出現します。 しかも、「トップに戻るボタン」と「re... -
Highcharts.js の Export を有効にして Context button を表示するには
Javascriptグラフ描画ライブラリ highcharts.js ※ は、 highcharts.js 本体のみだと Context button は表示されません。 ※ 商用サイトの場合はLicenses を... -
フリーフォントをサブセット化してWebフォントにしてみる
近年、個人でも商用でも無料で利用できる日本語のフリーフォントを紹介している記事等を多くみかけますね。おしゃれなフォントやカッコいいフォントを自身のWebサイトに使いたいと思いますが、「全部の文字はいらねぇんだよな・・・」... -
ブロックエディタ (Gutenberg) でスタイルセレクト機能を再現する 2
前回では、 スタイルセレクト機能とは どんなものなのかお話しました。https://neco913.kirara.st/post-3634/ はじめに 注意最新のWordPressでは 動作しない可能性があり... -
DataTables の Scroll Resize plug-inを使ってみた
ご紹介するDataTables のプラグイン、Scroll Resize plug-in は、 2015年に導入したPage Resize plug-inの後継バージョンです。 Page Resize pl... -
ブロックエディタ (Gutenberg) にボタンを追加する
ブロックエディタのツールバーにボタンを追加してみます。 ここでは選択した文字列を特定のclassを持った markタグで囲うボタンの追加方法です。 <mark>タグは、文書内の該当テキストをハイラ... -
D3-based JavaScript charts library「 C3.js 」
チャート用JavaScriptライブラリとして Canvas ベースの「 Chart.js 」を 使ってみましたが、 SVG ベースのライブラリ 「 D3.js 」の チャート生成に特化して作られた 「 C3.js 」を... -
Chart Library CanvasJS と Highcharts を使った感想
Web pageでグラフを描写するための JavaScriptライブラリでおすすめな CanvasJS と Highcharts の二つ。 双方とも商用利用の場合 ライセンスが必要なので、 使い分け※ は厳しいと思... -
鉄道遅延情報のJSONを条件分岐で表示してみる
「if文」と言うと「もし○○だったら××する」的な条件分岐を書くときに使いますが、このif文で論理演算子を使うことで、より複雑な条件式を定義することができるようです。 遅延ちえん情報の取得 先ずは遅延ちえん情... -
Vue.js の Grid Component Example を試してみた
最近、Vue.js と言う文字が 気になったので調べてみました。 Vue.js (ヴュージェイエス)は、 jQueryと同じような JavaScriptのフレームワークで、 他のJavaScriptライブラリを使用... -
ブロックエディタ (Gutenberg) でスタイルセレクト機能を再現する 3
前回では、 一部のテキストに スタイルを当てる方法を ご紹介いたしました。 https://neco913.kirara.st/post-3723/ はじめに 先ずはじめに、 導入するにあたり gutenbe... -
DataTables + Font Awesome 5
DataTables は、 多数のアイコンを使用しませんが、 情報をエンドユーザーに伝えるために いくつかのアイコンを使用します。 今日は、 このいくつかのアイコンと Buttons を Font Awesome... -
テーマ Luxeritasのbodyの終了タグ手前にカスタムフィールドを組み込む
ヘッダーを追加できる テーマ Luxeritasは、 記事や固定ページ単位で ヘッダーを追加したい場合は、 記事投稿(編集)画面で、 カスタムフィールドに addhead という名前を追加し、 値の部分に C... -
Vue.js + vue-tabs-component でTab を表示する
vue-tabs-component は、 タブを簡単にレンダリングするための Vue component です。 CDN <script src="https://cdn.jsdelivr.net/n... -
SILオープンフォントライセンス？ 予約されたフォント名？ って何？
「フリーフォントをサブセット化してWebフォントにしてみる」と言う記事を書きましたが、 Webフォント用にファイル形式を変換したり、サブセット化をしたりすることは「改変」にあたるということで、フォントのライセンスに...