透過pngのイラスト素材を制作しました。
光のシルエットです。Illustratorの「パスの変形」にある「パンク・膨張」機能を利用して作成したシルエットです。シルエットの下にある数値別に光の形が違うので、用途に合わせてご利用ください。
利用規約の範囲内でご利用ください。
画像をクリックすると大きなサイズの素材をDLできます。
イラスト素材：光
contact form 7 のカスタマイズまとめ
contact form 7はプラグインです。インストールしてそのまま特別なことをせずに使えて便利です。が、そのままでは困ることもあるので、私が実際に行ったカスタマイズ方法をまとめました。
ドロップダウンメニューをメール本文に組み込む
フォーム設定でドロップダウンメニューを作成すると、こんなコードが生成されます。
<label> お問い合わせ項目 [select* menu-123 "チョコクッキー" "スイカバー" "その他"]</label>
メールタブから本文を作成するには、このままでは使えません。メールタブの上の部分にタグの一覧があります。ここに、ドロップダウンメニュー用のタグがあるので、本文に差し込みます。
○お問い合わせ項目： [menu-123]
日付の入力に制限を設ける
採用募集ページを例にします。通年採用をしているとして、面接の希望日時を申し込みのフォーム に組み込んだとします。特に設定しない場合、いつの日付でも入力できます。なので、せめて翌営業日移行にしたいですよね。というわけで、こんなコードにします。
<label> ご希望日 [date* date-123 min:today+1days]</label>
サイズを調整する。
テーマがテキストエリアをwidth100%にしている場合、ショートコードに「class::name」といれれば個別でclassを付与できる。
<label> ご希望日 [date* date-123 min:today+1days class::name]</label>
エラー
メールの入力を必須にしない場合、追加ヘッダーに [your-mail] をいれるとエラーになる。
これに関係するが、メールアドレスを必須にしない場合、確認用メール（ユーザーに届く分）も送ることができない。当たり前の話だが、送り先のメールアドレスがなければ送信できないから。
・メールアドレスを入力したユーザーは確認メールを送る
・メールアドレスの入力がないユーザーは確認メールを送らない
といった処理はないらしい。
素材サイトを選ぶときに気をつけていること
利用規約を読む
これに尽きます。どんな素材があるかは、そのあと。どれだけ素敵な素材があっても、自分の用途にあっていなければ使えないのですから。
気をつけるポイント
商用、非商用
よくある話ですね。金銭を伴う制作物はすべて「商用」。youtubeやブログなどは直接的に金銭を得るものではないのですが、規約にない場合は運営者に問い合わせましょう。最近は規約に明記しているサイトが多いです。
個数制限
有名な「いらすとや」さんは、20点までが無料。その先は有料です。知らずたくさん利用してしまい、指摘されてから追加料金を払う・・などのトラブルになりかねません。
譲渡
「取引先であっても譲渡・リースはNG」という規約をみたことがあります。例えるなら自分がwebサイトの制作依頼をうけて作りました。何年後かに先方が別サイトを作る。別の人が作るけど、サーバーにある既存のイラストを流用するとなれば、制作者は自分なので、そのまま渡すと規約違反になると思います。
加工の方法
原型がわからなくなるまでの加工はNGとか、いろいろなパターンがあります。
クレジット表記やリンク表記
いる・いらないを確認します。必要な場合は書き方や表記場所など、サイトごとのルールがあります。表記が必要な場合、多くの商用サイトでは利用が難しいでしょう。
商標登録の可否
アイコンやピクトグラム素材でみかけます。ロゴに組み込んで商標登録をしてしまうと、その素材を他のひとが使えなくなってしまうからです。商標登録をしてしまい、制作元と裁判沙汰になる可能性も考慮しましょう。
無料素材は上記のような理由で探す時間がそれなりにかかります。お金を払っていないので当たり前ですね。有料素材は品質がよく、数も多いので、その分はやく仕事が終わります。ただし、有料でもクレジット表記を求められる場合や、加工方法に制限を設けている場合もありますのでよく確認しましょう。
「素材を探すだけ」でもこれだけの注意を払っています。また、素材を提供してくださっている数々のサイト様にはこの場を借りて御礼申し上げます。
「カスペルスキーをオフにしたら解決できた」症状の一覧
・あくまで個人的な経験談です。決して公式の情報ではないことをご了承ください。
・新しく同様の手段で解決できた場合、追記します。
・時系列は無視または明記しません。バージョンの明記もしません。
「うまくいかないけど、もしかして」のきっかけとしてお役立てください。
MacOSでSlackが接続エラーで立ち上がらない
このページのなかにある「ERR_CONNECTION_RESET」でMacを再起動してもダメでした。
ChromeやFirefoxのプライベートブラウザでwebにアクセスできない
カスペルスキーが有効な状態だとwebページにアクセスできません。googleもYahooもみれませんでした。
Firefoxでwebにアクセスできない
この手順で証明書を手動認識させなきゃいけないらしい。ものすごく面倒臭い。ものすごーーーーくめんどくさい。
https://support.kaspersky.co.jp/14560
※この記事をかいている時点（2020年9月）では解消されています。
youtubeの動画をレスポンシブ対応
youtubeの動画をwebサイトに貼り付けるときに「埋め込み」でコードを生成します。が、これ、レスポンシブ対応がされていません。なので、自分でcssを追加してあげる必要があります。
参考記事：
[YouTube] iframeのレスポンシブ対応
https://qiita.com/0084ken/items/e7d35d2a8eb507f4d59c
この記事の通りだと、横幅が最大になってしまうので、すこし改修しました。
See the Pen youtubeをRWD用にcssを追記する。 by GEAR (@gear4wd) on CodePen.
表示したいサイズはアスペクト比を守らないとおかしなサイズになります。
わたしは数字の計算をしたくなかったので、youtubeで埋め込みコードを生成して、そこのサイズ通りの画像をphotoshopで作成→画像サイズを変更をして、でてきた数字を入力しました。