HTML、CSSの次に。WordPressをカスタムしよう。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
そして今回はWordPressの中にページを一つ作ってみましょう。WordPressの用語もしれっと織り交ぜていくので同時に学んでくださいね。 なお今回も前回に引き続きlocalというアプリを使用します。WordPressをお使いのPC上で簡単に使用できるようになります。 HTMLとCSSを学んだ方であれば、あとはデザインを落とし込めばWordPressを使ったサイトをコーディングできるようになります！ それでは行ってみましょう。 WordPressで作れるページについて まずはデフォルトで作れるページについて触れてみます。とくによく使うページとしてトップページ・固定ページ・投稿が存在します。それぞれ下記の通りの機能です。簡単なサイトであればこれだけで構成されることもあります。 トップページ ホームページとも言いますが、URLをブラウザで検索して開くと一番最初に開かれるページです。 ↓作成
設定が一切不要でページロード中にプログレスバーを自動で実装してくれるスクリプト・「pace.js」
pace.jsは設定が一切不要でページロード中にプログレスバーを自動で実装してくれるスクリプトです。何の設定も無くJSとCSSを読み込むだけで上デモのようにページロードのプログレスバーを表示してくれます。 非依存で単体で動作してくれます。デモではロード時間までをパーセントで表示していますが、これらも全て自動で処理してくれます。 プログレスバーはCSSで管理されており、いくつか選べるようになっています。プロジェクトページでCSSがダウンロードできるのでお好みのスタイルを選んでください。 <script src="https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/pace-js@latest/pace-theme-default.
)
Grid.js - React/Angular/VueをサポートしたHTMLテーブルライブラリ MOONGIFT
HTMLで使ってデータをテーブル表示するのは簡単です。しかし、ちょっとUIをよくしたり、ソートなどの機能を追加しようと思うと、途端に面倒になります。素のHTMLのままではとても使い勝手がいいとはいえません。 そんなHTMLテーブルを手軽に高機能化してくれるライブラリがGrid.jsになります。 Grid.jsの使い方 データはJSONで渡すだけです。 HTMLを使うこともできます。 ページネーションも使えます。 キーワードによるフィルタリング。 ソート。 横に長いテーブルも問題ありません。 Grid.jsはライブラリ依存がないJavaScriptで作られています。しかし、Angular/React/Vueをサポートしており、フレームワークと組み合わせて高機能なテーブルを提供できます。足りない機能はフレームワーク側で提供すればいいでしょう。 Grid.jsはTypeScript製のオープンソ
スマホ対応の優れもの！クリック・タップの直前にページを先読み、高速表示する超軽量スクリプト -instant.page
ユーザーがリンクをクリックする際のhoverとタップする際のtouchstartに合わせて、クリック・タップする直前にページのHTMLをプリロードし、高速に表示するわずか1kBの超軽量スクリプトを紹介します。 ページに外部スクリプトを1つ加えるだけの簡単実装です。 instant.page instant.page -GitHub instant.pageの特徴 instant.pageのデモ instant.pageの使い方 instant.pageの特徴 instant.pageはprefetchを使用し、ユーザーがクリック・タップする直前にページをプリロードして、ページを高速に表示します。 ユーザーがリンクをクリックする際には、そのリンクの上にマウスを移動します。そのリンクをユーザーが65ミリ秒間ホバーした場合、そのリンクをクリックする確率は1/2であるため、この時instant.p
WEMO | コピペで終わらない、本質的な理解を目指した知識整理のメモをお届け。
jQueryをCDNで読み込む時のフォールバックの記述「window.jQuery || document.write()」って何ぞや？コードの意味を読み解い...
サイトのパフォーマンス改善で重要なクリティカル レンダリング パスについて | コリス
ブラウザがページを表示する際にサーバーからHTMLのレスポンスを受け取ると、スクリーンにピクセルが描画されるまでに多くのステップが必要になります。ブラウザがページの最初のペイントを実行するために必要とするこのシーケンスは「クリティカル レンダリング パス(Critical Rendering Path)」と呼ばれます。 クリティカル レンダリング パスを理解することで、サイトのパフォーマンスを改善するのに役立ちます。 Understanding the Critical Rendering Path 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 クリティカル レンダリング パス(Critical Rendering Path)には、6つの段階があります。 クリティカル レンダリング パスの6つの段階 01. DOMツリーの構築
Tabulator - Interactive JavaScript Tables
The easy to use, fully featured, interactive table jQuery plugin Download 3.2 Interactive Tables Made Simple A lightweight, fully featured, interactive table jQuery plugin. Version 3.2 Out Now! Column Calculations, Multi-level Grouping, Touch Events, Nested Data Field Definitions, Header Filter Functions, Scroll Keybindings and much more! Checkout the news article to find out more! Tabulator allow
pageAccelerator - JavaScriptだけでWebページ読み込みを高速化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webページの読み込み速度は速ければ速いほどメリットがあります。スマートフォンアプリのようにUIはすべてアプリの中にあり、データだけをやり取りする方法が主流になっている中、Webブラウザが遅く感じられてしまうとユーザはあっという間にブラウザから離れていってしまうでしょう。 今回は簡易的にページ読み込みを高速化してくれるpageAcceleratorを紹介します。 pageAcceleratorの使い方 pageAcceleratorはTurbolinkやpjaxと呼ばれる仕組みに近いものとなっています。まずスクリプトを読み込みます。 <script src="page-accelerator.min.js"></script> 後はpageAcceleratorを実行するだけです。
ウェブページの重さを計測して高速化に向けたアドバイスをくれる「imgix Page Weight Tool」
ウェブサイト上に画像をアップロードする際、複数サイズの画像を用意したりファイルフォーマットを変換したりすることで、少しでもファイルサイズを小さくしてサーバーに負荷がかからないようにしますが、こういった地味な作業は取り扱う画像の数が多くなれば多くなるほど面倒になっていくものです。そんな画像加工関連の処理を自動かつリアルタイムで行ってくれるサービスが「imgix」で、ウェブページを表示する際に重要な「ページの重さ」を計測してくれるサービス「imgix Page Weight Tool」を提供しているので実際に計測してみました。 imgix Page Weight Tool • Learn how to improve your site or app’s speed. https://pageweight.imgix.com/ 「imgix Page Weight Tool」の使用方法はとても
ウェブサイトで事前レンダリングする方法
ウェブサイトで事前レンダリングする方法を紹介します。 １．はじめに 先日発表された、モバイルウェブ高速化を目的としたプロジェクト「AMP」の記事を読んでいたところ、事前レンダリングという手法が使われていることを知りました。 AMPプロジェクト ということで、本エントリーで事前レンダリングについて紹介します。 ２．事前レンダリングとは 事前レンダリング（Prerendering）とは単語が示すとおり、あるページを表示している間に別のページの読み込みとレンダリング実行するものです。 Google検索では、検索結果の1番目に表示されたサイトは、この仕組みを使って事前レンダリングされています。 ３．ウェブサイトで事前レンダリングする ウェブサイトで事前レンダリングするには、ページに下記のlink要素をページに埋め込みます。 <link rel="prerender" href="http://us
Animsition
AnimsitionA simple and easy jQuery plugin for CSS animated page transitions.Download on GitHub Tweet 58 different animations Fadefade-infade-outFade Demo Fade upfade-in-up-smfade-in-upfade-in-up-lgfade-out-up-smfade-out-upfade-out-up-lgFade Up Demo Fade downfade-in-down-smfade-in-downfade-in-down-lgfade-out-down-smfade-out-downfade-out-down-lgFade Down Demo Fade leftfade-in-left-smfade-in-leftfade
jQueryでページ分割ができる「SimplePaginationプラグイン」
jQueryでページ分割ができる「SimplePaginationプラグイン」の紹介です。 １．はじめに ページ分割の手法は色々ありますが、このエントリーで紹介するプラグインを利用することで簡単にページ分割を行うことができます。 が、配布サイトの説明だけで実現するのはかなり困難で、このエントリーでとりあえず動作するレベルのものを紹介したいと思います。 ２．プラグインのダウンロード SimplePaginationプラグインのページにアクセスし、Downloadにある「here」をクリックしてアーカイブをダウンロードします。 ダウンロードしたアーカイブを展開し、中にある、 jquery.simplePagination.js simplePagination.css を利用します。 ３．基本 ページ分割用のテキストを用意します。ここではサンプルとして8ページ分用意します。 <div clas
Web サイトのパフォーマンスレポートを自動で作成してくれる Google Pagespeed Insights for WordPress
PageSpeed Insights を使用した Web ページのパフォーマンスレポートを WordPress の管理画面上で作成して見ることができるプラグイン、「Google Pagespeed Insights for WordPress」 を使ってみたので紹介。 Google Pagespeed Insights for WordPress ： WordPress Plugins プラグインのインストール プラグインのインストールは管理画面から 「Google Pagespeed」 などと検索すれば出てくると思いますので、そこから行います。 Pagespeed Insights API キーの取得 ただ、このプラグインを使用するには Google Pagespeed Insights の API キーが必要ですので、そちらを先に取得しておきましょう。 APIs Console に G
[JS]ページを表示する時にかっこいいアニメーションを加えるスクリプト（WordPressにも対応） -Animsition
ページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加えるjQueryのプラグインを紹介します。 アニメーションは表示する時だけでなく、リンクがクリックされて離れる時にも適用することができます。 Animsition Animsition -GitHub AnimsitionはWordPressのプラグインとしても用意されているので、WPを使っている時はプラグインの方が簡単に利用できると思います。 Page Transition -WP Plugin Directory Animsitionのデモ Animsitionの使い方 Animsitionのデモ デモはChrome, Safari, Firefox, Opera, IEは10+でご覧ください。 demo: fade エフェクトは全部で18種類！ その中からデモで、9種類が楽しめます。 demo:
![[JS]ページを表示する時にかっこいいアニメーションを加えるスクリプト（WordPressにも対応） -Animsition](https://cdn-ak-scissors.b.st-hatena.com/image/square/9777d3ddb94171e6f761197ff33a27f86a16ce31/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082901.png)
Firefox 25で表示が遅くなった場合の対処方法
Firefox 25でページ表示が遅くなった場合の対処方法を紹介します。 １．問題点 先日、会社で使っているFirefox 24が自動更新でFirefox 25にアップデートされたあと、ページの表示時間が劇的に遅くなりました。 具体的には、これまで数秒で表示されていたページが、表示されるのに数十秒かかるようになってしまいました。 最初はアップデートが原因と気が付かなかったのですが、ネットで色々調べるとFirefox 25の問題であることが分かりました。 ２．原因 Firefox 25で自動プロキシ設定スクリプト（proxy.pac：ファイル名は任意）を扱う際のバグらしいです。 Bug 923458 - [Regression v24 to v25] Slow loading of websites via proxy / pac file なお、この問題は会社などで下記のように自動プロキシ
事前レンダリングでウェブページの表示時間を高速化
[対象: 上級] 事前レンダリングと呼ぶ技術を使って、ウェブページの表示時間を高速化する方法をこの記事では解説します。 事前レンダリングとは 事前レンダリング (Prerendering)とは、その名のとおり、ページの読み込み（正確にはレンダリング）を前もって実行する仕組みです。 Google検索で採用されている「インスタントページ」には事前レンダリングが使われています。 下のキャプチャは、Googleで「Amazon」を検索したときのChromeのタスクの状況をタスクマネージャで確認したものです。 「事前レンダリング」でAmazon.co.jpが出ています。 「Amazon」で検索したユーザーはかなり高い確率で（1位に出てきた）Amazonのホームページをクリックするはずです。 Chromeは先回りして、ユーザーがクリックしなくてもAmazonのホームページを取得および描画、つまりレンダ
PACE — Automatic page load progress bars
What is Pace? Include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and ajax navigation. No need to hook into any of your code, progress is detected automatically. Download If you’re a developer, download Pace directly here: Pace.js Themes Enter a color:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryで処理されるタイミング 【div箱の高さが取得できない！の原因１】
WordPressはFirefoxのPV数が2倍 – kumonchu.com
事前レンダリングでページ遷移した時の表示速度を爆速にする | TechMemo