【jQuery】ページ内に指定したタグ要素が何個あるか数える方法－size
jQueryのsiseを使うと指定したタグ要素がページ内に何個あるか数えることができます。 ページ内にdivタグが何個あるか数えて表示させてみます。 CSSの記述例 ※必要に応じて書き換えてください。 <style type="text/css"> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro&qu […]
【Webディレクターになりたい人必見】フロントエンドエンジニアがやるWebディレクションの流れ
- 2021.08.13
- Webディレクション
Webディレクションがどんなことやってるのかわからない人、普段フロントエンド開発やってるがWebディレクターをやったこと無い人向けにフロントエンドエンジニアがWebディレクターをやった際の1例をご紹介します。 （会社、業種、案件等の状況によってフローは変わります） ※企業のオフィシャルサイト制作（30ページ程度）で行うWebディレクションを想定してます。 Webディレクションのフロー おおまかなフ […]
【PHP】大量ファイルが存在するディレクトリをWEBサーバー上で一気に圧縮（zip）・ダウンロードする方法
【PHP】大量ファイルが存在するディレクトリをWEBサーバー上で一気に圧縮（zip）・ダウンロードする方法 WEBサーバー上の大量ファイルが存在するディレクトリをローカルにバックアップする必要があり、ダウンロードに時間が掛かったり、稀に数ファイルだけダウンロードに失敗することがあります。 そんな時はWEBサーバー上でディレクトリをzipファイルに圧縮して、そのzipファイルをローカルにダウンロード […]
【PHP】大量ファイルをWEBサーバー一気にアップロードして解凍（unzip）・展開する方法
WordPressやEC-CUBE等をWEBサーバーにインストールする時、大量のファイルをアップロードする必要があります。大量ファイルのアップロードには時間が掛かったり、稀に数ファイルだけアップロードに失敗することがあります。 そんな時は大量ファイルをローカルでzipファイルに圧縮して、そのzipファイルをWEBサーバーにアップロードし、WEBサーバー上で解凍（unzip）・展開すると短時間で確実 […]
【JavaScript】ビフォー・アフター画像をわかりやすく比較するプラグイン（TwentyTwenty）
- 2021.08.06
- プラグイン, ビフォーアフター, TwentyTwenty
2枚ビフォー・アフターをわかりやすく比較できるJavaScriptプラグイン（TwentyTwenty）です。 「基本的な使用法」「垂直方向」「並んで」、3パターンの利用方法を紹介します。 twentytwentyの読込CSS ※必要に応じて書き換えて下さい。 <link href="css/foundation.css" rel="stylesheet&quo […]
WordPressサイトで不要なjsやcssファイル読込を削除する方法【PageSpeed Insights対策】
- 2021.08.04
- functions.php, PageSpeed
WordPressでサイトを作った後、PageSpeed Insightsでサイトの読込時間を計測すると結構遅かったりします。 Wordpressはデフォルトで必要無いjsやcssファイルを読み込んでるので、必要無いページでは読込を削除してみます。 今回、 wp-content￥themes￥テーマディレクトリ￥functions.php ファイルを編集して読込ファイルを削除してみます。 Word […]
【XAMPP(ザンプ)】作業用ディレクトリをバーチャルホストにする手順
前回「WindowsでPHPを動かすための環境構築手順【XAMPP（ザンプ）】」を紹介しました。 XAMPPインストール後のデフォルトバーチャルホスト（localhost）は「C:￥xampp」にインストールした場合「C:￥xampp￥htdocs」配下となります。 私の場合サイトや案件頃に作業ディレクトリを別けたいので 例） C:￥xampp￥htdocs￥worksite1 C:￥xampp￥ […]
WindowsでPHPを動かすための環境構築手順【XAMPP（ザンプ）】
- 2021.07.29
- XAMPP
レンタルサーバーを契約している人は大体PHPは利用できるので必要無いですが、ローカルでWindows上でPHPを動かすためのXAMPP（ザンプ）環境構築手順となります。 1.XAMPP（ザンプ）インストーラーをダウンロード 「XAMPP Installers and Downloads for Apache Friends」 よりダウンロードします。 2.XAMPP（ザンプ）をインストール ダ […]
【jQuery】指定したタグ要素を、指定のHTMLタグ要素で囲む方法－wrapInner
jQueryのwrapInnerを使って、予め用意したclass=txtタグをwrapInnerを使用し、sectionタグで囲んでみます。 後から一時的に指定の文字だけ目立たせたい時等に使えます。 予め用意するタグ（class=txt）と囲むタグ（section）のCSSの記述 ※必要に応じて書き換えてください。 <style type="text/css"> b […]
【transform:scale】タグ要素を2次元（x,y）または3次元（x,y,z）に拡大・縮小表示する方法
cssのtransform:scaleを使用し、タグ要素を2次元（x,y）または3次元（x,y,z）に拡大・縮小表示します。 過去に 「jQueryの.cssとzoomでページ全体を拡大・縮小表示してみる」 を紹介しましたが、ブラウザの種類によってはcssのzoomは効かない（FireFox等）ものもありましたので、 今回はtransform:scaleを使ってタグ要素を拡大・縮小させてみます。 […]