VSCode(VisualStudioCode)の外見を変えて画面を見やすく&おしゃれにカスタマイズできる配色テーマを集めました。 テーマは新しいものが次々に公開されているので、ずっと使ってるテーマから乗り換えると意外と使いやすかったりします。 このページでは2023年最新のVSCodeテーマを紹介します。 -> こちらも合わせてどうぞ「2023 VSCodeのおすすめ拡張機能まとめ」 VSCodeのテーマ設定方法 VSCodeのテーマを紹介する前に、テーマの設定方法やインストール方法をさくっと解説しておきます。 VSCodeでテーマを変更するには以下の手順を実行します。 テーマをインストール テーマ設定画面を開く テーマを選ぶ 以下で詳しく解説します。 1.テーマをインストールする VSCodeを開いて右側のアイコンメニューから拡張機能をクリックして拡張機能パネルを開き、入力フォームにテ

BASEのHTML編集アプリを使った商品ページのカスタマイズ方法を紹介します。 BASEではブログページやお問い合わせページのようにカスタマイズがほとんどできないページがある中で、トップページと商品ページはレイアウトもカスタマイズできるので割と自由度高め とは言っても自動挿入で変更できないところもあるのでタグの使い方などを理解しておく必要があります。 BASEの商品ページでできること まずはBASEの商品ページでできるカスタマイズや挿入できるコンテンツについてまとめてみます。 ページのレイアウトを自由にカスタマイズできる ブログやお問い合わせはページ内容全て自動的に挿入されますが、商品ページはレイアウトのカスタマイズができるので比較的カスタマイズの自由度が高いページです。 通常は上の画像のようなレイアウトになっていることが多いですが、商品画像と商品情報を縦並びにしたり、複数商品画像がある場

BASEのテーマをカスタマイズできるHTML編集のやり方を初心者の方でもわかりやすく解説します。 BASEではHTML編集アプリを使うことでオリジナルテーマの作成や購入したテーマのカスタマイズができます。 やり方自体は簡単ですが編集できるページに制限があるなど注意点もいくつかあるのでまとめて解説します。 BASEのHTML編集アプリでできること BASEのHTML編集アプリはインストールすることでオリジナルテーマの作成や購入したテーマのカスタマイズができるアプリです。 テーマを自作したい場合や、PhotoshopやAdobeXDなどで作成したデザインからテーマを作る場合はこのアプリが必須です。 HTML編集画面からテーマで使用するCSSファイルや画像ファイルをアップロードすることもできます。 詳しいやり方はこの記事内の「CSSや画像などをファイルアップローダーでアップロードする」をご覧くだ

作成したホームページのレスポンシブ化（スマホ対応）はSEOにも影響する可能性があるため必ずやっておきたい作業です。 Wordpressで作ったホームページの場合はHTMLやCSSを編集する必要がありましたが、Elementorを使うことでコーディング作業不要でレスポンシブ化を行うことができます。 この記事ではWordpressプラグインのElementorを使って効率よくレスポンシブ化を行う方法を解説します。 Elementorを使ったホームページの作成方法に関しては「Elementorの使い方 初心者入門ガイド」にまとめているので、こちらもぜひチェックしてみてください。 レスポンシブ化って何？ レスポンシブ化は1つのWebサイトをパソコンでもスマホでも綺麗に見ることができるようにすることです。 レスポンシブ化されていないサイトは、画面全体が縮小されてズームしないと見えなかったり、幅が細長

Shopifyをこれからはじめる人のための、Shopifyカスタマイズ方法まとめです。 テンプレートタグやデータの読み込みなど、Shopifyカスタマイズで最低限理解しておきたい内容をサクッとまとめてみました。 Shopifyテーマをカスタマイズする３つの方法 テーマをカスタマイズする方法は３つあります。コーディング不要で簡単な設定だけでカスタマイズしたり、ローカル環境を構築して本格的にテーマ開発を行うこともできます。 管理画面からテーマエディタで編集 一番簡単なのがテーマエディタを使ったカスタマイズ。コードを一切触らず、テーマにある機能を使って配色変更やコンテンツの追加、入れ替えなどができます。 Wordpressのテーマカスタマイザーとよく似た感じですね。 管理画面からコード編集 ２つ目は管理画面からコードを編集する方法。見出しテキストの編集やHTMLタグの追加など、管理画面から簡単に

WebデザインのツールとしてXDは当たり前のように使われるようになってきています。でも納品はPSD（フォトショップデータ）を要求されることがまだまだ多いですよね。 XDは単独でPSDデータを出力する機能がありません。一旦svgやpdfにしてそれを読み込む方法もありますが、それだとレイヤー構造が無くなったり、フォントがアウトライン化されるという問題があります。 このページではXDで作成したファイルをPSDに変換する方法を紹介します。 XDのファイルをPSDに変換するには？ PSDデータが必要なときは、PhotopeaというWebサービスを使うことで簡単に変換できます。しかも無料で簡単に使えるので今すぐデータが欲しいというときも使えます。 ただし、普通にやると不完全なデータになるのでやり方と合わせてコツを紹介します。 XDをPSDに変換する方法 Photopeaを使ったXDデータからPSDデー

VSCodeをもっと活用したいVSCode使いのための拡張機能まとめです。 コーディング効率化できる定番拡張機能からAI対応、仕事効率化、ノートアプリになる超便利な拡張機能まで、2万本以上ある拡張機能の中から2023年におすすめできるものを厳選して集めてみました。 -> こちらも合わせてどうぞ「2024 VSCodeのおすすめテーマはこれだ！」 VSCodeのコーディング効率化できる拡張機能 VSCodeのコーディングを効率化してくれる拡張機能がこちら。 コードフォーマットの定番「Prettier」 「Prettier」はコードをルールに従って自動的にフォーマットしてくれます。HTMLだけでなくあらゆるプログラミング言語に対応している最強の拡張機能。 「Beautify」が使えなくなったのでその代替としてこちらが使われるようになっています。 これがあればお酒を飲んでいようが２日寝てなかろう