はてなブックマーク

Sassでファイルを呼び出す際に使っていた@importは廃止される予定でして、代わりに「@use」「@forward」を使うように推奨されています。自分も重い腰を上げて@useを使ってみました。 （※ Google日本語翻訳） Dart SassとLibSassの両方がモジュールシステムのサポートを開始してから1年後、またはDart Sassがモジュールシステムのサポートを開始してから2年後のいずれか早い方（遅くとも2021年10月1日）に、@importグローバルコアライブラリ関数呼び出しと同様に非推奨になります。それはモジュールを通して作ることができます。 この非推奨が発効してから1年後（ 遅くとも2022年10月1日）、@importほとんどのグローバル機能のサポートを完全に終了します。これには、すべての実装のメジャーバージョンリリースが含まれます。 https://sass-la

スクロールが特定のエリアに入ったかどうかを検知するjQuery 以下のような、スクロールがセクション3に入った時にヘッダーの色が赤に変わる例を作ってみました。 HTMLとしては、以下のようなものを用意しました。 対象となるエリアに対して.target-areaを指定してあげます。 <div class="section section1"> <div class="section-content">セクション1</div><!-- /section-content --> </div><!-- /section --> <div class="section section2"> <div class="section-content">セクション2</div><!-- /section-content --> </div><!-- /section --> <div class="sec

Webサイト上に配置した画像内の任意の場所をクリックできるようにするコーディング方法の紹介です。 「クリッカブルマップ」あるいは「イメージマップ」と呼ばれたりしていて、特別な実装方法ではなくHTMLがあらかじめ用意されている仕組みで対応できたりします。使うタグとしてはmapとareaですね。 この記事では「クリッカブルマップ」の実装方法と、レスポンシブに対応する方法について紹介していけたらと思います！ クリッカブルマップの基本コード 今回はこの画像の「1」と「5」の場所をクリックできるようにしていきます。 （全部の番号も可能ですが、コード量が増えるだけなので…） まだ何もコードを入れてないので、マウスでクリックしても何も反応しないことを確認しておいてください。 imgとmapとareaを用意 クリッカブルマップの基本コードが以下の書き方になります（※ 型なので、このコードを貼り付けても動き

わたしがWordPressをカスタマイズする際に必須レベルで導入しているプラグインが「Show Current Template」です。これは「今どのテンプレートで開かれているかが一瞬で分かる」プラグインになります。 癖のあるテーマをカスタマイズする際は「どこのテンプレートを見ているの？」って探すところから始まります。宝探しみたいに、テンプレートを開いて確認していく作業は結構ストレスです…。 「Show Current Template」を使えば、サイトのツールバーに今のページを表示するために使われているテンプレートを表示してくれるので、 「どのテンプレートが使われているか」を探す手間がなくなります！ WordPressをカスタマイズする機会が多い方は必須レベルで導入しておきたいプラグインです。 有効化するだけで設定の必要はありません！ 「Show Current Template」のイン

var property = window.getComputedStyle($('.pseudo')[0], '::after').getPropertyValue('content'); var sheets = document.styleSheets, sheet = sheets[sheets.length - 1]; $('.pseudo').hover(function() { if (sheet.insertRule) { // Webkit sheet.insertRule('.pseudo::after { content:' + property + '"変更完了" }', sheet.cssRules.length); } else if (sheet.addRule) { // IE sheet.addRule('.pseudo::after', 'content

「このフィールドグループを表示する条件」では、「タクソノミー」等しい「カテゴリー」としてあげます。 後はそのままで公開ボタンから保存します。 カテゴリーでの色の設定と表示 「Advanced Custom Fields」によってカテゴリーに色の設定欄が追加されるようになります。カテゴリーに色を指定しつつ、投稿から指定したカテゴリーに色をつけられるかを実際に見ていきましょう！ カテゴリーでの色の設定 まずは、投稿 → カテゴリーから色を設定していきます。今回は新規で「テスト」というカテゴリー名で青っぽい色を選択してみました。 投稿からカテゴリーの指定 表示は投稿（single.php）で確認しようと思うので、投稿の新規追加からカテゴリー「テスト」を選択した記事を1つ用意します。 テンプレートから表示 そして、テンプレート側から（今回の例はsingle.php）から表示してみます。最小限で必要

子要素を親要素からはみ出して画面いっぱいにするは、今までであれば親要素から出してコーディングし直すというのが一般的でした。 ただし、今ではcalcとvwとい新たなCSSの概念があるので、子要素を親要素からはみ出して画面いっぱいにするということが簡単にできるようになっています。 この記事は、その具体的なCSSの実装方法について紹介していきます！（結論から言うと、以下のとおりですが…） 📝 inner幅からはみ出して横幅いっぱいにするCSS わざわざコンテナーを作り直す必要がなくて、自然なHTMLのままでコーディングできます！ — .hoge { margin: 0 calc(50% – 50vw); width: 100vw; } — ピンクのエリアがインナーで、そこからはみ出して画面いっぱいになる pic.twitter.com/8wBUiw7Nzd — はにわまん (@haniwa00

JavaScriptでのGutenbergのブロック作成の知識がなくても「Block Lab」を使えば簡単に作成できるので、サクッとオリジナルなブロックを作りたい方はぜひ使ってみてください！ #wctokyoで教えてもらった「Block Lab」が凄い…！ コード書けなくても管理画面からブロック作り放題です。 使い方のイメージ的には「Advanced Custom Fields」のブロック版みたいな！ pic.twitter.com/BceRc089If — はにわまん (@haniwa008) November 4, 2019 Block Labのインストール プラグイン → 新規追加 → キーワード「Block Lab」 → 今すぐインストール → 有効化 インストールされると左側に「Block Lab」のメニューが登場します。 Block Labの使い方 「Example Block

プラグインを作成 独自のブロックはプラグインで作成するのが一般的なようです。 プラグインの詳しい作り方については以下をご参考ください。 https://haniwaman.com/my-plugin/ my-gutenbergをpluginsフォルダ内に作成してindex.phpを作成して以下を記述します。 「My Gutenberg」というプラグインがプラグイン一覧に表示されるようになるので、有効化しておきます。 Gutenbergブロックの作成方法 ブロック用のスクリプトを登録ブロックの定義を登録ブロックの内容を登録 1.ブロック用のスクリプトを登録と2.ブロックの定義を登録はinitをフックにしてregisterを登録します。3.ブロックの内容を登録については、JavaScriptで記述していきます。 ブロック用のスクリプトを登録 WordPressでスクリプトを登録するためのwp_

webpackの基本的な使い方です。似たようなものにgulpがありますが、違いとしては以下のような認識です。 gulp・・・タスクランナーwebpack・・・ビルドツール 利用者の属性で分けるなら、gulpはWebコーダー、webpackはフロントエンドエンジニアといった具合でしょうか。自分の中ではHTMLとCSSと簡単なJavaScriptだけならgulpでだったりしますし、依存関係の考慮が必要な複雑なJavaScriptが関わってくる場合はwebpackという印象です。 gulpの使い方については以下をご参考ください。

Gutenbergにはテンプレート機能があり、利用するブロックを制限することが可能です。このテンプレート機能を使うことで、「Advanced Custom FieldsAdvanced Custom Fields」でやっていたような限定的な入力欄をブロック上に再現することができるようになりました。 この記事では、Gutenbergにはテンプレート機能を使って店舗情報を繰り返すといったエディタを作ってみます。 ACFをブロックのテンプレート機能で代替できると聞いてやってみたら、できた…！すごい！ ブロック作るの楽しい☺️ ↓は導入文と店舗情報の繰り返しブロック以外は無効化した例 pic.twitter.com/l2JNNAYF4D — はにわまん (@haniwa008) April 24, 2020 今回紹介する内容ともっとも近いWordPressドキュメントになります。こちらも合わせてご

Googleフォームを独自デザインにして埋め込む方法です。案件によってはGoogleフォームでサクッと作る選択肢もあってもいいかもしれません。 ただ、実際にやっみて思ったのは、カスタマイズして使う選択は微妙かもですね…。Googleフォームは標準の埋め込みで使うのを基本にしたい気はします。 <form id="my-form" action=""> <p class="input-field"> <label for="your-name">お名前</label> <input id="your-name" type="text" name="" required> </p> <p class="input-field"> <label for="your-email">メールアドレス</label> <input id="your-email" type="email" name=""

最初の構成ファイルとしては、以下のように配置していますので、同様に進めたい方は作成しておいてください。 dist・・・ビルド後の出力先フォルダsrc・・・ビルド前の出力元フォルダindex.html・・・静的HTMLファイルwebpack.config.js・・・webpackの設定ファイル index.htmlは以下のように配置しています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack Test</title> <link rel="stylesheet" href="dist/css/style.css"> </head> <body>

「ブログ部分だけをWordPressで実装したい・・・」 「お問い合わせフォームだけをWordPressで実装したい・・・」 っていう時の、WordPressを静的HTMLサイトに部分的に組み込む方法です。 WordPressを静的HTMLサイトに部分的に組み込む方法 WordPressを静的HTMLサイトに部分的に組み込む時の流れです。 WordPress一式用のフォルダを用意 index.htmlがトップページのファイルだとしたら、同じ階層にWordPressのファイル一式を格納するためのフォルダを用意してあげます。 この記事では例として、/wp/という名前で作ります。 ここにWordPressのファイルを一式ドカっといれて、インストールしてあげましょう。 そしていつもの手順どおりにWordPressをインストールしてあげます。 参考：WordPressのダウンロード先はこちら → ダ

カスタマイザーに項目を追加する方法 早速カスタマイザーに項目を追加していきましょう。完全にオリジナルな自分の項目を追加する想定で作っていきます。 公式はこちら → テーマカスタマイズ API – WordPress Codex 日本語版 まずはfunctions.phpに以下のようなコードを書いてあげてください。 （全部を丸々コピーでOKです） function my_customize( $wp_customize ) { $wp_customize->add_panel( 'my_panel', array( 'title' => 'パネル名', 'priority' => 1, ) ); $wp_customize->add_section( 'my_section', array( 'title' => 'セクション名', 'panel' => 'my_panel', 'prior

XDでデザインカンプを作成した場合は、実はXD本体をコーダーに渡す必要はありません。「共有」機能があって、URLとしてインターネット上に閲覧用のデザインカンプを再現することができます。 わたしはコーダーですが、この共有したXDのデザインカンプを見た時の衝撃は今でも忘れられません。 とにかく、コーディングが楽（らく）！！！ この記事では、XDのデザインカンプをURLで共有するメリットと使い方について紹介していきます。 XDのデザインスペックを共有するメリット XDのデザインスペックを共有するメリットです。とにかく値の取得が楽すぎます。 画面の概要が分かる XDの共有パスからは画面の概要が分かります。概要とは使われている色のパターンやフォントのパターンですね。 この辺の値をSassで変数としてまとめておくと、コーディングが楽になるかと思います。 値の取得だけに集中できる 共有バージョンのXDで

個人的に好きだった「Yummy FTP」が使えなくなり、、、代替として「Forklift」を使ってみたのですが、これまた素晴らしいので紹介です。 Yummy FTPの保守が完全に止まってしまっているので、同等の機能（それ以上かも）を備えているForkLiftに切り替えました！ Yummy FTPはCatalinaから完全に使えなくなってます…😭 — はにわまん (@haniwa008) October 28, 2019 個人的に感じた、おすすめポイントとしては以下のとおりです。 サクサク動いてストレスがないローカルファイルとサーバーファイル間でDiffできる更新ファイルだけを検出してアップロードできる 一応免責事項として、サーバー内のファイルの操作はとてもデリケートです。万が一、当記事を参考にして何か問題やトラブル起きても管理人は一切の責任を負わないことをご了承ください…（ご利用は自己責

途中からヘッダー固定にする方法 HTML ヘッダーメニューの作り方です。5つのメニューが並ぶシンプルな構成です。JavaScriptと連動させる大事な部分としては、#global-navになります。 （ここだけは確実に合わせる） <nav id="global-nav"> <div class="inner"> <ul class="global-list"> <li class="global-item"><a href="#section1">セクション１</a></li> <li class="global-item"><a href="#section2">セクション２</a></li> <li class="global-item"><a href="#section3">セクション３</a></li> <li class="global-item"><a href="#sect

この記事では個人的に大事だと思う部分を自分の解釈と共に紹介していくような感じとなります。 FLOCSSの書き方 FLOCSSは大きくは「Foundation」「Layout」「Object」の3つ。そして。「Object」の中の「Component」「Project」「Utility」から成り立っています。この5つの構成を正しく守り順番に読み込むことで破綻しにくいCSSとなるわけです。 それぞれに記載する内容をざっくり分けると以下のような感じです。 Foundation ・・・ 要素の初期化やmixinなどのベースを設定。リセットCSSなど。 Layout ・・・ ヘッダーやフッターなど大枠のレイアウトに関する定義。装飾はなく枠だけを用意しているイメージ。 Component ・・・ 再利用ができる最小限のパーツ。どの案件でも使える単位でのパーツです。 Project ・・・ サイト固有の

フローティングアイテムをフッターの上で止める方法です。フッターと色が被ったりしてフッター上で止めるという実装もたまにやりたくなります。 jQueryを使ってフッターの高さやスクロールの位置をゴリゴリと取得していくというやり方ですね… 動きとしては以下のような感じになります。（右下の「トップへ」というボタンが固定されています）

インラインSVGはHTMLに直接タグで貼り付けられる SVGファイルの実態はパスなどの情報が記載されたXML形式の文字になります。手元にSVGファイルがあればテキストファイルで開いてみてください。 例えば以下のSVG画像は、実はこの記事に直接HTMLタグとして貼り付けていますが画像として表示されていることが分かるかと思います。 上の画像の文字としては実態は以下のとおりです。 <svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='64' fill='#666'> <path d='M0 64 L32 32 L0 0 Z' /> </svg> こんな感じで、SVG画像の実態はパスの集合がテキスト情報で書かれたファイルでして、画像としての扱いではなくHTMLタグとして使うことができるようにな

npmで色々インストール いきなりコマンドの話で申し訳ございません…。 npmコマンドを使って各種ツールをプロジェクト内にインストールしていきます。npmコマンドを使う方法は下記ページの「3 npmのインストール」までを参考にしてください。 → 5分で終わる！WindowsでGulpを使えるようになるまでの手順 プロジェクト内というのは、検証対象とするフォルダみたいな感覚でいいかと思います。 cd /hoge/hoge/でチェック対象（フォーマット対象）とするフォルダへ移動しておいてください。 必要なパッケージは、以下の3つ。 stylelintstylelint-config-wordpress（WordPressのCSS規約）eslinteslint-config-wordpress（WordPressのJavaScript規約） Sassをお使いの方は以下も導入しておくといい感じです

画像のように拡大・縮小するコーディング実例 では、先ほど紹介したvwの考え方を使ってコーディングしてみます。自分の場合は基本的にPCからスマホに映るまでの幅で使う多いです。 （表示がぐちゃぐちゃになりがちなので…） 先に結果だけ見せると以下のような動きになります。文字や余白、横幅がウインドウ幅に応じて拡大したり縮小していることが分かるかと思います。 PCベースのHTMLとCSSを作る ではどんな感じで作っているか具体的なコードを元に見ていきましょう！以下のようなHTML構造でシンプルな横並びレイアウトを作っています。 <section class="content"> <div class="inner"> <h2 class="head">セクションの見出し</h2> <div class="body"> <div class="body-img"> <img src="https://

マウスホバーのパターンを１０個まとめました。 ホバー時の動きは、基本的には指示がなくコーダーに一任されることが多いので、自分の中で「お決まり」のホバーアクションを決めておくとコーディングが捗るかもしれません。 ちなみにわたしは、無難な「透過」ばっかり使っています！

最近流行り始めてきているWordPressを管理画面としてだけ扱い、表向きのサイトの表示は、あらかじめ静的サイトとして変換したものを出しちゃうという方法です。 色んな技術が絡み合っていて、ほぼWordPressしか触ってこなかったわたしは頭爆発しそうでしたが、全容が体感として理解できると、なんとなく腑に落ちるようになります。 全体の構成は、Gatsbyの公式トップページの図が分かりやすいです。 登場人物としては以下の通り。一般的なWordPressしか触ってこなかった人にとっては馴染みがないかもしれませんが、実際に一度流れを掴んでしまえば理解できるはずです（実体験） WordPressの管理画面で記事を更新する。この記事がデータ元となる。 GatsbyにてWordPressからデータを取得してHTML、CSS、JavaScriptに変換する。（SPAとして動く） Gatsbyでビルドされた