ウェブ制作 metaタグのviewportを理解するために簡単な言葉でまとめてみた
レスポンシブ・リキッドレイアウトのサイトを作るにあたって、<meta name="viewport" content="width=device-width, initial-scale=1.0">この設定をやっていれば問題なく作れますが、...
東條 はる
ウェブ制作 
ウェブ制作 Gutenbergのリンク・外部リンク設定の種類と効果をまとめて紹介(WordPress)
はる外部リンク時の設定の種類と効果について紹介します！WordPressのGutenbergエディターの設定に沿って紹介していきたいと思います！WordPressのGutenbergでリンクを設定する際に、『新しいタブで開く』・『nofol...
ウェブ制作 ゴーストボタンの背景を左から右へ受け流すアニメーション実装方法【ホバーアニメーション】
はるボタンをホバーすると左から右へ背景がアニメーションさせるCSSの方法を紹介します。その応用方法も、紹介するので覚えておくとさまざまな場面で使えます。今回は、CSSアニメーションで、左から右へと背景や線画流れるようなアニメーションの方法を...
ウェブ制作 最もシンプルなモーダルメニューの作り方【簡単なCSSとJavaScriptで実装】
はる一番簡単で使う場面が多いモーダルの作り方を紹介します。簡単なモーダルであればこの方法を使えば素早く実装できます。モーダル表示されるメニューとして紹介しますが、メニューリストの代わりにYouTube動画を埋め込んで、サムネイル画像用意しク...
ウェブ制作 ページ表示時にYouTubeのiframe埋め込みを自動再生させる方法
はるYoutubeのiframe埋め込みして、自動で再生させたい時の設定方法と、できる条件についてまとめました。特定条件なら自動再生させることができるので紹介します！ページ表示に、iframe埋め込まれたYouTube動画を再生させる方法と...
ウェブ制作 CSSだけでスムーススクロールを実装する方法
はる今回は、同じページ内のアンカーリンクで、ゆっくりスクロールされる『スムーススクロール』をJavaScriptを使わずに、CSSだけで実装する方法を紹介します。CSSだけでスムーススクロールを実装する方法デモ See the Pen by...
ウェブ制作 画像を拡大表示させるプラグイン【ポップアップ・モーダル機能】Easy FancyBox の使い方を紹介
今回は、WordPressで記事本文中に画像をクリックすると拡大された画像がモダール（ポップアップ）で表示されるようにするプラグインを紹介します。記事本文の画像をモーダル(ポップアップ)で拡大表示させたい！シンプル十分！という方に、『Eas...
ウェブ制作 【JavasScript】モーダルでの枠外をクリックしたら発火させる方法
はる今回は、JavaScriptのよくある『モーダル(ポップアップ表現)を閉じる』時に外枠をクリックしたら閉じる判定方法を紹介します。モーダル(ポップアップ)作成時の外側をクリックするときの判定を紹介注意はIE11は非対応の方法 (ポリフィ...
ライフスタイル カメラが趣味で勉強になるYoutuberを5選で紹介
私は、２年前にアイドルにはまり、それからα7 IIIでアイドルの写真を撮っています。別にその前に、カメラが好きだったわけでもなく知識がゼロでした。アイドルグループ『RAY』を撮影した写真ですが、今の時代Youtubeでカメラの知識を紹介して...
ウェブ制作 フロントエンドエンジニアがおすすめする仕事効率化アップするツール紹介
はる開発をしていて、本当に使うツールを紹介します！なくても大丈夫ですが、あると効率が必ず上がります。私は、某制作会社で5年以上フロントエンジニアとして仕事をしてきました。その中で、ある程度頭に入れておかなければならないことほかのツールに任せ...
ウェブ制作 【管理画面】投稿一覧の項目を追加・削除・変更が簡単 Admin Columns の使い方
はるWordPressの管理画面での投稿一覧が見づらいと思ったことはありませんか？今回は管理画面を見やすくする方法です！管理画面のカスタマイズに便利なプラグイン『Admin Columns』を紹介します。このプラグインは管理画面の記事一覧・...
ウェブ制作 テンプレート選択ができるようにする方法まとめ(WordPressテーマ開発)
複雑なデザインになってくると、固定ページや投稿ごとでテンプレートを分けたくなることがあります。その方法を紹介します。以前、テンプレート選択がうまく表示されないバグに遭遇した記事を書きました。今回はテンプレート選択を正しく指定する方法を紹介し...