CSSやWordpressで役に立ったこととかをまとめたい。
最近の投稿
2023.4.12【Windows】NVIDIAのカスタム解像度を使ってフルHD(1,920×1,080)のモニターを2K(2560×1440)として広々使う方法勢いで大きいモニター買ったけどなんか画面が小さい ノートパソコンに27インチモニターを付けて広々と作業するつもりが、なぜかノートパソコンと同じ広さ・・・。 設定から解像度を変更しようとしても、(推奨)以上にならない こんなはずでは。 NVIDIAのカスタム解像度という機能があった 1. デスクトップ上を右クリックし、NVIDIAコントロールパネルを開く 2. 解像度の変更 > カスタマイズ から、好きな解像度を入れる コピペ用 4K（3840×2160）WQHD（2560×1440） これで無事解像度が変わりました。 補足 NVIDIAじゃなくてAMDのPCも、「仮想超高解像度」という機能を使って同じことができるようです。
2023.4.8Swiperのアレ（スライドがリンクになっていると挙動がおかしくなる問題）Swiperでスライドがリンクになっていると挙動がおかしい スライドしようとするとすごくブレる。 なんかオプションをつけるといいらしいけど、そうするとスライドしようとしてもクリック扱いになる。 centeredSlides: false にしてみた。 centeredSlides: false, 自分の場合は、キービジュアルをリンクにしていて、スライドしようとするとすごく挙動がおかしくなったけど、centeredSlidesをfalseにしたらなぜか落ち着いた。 詳しくは調べてないけど、とりあえず忘れないように残しとく。
2023.3.4Sass使わないほうがコーディングのスピードが出る？こんにちは。 最近思いました。 Sassの機能ってそんなに使ってないな、と。 Sassの機能といえば・・・ネストできるところですけど、@mediaと疑似要素以外は特に使ってないです。 .bl_card { &::before { content: 'あ'; } @media (max-width: 500px) { width: 100%; } } CSSだけのほうが速いのかな・・？ 考えるよりとりあえず試す派なので、Sassのコンパイル時間が無い方が調子が出るのかもしれない。
2023.3.3ChatGPTはコピペエンジニアの救世主となるか？はたまた仕事を奪うのか？ChatGPTに書けないコードを書いてもらう。こんにちは。 ChatGTPが流行っていますね。 仕事でこういうプログラムは書きたいっていうのはあるんだけど、自分では書けないとき、ChatGTPに聞くと便利なので使い方を紹介します。 使用例① .htaccessでリダイレクトしたいけど、書き方が調べてもよくわからない。 聞いてみた。 これはうまく動いた。 使用例② NAS上のファイルのテキスト検索をしたい。 聞いてみた。 これもうまく動いた。 まとめ 助かる～。 こういう標準化されていることについてはすごく詳しいです。 でもローカルな情報だとちょっと弱いです。 楽天APIについてもサンプルコードを聞いてみたことがあるんですが、コピペしても動かなくて、なんでかなーと思っていたら情報が古かったです。一昔前のAPIのエンドポイントを使ったコードを教えてくれました。 うごかなくても、それを取っ掛かりにして自分で作れることもあるし、本当に助かっています（笑）
2023.3.2GUIコンパイラ「Prepros」の Custom Tools を使って、EJSをコンパイルしたい！やりたいこと EJSをコマンド無しで使いたい。 フォルダ構成 project/ ├ src/ │ └ ejs/ │ └ index.ejs └ dist/ └ index.html やり方 1. EJSをグローバルインストールする npm i -g ejs 2. Prepros の Custom Tools に EJS のコマンドを設定する 右上のメニューから Project Setting > Custom Tools > Add Tool を選択。以下のように設定する。 ejs {{input}} -o {{output}} 3. EJSの出力先を設定する 次の画面で以下のように入力する。 これで設定は完了です。 4. index.ejsを保存する <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>EJS</title> </head> <body> <%= 'EJS'; %> </body> </html> 上記のコードで保存すると… コンパイル成功です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>EJS</title> </head> <body> EJS </body> </html> こんなふうに出力されました。 補足 EJSの出力先をドキュメントルート直下にしたいときは、Outputの Replace With を 「.」 するとなります。 EJSにパスの情報を渡したいときは、以下みたいな感じで変数を渡せます。そうすれば、グローバルで使えるのでincludeするときにいちいち変数を渡す必要がなくなって楽です。 ejs {{input}} -o {{output}} OUTPUT_DIR={{outputDir}} ROOT_DIR={{rootDir}} INCLUDE_DIR={{rootDir}}/src/ejs/include/