はてなブックマーク

CSSで要素の幅などを指定するとき、「vw」という単位があります。そのままだとちょっとクセの強い「vw」ですが、CSSのカスタムプロパティとJavaScriptを用いればもっと安心して使えるようになるよ。というお話です。 「vw」が破綻を招くワケ 「vw」は、便利ですが使いどころによってはレイアウトの崩壊を引き起こします。まず、「vw」を理解するために「%」との違いや、その問題点についてお話しします。 親要素を基準とした「%」 「%」は、CSSでよく利用される単位のひとつです。親要素の幅を100%としたときに何%になるか、を指定します。例えば、親要素の幅が500pxのとき、子要素に「width: 10%;」と指定すれば、500pxの10%なので50px幅になります。 ビューポートを基準とした「vw」 次に「vw」ですが、こちらはビューポートの幅を100%としたときの相対的なサイズを指定しま

先日、Notion APIとGoogle Apps Scriptをつかって、定期タスクの自動登録をしようと思ったら、タスクの担当者欄（ユーザーを選択する項目）をどうやって指定すればいいのか分からず詰まりました。 公式のリファレンスを見てもノンプログラマーな私にはわかりにくく、他の人のブログ記事を見てもあまり詳しく書かれていません。 仕方なく他のプロパティもまとめて自分で調べたので、せっかくだから忘備録として掲載します。 検証用に使ったGAS 下記は、検証用に作った、Google Apps ScriptからNotion API経由でDBにアイテムを追加する関数です。これの「properties内をどうやって書けばいいか」が、この記事の本題です。 // Notion API TEST function notion_api_test() { const notion_key = 'xxxxxx

セブンシックスのダイチです。画面をスクロールして可視領域に入ると、要素がフワッと出てくるやつ、ありますよね。それを、JavaScriptのIntersection Observer APIを使ってやってみよう！というのが今回のお話です。 あらすじ 私はこれまで、要素をふわっと出すやつには「Emergence.js」というライブラリを好んで使っていました。軽量かつjQuery不要のライブラリです。Emergence.jsに不便は感じていなかったのですが、心情的にスクロールイベントよりもIntersection Observer APIを使いたかったので、代替ライブラリを探すことにしました。良さそうなライブラリが見つからないまま、ヒットしたJavaScriptの解説記事ばかり読んでるうちに、自分で書いたほうが早いということに気が付きました。おい。 やりたいこと スクロールして要素が画面内に入っ

セブンシックスの北斗です。 今回は番外編として、ワイヤレスフラッシュトリガーGODOX Xpro-Nの基本的な使い方や設定方法について、具体的に解説したいと思います。 英語と中国語の説明書が付いていましたが、読み解くのが非常にストレスでしたし、わかりにくくて悲しくなりました（笑） 私のカメラはNikonですが、基本仕様は大きく変わらないので、他メーカーの方もぜひ参考にしてください。 Xpro-Nはここが便利 GODOX Xproの良さは操作性です。 大画面液晶で、5つのグループの設定が同時に確認できます。 サイドのボタンでブループを選択し、ダイヤルを回して変更、という手順の少なさも嬉しいポイントです。 「見やすい、わかりやすい、操作が早い」の三拍子が揃っているXproは、とても快適に使えます。 Xpro-Nの特徴（一部Nikonだけの仕様かもしれませんが） 大画面の液晶画面で同時に5グルー

ごきげんよう、Gutenbergを使っていますか？まだClassic Editorが恋しいですか？セブンシックスでは、標準で導入するプラグインの見直しなどを経て、クライアント案件でもGutenbergを積極的に採用しています。今回は、Gutenbergを採用した開発時に嬉しいプラグイン「Lazy Blocks」の紹介です。 Lazy Blocksとは Lazy Blocksは、コーディング知識なしでGutenbergのカスタムブロックを作成できるWordPressプラグインです。 公式サイト https://lazyblocks.com/ ダウンロード https://wordpress.org/plugins/lazy-blocks/ これまでGutenbergは、カスタムブロックを追加する難易度の高さがネックでした。例えば「AddQuicktag」などで実現していた独自のマークアップを

セブンシックスのダイチです。 今回は、Contact Form 7のフォーム送信をGoogle Analyticsでトラッキングする方法を紹介します。 Contact Form 7 公式ページの解説が古かったので Contact Form 7の公式サイト上で「フォーム送信を Google Analytics でトラッキングする」という解説ページがあります。こちらのページでは、ユニバーサルアナリティクス（analytics.js）で計測する方法が記載されています（2019年3月時点）。 これだと、最新のグローバルサイトタグ（gtag.js）を導入しているサイトでは、正しく計測できません。 毎回、忘れて調べるのも面倒なので記事として残しておきます。 書き方 古い書き方（analytics.js）： <script> document.addEventListener( 'wpcf7mailse

Slick.jsとは Slick.jsは、皆さんご存知の、簡単に設置できてレスポンシブ対応している便利なスライダーです。いろいろとカスタマイズできるので、あらゆる要件をカバーできる汎用性の高いスライダーでもあります。 Slick.jsはこちら 「ねえ、3スライド目だけ秒数を長くできない？」 通常、スライド1つあたりの表示させる秒数は「autoplaySpeed」で指定します。ただし、個々のスライドごとに秒数を指定することはできません。全てのスライドが同じ秒数で切り替わります。 でも、案件によっては、スライドごとに秒数を指定したいといった要望が出ることもあるでしょう。そんなとき、どうしたらよいでしょうか。別のjsを使う？クライアントにあきらめてもらう？それとも、自分でゼロから作る？ いえいえ、Slick.jsのイベントを利用して動的にautoplaySpeedを変化させれば実現可能です！ 今

最近は、Google Analytics(以下GA)のトラッキングコードなどをGoogle Tag Manager(以下GTM)で管理するケースが多くなってきました。今回は、wordpressの定番メールフォームプラグインである「contact form 7（以下CF7）」の送信数をGTM+GAで計測する方法を紹介します。 1.GTMとGAの導入 事前準備としてGTMをサイトにインストールしてGAタグを導入します。 1-1.サイトへGTMをインストール GTMにログインして、アカウントを作成。新しいコンテナを作成して、「管理」メニューからインストール用のコードを確認し、サイトのhead内およびbodyタグ直下にコピペします。これで、とりあえずサイトへのGTM導入は完了です。 1-2.GTMにGA計測タグを設置 GTMの管理画面から、コンテナに「新しいタグを追加」します。 サイドバーの「タグ

こんにちは、セブンシックスのダイチです。今回は、コーダーさんのための、Flexboxについてのお話です。実は、リストを横並びにするCSSについての考察をまとめようと思ったのですが、ぐだぐだと長くなったので、今回はFlexboxについてのみ書くことにしました。 最終行が、思い通りにいかない！ Flexboxは、CSS3で追加されたレイアウトモジュールです。これまでfloatなどを駆使してレイアウトしていた箇所を、シンプルに記述できることから注目されていますが、なかなか思い通りにいかない点もあります。 そのうちのひとつが、justify-contentで両端揃えにしたときの最終行。子要素の数が半端になったときに、中央がぽかっと空いてしまう問題があります。 これは、正常な振る舞いなのですが、実際にこんな並べ方をしたデザインを作るデザイナーさんはいないと思います。最終行は、左揃えにしたいケースが多

Google Analyticsは、無料で使える高機能のアクセス解析ツールです。高機能なのは良いことですが、何を見たら良いか分からず、活用する前に挫折してしまうケースも多いかと思います。今回は、そんなあなたがGoogle Analyticsをもっと好きになるための、おすすめマイレポート設定をご紹介します。 日々のチェックはマイレポートで Google Analyticsには「マイレポート」という機能があります。あらかじめチェックしたい項目を選んでおき、それらをひとつの画面でまとめて確認できる便利な機能です。このマイレポートを使えば、何をどうチェックしたらいいのか分からない面倒から開放され、日々の定点観測が楽しいものに早変わり。 はじめは「あ、今日は増えた！」「うーん、今日は少ない」で、いいんです。定期的にチェックしていれば、自然と慣れていくものです。あなたも近い将来、自分たちのビジネスだか

ここ数年で、ウェブフォントを利用するサイトを目にする機会が多くなってきました。今ご覧になっているセブンシックスのサイトも、2016年2月時点ではウェブフォントを利用しています。ウェブフォントの指定方法に関する記事はいたるところで見かけますので、そこに書かれている通りにやれば問題ありません。でも、ウェブ制作者たるもの、言葉ではなく心で理解する必要があります。丁度、2016年1月にIE8のサポートが切れましたので、ここらで一回、CSSのウェブフォント指定についてきちんと考えてみたいと思います。 ウェブフォント指定の2ステップ ウェブフォントの指定方法はカンタンです。 CSSの@font-faceルールを使って新しいfont-familyを定義する。 ウェブフォントを適用したい箇所に新しく定義したfont-familyを指定する。 上記のたった2ステップです。具体的なCSSの記述は以下のようにな

こんにちは、セブンシックスのダイチです。今回はwordpressでブログ形式ではない一般的なウェブサイトを制作するときの手順を紹介します。要点のみ箇条書きで書いていきますので、それぞれの項目の詳細は自分で調べてね。 事前準備 すべてのページのデザインが揃っているものとします。サイト全体の構成を把握して、どれを固定ページにするか、カスタム投稿タイプやカスタム分類は必要か、URLをどうするか、どのプラグインが必要かなどを考えます。 インストール MySQLデータベースを作成 最新版のwordpress本体をwordpress日本語サイトから入手。 解凍したファイル一式をサーバにアップロード。 install.phpにアクセスしてデータベース情報を入力。テーブル接頭語は「wp_」から別のものへ変更。 サイト名やユーザー名などを入力。ユーザー名は「admin」以外で、パスワードは強力なものに。 イ

レスポンシブなサイトなどで、画像の横幅を100%に指定している場合、画面サイズによっては画像がオリジナルサイズよりも大きく表示されることがあります。jquery-addMaxWidth.jsは、max-widthを自動で追加することで、任意の画像がオリジナルサイズを超えて表示されることを防ぎます。 ダウンロード 配布終了しました。 使い方 $(function(){ $("img.amw").addMaxWidth(); }); imgタグに対して、自身のオリジナルサイズの横幅をcssのmax-widthとして付与します。「img.amw」のところにお好きなimgタグを指定してご利用ください。 どうでもいい開発秘話 このjQueryプラグインを書くキッカケは、私が作ったデザインを別の方にコーディングしていただいたことに始まります。見出しなどの文字画像は、それぞれ文字数が異なりますから、当然

「いいね！」や「Tweet」ボタンを手軽に設置 ブログ記事などに「いいね！」ボタンや「Tweet」ボタンを設置することは、ソーシャルメディアによる情報拡散において、もはや常識となりました。 ソーシャルメディア側からも、ボタンを手軽に設置できる機能が提供されており、多少の知識さえあれば自分でボタンを設置することも難しくありません。ただし、ソーシャルメディア側の仕様変更があった場合、ボタンのコードを手動で最新のものに修正しなければならないなど、メンテナンス面での煩わしさは拭えません。 wordpressでは、これらボタンの設置を自動で行ってくれる便利なプラグインが多数あります。今回は、これらの中から評価、ダウンロード数、更新頻度が高いものを5つピックアップして比較してみました。ぜひ、導入の際の参考にしてください。 今回紹介するプラグイン一覧 Hupso Share Buttons for Tw

引用元：フォントカタログ5・ブラウザのデフォルトフォント 合成フォントの問題 font-familyを指定する際に、日本語フォントよりも優先順位の高い位置に欧文フォントを置くテクニックがあります。こうすることで、欧文フォントに存在しない文字だけ日本語フォントが適用される、いわゆる合成フォントが実現できます。ブラウザの標準フォントでも、safariではHelveticaとヒラギノ、IE8ではArialとMSゴシックの合成フォントが適用されています。 合成フォントは、日本語フォントの英数字を見やすくする措置です。しかし、ひとつの文章の中に複数のフォントが混在すると、文字の大きさやウェイト、ベースラインなどが微妙に異なり、違和感を覚える懸念があります。英数字だけにやけに太かったり、ひとまわり小さかったり。印刷物と違って、ウェブでは微調整がとてもむずかしい。特別、デザイン的な狙いがないのであれば、