<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>カラー アーカイブ - なまはげブログ</title>
	<atom:link href="https://namahagedesu.com/tag/%E3%82%AB%E3%83%A9%E3%83%BC/feed/" rel="self" type="application/rss+xml" />
	<link>https://namahagedesu.com/tag/カラー/</link>
	<description>生まれは秋田のWeb制作フリーランス。 主に当ブログではWixのサイト制作を分かりやすく発信しています。</description>
	<lastBuildDate>Sun, 31 Mar 2024 02:37:25 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
	<item>
		<title>Wix サイトのカラーとフォントを一括で設定する方法【使い回しができるように一番最初に設定したい内容】</title>
		<link>https://namahagedesu.com/wix-batch-setting/</link>
		
		<dc:creator><![CDATA[namahage]]></dc:creator>
		<pubDate>Sun, 05 Nov 2023 01:32:45 +0000</pubDate>
				<category><![CDATA[Wix]]></category>
		<category><![CDATA[カラー]]></category>
		<category><![CDATA[フォント]]></category>
		<guid isPermaLink="false">https://namahagedesu.com/?p=1413</guid>

					<description><![CDATA[<p><img src="https://namahagedesu.com/wp-content/uploads/2023/11/wix-batch-setting-1024x576.png" class="webfeedsFeaturedVisual" /></p>
<p>Webサイトのデザインにおいて、フォントとカラーはブランドの個性を表現する重要な要素です。Wixではこれらの要素を一括で設定し、サイト全体で統一感を出すことができますが、意外と変更方法が分かりません。 この記事では、Wi [&#8230;]</p>
<p>投稿 <a href="https://namahagedesu.com/wix-batch-setting/">Wix サイトのカラーとフォントを一括で設定する方法【使い回しができるように一番最初に設定したい内容】</a> は <a href="https://namahagedesu.com">なまはげブログ</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[<p><img src="https://namahagedesu.com/wp-content/uploads/2023/11/wix-batch-setting-1024x576.png" class="webfeedsFeaturedVisual" /></p>
<p class="is-style-big_icon_hatena">Webサイトのデザインにおいて、フォントとカラーはブランドの個性を表現する重要な要素です。<br>Wixではこれらの要素を一括で設定し、サイト全体で統一感を出すことができますが、意外と変更方法が分かりません。<br><br>この記事では、Wixでサイトを作成する最初の段階で設定しておきたい<strong>フォントとカラーを一括で設定する方法</strong>をご紹介します！</p>



<h2 class="wp-block-heading">カラーの設定</h2>



<ol class="wp-block-list">
<li>Wixエディターを開き、「サイトデザイン」をクリックします。</li>



<li>「カラーテーマ」を選択し、「サイトカラーを編集」をクリックします。</li>



<li>「カラーを追加」を選択し、ブランドに合わせたカラーを選択またはカスタムカラーを追加します。</li>



<li>設定したカラーは、「テーマカラー」として保存され、サイト全体で使用できるようになります。</li>
</ol>



<figure class="wp-block-image size-full is-resized is-style-browser_mac"><img decoding="async" width="689" height="569" src="https://namahagedesu.com/wp-content/uploads/2023/11/スクリーンショット-2023-11-04-18.23.34（2）.png" alt="カラーの設定" class="wp-image-1416" style="aspect-ratio:1.210896309314587;width:624px;height:auto" srcset="https://namahagedesu.com/wp-content/uploads/2023/11/スクリーンショット-2023-11-04-18.23.34（2）.png 689w, https://namahagedesu.com/wp-content/uploads/2023/11/スクリーンショット-2023-11-04-18.23.34（2）-300x248.png 300w" sizes="(max-width: 689px) 100vw, 689px" /></figure>



<p>実際にテキストのカラーを変更してみると、「テーマカラー」に登録したカラーが反映出来ているのが確認できます。<br>※Wixのアップデートによって画面の見え方などは少し違います。</p>



<figure class="wp-block-image size-full is-resized is-style-browser_mac"><img decoding="async" width="850" height="609" src="https://namahagedesu.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-31-11.32.27（2）.jpg" alt="「テーマカラー」に登録したカラーが反映出来ているのが確認できます" class="wp-image-1877" style="width:622px;height:auto" srcset="https://namahagedesu.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-31-11.32.27（2）.jpg 850w, https://namahagedesu.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-31-11.32.27（2）-300x215.jpg 300w, https://namahagedesu.com/wp-content/uploads/2024/03/スクリーンショット-2024-03-31-11.32.27（2）-768x550.jpg 768w" sizes="(max-width: 850px) 100vw, 850px" /></figure>



<p class="has-border -border04">Wixでは、サイト全体にわたって使用するカラーを事前に定義しておくことができます。これにより、各ページやセクションでカラーを一括で設定し、ブランドのカラーパレットに忠実なデザインを維持できます。<br>メインカラー、サブカラー、ボタンカラーなどよく使うカラーはこちらに設定しましょう。</p>



<h2 class="wp-block-heading">フォントの設定</h2>



<h3 class="wp-block-heading">テキストテーマの編集</h3>



<ol class="wp-block-list">
<li>「サイトデザイン」に戻り、「テキストテーマ」を選択します。</li>



<li>「見出しh1」〜「段落3」までをクリックして編集します。</li>



<li>「フォント」「サイズ」「カラー」といった項目ごとに設定ができます。</li>



<li>設定したフォントは、テキストを追加する際に自動的に適用されますが、必要に応じて個別に変更することも可能です。</li>
</ol>



<figure class="wp-block-image size-full is-resized is-style-browser_mac"><img decoding="async" width="595" height="531" src="https://namahagedesu.com/wp-content/uploads/2023/11/スクリーンショット-2023-11-05-9.45.48（2）.png" alt="フォントの設定" class="wp-image-1417" style="aspect-ratio:1.1205273069679849;width:628px;height:auto" srcset="https://namahagedesu.com/wp-content/uploads/2023/11/スクリーンショット-2023-11-05-9.45.48（2）.png 595w, https://namahagedesu.com/wp-content/uploads/2023/11/スクリーンショット-2023-11-05-9.45.48（2）-300x268.png 300w" sizes="(max-width: 595px) 100vw, 595px" /></figure>



<h3 class="wp-block-heading">実演</h3>



<p>実際に「見出し h2」に以下を登録してみます。<br>・フォントは「Noto Sans JP」で設定<br>・フォントサイズは30pxの太字<br>・カラーは水色</p>



<figure class="wp-block-image size-full is-resized is-style-browser_mac"><img decoding="async" width="850" height="473" src="https://namahagedesu.com/wp-content/uploads/2023/11/スクリーンショット-2023-11-06-18.20.19（2）.png" alt="「見出し h2」の変更" class="wp-image-1484" style="aspect-ratio:1.7970401691331923;width:630px;height:auto" srcset="https://namahagedesu.com/wp-content/uploads/2023/11/スクリーンショット-2023-11-06-18.20.19（2）.png 850w, https://namahagedesu.com/wp-content/uploads/2023/11/スクリーンショット-2023-11-06-18.20.19（2）-300x167.png 300w, https://namahagedesu.com/wp-content/uploads/2023/11/スクリーンショット-2023-11-06-18.20.19（2）-768x427.png 768w" sizes="(max-width: 850px) 100vw, 850px" /></figure>



<p>Wixエディターに戻り、サイトに「見出し h2」を追加してみます。<br>先ほど「見出し h2」に設定した内容が反映されているのが分かるかと思います。<br>この作業を「見出しh1」〜「段落3」まで繰り返して作業が完了です！</p>



<figure class="wp-block-image size-full is-resized is-style-browser_mac"><img decoding="async" width="835" height="498" src="https://namahagedesu.com/wp-content/uploads/2023/11/スクリーンショット-2023-11-06-18.23.55（2）.png" alt="サイトに「見出し h2」を追加" class="wp-image-1485" style="aspect-ratio:1.676706827309237;width:629px;height:auto" srcset="https://namahagedesu.com/wp-content/uploads/2023/11/スクリーンショット-2023-11-06-18.23.55（2）.png 835w, https://namahagedesu.com/wp-content/uploads/2023/11/スクリーンショット-2023-11-06-18.23.55（2）-300x179.png 300w, https://namahagedesu.com/wp-content/uploads/2023/11/スクリーンショット-2023-11-06-18.23.55（2）-768x458.png 768w" sizes="(max-width: 835px) 100vw, 835px" /></figure>



<p class="has-border -border04">カラーと同様に、Wixではフォントも一括で設定することが可能です。統一されたフォントはサイトの読みやすさを向上させ、プロフェッショナルな印象を与えます。<br>セクションの見出し（h2）、セクションのサブ見出し（h3）、テキストなどはこちらに設定して使い回せるようにしておきましょう。</p>



<h2 class="wp-block-heading">サイトの背景カラーの設定</h2>



<ol class="wp-block-list">
<li>「サイトデザイン」に戻り、「ページ背景」を選択します。</li>



<li>「カラー」を選択し、希望の背景カラーを選択します。</li>



<li>また、「マイカラー」から事前に設定したカラーを選択することもできます。</li>



<li>背景カラーはページごとに異なるカラーを設定することも可能ですが、ブランドの一貫性を保つためには、全ページで同じカラーを使用することをお勧めします。</li>
</ol>



<figure class="wp-block-image size-full is-resized is-style-browser_mac"><img decoding="async" width="516" height="538" src="https://namahagedesu.com/wp-content/uploads/2023/11/スクリーンショット-2023-11-05-9.53.58（2）.png" alt="サイトの背景カラーの設定" class="wp-image-1418" style="aspect-ratio:0.9591078066914498;width:630px;height:auto" srcset="https://namahagedesu.com/wp-content/uploads/2023/11/スクリーンショット-2023-11-05-9.53.58（2）.png 516w, https://namahagedesu.com/wp-content/uploads/2023/11/スクリーンショット-2023-11-05-9.53.58（2）-288x300.png 288w" sizes="(max-width: 516px) 100vw, 516px" /></figure>



<p class="has-border -border04">Wixでは、サイトの背景カラーも簡単に設定できます。背景カラーはサイトの雰囲気を大きく左右するため、選択には慎重を期す必要があります。</p>



<h2 class="wp-block-heading">まとめ</h2>



<p class="is-style-bg_stripe">今回はWixでサイトのカラーとフォントを一括で設定する方法を解説しました。<br>フォントとカラーを一括で設定することで、サイト全体に統一感を持たせることができます。これにより、訪問者にとって覚えやすく、信頼感のあるサイトを作成することが可能になります。効率的にサイトのデザインを整えて良いサイトを作成しましょう！</p>


<div class="swell-block-postLink" data-style="card">			<div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">Pickup記事</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://namahagedesu.com/wp-content/uploads/2023/11/misoca-bill-300x169.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://namahagedesu.com/misoca-bill/">請求書作成サイト「MISOCA」の使い方【フリーランス初心者必見！】</a>
						<span class="p-blogCard__excerpt">フリーランスは一般の会社員とは違い、自分でやらなければいけない手続きが多いです。特にその一つが請求書の作成かと思います。請求書作成のオンラインサイトは「MISOC&#8230;</span>					</div>
				</div>
			</div>
		</div>

<div class="swell-block-postLink" data-style="card">			<div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">Pickup記事</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://namahagedesu.com/wp-content/uploads/2023/11/chatwork-treatment-300x169.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://namahagedesu.com/chatwork-treatment/">初心者向けガイド！ChatWork（チャットワーク）の使い方 【基本的な機能をまるっと解説】</a>
						<span class="p-blogCard__excerpt">ビジネスシーンで多く利用されるChatWork（チャットワーク）ですが、全く使用したことがないと、何から始めて・どんな操作・どんな使い方をすれば良いかの判断が出来ま&#8230;</span>					</div>
				</div>
			</div>
		</div><p>投稿 <a href="https://namahagedesu.com/wix-batch-setting/">Wix サイトのカラーとフォントを一括で設定する方法【使い回しができるように一番最初に設定したい内容】</a> は <a href="https://namahagedesu.com">なまはげブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
