ハンバーガーボタンジェネレーターを作りました
使い方はいたって簡単で、ハンバーガーボタンの縦、横、線の太さを入力するだけで自動的HTML、CSS、jQueryのコードが生成されます。
imageminとNetlifyで 画像ファイルを自動最適化
画像を最適化することはページ読み込み、ひいてはSEO上でも重要になってきています。当サイトでは、node.jsのimageminというツールとNetlifyのビルド設定を用いて画像の最適化を自動で処理するようにしています。
Nuxt × Contentful × Netlifyを使って無料でブログを構築した話
2020年3月現在、このブログはNuxt × Contentful × Netlifyで構成されています。以前はWordpressで作っていましたが、時勢の流れに合わせてJAM Stack構成に変更しました。
markdown-itをカスタマイズして遅延ロードを実装する
markdown-itをカスタマイズして、loading属性を付与する方法です。
サイトをほとんどremで構成した話
ときおり、コーディングにおいてpxを使うかremを使うか、SNS上で議論になることがありますが、今回の当サイトのリニューアルに関してremを基本単位でサイトを構成しました。単純なフォントサイズだけでなく、レイアウトやボーダーにもremを使いました。
NuxtでAdobe Fontsを使う方法
Google Fontsは外部CSSを読み込むだけで使えるので手軽ですが、Adobe Fontsなどはダイナミックサブセットを使っているのでスクリプトを埋め込む必要があります。共通のスクリプトを設置する方法を解説します。
Vue CLIでFont AwesomeのTwitterアイコンを追加する方法
Font AwesomeはVue用にパッケージが公開されているので、npmなどでインストールして利用することができます。しかし、TwitterやFacebookのアイコン（以下、ブランドアイコン）を利用する際には公式ドキュメントのままやっても表示できず、少し工夫が必要です。
ハンバーガーボタンジェネレーターを作りました
使い方はいたって簡単で、ハンバーガーボタンの縦、横、線の太さを入力するだけで自動的HTML、CSS、jQueryのコードが生成されます。
Gutenbergのカスタム投稿でカテゴリーが出ない場合
function.phpをいじって自前でカスタム投稿タイプを作成し、自前のカスタム投稿用のカテゴリー（カスタムタクソノミー）作成しましたが、記事編集画面にが出ないときの対処法です。
align-contentが効かないのはflex-directionのせい？
display : flexは便利でもうfloatとclearfixには戻れない感じです。そんな便利なflexですが、先日Twitterでalign-contentが効かないという話がありましたので、その原因と仕組みについて解説します。
プラグイン不要javascriptでパラパラマンガ
Gifアニメーション楽だけどは重いし、画質が悪いし、という時にjavascriptでパラパラマンガを実装する方法です。特別なプラグインやjQueryも不要です。
マネしたいWebデザインをまとめたサイト、「マネるデザイン研究所」
知り合いのデザイナーと共同で、マネしたいポイントをちょっぴり解説したWebデザイン集を作りました（企画・実装担当）。普通のWebデザインギャラリーはサムネイルとリンクだけですが、このサイトはそれぞれにマネしたいポイント、応用できそうな場面、そして懸念点をまとめています。
設計事務所向けWordPressテーマを作りました
設計事務所向けの、WordPressテーマ、The Architectを作りました。無料で誰でも利用できます。
Gutenbergで保存できない時
次期エディタのGutenbergで記事の保存ができなくなりました。固定ページやカスタム投稿タイプではできるのですが、投稿の時だけエラーが出てしまいます。その試行錯誤した時の話です。
【ネタ】暗号化されているっぽいページの作り方
パッと見た目暗号化されているようなページを作る方法です。実際に暗号化されていませんし、選択してコピーすれば元のテキストも読み取れます。あくまで見た目だけの話です。
info@ドメインのメールアドレスは作らない方がいいかも
よく、お問い合わせ用にinfo@ドメインのようなメールアドレスを作るかと思いますが、このアドレスは作らないほうが、場合によってはセキュリティ的に高まるかもしれません。
illustrator + anime.jsで動く円グラフ
Adobe illustratorで作ったベクトルの円グラフをanime.jsで動かす方法です。
floatはオワコンなのか
横並びのレイアウトにdisplay : flex、段組みにdisplay : girdがあり、いずれも便利ですよね。あの便利さを知ってしまうとfloatを使ってのレイアウトには戻れません。floatはオワコンになってしまったのでしょうか。
「CSSだけで作るハンバーガーボタン」をあまりオススメしない理由
当ブログでもハンバーガーボタンの作り方を掲載していますが、こちらはjQueryを使ったものになります。しかし、jQuery(Javascript)を使わずCSSだけでハンバーガーボタンを作るやり方もあります。しかし、このCSSのみのやり方自分はあまり好きではありません。
BracketsでEmmetの自動ベンダープレフィックスをオフにする方法
gulp-autoprefixerなど使う時、emmetの自動でベンダープレフィックスを付与する機能は余計なお世話だったりします。その機能をオフにするやり方です。
ドロワーメニュー用のテンプレートを作りました
当サイトで紹介しているアニメーションで×印になるハンバーガーボタンや横から出てくるドロワーメニューの作り方をまとめたテンプレートを作成しました。このHTMLとCSSとJSを読み込めば手軽にドロワーメニューを実装することができます。
【OAuth認証】WP Mail SMTPでGmailを設定する方法
WP Mail SMTP ver 1.2.5でのやり方です。以前はGmailのアカウントとパスワードを入力するだけで使えていたようですが、Googleのセキュリティ強化もありクライアントIDとシークレットを登録する必要があります。
プラグインを使わず、ワードプレスに構造化データを埋め込むやり方
プラグインいれなくてもテンプレートにコピペでいけます。今回紹介するのはブログ（type : BlogPosting）の構造化データです。JSON-LDを使って基本的なデータを埋め込みます。
埋め込みYoutubeのサムネイルのカスタマイズ
Youtube APIを使ってサムネイル画像をクリックで再生する方法です。Youtube側でも動画のサムネイルはカスタマイズできますが、Webサイト埋め込みではまた違うのを使いたかったりします。特に開発者側(ディベロッパー)ではYoutube動画自体のサムネイルを変えることが不可能の方が多いです。
SEOとは◯◯ダイエットのようなもの
自分はSEOの専門家ではありませんが、SEOについて自分が大事にしていることを書いておきます。
ABBAをWeb上で正しく表示する方法
小ネタですが、ABBAの正しい表記を画像ではなくテキストで実装する方法です。
CSSで水面のようなアニメーション
CSSのアニメーションとフィルターを使って、水面のようなゆらゆらと水面が揺らめく表現の実装方法です。
Local by flywheelがUh-oh Could not update hosts fileの時の対処法
「Fix it」ボタンを押しても直らない時の対処法
こういう時に便利！Gridレイアウトの応用
ここでは、有り得そうなデザインでfloatだけでは対処が難しいような場面を想定して作った一例です。
jQueryで作るドロップダウンメニュー
スライドだったり、フェードだったりの動きのあるドロップダウンメニューを6行程度のjQueryで作ります。
常時SSL化その前に
Web界隈では常時SSL化が流行ってますが、流行りに乗っかってSSL化する前にいくつか確認しておきたい点をまとめました。
本文がグラデーションで消える、続きを読むボタンの作り方
画像のような本文の冒頭は見えているけど、後半はグラデーションで消えているような「続きを読む」ボタンの作り方です。
Webの文字詰め
最近はWebでも文字詰めができるようになりました。
このサイトの表示スピードを早くした時の話
サイトの表示スピードもSEOに影響があるらしい。どこまで影響があるか分かりませんが、早い方が良いことには変わりありませんよね。
当サイトのプラグイン
このサイトで使っているプラグインを晒します。何かの参考になれば幸いです。
Webにおける解像度のお話
紙のデザインをやっている人にとっては画像の解像度というのは気をつけるものですが、Webにおける解像度というのはちょっと複雑です。
Contact Form 7 add confirmのスクロールを調整
確認画面に移行した際に、フォームの一番上に自動的にスクロールで戻りますが、ヘッダーを固定していると、戻りすぎて、ちょっと厄介です。
横から出てくるドロワーメニューの作り方
クリックすると、横からニュッとメニューが出てくるやつの実装方法です。最近はCSSによりアニメーションのサポートが進み、複雑なjQueryを書かなくても済みます。
アニメーションで×印になるハンバーガーボタン
3本のハンバーガーボタンがクリックするとアニメーションと共に×に変化するハンバーガーボタンです。時々みますよね。そして、このサイトにも採用しています。以下がそのソースコードになります。
さくらインターネットでワードプレスのSSL化（スクショ付き）
さくらインターネットでサイトをSSL（ラピッドSSL）化した際の手順になります。クリーンショットは2017年6月現在のものなので現在とは違う可能性がありますのでご了承ください。
これからWordPressを勉強する前に覚えておきたいこと
WordPressはプログラミングです。正確には違うけど。はじめて学ぶ人はそれくらいの気持ちで。
間違って、HTMLファイルなどを上書きしてしまった時の救済法(ただしブラウザで表示している時に限る)
古いファイルと統合しようとして、誤って上書きしてしまった時の話です。ちょっとした操作ミスで起こるこの事故。そしてそのようなミスは疲れている時に起こりやすく(？)、疲れている上に精神的ダメージも大きいというオマケ付きです。状況はだいぶ 限定的ですが、以下が救済方法です。
Bracketsでemmetが動かなくなったら
先日、Bracketsのemmetのスニペットを編集しようとしたら、失敗してemmetプラグインが動かなくなった時の話です。自分以外にも同じような人の助けになれば幸いです。ただし、実行は自己責任でお願いします。また、環境によっては必ずしも直るわけではないので、予めご容赦願います。
──ダッシュ２つのやつ
リード文などの頭につける、ダッシュを2つ重ねたやつ、倍角ダッシュという名前らしいのですが、HTMLでダッシュを2つ続けても間が途切れてしまいます。その上、半角や全角、伸ばし棒、ダッシュっぽい記号もたくさんあります。どうすれば2つつながったのが書けるのか検証しました。
CSS3で作る、切れ目に差し込んだようなデザイン
アルバムや写真のスクラップブックみたいなのに使えると思います。 box-shadow,transformを使っているのでCSS3対応ブラウザでないと見れません。
ブラウザの禁則処理の違い
自分はFirefoxユーザーなのですが、Chromeと禁則処理に関するブラウザの解釈の違いで、時々不意を突かれます。標準化が進んでも、まだまだブラウザ間の差異はあるんですね。
hogeとfugaの話
自分がjavascriptを習いたての頃、色んなサイトを参考にしながら見て回っていた時のこと。良く見かける言葉にhogeというのがありました。
プラグインなしで、画像をPOPUP表示するjQuery
ポップアップくらい、自前で書けるぜと言えるような、実装例です。プラグインを導入したけど、他のプラグインと干渉して動かない、デフォルトのものではなく、自分好みにカスタマイズしたいなど、自前でポップアップを書く時の参考にして下さい。
ちょっと技術的な観点からみた JPGとPNGの使い分け方
デザインしたものをコーディングしようとする時に必要なのが画像の切り出しです。ここで直面するのは、どの画像形式で書き出すかという問題です。Webで使われる画像形式は様々あります。今回はよく使われるJPGとPNGの使い分けについて解説します。