ライフスタイル ReZARDのパンツが普通に良かった
YouTubeが大好きな引きこもりWebエンジニアのはるです。YouTubeはいろいろなジャンルを見ていますが、その中でYouTuberのヒカルくんが紹介していた、ReZARDのパンツを買って履いてみて想像以上に良かったので紹介してみます。...
東條 はる
ライフスタイル 
ウェブ制作 SNSシェアーボタンaタグ用 別ウィンドウでいい感じのサイズで表示する
aタグで自作のシェアーリンクを作るとき、外部リンクで設定すると思います。それを、シェアーするにはちょうどいいサイズの別ウィンドウにする方法を紹介します。 普段私はBabelを通してjsを書いてるので、そのソースコードでの説明になります。 リ...
ウェブ制作 Macでスクショの保存場所を変更してpngをjpgに変更するまでやっちゃおう
毎回MacPCを新しくして、毎回同じ一連のコマンドをググってやるのが面倒なので、 Macのスクリーンショットの保存場所を変更png保存のものをjpg保存に変更 のコマンドをメモメモ... スクリーンショットの保存場所を変更 defaults...
アイドル RAYの「愛はどこいったの？」が最高過ぎる
シューゲイズアイドルのRAYの「愛はどこいったの?」が収録されたコンピレーションアルバム『Total Feedback 2020』が2020年10月21日に発売されました。 私は、RAYの大ファンだがシューゲイザーな曲が特別好きなわけではな...
ウェブ制作 metaタグのviewportを理解するために簡単な言葉でまとめてみた
レスポンシブ・リキッドレイアウトのサイトを作るにあたって、 <meta name="viewport" content="width=device-width, initial-scale=1.0"> この設定をやっていれば問題なく作れます...
ウェブ制作 Gutenbergのリンク・外部リンク設定の種類と効果をまとめて紹介(WordPress)
はる 外部リンク時の設定の種類と効果について紹介します！WordPressのGutenbergエディターの設定に沿って紹介していきたいと思います！ WordPressのGutenbergでリンクを設定する際に、『新しいタブで開く』・『nof...
ウェブ制作 ゴーストボタンの背景を左から右へ受け流すアニメーション実装方法【ホバーアニメーション】
はる ボタンをホバーすると左から右へ背景がアニメーションさせるCSSの方法を紹介します。その応用方法も、紹介するので覚えておくとさまざまな場面で使えます。 今回は、CSSアニメーションで、左から右へと背景や線画流れるようなアニメーションの方...
ウェブ制作 最もシンプルなモーダルメニューの作り方【簡単なCSSとJavaScriptで実装】
はる 一番簡単で使う場面が多いモーダルの作り方を紹介します。簡単なモーダルであればこの方法を使えば素早く実装できます。 モーダル表示されるメニューとして紹介しますが、メニューリストの代わりにYouTube動画を埋め込んで、サムネイル画像用意...
ウェブ制作 ページ表示時にYouTubeのiframe埋め込みを自動再生させる方法
はる Youtubeのiframe埋め込みして、自動で再生させたい時の設定方法と、できる条件についてまとめました。特定条件なら自動再生させることができるので紹介します！ ページ表示に、iframe埋め込まれたYouTube動画を再生させる方...
ウェブ制作 CSSだけでスムーススクロールを実装する方法
はる 今回は、同じページ内のアンカーリンクで、ゆっくりスクロールされる『スムーススクロール』をJavaScriptを使わずに、CSSだけで実装する方法を紹介します。 CSSだけでスムーススクロールを実装する方法 デモ See the Pen...
ウェブ制作 画像を拡大表示させるプラグイン【ポップアップ・モーダル機能】Easy FancyBox の使い方を紹介
今回は、WordPressで記事本文中に画像をクリックすると拡大された画像がモダール（ポップアップ）で表示されるようにするプラグインを紹介します。 記事本文の画像をモーダル(ポップアップ)で拡大表示させたい！シンプル十分！ という方に、『E...
ウェブ制作 【JavasScript】モーダルでの枠外をクリックしたら発火させる方法
はる 今回は、JavaScriptのよくある『モーダル(ポップアップ表現)を閉じる』時に外枠をクリックしたら閉じる判定方法を紹介します。 モーダル(ポップアップ)作成時の外側をクリックするときの判定を紹介注意はIE11は非対応の方法 (ポリ...