技術情報 Simplicityに設置したAMPテンプレートにamp-lightboxを導入してメニューとして使ってみた
以前ご紹介したAMPでいろいろできることが増えたようなので、当サイトで利用しているAMPテンプレートの「Simp」に「amp-lightbox」を導入してメニューを表示するようにしてみました。amp-lightboxを導入するamp-lig...
技術情報
技術情報 
技術情報 レスポンシブで画像を表示するにはどうすればよいか調べてみた
スマートフォン、タブレット、PCでレスポンシブなWebサイトをコーディングする際に、画像もレスポンシブにする必要がある場合、どういった要素を使って、どのように画像を切り分けるか悩みます。そこで自分なりに調べてみました。img要素のsrcse...
技術情報 VCCWにphpMyAdminを入れる
phpMyAdmin以前に何度かVCCWを利用したWordPressの開発環境をご紹介いたしました。ご紹介した方法でコマンド一発でデプロイができたり、ローカルと本番を同期させることができるのは便利ですが、DBをUIで見れないことが唯一の不満...
技術情報 GulpとFLOCSSで始めるモバイルファースト的なCSS設計
hiloki/flocss: CSS organization methodology.WebでフロントをされているみなさんはCSSを書いていて命名規則が面倒、何かまんじりとしない、そんなことはありませんでしょうか。私はあります。CSSはよ...
技術情報 テンプレートエンジンのPugで使うクラス名をページ、ディレクトリなどで任意に変える
以前、テンプレートエンジンのPugをご紹介いたしました。今回はインクルードしているファイル内で記述しているクラス名を任意に変える方法をご紹介いたします。変数を使ってクラス名を変えるpug下記のように「include ../common/_h...
技術情報 CSSのactive疑似クラスでクリック時にアイコンを変える
最近疑似クラスを少し調べることがあったので、勉強がてらactive疑似クラスでクリック時にアイコンを変えるようなCSSを作ってみました。ソースコードhtmldiv要素のみで作っています。<div class="sun-moon"> <div...
技術情報 「CreateJS」を勉強してWordPressテーマのSimplicityに適用してみた
CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5「CreateJS」というJavaScriptのライブラリで作られたとあ...
技術情報 GulpでテンプレートエンジンのPugを使ってみた
Getting Started – Pug前回はGulpで利用するテンプレートエンジンのEJSをご紹介いたしました。EJSの他に、Gulpで利用できるテンプレートエンジンにはPugというものが有名なようなので、試しに使ってみました。Pugと...
技術情報 GulpでテンプレートエンジンのEJSを使ってみた
EJS - JavaScript Templates最近、静的なテンプレートを生成する方法としていろいろ試行錯誤していたのですが、JavaScriptで静的なhtmlを生成できるEJSというものを知り、使ってみることにしました。EJSとはE...
技術情報 WordPressテーマのSimplicityの記事内にあるh2をCSSの「position: sticky;」で表示位置を固定して追従させてみた
指定した要素の位置に移動した場合に、その要素の親の範囲まで固定する「position: sticky;」なる便利なCSSを知り、見出しに適用してみました。style.css子テーマの「style.css」で下記の記述をしました。.artic...
技術情報 Too many retries waiting for SSh to be avalable.と言われてLocal by Flywheelをインストールできない場合
以前、ローカルにWordPressを手軽に構築できるLocal by Flywheelをご紹介いたしました。そのLocal by Flywheelでコマンド操作をしていると、「このソフトはこのPCで使用することができません」といったようなメ...
技術情報 Local by Flywheelで構築したWordPressにGulpを適用する
先日はWordPressをローカルに手軽に構築できるLocal by Flywheelをご紹介いたしました。今回はそのLocal by Flywheelで構築したWordPressに、Gulpを適用する方法をご紹介いたします。開発するテーマ...
技術情報 WordPressをローカルに構築するならLocal by Flywheelが便利
Local by Flywheel | Local WordPress development made simpleWordPressのローカル環境を手軽に構築できるLocal by Flywheelというツールの噂を聞き、試してみました...
技術情報 mixhostでWordMoveを試してみた
以前、VCCWとWordMoveによるローカルと本番サーバー(エックスサーバー)を同期する方法をご紹介いたしました。少し前にエックスサーバーからmixhostへサーバー移転を行ったのですが、mixhostがrsyncに対応していないというこ...
技術情報 XAMPPのuserdirで設定したサイトの作業更新をGulpのBrowsersyncで自動で確認する
以前、XAMPPのuserdirによるローカルでの開発環境の構築、ローカルにあるCMSへのGulpの導入などをご紹介いたしました。今回はXAMPPのuserdirで設定したサイトの作業更新を、GulpのBrowsersyncによって自動で起...
技術情報 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とWordMoveで...
技術情報 Twitterのツイート時の画面の違いを検証してみた
Twitterのボタンでツイートする時の画面に違いがあることを、以前から不思議に思っていたので検証してみることにしてみました。検証方法PC、またはTwitterアプリが入っているスマホであらかじめログインしておき、検証用の画面を作り、それぞ...
技術情報 HTML5.1で導入されたmenuとmenuitemタグで独自のコンテキストメニューを作ってみた
右クリックで表示されるコンテキストメニューをHTML5.1で導入された<menu>と<menuitem>タグで独自に作れるという話を聞き、早速作ってみることにしました。独自のコンテキストメニューを表示する下記はFirefoxの最新版で確認す...