ちょっと必要があって手軽に利用できるGoogle Fontsの中で&（アンパサンド）のデザインが特徴的なフォントを探したのですが、個人的に好みで覚えておきたいなと思うデザインが意外とあったのと今後同じような時にまた探すのは面倒なので備忘録として残しておこうと思います。 デザインフォントでパッと見気になるのはやはりアルファベットだと思いますが、こうして見てみると記号のデザインもフォントによって様々で見てて面白いです :)

gulpで何かしらのタスクを実行後などにgulp.dest()する際、ディレクトリ・ファイル構成をそのまま維持して出力させる指定方法の備忘録です。 サンプルのディレクトリ・ファイル構成と実装したい動きについて ここで紹介しているものは下記のようなファイル構成のものを使用していると想定します。 また、動きとしてはgulp.dest()使用時にこの構成のまま/distに出力する（/srcが/distになる感じ）というものになります。 └─ /src ├─ index.html ├─ /css │ └─ style.css ├─ /js │ └─ script.js └─ /images ├─ img_01.jpg ├─ img_02.jpg └─ img_03.jpg /**/*で指定 手っ取り早くディレクトリ・ファイル構成を維持しつつすべてをgulp.dest()したいときは、下記のようにg

ひとりで行っているものであれば自分の中でルールが決まっているし使用するエディタがそのような設定になっていることがほとんどだと思うので特に必要ないと思いますが、逆に複数人で行うプロジェクトだったり自分とは全く異なるルールでコーディングしなければいけないとなると、毎回そのプロジェクト毎に設定を変更したり、他のメンバーにどのようなルールなのか説明するのが面倒です。 そんなときに便利なのが「EditorConfig」で、例えばインデント設定や文字コードといったエディタ設定を自動で適用してくれるので、先述したようなプロジェクト・チーム間のエディタ設定を容易に統一させることができます。 EditorConfigとは 「EditorConfig」は異なるエディタでも統一したコーディングスタイルを定義してくれる設定ファイルで、これを利用することで異なるエディタを使っていたり普段から違うコーディングスタイル

記事でいうアイキャッチのようなカテゴリーイメージを設定できるようにしたり、説明文を自由に装飾できるようエディタを実装したりなど、WordPressのカテゴリー周りのカスタマイズでよく利用するコードやプラグインの備忘録です。 カテゴリーのカスタマイズと言っても表示カテゴリーのID指定とか特定のカテゴリーの記事を出したいとかそういう系の内容ではなく、主に管理画面の入力周りを変更といったもの中心です。 紹介している内容やキャプチャなどは、WordPress Ver 4.5.2で検証・使用した際のものになります。 カテゴリー説明を表示する際に付加される<p>を消去する カテゴリー説明はそのまま項目名にもあるように「説明」という部分へ表示したい文字を入力するのですが、デフォルトでは入力したものがp要素で括られた状態で表示されます。 これが不要な場合はfunctions.phpに下記を記述することで無

WordPressの管理画面にある「一般」「投稿設定」「表示設定」といった各設定画面内に項目を追加する方法です。 例えば、デフォルトでタイトルやキャッチフレーズを入力できる項目が用意されており、それらをテンプレートタグで呼び出して表示みたいなことをよくすると思いますが、この方法で同じような項目を追加して上手く利用することでそれらと同じようなことも実装できます。 実装にはfunctions.phpに下記のように記述し、ここではサンプルとして「設定 > 一般」内に「テスト」という項目を追加していきます。 function add_my_option_field() { add_settings_field( 'test_option', 'テスト', 'display_my_option', 'general' ); register_setting( 'general', 'test_opt

WordPress Ver 4.4からより適切な画像サイズを表示するためにレスポンシブイメージが実装され、画像を表示する際にsrcだけでなくsrcsetとsizesといった属性も出力されるようになりました。 ただ、これらがあることによって何かしらの不具合が出たり、そもそもサイトによっては必要ないのでできれば出力させたくない場合は、下記をfunctions.phpに記述することでこのレスポンシブイメージ機能を無効化できます。

ユーザーに日付や時刻を入力してもらう際に手助けするデートピッカー・タイムピッカーを実装できるスクリプトのまとめです。 日付であればカレンダーを、時刻であれば時計を表示させるといったように選択しやすい感じの見栄えにしてくれるものもあれば、シンプルな見た目で入力・選択させるといったものもあり、使いたいデザインのテイストに合わせて選べると思います。 以前だとjQueryを使っている環境でデートピッカーといえば「jQuery UI Datepicker」が定番という印象で、オプションが豊富なのでいろいろな機能・見せ方を実装できますし、ちょっとしたカスタマイズ情報なども検索でたくさん出てくることもあって使ったことあるという人も多いと思います。 ただ、今では同じjQueryプラグインでももっと軽量なものだったり、そもそもjQueryなどは使わず単体で動いて且つオプションが豊富でカスタマイズもしやすいス

gulp使用時に現在どのようなタスクが定義されているか確認したり、どのプラグイン・モジュールをインストールしているかをコマンドで確認する方法です。 すごく使用頻度が高いというわけではないですが、ざっくりと定義されてるタスクを見たいときにやpackage.jsonを見に行くのが面倒なときに使えます。 定義されたタスクを確認する 定義されているタスクやどのようなタスクが組み合わさっているかなどを手っ取り確認する方法です。 例えば、自分が作成したものだけど久しぶりに触るのでどんなタスクがあったか確認したい時や他の人が作成したものでどのようなタスクを用意しているのかざっくりと確認したい時、gulpfile.jsだけで完結せずタスクがファイル分割されていてそれらすべてに目を通すのが面倒な時などに使え、下記コマンドを実行することで確認できます。

JavaScriptは使用せず、CSSのみで展開時にちょっとしたアニメーションも加えたシンプルなドロップダウンメニューのサンプルです。 最近ではスマートフォンやタブレットに対応させたりレスポンシブ対応したりで、クリック時にも対応とかウィンドウサイズによって見栄えを大きく変えるといったものが多いとは思いますが、こちらは主にPCで使用するような単純にhoverで展開されるタイプのものになります。 はじめに 以下で紹介しているドロップダウンメニューは、全て下記のようなHTMLとベースとなるCSSが指定してあります。 <ul> <li><a href="#">nav</a></li> <li> <a href="#">nav</a> <ul> <li><a href="#">sub nav</a></li> <li><a href="#">sub nav</a></li> <li><a href=

「Vanilla List」は、Vanilla JavaScriptで作成されたプラグインが多数まとめられているサイトです。 現時点で105種類あるのでよく使いそうな動きのものはひと通り揃っている印象で、タグ付けや検索機能なども用意されているので目的のプラグインも探しやすいと思います。 一覧ページの各プラグインのサムネイルにはGitHubへのリンクが設定されています。 また、プラグインの紹介文下にも同じくGitHubへのリンクがある他、npmやデモへのリンクもそれぞれ記載されているので、とりあえず動きを見たいという時もそちらからすぐに確認できます。 サイトには検索機能も実装（ページ右上）されており、何かキーワードを入力した際に該当したものがあれば候補を表示してくれるようになっています。 上のイメージは実際に入力してみたもので、例えば「image」と入力した場合はこのように「image」と関

gulpを使っていると基本的には指定した全てのファイルで処理を実行してほしいけれど、一部ファイルに関しては実行してほしくないというときがあります。 そんなときに使える特定のディレクトリやファイルを対象から除外する方法で、簡易的なものであれば特にプラグイン等も必要なく実装できます。 !（エクスクラメーションマーク）を使う 結論から書くと、除外したいディレクトリやファイルのパス指定前に**!（エクスクラメーションマーク）**を記述すれば除外指定することができます。 何らかの理由でこのファイルはLintさせないとか開発時にしか使用しないディレクトリ・ファイルを公開用にgulp.dest()するのに含めないとかいろいろ使う場面はありますが、そのような時にgulp.src()などで指定するパス前に!を記述すれば特定のディレクトリ・ファイルを除外指定できます。 実際の使用例 「!（エクスクラメーション

Page Not Found Where are you going to fly? You seem to have followed a route that does not exist.

CSSでn番目の要素に適用したいときなどに利用する:nth-child疑似クラスや:nth-last-child疑似クラスですが、先頭または最後からn番目になどの単純な指定ではなく、ちょっと複雑な指定をする際は指定方法を考えることがあると思います。 「Family.scss」はそんな面倒な指定を楽にしてくれるスタイルシートで、利用するためにはSass(SCSS)を使っているのが条件にはなりますが、ちょっと複雑そうな指定もわかりやすく容易な記述で指定することができます。 使い方 まず、必要なSCSS (Family.scss) を配布サイト上部にある「DOWNLOAD」ボタン、またはGitHubからダウンロードするなどして読み込みます。 あとは、普段mixinを使うときと同様で@include mixin-name(n)という感じで記述すれば利用することができ、引数の部分は場合によっては空に

女性らしいテイストといっても様々なものがありますが、その中から「クール」「エレガント」といったデザインで使えそうな細身のデザインフォントや美しいスクリプトフォントをまとめてみました。 中には特徴的なデザインで使い方が難しい感じがするものもありますが、高級感を出したいときに使えたり洗練されたデザインとの相性が良さそうなものが多いです。 紹介しているフォントを使用する際は、ライセンス等は各自で再度確認してください。

女性らしいテイストといっても様々なものがありますが、その中から「ポップ」「手書き風」といったデザインで使えそうな丸みがある可愛らしいデザインフォントや親しみやすい印象を与えることができる手書き風のデザインフォントをまとめてみました。 紹介しているフォントを使用する際は、ライセンス等は各自で再度確認してください。

ホバーすると4辺それぞれに中央から外に向かっていくようにボーダーがひかれるものです。 実装にはHTMLとCSSをそれぞれ下記のように記述します。 .button { position: relative; display: inline-block; padding: .5em 4em; border: 2px solid #fff; color: #fff; text-align: center; text-decoration: none; outline: none; transition: all .3s; } .button::before, .button::after { position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; z-index: 2; content: ''; transiti

特に何も考えず組んでいると、コンテンツの内容が少ない場合に本来ウィンドウ下部に表示されてほしいフッターコンテンツなどが中途半端な位置に表示され、その分フッターとウィンドウ下部の間にある領域に大きな空白ができてしまうことがあります。 これをCSSや場合によってはJavaScriptで解決する方法があるのはご存知の方も多いと思いますが、最近では特に古いIEの対応がなくなってわざわざJavaScriptを使わなくてもよくなったり、CSSも以前よりシンプルな記述で実装できるようになっているので、自分が最近利用した実装方法を備忘録も兼ねていくつか紹介します。

特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、imgであれば画像を配置してwidth:100%;とheight:auto;辺りを指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。 背景画像でも同じように縦横比を維持しつつ横幅いっぱいに画像（背景画像）を表示させたいときは以下の方法で実装することができます。 実装には背景画像を表示したい部分に下記のようなCSSを記述することで縦横比を維持しつつ横幅いっぱいに背景画像を表示させることができ、以下のサンプルは表示させたい画像が「横幅：1000px　高さ：300px」の画像だった場合のものになります。 .background { width: 100%; height: 0; paddin

Bracketsでスニペットの登録・管理を行いたいときに便利なエクステンション「Brackets Snippets (by edc)」を紹介します。 Bracketsユーザーで且つEmmetを利用しており、言語も普段からよく使うのはHTML・CSS・JavaScript辺りとかであれば、Emmetで十分だったり足りなくてもsnippets.jsonいじって追加とかで事足りる人もいるとは思いますが、例えばそれをもっとわかりやすく管理したいとかPHP・Ruby・Pythonといったその他の言語でもスニペットを管理したり簡単に呼び出せるようにしたいというときに便利なエクステンションです。 Bracketsの「拡張機能マネージャー」で**Brackets Snippets (by edc)**と検索すれば該当のエクステンションが出てくると思うのでインストール・有効化します。 エクステンションが有効