Font AwesomeはVue用にパッケージが公開されているので、npmなどでインストールして利用することができます。しかし、TwitterやFacebookのアイコン（以下、ブランドアイコン）を利用する際には公式ドキ …続きを読む

Vueの練習も兼ねてハンバーガーボタンジェネレーターを作りました。 使い方 使い方はいたって簡単で、ハンバーガーボタンの縦、横、線の太さを入力するだけで自動的HTML、CSS、jQueryのコードが生成されます。あとは、 …続きを読む

function.phpをいじって自前でカスタム投稿タイプを作成し、自前のカスタム投稿用のカテゴリー（カスタムタクソノミー）作成しましたが、記事編集画面にが出ませんでした。 ‘show_in_rest&#82 …続きを読む

display : flexは便利でもうfloatとclearfixには戻れない感じです。そんな便利なflexですが、先日Twitterでalign-contentが効かないという話がありましたので、その原因と仕組みにつ …続きを読む

Gifアニメーション楽だけどは重いし、画質が悪いし、という時にjavascriptでパラパラマンガを実装する方法です。特別なプラグインやjQueryも不要です。デモはこちら やり方 まずは画像を用意します。パラパラマンガ …続きを読む

知り合いのデザイナーと共同で、マネしたいポイントをちょっぴり解説したWebデザイン集を作りました（企画・実装担当）。普通のWebデザインギャラリーはサムネイルとリンクだけですが、このサイトはそれぞれにマネしたいポイント、 …続きを読む

先日リリースされたPhotoshop 2019にアップデートした際、ファイルを読み込むとフリーズしてしまう現象に出会ったのでその時の対処法になります。 現象 OS：Mac OS X 10.13 High Sierra i …続きを読む

設計事務所向けの、特に独立開業したての建築家向けのWordPressテーマ、The Architectを作りました。無料で誰でも利用できます。 デモはこちら ダウンロードはこちら 特長 建築設計事務所のWebサイトに必要 …続きを読む

次期エディタのGutenbergで記事の保存ができなくなりました。固定ページやカスタム投稿タイプではできるのですが、投稿の時だけエラーが出てしまいます。その試行錯誤した時の話です。 原因はセキュリティプラグイン 結論から …続きを読む

パッと見た目暗号化されているようなページを作る方法です。実際に暗号化されていませんし、選択してコピーすれば元のテキストも読み取れます。あくまで見た目だけの話です。 Lorem ipsum dolor sit amet, …続きを読む

info@は推測できるアドレス よく、お問い合わせ用にinfo@ドメインのようなメールアドレスを作るかと思いますが、このアドレスは作らないほうが、場合によってはセキュリティ的に高まるかもしれません。そうでなくても、無意味 …続きを読む

Adobe illustratorで作ったベクトルの円グラフをanime.jsで動かす方法です。ここで主に紹介するのは、真ん中に穴の空いたドーナツグラフです。完全な円グラフもできないことはないのですが、いくつか条件があり …続きを読む

横並びのレイアウトにdisplay : flex、段組みにdisplay : girdがあり、いずれも便利ですよね。あの便利さを知ってしまうとfloatを使ってのレイアウトには戻れません。floatはオワコンになってしま …続きを読む

最近、何かと悪いイメージがあるCoinhiveですが、そのCoinhiveを使った寄付サイトを作りました。もちろん、同意を得た上でないとマイニングは始まらないのでご安心ください。 技術それ自身に善悪はないので、あるとすれ …続きを読む

当ブログでもハンバーガーボタンの作り方や手軽に作れるハンバーガーボタンジェネレーターを掲載していますが、こちらはjQueryを使ったものになります。しかし、jQuery(Javascript)を使わずCSSだけでハンバー …続きを読む

gulp-autoprefixerなど使う時、Emmetの自動でベンダープレフィックスを付与する機能は余計なお世話だったりします。そのためにEmmetの設定を変更する必要があります。 手順としてはEmmetのスニペット変 …続きを読む

当サイトで紹介しているアニメーションで×印になるハンバーガーボタンや横から出てくるドロワーメニューの作り方をまとめたテンプレートを作成しました。このHTMLとCSSとJSを読み込めば手軽にドロワーメニューを実装することが …続きを読む

目次 Google Cloud Platformに登録 WP Mail SMTPにClient IDとClient Secretを入力 Google アカウントを認証 エラーが出たよ WP Mail SMTP ver 1 …続きを読む

オーソドックスなやり方 プラグインいれなくてもテンプレートにコピペでいけます。 今回紹介するのはブログ（type : BlogPosting）の構造化データです。JSON-LDを使って基本的なデータを埋め込みます。構造化 …続きを読む

Youtube APIを使ってサムネイル画像をクリックで再生する コードは以下のようになります。コピペで使ってもらって構いません。 デモはこちら Youtube側でも動画のサムネイルはカスタマイズできますが、Webサイト …続きを読む

悪名高き（？）Coinhiveを使ったWebサイトマイニング サイト運営者が秘密裏に自分のWebサイトに仕込み、密かにマイニングしていたニュースにも登場するCoinhiveですが、ユーザーに告知した上でマイニングする方法 …続きを読む

自分はSEOの専門家ではありませんが、SEOについて留意しておきたいことを書いておきます。 SEOは魔法ではない SEO(Search Engine Optimization)は検索結果の上位にくるための施策ですが、魔法 …続きを読む

ABBAの2つ目のBは逆向きが正しい表記 小ネタですが。正しい表記を画像ではなくテキストで実装する方法です。デモは以下になります。 ABBA やりかたは至って単純で、2つ目のBにspanタグで囲って、inline-blo …続きを読む

毎回毎回設定するのが面倒なのでまとめました。 ここ最近触り始めたgulpですが、色々試行錯誤してみて以下のような初期設定にしてみました。基本ローカルに毎回インストールするので、インストールをバッチファイルにしました。 イ …続きを読む