ちょっとサムネ変えたいけどイラレ解約したからfigma覚えようかな

【DaVinci Resolve】モノラルからステレオに変更する

編集していた際に最初にデータをもらった段階では普通に聴こえるけど、DaVinci Resolveに挿入して聴いてみると左からしか聴こえない、、というモノラル状態になっていることがありました。

左にある上から4番目のスプレッドの部分を変更する。

現状ではスプレッドの値は最大のFULLとなっている。

この値を最低値まで移動し、PNTの表示に変更する。

そうすることでモノラルの状態からステレオに

Safariで対応しないフォント

Chromeで開発されたフォントを使用した時、書き方によってはSafariで反応しないことがある。

書き方の問題だった今回は一つのフォントの話なので他のフォントを設定する場合はリンクとか違った方法を試した方が良いかもしれない。

Noto Sans CJK JP と書くとChromeでは反応するが、Safariでは反応しない。しかし'NotoSansCJKjp'と表記することでSafariでも反

Photoshopでデザインデータを扱う

今までデザインデータを扱うときに一回で選択したレイヤーに辿り着かず探すのが大変で時間がかかっていました。

そもそも設定が間違っていたレイヤー選択するときには左の一番上にある選択ツールを使用すると思うのですが、その時に設定することで簡単にレイヤーを選択することができました。

自動選択の項目をレイヤーに設定しましょう。

以前まではこれがグループになっていたので、デザインデータが探しにくく進めづら

最近バタバタしてて投稿できてないけど書きたいことはできた、、！週末かなあ

夢で悲しくなった話。

将来の夢の話ではなくて、寝てる時に見る夢の話です。

朝起きたらすごく泣いてて、ものすごくリアルで。だけど検索するといいことが書いてあったので。

両親が離婚して別居する夢起きたら泣いてるし物凄く鮮明に覚えていたんですよ。だから一瞬夢じゃなくて本当のことなのかってくらい焦った。

私がお互いの家をみてどっちがいいか選ぶところまで進んでいて、父の家はなぜかキャンピングカーみたいな感じで一人で住むよう

【WordPress】PHPでCSSファイルの取得

最近WordPressを触るようになり、CSSファイルを取得する書き方がとても手こずってしまったので共有します。

テンプレートタグを用いるWordPressを使うようになってファイルを修正するようになるとよく用いるテンプレートタグ。本当にたくさん種類があるので慣れるまで見つけるのに時間がかかる。

まずは通常の<link rel="stylesheet" type="text/css" href

画像が必要になったら

模写コーディングをするときや映像の素材でサイトから画像を保存したい時ありますよね。簡単に保存する方法がありました。

画像の上にカーソルを置いてその場所からドラックたったこれだけでした笑

今まで気がつかずにデベロッパーツールで検証を選択してそこから画像を保存していたのですが、、デスクトップにドラックするだけで保存できるみたいですね。

保存するつもりがなく誤作動で保存できてしまいびっくりして久々

毎日noteを書く気持ちではいるけど発見ないと書けないし平日で仕事した日オンリーだなあ、勉強した日なら別だけど。写真は結構前に行ったとこ👏

【Mac】Photoshopのデザインデータ

Photoshopでデザインデータを受け取りコーディングをすることがあると思うのですが、なんとなく納得行かないまま作業をしていて、やっと解決することができました。

Photoshopのサイズが大きく表示される問題
どうやらRetinaディスプレイだとサイズが大きく表示される弊害があるようで、、テキストやら画像やら半分のサイズで作成するのが正しいようです。

今までデカすぎるな、半分くらいかなと思

backgroundのショートハンド

CSSのプロパティbackgroundについてです。

backgroundにはbackgroundにはいくつか種類があり

・background-repeat
・background-position
・background-size
・background-image

など、、他にもいくつかありますが背景画像設定の際には上記を使用することが多いです。

今までは全て分けて書いていたのですが

画像データはなるべく小さくする

コーディング中に背景画像に同じ柄の模様が繰り返されている場合や記事を書いていて画像を添付する時、画像データは小さくすることで幸せになります。

そもそも小さくするとは・画像の大きさ自体を小さくする
・画像の容量を小さくする

ということです。

画像の大きさ自体を小さくする
これは背景に使う画像が同じ模様を繰り返すパターン化されたデザインの時に小さくすることができます。

一つの模様をPhotos

Google Cromeオススメの拡張機能

今まで教えていただいて便利だったGoogleChromeの拡張機能を紹介

１. Perfect Pixelデザインデータをコーディング中のサイトの上に透過して重ねて貼り付けることができ、正確にコーディングすることが可能。

2. Wappalyzerwebサイトを調べていてこれはどのような技術が使われているか気になった時に一瞬で調べることができるもの。

とてもオススメな拡張機能です！

他に

装飾のためだけの HTML 要素は推奨されない

文章の後ろに画像をつけたいとき。いつもはそれぞれ文章を表示するタグと画像を表示するタグを分けて、その二つのタグをもう一つのタグで囲んでグループにするという方法をやっていたのですが、、どうやらその方法は推奨されないらしく。

HTMLは文章を記載するためにあるものつまりはこういうことなんでしょうね。

どうしてもがない限りはテキストのタグの背景として画像を表示させる。表示するときはCSSのbackg

メディアクエリに応じたテキストの改行

同じ内容の文章を表示させ画面サイズによって改行させる方法

テキストの途中で装飾したいときはspanタグを使うと思うんですけど、テキストを改行する場所が画面サイズでそれぞれ違うときはspanとbrタグを交互に使うと思っていた。

テキストの改行はbrタグのみ
結果brのみで改行することが可能でした。cssでnth-child()やfirst-childを用いてbrタグにdisplay: block

【VSCode】 HTML記述の際に便利な方法

もしかしたら既に知っている方も多いかもしれませんが、、

便利でずっと使っているのでメモ程度に残しておく。

<>の省略方法HTMLでは<>用いて記述しますが、記述したいセレクタを表記したあとtabキーを押すことで自動で<>を記述してくれます。

また . ＋ クラス名を記述しtabキーを選択することで簡単にdivを生成してくれます。

さらに p. + クラス名にtabキーを選択することでも<>