加川制作舎 Kagawa Seisakusha

京都でWEB制作・動画編集などを行う
フリーランス、加川制作舎です。
お客様の”理想”のさらに上を行く、
感動を与えられるような仕事を心がけています。

2022.7.4: 源ノ角ゴシックとNoto Sans JPの違いについて
2022.6.27: 主要ブラウザは何がベスト？
2022.6.24: Googlemapの埋め込みコード
2022.6.20: WordPressのエンティティ化
2022.6.17: 波ダッシュと全角チルダ
2022.6.1: 三葉虫の落しもの
2021.12.14: ボタンの魔法
2021.12.6: 嬉しい段差
2021.12.1: 1ピクセルにまでこだわる
2021.11.16: 加川制作舎ができること

kagawaseisakusha

ウェブの仕事をやっていると発生するのが波線問題です。
「〜」と「～」は別の文字で、前者は波ダッシュ、後者は全角チルダです。
「から」と入力して変換した際にMacだと波ダッシュが表示され、Winだと全角チルダが表示されるのですが、問題は環境依存して文字化けを起こしてしまうことがあるということ。

波ダッシュの状態で編集等してサイトにアップしたら「?」になってしまうことがあって、特にMacユーザーからデータをもらった時など注意が必要な文字になります。
見た目の区別は付かないのですが、たとえばブラウザでソース表示をすると（Winだけ？）波ダッシュはジャギジャギして表示されます。

というような、波ダッシュなのか全角チルダなのかを毎回考えるのは非常に手間なので、html内テキストで「～」がある場合は例外なく文字参照に置き換えるようにしています。

波ダッシュと全角チルダ、だいたいのフォントでは見分けが付かないのですが、明朝体では見た目が違うように作られているものがあることを発見。
全角チルダの方が挑戦的な表情ですね。

#フリーランス #フリーランスデザイナー #コーディング #コーダー #webデザイン #web制作 #在宅ワーク #仕事 #webdesigner #coding #webdesign #ホームページ制作 #ブログ #html #フォント #font #小ネタ

コーディングをしているとブラウザチェックは必要なので主要ブラウザはインストールしてあるのですが、メインで使うブラウザは何が良いのかという話で。
以前はchromeを使用していて、その理由が拡張機能の質。firefoxにも拡張機能はあるけどchromeの拡張機能の方がコーディングに役立つものが多い。
でもchromeを使っているとけっこうメモリを使っていて重くなる原因になるかもと思っていたところに、Edgeもchromeの拡張機能を使用できるということを知ってEdgeに乗り換えました。
結局のところ、Edgeを使っていてもけっこうメモリを使っているようなのでさほど差は無いのかも知れないけど、またchromeに戻すのも手間なのでEdgeを使っています。
サイトのソースを見るのにはfirefoxだとエラーが表示されるのでそれを使っていましたが、今はその機能が無くなったんですかね、表示されないような気がします。代わりになるchrome拡張機能を見つけたため必要が無くなりました。

昔はSafariもWin用にインストールできましたが、既にサポート終了されていて、癖も強いブラウザであるため、safariで表示崩れが起きているという場合、Winには辛いです。
最大のクセツヨブラウザIEが終了したのは良かったですけどね。バージョンで対応していないcssのためにバージョン別のベンダープレフィックスやらプロパティ設定をしないといけないとかとか。我儘な彼女でしたね。

#フリーランス #フリーランスデザイナー #コーディング #コーダー #webデザイン #web制作 #在宅ワーク #仕事 #webdesigner #coding #webdesign #ホームページ制作 #ブログ #html #css #スタイルシート #wordpress #小ネタ

WEB制作でよく使うChrome拡張機能「Alt &

WEB制作でよく使うChrome拡張機能「Alt & Meta viewer」
画像に設定されたAltやTitle属性、サイズをツールチップで表示できます。ヘッダのTitle、Meta情報を表示させることができます。
alt抜けチェックには役立つし見やすいです。

画像に付けるalt属性ですが、その画像が表示されなかったときにテキスト表示されたり、視覚的にサイト閲覧が難しい方など向けの音声読み上げ時に読み上げられるテキストとなるものです。

近年はアクセシビリティ向上の必要性が高まっていることもあり、音声読み上げ機能の精度を上げる傾向にあり、altも適切に付けるべきとされています。
特に説明画像などは画像が抜けると整合性が取れなくなることもあるので、ページの流れがスムーズにつながるようにaltを設定します。

#フリーランス #フリーランスデザイナー #コーディング #コーダー #webデザイン #web制作 #サイト制作 #在宅ワーク #仕事 #webdesigner #coding #webdesign #ホームページ制作 #ブログ #html #小ネタ #拡張機能 #chrome #chrome拡張機能 #ブラウザ

ウェブサイトにメールアドレスをそのまま公開すると、ウェブ巡回ロボットメールアドレスが収集されてスパムメールのリスクが高まります。
そのため、ソース上ではメールアドレスとわかりにくくするためにエンティティ化を行ったコードを貼るのが常識となっています。
セキュリティに気を遣っていますと謳うコーダーの仕事で、そのままメールアドレスを載せているソースを見掛けると違和感を感じます。

で、本題ですが、Wordpressの記事投稿でエンティティ化したコードを入れて記事をアップするとエンティティ化を解除したテキストに変換するという謎現象に陥りました。
完全に余計なお世話なのですが、変換させずにエンティティコードのままアップする方法がわからなかったため、Wordpressの関数でテキストをエンティティ化してくれる関数であるantispambot()を使い、functionでエンティティ化させるコードをショートコード化するという逆輸入みたいな作業をすることになったのです。
何故テキストをエンティティ化してくれる関数があるのにエンティティコードをテキストに勝手に変換してしまうのか、まこと謎です。

#フリーランス #フリーランスデザイナー #コーディング #コーダー #webデザイン #web制作 #在宅ワーク #仕事 #webdesigner #coding #webdesign #ホームページ制作 #ブログ #html #wordpress #小ネタ

パソコン用の椅子を購入。
バランスチェアを導入してみました。

#バランスチェア #チェア #椅子 #いす #在宅ワーク #仕事 #在宅フリーランス #フリーランス #freelance #デスク環境 #デスク環境改善 #仕事部屋

子どもが、保育園のお散歩のお土産に、まつぼっくりを持って帰ってきました。家に持って帰ってきてからは床にポイーの状態で数日。気づくといつの間にか踏んづけられていたみたいで、床には平たくなったまつぼっくり、もとい三葉虫が転がっていました。
私はカンブリア紀が大好きです。

いつも、昼間の時間に仕事をして夕方から夜にかけての家事が終わったら子どもと自室に行って寝るまでの間、少し仕事をしています。最近は子どもの抱っこして期に入っていて、パソコンに向かっていると抱っこを要求してきます。
子どもも少しずつ成長してて座高が高くなってきているので、膝に座らせるとだいぶ画面が見づらくなります。
正直困っちゃうなあと思いつつ、たぶんもうしばらくしたら抱っこ要求もしなくなるだろうと諦めています。

子どもの成長や家庭の状況に合わせて働き方を変えられるというのは、フリーランスの大きな強みかもしれません。

#フリーランス #フリーランスデザイナー #コーディング #コーダー #webデザイン #デザイン #web制作 #在宅ワーク #仕事 #webdesigner #coding #wordpress #webdesign #design #ホームページ制作 #動画編集 #編集 #動画勉強中 #京都

スニペットを記録しておくアプリとしてBoost Noteを使用していましたが有料化してしまったため、massCodeというアプリに乗り換え。
しかしまたもや有料化してしまったため（過去の投稿を見ると使えていたのは短い期間でした...）、別のアプリを模索することに。
そこで今回乗り換えたのがNotion。

Notionはevernoteのようなものだと思っていましたが、全然違う性格のものだということがわかり、Notionの方が私の使用の仕方により合っていることがわかりました。むしろこれまで使ってきたどのアプリよりも優れているので、もっと早く知っておけば良かったぁぁと思います。

#notion #notionapp #スニペット管理 #便利ツール #便利アプリ #snippet #フリーランス #フリーランスデザイナー #コーディング #コーダー #webデザイン #web制作 #在宅ワーク #仕事 #webdesigner #coding #wordpress #効率化 #効率化ツール #仕事効率化

フルサイズミラーレスカメラを新規購入しました。
発売されたのはだいぶ前ためか入荷待ち商品で、9月～10月頃に到着予定とのことだったのですが、想定していたより早く届きました。

#canoneosr #canon #キャノン #ミラーレス一眼カメラ #ミラーレス一眼 #ミラーレス #カメラ #camera #フルサイズ #カミソリマクロ #シグマレンズ #マクロレンズ #sigma70mmmacro #写真 #フリーランス #フリーランスデザイナー #webデザイン #web制作 #サイト制作 #在宅ワーク #仕事 #webdesigner #webdesign #ホームページ制作 #写真撮影 #動画撮影

ポートフォリオサイトのトップページを変更しました。
ファーストビューには動画を差し込みました。
FVの下の制作実績は、マウスオーバーすると画像が白黒からカラーに変わって、ズームされた状態になっていたのが引きの画角になります。

https://kagawaseisakusha.work/

仕事のご依頼やお問い合わせはお気軽にDMもしくはポートフォリオサイトの問い合わせフォームよりお願いします。

#ポートフォリオ #ポートフォリオサイト #フリーランス #フリーランスデザイナー #コーディング #コーダー #webデザイン #デザイン #web制作 #在宅ワーク #仕事 #webdesigner #coding #wordpress #サンプルサイト #webdesign #design #ホームページ制作 #実績紹介 #実績 #works #動画編集 #編集 #動画勉強中 #京都

実績紹介「株式会社FSC様」サイトリニューアル
https://fsc.kyoto/

会社のイメージカラーをベースに、堅実さとすっきりとしたイメージを与えるようなサイトにデザインいたしました。

普段は分業制でお仕事を請けることが多いのですが、この案件では、ご提案からサイトデザイン、コーディング、wordpress実装まですべてお任せいただきサイトを公開できました。

仕事のご依頼やお問い合わせはお気軽にDMもしくはポートフォリオサイトの問い合わせフォームよりお願いします。

#ポートフォリオ #ポートフォリオサイト #フリーランス #フリーランスデザイナー #コーディング #コーダー #webデザイン #デザイン #web制作 #在宅ワーク #仕事 #webdesigner #coding #wordpress #サンプルサイト #webdesign #design #ホームページ制作 #実績紹介 #実績 #works

さらに読み込む... Instagram でフォロー