技術情報

技術情報

Windowsに「Node.js」 と「Gulp.js」をインストールして、WordPressテーマのSimplicityの子テーマにあるCSSをMinify化して読み込んでみた

「Gulp」というタスクランナーが以前から気になっていたので、当サイトで採用しているWordPressテーマのSimplicityで適用してみることにしました。 今回は「Gulp」でCSSのMinify化(圧縮)を行ってみたのでご紹介いたし...
技術情報

WordPressのエディタで挿入する画像をプラグインを使わずに指定したサイズで挿入できるようにしてみた

WordPressの「メディアを追加」で挿入出来る画像サイズはデフォルトだと小、中、大の3つになります。一度画像を挿入した後にエディタのビジュアルモードで画像を選択すると、サイズを自由に編集することができます。ただ、それだと二度手間になって...
技術情報

VCCWとWordMoveで本番サーバー(エックスサーバー)とローカル環境を同期してみた

welaika/wordmove: Capistrano for Wordpress 前回はVagrantとVCCWでWindows10のローカルにWordPressの環境を構築する方法をご紹介いたしました。 今回はVCCWとWordMov...
技術情報

Twitterのツイート時の画面の違いを検証してみた

Twitterのボタンでツイートする時の画面に違いがあることを、以前から不思議に思っていたので検証してみることにしてみました。 検証方法 PC、またはTwitterアプリが入っているスマホであらかじめログインしておき、検証用の画面を作り、そ...
技術情報

HTML5.1で導入されたmenuとmenuitemタグで独自のコンテキストメニューを作ってみた

右クリックで表示されるコンテキストメニューをHTML5.1で導入された<menu>と<menuitem>タグで独自に作れるという話を聞き、早速作ってみることにしました。 独自のコンテキストメニューを表示する 下記はFirefoxの最新版で確...
技術情報

VagrantとVCCWでWindows10のローカルにWordPressの環境を構築してみた

VCCW - A WordPress development environment. 今まではWordPressのローカル環境はXAMPPで行っていたのですが、VCCWというのが話題になっているようなので、導入してみることにしました。 V...
技術情報

Facebookでのページ表示を高速化させる「Instant Articles」をWordPressに導入してみた

Instant Articles | Facebook 以前から「Instant Articles」は気になっていたのですが、下記の「ICS MEDIA」さんの記事がとてもわかりやすく、よさそうだったので、参考にして当サイトでも導入すること...
技術情報

SVGとアイコンフォントを作ってWordPressテーマの「Simplicity」に表示してみた

以前、「Simplicity」で表示されるPCヘッダーとモバイルメニューのスクロール時に、固定表示/非表示する動作をボタンで切り替える方法をご紹介いたしました。 そこで表示しているボタンをもう少しピンと来るようなものにしたいと思い、それらし...
技術情報

WordPressテーマの「Simplicity」で表示されるモバイルメニューの、スクロール時に固定表示/非表示する動作をボタンで切り替えるようにしてみた

前回、「Simplicity」で表示されるPCヘッダーのスクロール時に、固定表示/非表示する動作をボタンで切り替える方法をご紹介いたしました。 今回はモバイルでもボタンで切り替えられるようにしてみたのでご紹介いたします。 js 下記のjsを...
技術情報

WordPressテーマの「Simplicity」で表示されるPCヘッダーの、スクロール時に固定表示/非表示する動作をボタンで切り替えるようにしてみた

以前、「Simplicity」のPCヘッダーをスクロールで固定表示/非表示する方法をご紹介いたしました。 今回はそれらの動きを、ボタンで切り替えられるようにしてみたのでご紹介いたします。 js 下記のjsを「slide-header.js」...
技術情報

WordPressテーマのSimplicityで表示される、PCのブログ内検索をヘッダーに表示してみた

当サイトで採用しているWordPressテーマのSimplicityは、ブログ内検索の表示は基本的にウィジェットによってサイドバーに表示します。 検索の利便性を向上させる場合、サイドバーのスクロール追従領域に「検索」のウィジェットを設置する...
技術情報

WordPressテーマのSimplicityで表示されるタグクラウドをカスタマイズしてみた

Simplicityのウィジェットで表示されるタグクラウドは非常にシンプルで、カスタマイズする余地がたくさんあります。気分転換にでもと思い、タグクラウドの見た目を変えてみたのでご紹介いたします。 functions.php 表示順などを変え...
技術情報

WordPressテーマの「Simplicity」で表示されるPCのヘッダーを、スクロールで固定表示/非表示するようにしてみた

以前「Simplicity」の固定表示されるモバイルメニューを、スクロールで非表示する方法をご紹介いたしました。 今回はPCのヘッダーをスクロールで固定、または非表示にしてみたのでご紹介いたします。 js 下記のjsを「slide-head...
技術情報

WordPressテーマのSimplicityに記事のタイトルとURLをコピーするボタンを設置してみた

Twitterを眺めているとTLに、「WEB企画LABO」というブログの「記事タイトルとURLをコピーする」だけのボタン、というツイートが流れてきました。 記事を読むと、活用してもよいとのことでしたので、早速設置してみることにしてみました。...
技術情報

WordPressテーマの「Simplicity」で固定表示されるモバイルのメニューを、スクロールで非表示するようにしてみた

当サイトで採用しているWordPressテーマの「Simplicity」は非常に高機能で、カスタマイズでモバイルのメニューをブラウザのトップに表示して固定する機能があります。 ただ、モバイルのメニューをブラウザのトップに固定すると、コンテン...
技術情報

WordPressの記事内にある、imgのaltの中身が空の場合にエラーを表示するようにしてみた

記事内に画像を挿入した後、うっかりaltの中身を空(alt="")にして投稿してしまうことがあると思います。 ある記事を見て出来そうだったので、altの中が空の場合に投稿画面でエラーを表示するようにしてみました。 functions.php...
技術情報

WordPressテーマのSimplicityにナイトモードのようなものを実装してみた

少し前のiOSに画面を暗くして、ブルーライトを軽減するというNight Shift(ナイトシフト)という機能が実装されました。Night Shiftとはちょっと違いますが、当サイトでも夜間に色を変えるナイトモードのようなものを実装してみまし...
技術情報

ショートコードで一部のWordPressの内容を指定日時で表示する「datecontent-shortcode」プラグイン

WordPressの記事内にある一部の内容を、指定した日時で表示できないか考えていたところ、ちょうどよい方法を紹介しているサイトがありました。 訪れてみると、プラグインとして動作するようにされており、ショートコードで利用できるようになってい...
技術情報

ignoreショートコードでWordPressの内容を非表示にする

WordPressで記事を書いてる時に、内容を非表示にしたいときがあると思います。 非表示にもいろいろな方法がありますが、ショートコードを使った方法をご紹介いたします。 ignoreショートコード WordPressのテーマにある「func...
技術情報

WordPressテーマのSimplicityにローディング画面とAMPの遷移を促す要素を表示してみた

以前、WordPressテーマの「Simplicity」に「AMP」ページへの遷移を促す要素を表示する方法をご紹介いたしました。 次はもっと自然に「AMP」ページへの遷移を促したいと思い、ローディング画面を表示してその範囲内に表示してみまし...