FEED Validator

Congratulations!

This is a valid RSS feed.

Recommendations

This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

• line 49, column 0: content:encoded should not contain data-col attribute (13 occurrences) [help]

  <div class="c-balloon -bln-left" data-col="blue"><div class="c-balloon__icon ...
  

• line 49, column 0: content:encoded should not contain decoding attribute (112 occurrences) [help]

  <div class="c-balloon -bln-left" data-col="blue"><div class="c-balloon__icon ...
  

• line 49, column 0: content:encoded should not contain data-src attribute (13 occurrences) [help]

  <div class="c-balloon -bln-left" data-col="blue"><div class="c-balloon__icon ...
  

• line 74, column 0: content:encoded should not contain sizes attribute (80 occurrences) [help]

  <figure class="wp-block-image size-full"><img decoding="async" width="642" h ...
  

• line 99, column 0: style attribute contains potentially dangerous content: flex-basis (55 occurrences) [help]

  <div class="wp-block-column" style="flex-basis:33.33%">
  

• line 110, column 0: Non-html tag: mark (43 occurrences) [help]

  <p>ヘッダー文字色<br>ロゴ(<mark style="background-color:rgba(0, 0, 0, 0)" class="has- ...
  

• line 698, column 0: content:encoded should not contain data-id attribute (2 occurrences) [help]

  <div class="p-adBox -normal -border-on" data-id="1062" data-ad="normal"><div ...
  

• line 698, column 0: content:encoded should not contain data-ad attribute (2 occurrences) [help]

  <div class="p-adBox -normal -border-on" data-id="1062" data-ad="normal"><div ...
  

• line 698, column 0: content:encoded should not contain referrerpolicy attribute (2 occurrences) [help]

  <div class="p-adBox -normal -border-on" data-id="1062" data-ad="normal"><div ...
  

• line 698, column 0: content:encoded should not contain attributionsrc attribute (2 occurrences) [help]

  <div class="p-adBox -normal -border-on" data-id="1062" data-ad="normal"><div ...
  

• line 698, column 0: content:encoded should not contain loading attribute (2 occurrences) [help]

  <div class="p-adBox -normal -border-on" data-id="1062" data-ad="normal"><div ...
  

• line 700, column 944: content:encoded should not contain relative URL references: //image.moshimo.com/af-img/3130/000000053839.png (22 occurrences) [help]

  ... ttps://anco-lab.com">あんころブログ</a>.</p>]]></content:encoded>
                                               ^

• line 832, column 0: content:encoded should not contain data-type attribute (2 occurrences) [help]

  <div class="swell-block-postLink">			<div class="p-blogCard -internal" data- ...
  

• line 832, column 0: content:encoded should not contain data-onclick attribute (2 occurrences) [help]

  <div class="swell-block-postLink">			<div class="p-blogCard -internal" data- ...
  

• line 1920, column 0: content:encoded should not contain data-partsid attribute [help]

  <p class="u-mb-ctrl u-mb-5">今回だと「<strong><mark style="background-color:rgba( ...
  

Source: https://anco-lab.com/feed

1. <?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
2. xmlns:content="http://purl.org/rss/1.0/modules/content/"
3. xmlns:wfw="http://wellformedweb.org/CommentAPI/"
4. xmlns:dc="http://purl.org/dc/elements/1.1/"
5. xmlns:atom="http://www.w3.org/2005/Atom"
6. xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
7. xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
8. >
9.  
10. <channel>
11. <title>あんころブログ</title>
12. <atom:link href="https://anco-lab.com/feed" rel="self" type="application/rss+xml" />
13. <link>https://anco-lab.com</link>
14. <description>WEB制作技術ノート｜HTML・CSSやWordPress、学習・転職のことなど様々な情報を発信しています。</description>
15. <lastBuildDate>Fri, 20 Sep 2024 07:39:46 +0000</lastBuildDate>
16. <language>ja</language>
17. <sy:updatePeriod>
18. hourly </sy:updatePeriod>
19. <sy:updateFrequency>
20. 1 </sy:updateFrequency>
21. <generator>https://wordpress.org/?v=6.7</generator>
22.  
23. <image>
24. <url>https://anco-lab.com/wp-content/uploads/2023/04/cropped-favion2-32x32.png</url>
25. <title>あんころブログ</title>
26. <link>https://anco-lab.com</link>
27. <width>32</width>
28. <height>32</height>
29. </image>
30. <item>
31. <title>【CSSコード付き】SWELLヘッダー全体設定・カスタマイズ方法を解説</title>
32. <link>https://anco-lab.com/archives/1140</link>
33. <comments>https://anco-lab.com/archives/1140#respond</comments>
35. <dc:creator><![CDATA[ancolo]]></dc:creator>
36. <pubDate>Fri, 20 Sep 2024 07:32:21 +0000</pubDate>
37. <category><![CDATA[SWELL]]></category>
38. <guid isPermaLink="false">https://anco-lab.com/?p=1140</guid>
39.  
40. <description><![CDATA[<p><img src="https://anco-lab.com/wp-content/uploads/2024/09/blog-header-1024x651.jpg" class="webfeedsFeaturedVisual" /></p><p>まず最初に設定するのはヘッダーの方が多いと思います！テーマでの設定ってオリジナルよりめっちゃ簡単なのですが、設定ミスなど変に触ってしまい、元に戻せないという質問もたまに聞きます・・ 設定で悩んだことのある方へ、このような [&#8230;]</p>
41. <p>The post <a href="https://anco-lab.com/archives/1140">【CSSコード付き】SWELLヘッダー全体設定・カスタマイズ方法を解説</a> first appeared on <a href="https://anco-lab.com">あんころブログ</a>.</p>]]></description>
42. <content:encoded><![CDATA[<p><img src="https://anco-lab.com/wp-content/uploads/2024/09/blog-header-1024x651.jpg" class="webfeedsFeaturedVisual" /></p><p>まず最初に設定するのはヘッダーの方が多いと思います！<br>テーマでの設定ってオリジナルよりめっちゃ簡単なのですが、<br>設定ミスなど変に触ってしまい、元に戻せないという質問もたまに聞きます・・</p>
43.  
44.  
45.  
46. <p>設定で悩んだことのある方へ、このような疑問などありませんか？</p>
47.  
48.  
49. <div class="c-balloon -bln-left" data-col="blue"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://anco-lab.com/wp-content/uploads/2024/01/ko1@2x-150x150.png" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="http://anco-lab.com/wp-content/uploads/2024/01/ko1@2x-150x150.png" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -thinking -border-none"><div class="c-balloon__text">あまりテーマを触ったことがないから、設定場所が分からない・・<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div>
50.  
51.  
52. <div class="c-balloon -bln-left" data-col="blue"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://anco-lab.com/wp-content/uploads/2024/01/ko1@2x-150x150.png" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="http://anco-lab.com/wp-content/uploads/2024/01/ko1@2x-150x150.png" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -thinking -border-none"><div class="c-balloon__text">設定したものがどのように表示とリンクしてるの？<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div>
53.  
54.  
55.  
56. <p>基本のレイアウト設定はとても簡単です！<br>今回は、ヘッダーの基本設定〜アニメーションなどCSSを変更するカスタマイズ方法をご紹介します。</p>
57.  
58.  
59.  
60. <h2 class="wp-block-heading">ヘッダーの基本設定</h2>
61.  
62.  
63.  
64. <p>ヘッダーのカスタマイズは以下手順で設定場所を表示できます。</p>
65.  
66.  
67.  
68. <p class="has-border -border01">設定場所<br>外観 &gt; カスタマイズ &gt; ヘッダー</p>
69.  
70.  
71.  
72. <div class="wp-block-columns u-mb-ctrl u-mb-30">
73. <div class="wp-block-column">
74. <figure class="wp-block-image size-full"><img decoding="async" width="642" height="920" src="https://anco-lab.com/wp-content/uploads/2024/09/b7c99628c8b48a6739ecaa7b804e9567.png" alt="" class="wp-image-1212" srcset="https://anco-lab.com/wp-content/uploads/2024/09/b7c99628c8b48a6739ecaa7b804e9567.png 642w, https://anco-lab.com/wp-content/uploads/2024/09/b7c99628c8b48a6739ecaa7b804e9567-209x300.png 209w" sizes="(max-width: 642px) 100vw, 642px" /></figure>
75. </div>
76.  
77.  
78.  
79. <div class="wp-block-column">
80. <figure class="wp-block-image size-full"><img decoding="async" width="644" height="976" src="https://anco-lab.com/wp-content/uploads/2024/09/1b180ac2c5031ecf0c7ffae73fb38de7.png" alt="" class="wp-image-1152" srcset="https://anco-lab.com/wp-content/uploads/2024/09/1b180ac2c5031ecf0c7ffae73fb38de7.png 644w, https://anco-lab.com/wp-content/uploads/2024/09/1b180ac2c5031ecf0c7ffae73fb38de7-198x300.png 198w" sizes="(max-width: 644px) 100vw, 644px" /></figure>
81. </div>
82.  
83.  
84.  
85. <div class="wp-block-column"></div>
86. </div>
87.  
88.  
89.  
90. <p><strong>ここからはカスタマイズの各設定詳細をご説明します！</strong></p>
91.  
92.  
93.  
94. <h3 class="wp-block-heading">カラー設定</h3>
95.  
96.  
97.  
98. <div class="wp-block-columns">
99. <div class="wp-block-column" style="flex-basis:33.33%">
100. <figure class="wp-block-image size-full"><img decoding="async" width="626" height="492" src="https://anco-lab.com/wp-content/uploads/2024/09/40c1f9a53fa075770e05ca3cae457f1d.png" alt="" class="wp-image-1156" srcset="https://anco-lab.com/wp-content/uploads/2024/09/40c1f9a53fa075770e05ca3cae457f1d.png 626w, https://anco-lab.com/wp-content/uploads/2024/09/40c1f9a53fa075770e05ca3cae457f1d-300x236.png 300w" sizes="(max-width: 626px) 100vw, 626px" /></figure>
101. </div>
102.  
103.  
104.  
105. <div class="wp-block-column" style="flex-basis:66.66%">
106. <p>ヘッダー背景色<br>ヘッダー全体の背景色を設定</p>
107.  
108.  
109.  
110. <p>ヘッダー文字色<br>ロゴ(<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-01-color">※</mark>)・ナビメニューなどヘッダー内の文字色を設定</p>
111. </div>
112. </div>
113.  
114.  
115.  
116. <p>カラー変更方法<br>「色を選択」ボタンを押して変更したい色を選択またはカラーコードを入力してください。</p>
117.  
118.  
119.  
120. <p class="u-mb-ctrl u-mb-5">ヘッダー背景色・ヘッダー文字色変更例<br>背景色を薄いピンク色に、文字色を水色に変更した表示例です。</p>
121.  
122.  
123.  
124. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="435" src="https://anco-lab.com/wp-content/uploads/2024/09/c729e537a1e90a97d1d77b5c8b5a9871-1024x435.png" alt="" class="wp-image-1159" srcset="https://anco-lab.com/wp-content/uploads/2024/09/c729e537a1e90a97d1d77b5c8b5a9871-1024x435.png 1024w, https://anco-lab.com/wp-content/uploads/2024/09/c729e537a1e90a97d1d77b5c8b5a9871-300x127.png 300w, https://anco-lab.com/wp-content/uploads/2024/09/c729e537a1e90a97d1d77b5c8b5a9871-768x326.png 768w, https://anco-lab.com/wp-content/uploads/2024/09/c729e537a1e90a97d1d77b5c8b5a9871-1536x652.png 1536w, https://anco-lab.com/wp-content/uploads/2024/09/c729e537a1e90a97d1d77b5c8b5a9871-2048x869.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
125.  
126.  
127.  
128. <p class="is-style-big_icon_caution"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-01-color"><strong>※</strong></mark>ロゴがテキストの場合、変更したヘッダー文字色に変わるのでご注意ください。<br>　ロゴのみ色を変更したい際はcssで調整可能です！</p>
129.  
130.  
131.  
132. <h3 class="wp-block-heading">ヘッダーロゴの設定</h3>
133.  
134.  
135.  
136. <div class="wp-block-columns">
137. <div class="wp-block-column" style="flex-basis:33.33%">
138. <figure class="wp-block-image size-full"><img decoding="async" width="626" height="842" src="https://anco-lab.com/wp-content/uploads/2024/09/8875ab859e3743a215b060fca19675d2.png" alt="" class="wp-image-1162" srcset="https://anco-lab.com/wp-content/uploads/2024/09/8875ab859e3743a215b060fca19675d2.png 626w, https://anco-lab.com/wp-content/uploads/2024/09/8875ab859e3743a215b060fca19675d2-223x300.png 223w" sizes="(max-width: 626px) 100vw, 626px" /></figure>
139. </div>
140.  
141.  
142.  
143. <div class="wp-block-column" style="flex-basis:66.66%">
144. <p>ロゴ画像の設定<br>選択したロゴ画像が表示</p>
145.  
146.  
147.  
148. <p>画像サイズ<br>このサイズは<span class="swl-marker mark_blue">「高さ」の指定</span>になります！<br>推奨サイズは指定されているので、ルールに従って入力してください。<br><br>①画像サイズ(PC)<br>推奨サイズ：32〜120px<br><br>②画像サイズ(PC追従ヘッダー内)<br>推奨サイズ：24〜48px<br>①のサイズより小さい数値に設定することが多いと思います。<br><br>③画像サイズ(SP)<br>推奨サイズ：40〜80px</p>
149. </div>
150. </div>
151.  
152.  
153.  
154. <p class="u-mb-ctrl u-mb-5">①の画像サイズ(PC)数値を「40」と設定してる際の表示例<br>検証ツールで見ると、h1タグの高さが40となっていることが分かるかと思います！</p>
155.  
156.  
157.  
158. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="98" src="https://anco-lab.com/wp-content/uploads/2024/09/d1d845c4a526cbf66dcb070a5c67ce2a-1024x98.png" alt="" class="wp-image-1165" srcset="https://anco-lab.com/wp-content/uploads/2024/09/d1d845c4a526cbf66dcb070a5c67ce2a-1024x98.png 1024w, https://anco-lab.com/wp-content/uploads/2024/09/d1d845c4a526cbf66dcb070a5c67ce2a-300x29.png 300w, https://anco-lab.com/wp-content/uploads/2024/09/d1d845c4a526cbf66dcb070a5c67ce2a-768x74.png 768w, https://anco-lab.com/wp-content/uploads/2024/09/d1d845c4a526cbf66dcb070a5c67ce2a-1536x147.png 1536w, https://anco-lab.com/wp-content/uploads/2024/09/d1d845c4a526cbf66dcb070a5c67ce2a-2048x196.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
159.  
160.  
161.  
162. <h3 class="wp-block-heading">デザイン・レイアウト設定</h3>
163.  
164.  
165.  
166. <div class="wp-block-columns">
167. <div class="wp-block-column" style="flex-basis:33.33%">
168. <figure class="wp-block-image size-full"><img decoding="async" width="622" height="682" src="https://anco-lab.com/wp-content/uploads/2024/09/ff1ba5ab19f7b0ec66f4d5f016ddb134.png" alt="" class="wp-image-1170" srcset="https://anco-lab.com/wp-content/uploads/2024/09/ff1ba5ab19f7b0ec66f4d5f016ddb134.png 622w, https://anco-lab.com/wp-content/uploads/2024/09/ff1ba5ab19f7b0ec66f4d5f016ddb134-274x300.png 274w" sizes="(max-width: 622px) 100vw, 622px" /></figure>
169. </div>
170.  
171.  
172.  
173. <div class="wp-block-column" style="flex-basis:66.66%">
174. <p>ヘッダーのレイアウト(PC)<br>ロゴとナビメニューのレイアウトを設定</p>
175.  
176.  
177.  
178. <p>ヘッダーのレイアウト(SP)<br>ロゴとハンバーガーメニュー線のレイアウトを設定<br><br>ヘッダー境界線<br>しない：ヘッダー下に線も影も付けない<br>線：ヘッダー下に薄い黒色の線を表示<br>影：ヘッダー下に薄い黒色の影を表示</p>
179. </div>
180. </div>
181.  
182.  
183.  
184. <p class="is-style-big_icon_memo">備考：ヘッダー境界線の設定について<br>・ヘッダー設定の話なので、<span class="swl-marker mark_yellow">追従ヘッダーには当設定は関係ありません。</span><br>・線や影の色設定は決められているので、もし変更したい場合はcssで調整可能です！</p>
185.  
186.  
187.  
188. <h4 class="wp-block-heading">ヘッダーのレイアウト(PC)</h4>
189.  
190.  
191.  
192. <p class="is-style-stitch has-border -border02">以下、リンクになっているので設定したいレイアウト方法を選択してみてください！<br><a href="#layout-pc01" title="">ヘッダーナビをロゴの横に（右寄せ）</a><br><a href="#layout-pc02" title="">ヘッダーナビをロゴの横に（左寄せ）</a><br><a href="#layout-pc03" title="">ヘッダーナビを下に</a><br><a href="#layout-pc04" title="">ヘッダーナビを上に</a></p>
193.  
194.  
195.  
196. <p class="u-mb-ctrl u-mb-5" id="layout-pc01">ヘッダーナビをロゴの横に（右寄せ）<br>ロゴとナビメニューを両端配置で表示します。</p>
197.  
198.  
199.  
200. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="156" src="https://anco-lab.com/wp-content/uploads/2024/09/header_layout-pc01-1024x156.png" alt="" class="wp-image-1181" srcset="https://anco-lab.com/wp-content/uploads/2024/09/header_layout-pc01-1024x156.png 1024w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-pc01-300x46.png 300w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-pc01-768x117.png 768w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-pc01-1536x234.png 1536w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-pc01-2048x312.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
201.  
202.  
203.  
204. <p class="u-mb-ctrl u-mb-5" id="layout-pc02">ヘッダーナビをロゴの横に（左寄せ）<br>ロゴとナビメニューを左寄せで表示します。</p>
205.  
206.  
207.  
208. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="156" src="https://anco-lab.com/wp-content/uploads/2024/09/header_layout-pc02-1024x156.png" alt="" class="wp-image-1182" srcset="https://anco-lab.com/wp-content/uploads/2024/09/header_layout-pc02-1024x156.png 1024w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-pc02-300x46.png 300w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-pc02-768x117.png 768w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-pc02-1536x235.png 1536w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-pc02-2048x313.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
209.  
210.  
211.  
212. <p class="u-mb-ctrl u-mb-0" id="layout-pc03">ヘッダーナビを下に<br>ロゴとナビメニューを左右中央に配置し、ナビメニューをロゴの下に並べて表示します。</p>
213.  
214.  
215.  
216. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="156" src="https://anco-lab.com/wp-content/uploads/2024/09/header_layout-pc03-1024x156.png" alt="" class="wp-image-1183" srcset="https://anco-lab.com/wp-content/uploads/2024/09/header_layout-pc03-1024x156.png 1024w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-pc03-300x46.png 300w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-pc03-768x117.png 768w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-pc03-1536x234.png 1536w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-pc03-2048x312.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
217.  
218.  
219.  
220. <p class="u-mb-ctrl u-mb-5" id="layout-pc04">ヘッダーナビを上に<br>ロゴとナビメニューを左右中央に配置し、ナビメニューをロゴの上に並べて表示します。</p>
221.  
222.  
223.  
224. <figure class="wp-block-image size-large u-mb-ctrl u-mb-25"><img decoding="async" width="1024" height="155" src="https://anco-lab.com/wp-content/uploads/2024/09/header_layout-pc04-1024x155.png" alt="" class="wp-image-1184" srcset="https://anco-lab.com/wp-content/uploads/2024/09/header_layout-pc04-1024x155.png 1024w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-pc04-300x46.png 300w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-pc04-768x117.png 768w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-pc04-1536x233.png 1536w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-pc04-2048x311.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
225.  
226.  
227.  
228. <p class="is-style-icon_announce">ヘッダー追従時は、「ヘッダーナビをロゴの横に（右寄せ）」のレイアウト表示になります。</p>
229.  
230.  
231.  
232. <h4 class="wp-block-heading">ヘッダーのレイアウト(SP)</h4>
233.  
234.  
235.  
236. <p class="is-style-stitch has-border -border02">以下、リンクになっているので設定したいレイアウト方法を選択してみてください！<br><a href="#layout-sp01" title="">ロゴ：左 ／ メニュー：右</a><br><a href="#layout-sp02" title="">ロゴ：中央 ／ メニュー：右</a><br><a href="#layout-sp03" title="">ロゴ：中央 ／ メニュー：左</a></p>
237.  
238.  
239.  
240. <p class="u-mb-ctrl u-mb-5" id="layout-sp01">ロゴ：左 ／ メニュー：右<br>ロゴとハンバーガーメニューを両端配置で表示します。</p>
241.  
242.  
243.  
244. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="207" src="https://anco-lab.com/wp-content/uploads/2024/09/header_layout-sp01-1024x207.png" alt="" class="wp-image-1186" srcset="https://anco-lab.com/wp-content/uploads/2024/09/header_layout-sp01-1024x207.png 1024w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-sp01-300x61.png 300w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-sp01-768x155.png 768w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-sp01-1536x311.png 1536w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-sp01-2048x415.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
245.  
246.  
247.  
248. <p class="u-mb-ctrl u-mb-5" id="layout-sp02">ロゴ：中央 ／ メニュー：右<br>ロゴを左右中央に配置し、ハンバーガーメニューを右側に表示します。</p>
249.  
250.  
251.  
252. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="206" src="https://anco-lab.com/wp-content/uploads/2024/09/header_layout-sp02-1024x206.png" alt="" class="wp-image-1187" srcset="https://anco-lab.com/wp-content/uploads/2024/09/header_layout-sp02-1024x206.png 1024w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-sp02-300x60.png 300w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-sp02-768x155.png 768w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-sp02-1536x309.png 1536w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-sp02-2048x412.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
253.  
254.  
255.  
256. <p class="u-mb-ctrl u-mb-0" id="layout-sp03">ロゴ：中央 ／ メニュー：左<br>ロゴを左右中央に配置し、ハンバーガーメニューを左側に表示します。</p>
257.  
258.  
259.  
260. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="205" src="https://anco-lab.com/wp-content/uploads/2024/09/header_layout-sp03-1024x205.png" alt="" class="wp-image-1188" srcset="https://anco-lab.com/wp-content/uploads/2024/09/header_layout-sp03-1024x205.png 1024w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-sp03-300x60.png 300w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-sp03-768x154.png 768w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-sp03-1536x307.png 1536w, https://anco-lab.com/wp-content/uploads/2024/09/header_layout-sp03-2048x410.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
261.  
262.  
263.  
264. <p class="is-style-icon_announce" id="layout-pc04">検索ボタンなどのメニューボタンを入れている場合は、ハンバーガーメニューと真逆の位置に移動します。</p>
265.  
266.  
267.  
268. <h3 class="wp-block-heading">トップページでの特別設定</h3>
269.  
270.  
271.  
272. <div class="wp-block-columns">
273. <div class="wp-block-column" style="flex-basis:33.33%">
274. <figure class="wp-block-image size-full"><img decoding="async" width="626" height="414" src="https://anco-lab.com/wp-content/uploads/2024/09/7df77fba4000f6cff6e3b5a6bc005a7c.png" alt="" class="wp-image-1194" srcset="https://anco-lab.com/wp-content/uploads/2024/09/7df77fba4000f6cff6e3b5a6bc005a7c.png 626w, https://anco-lab.com/wp-content/uploads/2024/09/7df77fba4000f6cff6e3b5a6bc005a7c-300x198.png 300w" sizes="(max-width: 626px) 100vw, 626px" /></figure>
275. </div>
276.  
277.  
278.  
279. <div class="wp-block-column" style="flex-basis:66.66%">
280. <p>ヘッダーの背景を透明にするかどうか<br>上記で設定した、ヘッダーの背景色・文字色関係なく、<br><span class="swl-marker mark_yellow">トップページでのみ</span>変更が可能な設定になります。<br><br>しない：特に何もせず、設定したヘッダーの背景色・文字色で表示<br>する（文字色：白）：ヘッダー背景を透明に、文字色を白色で表示<br>する（文字色：黒）：ヘッダー背景を透明に、文字色を黒色で表示</p>
281. </div>
282. </div>
283.  
284.  
285.  
286. <p class="is-style-big_icon_caution"><strong>特別設定を使用する上での注意点</strong><br>①特別設定を使用する際は「ヘッダーのレイアウト(PC)」にて、以下に設定しておきましょう。<br><a href="#layout-pc01" title="">ヘッダーナビをロゴの横に（右寄せ）</a><br><a href="#layout-pc02" title="">ヘッダーナビをロゴの横に（左寄せ）</a><br>②TOPページでのみの設定なので、下層ページには適用されません。<br>③特別設定をした場合は当設定が優先されるので、<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-03-color">カラー設定</mark></strong>で設定した内容は適用されません。</p>
287.  
288.  
289.  
290. <h3 class="wp-block-heading">ヘッダーの追従設定</h3>
291.  
292.  
293.  
294. <div class="wp-block-columns">
295. <div class="wp-block-column" style="flex-basis:33.33%">
296. <figure class="wp-block-image size-full"><img decoding="async" width="628" height="526" src="https://anco-lab.com/wp-content/uploads/2024/09/05b39ac0e42857013eb9854b2bb1adb3.png" alt="" class="wp-image-1197" srcset="https://anco-lab.com/wp-content/uploads/2024/09/05b39ac0e42857013eb9854b2bb1adb3.png 628w, https://anco-lab.com/wp-content/uploads/2024/09/05b39ac0e42857013eb9854b2bb1adb3-300x251.png 300w" sizes="(max-width: 628px) 100vw, 628px" /></figure>
297. </div>
298.  
299.  
300.  
301. <div class="wp-block-column" style="flex-basis:66.66%">
302. <p>ヘッダーを追従させるかのチェックボックス<br>PC時とSP時(スマホ時)、各ヘッダーの追従を設定<br><br>追従ヘッダー(PC) の背景不透明度<br>少数で設定（1は透明度無し）<br><span class="swl-marker mark_blue">小数点に制限はないですが「0.3」や「0.5」など少数第一位までで設定する形で、私は普段設定してます！</span></p>
303. </div>
304. </div>
305.  
306.  
307.  
308. <p class="u-mb-ctrl u-mb-5">追従ヘッダーの背景不透明度を「0.7」に指定した場合の表示例</p>
309.  
310.  
311.  
312. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="243" src="https://anco-lab.com/wp-content/uploads/2024/09/672cbce0c005b5809f892de486868cf4-1024x243.png" alt="" class="wp-image-1200" srcset="https://anco-lab.com/wp-content/uploads/2024/09/672cbce0c005b5809f892de486868cf4-1024x243.png 1024w, https://anco-lab.com/wp-content/uploads/2024/09/672cbce0c005b5809f892de486868cf4-300x71.png 300w, https://anco-lab.com/wp-content/uploads/2024/09/672cbce0c005b5809f892de486868cf4-768x182.png 768w, https://anco-lab.com/wp-content/uploads/2024/09/672cbce0c005b5809f892de486868cf4-1536x365.png 1536w, https://anco-lab.com/wp-content/uploads/2024/09/672cbce0c005b5809f892de486868cf4-2048x487.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
313.  
314.  
315.  
316. <h3 class="wp-block-heading u-mb-ctrl u-mb-10">ヘッダーバー設定</h3>
317.  
318.  
319.  
320. <p><span class="swl-marker mark_yellow">PCでのみ表示されます！</span></p>
321.  
322.  
323.  
324. <div class="wp-block-columns">
325. <div class="wp-block-column" style="flex-basis:33.33%">
326. <figure class="wp-block-image size-full"><img decoding="async" width="630" height="850" src="https://anco-lab.com/wp-content/uploads/2024/09/4ca8d626727ec7dff92118c2a7624d1d.png" alt="" class="wp-image-1205" srcset="https://anco-lab.com/wp-content/uploads/2024/09/4ca8d626727ec7dff92118c2a7624d1d.png 630w, https://anco-lab.com/wp-content/uploads/2024/09/4ca8d626727ec7dff92118c2a7624d1d-222x300.png 222w" sizes="(max-width: 630px) 100vw, 630px" /></figure>
327. </div>
328.  
329.  
330.  
331. <div class="wp-block-column" style="flex-basis:66.66%">
332. <p>ヘッダーバー背景色<br>バーの背景色を設定<br>※デフォルトは指定されていないので、メインカラーが適用されます。<br><br>ヘッダーバー文字色<br>キャッチコピーやSNSアイコンリストの色を設定<br><br>表示設定<br>①SNSアイコンリストを表示するチェックボックス<br>カスタマイズ「SNS情報」にて、SNSリンク設定でURLが入っていれば表示します。<br><br>②コンテンツが空でもボーダーとして表示するチェックボックス<br>キャッチコピーやSNSアイコンリストが無い場合でも、ボーダー線として表示させるかを設定できます。</p>
333. </div>
334. </div>
335.  
336.  
337.  
338. <p class="u-mb-ctrl u-mb-5">ヘッダー文字色を変えた場合のSNSアイコンリスト表示例<br>ヘッダーバー文字色で設定した黄色が適用されていますね。</p>
339.  
340.  
341.  
342. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="398" src="https://anco-lab.com/wp-content/uploads/2024/09/33cf6832e381654ba45d2f3318fce90e-1024x398.png" alt="" class="wp-image-1207" srcset="https://anco-lab.com/wp-content/uploads/2024/09/33cf6832e381654ba45d2f3318fce90e-1024x398.png 1024w, https://anco-lab.com/wp-content/uploads/2024/09/33cf6832e381654ba45d2f3318fce90e-300x116.png 300w, https://anco-lab.com/wp-content/uploads/2024/09/33cf6832e381654ba45d2f3318fce90e-768x298.png 768w, https://anco-lab.com/wp-content/uploads/2024/09/33cf6832e381654ba45d2f3318fce90e-1536x596.png 1536w, https://anco-lab.com/wp-content/uploads/2024/09/33cf6832e381654ba45d2f3318fce90e-2048x795.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
343.  
344.  
345.  
346. <p class="is-style-big_icon_memo">ヘッダーバーには、以下設定によって表示有無が変わります。<br>・キャッチフレーズの表示<br>外観 &gt; サイト基本情報 にて設定している場合表示します。<br>表示位置：ヘッダーバー左側（ロゴ上部）に表示<br><br>・検索アイコン<br>外観 &gt; カスタマイズ &gt; ヘッダー 検索ボタン設定にて、「ヘッダーバー内のアイコンリストに表示」を設定している場合表示します。<br>表示位置：SNSアイコンリストの右側に表示</p>
347.  
348.  
349.  
350. <h3 class="wp-block-heading u-mb-ctrl u-mb-10">キャッチフレーズ設定</h3>
351.  
352.  
353.  
354. <p><span class="swl-marker mark_yellow">PCでのみ表示されます！</span></p>
355.  
356.  
357.  
358. <div class="wp-block-columns">
359. <div class="wp-block-column" style="flex-basis:33.33%">
360. <figure class="wp-block-image size-full"><img decoding="async" width="626" height="424" src="https://anco-lab.com/wp-content/uploads/2024/09/bba154806bc83690444aed99b8dd4d07.png" alt="" class="wp-image-1213" srcset="https://anco-lab.com/wp-content/uploads/2024/09/bba154806bc83690444aed99b8dd4d07.png 626w, https://anco-lab.com/wp-content/uploads/2024/09/bba154806bc83690444aed99b8dd4d07-300x203.png 300w" sizes="(max-width: 626px) 100vw, 626px" /></figure>
361. </div>
362.  
363.  
364.  
365. <div class="wp-block-column" style="flex-basis:66.66%">
366. <p>キャッチフレーズの表示位置<br>表示しない：キャッチフレーズは非表示<br>ヘッダーバーに表示：ヘッダーバー内（ロゴ上辺り）に表示<br>ヘッダーロゴの近くに表示：ロゴ右側またはロゴ下側に表示(<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-01-color">※</mark>)<br><br>キャッチフレーズにサイト名を表示するかのチェックボックス<br>チェックした場合、左記画像のように「｜サイト名」で表示</p>
367. </div>
368. </div>
369.  
370.  
371.  
372. <p class="u-mb-ctrl u-mb-5"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-01-color"><strong>※</strong></mark>「ヘッダーロゴの近くに表示」を選択した場合、選択しているヘッダーレイアウトによって変わります！</p>
373.  
374.  
375.  
376. <p class="u-mb-ctrl u-mb-5">①キャッチフレーズがロゴ右側に表示される際のレイアウト設定<br><a href="#layout-pc01" title="">ヘッダーナビをロゴの横に（右寄せ）</a><br><a href="#layout-pc02" title="">ヘッダーナビをロゴの横に（左寄せ）</a></p>
377.  
378.  
379.  
380. <p>②キャッチフレーズがロゴ下側に表示される際のレイアウト設定<br><a href="#layout-pc03" title="">ヘッダーナビを下に</a><br><a href="#layout-pc04" title="">ヘッダーナビを上に</a></p>
381.  
382.  
383.  
384. <h3 class="wp-block-heading u-mb-ctrl u-mb-10">ヘッダーメニュー（グローバルナビ）設定</h3>
385.  
386.  
387.  
388. <div class="wp-block-columns">
389. <div class="wp-block-column" style="flex-basis:33.33%">
390. <figure class="wp-block-image size-full"><img decoding="async" width="628" height="1112" src="https://anco-lab.com/wp-content/uploads/2024/09/b728bda6f47c9e15540cbfd6fc44de94.png" alt="" class="wp-image-1215" srcset="https://anco-lab.com/wp-content/uploads/2024/09/b728bda6f47c9e15540cbfd6fc44de94.png 628w, https://anco-lab.com/wp-content/uploads/2024/09/b728bda6f47c9e15540cbfd6fc44de94-169x300.png 169w, https://anco-lab.com/wp-content/uploads/2024/09/b728bda6f47c9e15540cbfd6fc44de94-578x1024.png 578w" sizes="(max-width: 628px) 100vw, 628px" /></figure>
391. </div>
392.  
393.  
394.  
395. <div class="wp-block-column" style="flex-basis:66.66%">
396. <p>マウスホバーエフェクト<br>ラインの出現（中央から）：メニューの下中央からラインを表示<br>ラインの出現（左から）：メニューの下左からラインを表示<br>ブロックの出現：メニューの下からブロックのような線を表示<br>背景グレー：メニューの後ろに薄いグレー背景色をつける<br>背景明るく：背景色がある場合に、透過のある白色をつける<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-01-color">※ヘッダーメニューの背景色が設定している場合に有効</mark><br><br>ホバー時に出てくるラインの色<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-01-color">※ヘッダーメニューの背景色が設定されている場合は、ラインが白色で表示されます。</mark><br>色の選択肢：「メインカラー」か「テキストカラー」<br>外観 &gt; カスタマイズ &gt; サイト全体設定 &gt; 基本カラーで選択してる色で表示<br><br>ヘッダーメニューの背景色<br>背景色は、メインカラー又はお好みの色を設定<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-01-color">※ヘッダーレイアウトが縦並びの場合に有効です！</mark><br>「ヘッダーナビを下に」「ヘッダーナビを上に」のいずれかを選択しておいてください。<br><br>サブメニューの背景色<br>外観 &gt; メニューで、サブメニュー設定をしている場合の背景色を付けて表示<br>背景色は、白色または全体設定のメインカラーを設定</p>
397. </div>
398. </div>
399.  
400.  
401.  
402. <p class="u-mb-ctrl u-mb-5">サブメニューを設定し、背景色を「ホワイト」とした場合の表示例</p>
403.  
404.  
405. <div class="wp-block-image">
406. <figure class="alignleft size-full is-resized"><img decoding="async" width="586" height="268" src="https://anco-lab.com/wp-content/uploads/2024/09/11984fb9ca197e576ae495216b533c71.png" alt="" class="wp-image-1217" style="width:300px" srcset="https://anco-lab.com/wp-content/uploads/2024/09/11984fb9ca197e576ae495216b533c71.png 586w, https://anco-lab.com/wp-content/uploads/2024/09/11984fb9ca197e576ae495216b533c71-300x137.png 300w" sizes="(max-width: 586px) 100vw, 586px" /></figure></div>
407.  
408.  
409. <p class="is-style-big_icon_memo">背景変更系はアニメーションの開始を遅らせる秒数などを指定できる「transition」が入ってないので、<br>もし指定される際はcssで調整した方が自然な動きになると思います！</p>
410.  
411.  
412.  
413. <h3 class="wp-block-heading u-mb-ctrl u-mb-10">ヘッダーメニュー（SP）設定</h3>
414.  
415.  
416.  
417. <div class="wp-block-columns">
418. <div class="wp-block-column" style="flex-basis:33.33%">
419. <figure class="wp-block-image size-full"><img decoding="async" width="632" height="312" src="https://anco-lab.com/wp-content/uploads/2024/09/b3d77c462f1f1d88fe0bf226ecb0690d.png" alt="" class="wp-image-1219" srcset="https://anco-lab.com/wp-content/uploads/2024/09/b3d77c462f1f1d88fe0bf226ecb0690d.png 632w, https://anco-lab.com/wp-content/uploads/2024/09/b3d77c462f1f1d88fe0bf226ecb0690d-300x148.png 300w" sizes="(max-width: 632px) 100vw, 632px" /></figure>
420. </div>
421.  
422.  
423.  
424. <div class="wp-block-column" style="flex-basis:66.66%">
425. <p>スマホ表示時のループ設定<br>ナビメニューをスライド形式で表示</p>
426. </div>
427. </div>
428.  
429.  
430.  
431. <p class="is-style-icon_announce u-mb-ctrl u-mb-5">上記ループ設定を行いたい場合は、事前に以下設定を行いましょう！</p>
432.  
433.  
434.  
435. <p class="u-mb-ctrl u-mb-5">①外観 &gt; カスタマイズ &gt; メニュー画面を表示</p>
436.  
437.  
438.  
439. <p class="u-mb-ctrl u-mb-5">②画面下部のメニュー設定で「スマホ用ヘッダー」にチェックを入れる</p>
440.  
441.  
442. <div class="wp-block-image u-mb-ctrl u-mb-15">
443. <figure class="alignleft size-full is-resized"><img decoding="async" width="594" height="305" src="https://anco-lab.com/wp-content/uploads/2024/09/Group-3184.png" alt="" class="wp-image-1220" style="width:400px" srcset="https://anco-lab.com/wp-content/uploads/2024/09/Group-3184.png 594w, https://anco-lab.com/wp-content/uploads/2024/09/Group-3184-300x154.png 300w" sizes="(max-width: 594px) 100vw, 594px" /></figure></div>
444.  
445.  
446. <p class="u-mb-ctrl u-mb-5">メニューがループ表示になる</p>
447.  
448.  
449. <div class="wp-block-image">
450. <figure class="alignleft size-full is-resized"><img decoding="async" width="437" height="245" src="https://anco-lab.com/wp-content/uploads/2024/09/Group-3185.png" alt="" class="wp-image-1226" style="width:400px" srcset="https://anco-lab.com/wp-content/uploads/2024/09/Group-3185.png 437w, https://anco-lab.com/wp-content/uploads/2024/09/Group-3185-300x168.png 300w" sizes="(max-width: 437px) 100vw, 437px" /></figure></div>
451.  
452.  
453. <p class="is-style-big_icon_point">メニューが多い場合、どんどん横にスクロール出来る感じになります。<br>メニューが少ない場合、上記のように同じメニューが表示される為<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-03-color">ループ設定はオススメしません</mark>！</p>
454.  
455.  
456.  
457. <h3 class="wp-block-heading" id="search-button">検索ボタン設定</h3>
458.  
459.  
460.  
461. <div class="wp-block-columns">
462. <div class="wp-block-column" style="flex-basis:33.33%">
463. <figure class="wp-block-image size-full"><img decoding="async" width="630" height="490" src="https://anco-lab.com/wp-content/uploads/2024/09/81919c750d22ea95e5d41596c7c2132d.png" alt="" class="wp-image-1234" srcset="https://anco-lab.com/wp-content/uploads/2024/09/81919c750d22ea95e5d41596c7c2132d.png 630w, https://anco-lab.com/wp-content/uploads/2024/09/81919c750d22ea95e5d41596c7c2132d-300x233.png 300w" sizes="(max-width: 630px) 100vw, 630px" /></figure>
464. </div>
465.  
466.  
467.  
468. <div class="wp-block-column" style="flex-basis:66.66%">
469. <p>検索ボタンの表示位置（PC）<br>表示しない：検索ボタンを非表示<br>ヘッダーバー内のアイコンリストに表示：ヘッダーバーアイコンの右側に表示<br>ヘッダーメニューに表示：ナビメニューの右側に表示<br><br>検索ボタンの表示設定（SP）<br>表示しない：検索ボタンを非表示<br>カスタムボタンにセット：<a href="#custom-button" title="">カスタムボタン設定</a>で設定したアイコン・色で表示</p>
470. </div>
471. </div>
472.  
473.  
474.  
475. <p class="u-mb-ctrl u-mb-5">検索ボタンの表示位置（PC）の指定例<br><span class="swl-marker mark_blue">検索アイコンの位置が違うことが分かりますね！</span></p>
476.  
477.  
478.  
479. <div class="wp-block-columns">
480. <div class="wp-block-column">
481. <p class="u-mb-ctrl u-mb-5">ヘッダーバー内のアイコンリストに表示</p>
482.  
483.  
484.  
485. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="632" src="https://anco-lab.com/wp-content/uploads/2024/09/edb0d2aabd798ec06d56597d09aa9910-1024x632.png" alt="" class="wp-image-1236" srcset="https://anco-lab.com/wp-content/uploads/2024/09/edb0d2aabd798ec06d56597d09aa9910-1024x632.png 1024w, https://anco-lab.com/wp-content/uploads/2024/09/edb0d2aabd798ec06d56597d09aa9910-300x185.png 300w, https://anco-lab.com/wp-content/uploads/2024/09/edb0d2aabd798ec06d56597d09aa9910-768x474.png 768w, https://anco-lab.com/wp-content/uploads/2024/09/edb0d2aabd798ec06d56597d09aa9910.png 1216w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
486. </div>
487.  
488.  
489.  
490. <div class="wp-block-column">
491. <p class="u-mb-ctrl u-mb-5">ヘッダーメニューに表示</p>
492.  
493.  
494.  
495. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="626" src="https://anco-lab.com/wp-content/uploads/2024/09/61a432bc624ea6cdcfcd9c6caf547b03-1024x626.png" alt="" class="wp-image-1237" srcset="https://anco-lab.com/wp-content/uploads/2024/09/61a432bc624ea6cdcfcd9c6caf547b03-1024x626.png 1024w, https://anco-lab.com/wp-content/uploads/2024/09/61a432bc624ea6cdcfcd9c6caf547b03-300x183.png 300w, https://anco-lab.com/wp-content/uploads/2024/09/61a432bc624ea6cdcfcd9c6caf547b03-768x470.png 768w, https://anco-lab.com/wp-content/uploads/2024/09/61a432bc624ea6cdcfcd9c6caf547b03.png 1220w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
496. </div>
497. </div>
498.  
499.  
500.  
501. <h3 class="wp-block-heading">メニューボタン設定</h3>
502.  
503.  
504.  
505. <p><span class="swl-marker mark_yellow">スマホのハンバーガーメニューに関する設定です！</span></p>
506.  
507.  
508.  
509. <div class="wp-block-columns">
510. <div class="wp-block-column" style="flex-basis:33.33%">
511. <figure class="wp-block-image size-full"><img decoding="async" width="626" height="552" src="https://anco-lab.com/wp-content/uploads/2024/09/ecb3db793d411b7d84757fcdbeb7fa7f.png" alt="" class="wp-image-1241" srcset="https://anco-lab.com/wp-content/uploads/2024/09/ecb3db793d411b7d84757fcdbeb7fa7f.png 626w, https://anco-lab.com/wp-content/uploads/2024/09/ecb3db793d411b7d84757fcdbeb7fa7f-300x265.png 300w" sizes="(max-width: 626px) 100vw, 626px" /></figure>
512. </div>
513.  
514.  
515.  
516. <div class="wp-block-column" style="flex-basis:66.66%">
517. <p>アイコン下に表示されるテキスト<br>ハンバーガーメニューの三本線下にテキストを表示<br><br>メニューボタン背景色<br>三本線に背景色を設定<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-01-color">※背景色を設定した場合、線・文字は白色に変化します。</mark></p>
518. </div>
519. </div>
520.  
521.  
522.  
523. <p class="u-mb-ctrl u-mb-5">上記それぞれの指定例</p>
524.  
525.  
526.  
527. <div class="wp-block-columns">
528. <div class="wp-block-column">
529. <p class="u-mb-ctrl u-mb-5">テキストに「MENU」、背景色をオレンジに設定した際、線・文字色が白色で表示されます。</p>
530.  
531.  
532.  
533. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="575" src="https://anco-lab.com/wp-content/uploads/2024/09/8b823c8cee5cdd422647a1d3dd10e198-1024x575.png" alt="" class="wp-image-1243" srcset="https://anco-lab.com/wp-content/uploads/2024/09/8b823c8cee5cdd422647a1d3dd10e198-1024x575.png 1024w, https://anco-lab.com/wp-content/uploads/2024/09/8b823c8cee5cdd422647a1d3dd10e198-300x168.png 300w, https://anco-lab.com/wp-content/uploads/2024/09/8b823c8cee5cdd422647a1d3dd10e198-768x431.png 768w, https://anco-lab.com/wp-content/uploads/2024/09/8b823c8cee5cdd422647a1d3dd10e198-1536x862.png 1536w, https://anco-lab.com/wp-content/uploads/2024/09/8b823c8cee5cdd422647a1d3dd10e198-2048x1149.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
534. </div>
535. </div>
536.  
537.  
538.  
539. <h3 class="wp-block-heading" id="custom-button">カスタムボタン設定</h3>
540.  
541.  
542.  
543. <div class="wp-block-columns">
544. <div class="wp-block-column" style="flex-basis:33.33%">
545. <figure class="wp-block-image size-full"><img decoding="async" width="630" height="1026" src="https://anco-lab.com/wp-content/uploads/2024/09/057013ba51dc44d1c02268480d74e890.png" alt="" class="wp-image-1246" srcset="https://anco-lab.com/wp-content/uploads/2024/09/057013ba51dc44d1c02268480d74e890.png 630w, https://anco-lab.com/wp-content/uploads/2024/09/057013ba51dc44d1c02268480d74e890-184x300.png 184w, https://anco-lab.com/wp-content/uploads/2024/09/057013ba51dc44d1c02268480d74e890-629x1024.png 629w" sizes="(max-width: 630px) 100vw, 630px" /></figure>
546. </div>
547.  
548.  
549.  
550. <div class="wp-block-column" style="flex-basis:66.66%">
551. <p>アイコンクラス名<br>SWELLが定めるアイコンを設定<br>SWELLで標準で使用できるアイコンフォントは、<a href="https://icomoon.io/" target="_blank" rel="noopener" title="">IcoMoon</a>で作成されています！<br><br>アイコン下に表示するテキスト<br>ハンバーガーメニュー時同様、アイコン下に表示するテキストを設定<br><br>カスタムボタン背景色<br>アイコン下に背景色を設定<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-01-color">※背景色を設定した場合、線・文字は白色に変化します。</mark><br><br>リンク先URL<br>設定あり：指定したリンク先に遷移<br>設定なし：モーダルの検索画面<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-01-color">※リンク設定を行う際は、<a href="#search-button" title="">検索ボタン設定</a>の検索ボタンの表示設定（SP）を「表示しない」に設定しておく必要があります。</mark></p>
552. </div>
553. </div>
554.  
555.  
556.  
557. <p class="u-mb-ctrl u-mb-5">上記それぞれの指定例</p>
558.  
559.  
560.  
561. <div class="wp-block-columns">
562. <div class="wp-block-column">
563. <p class="u-mb-ctrl u-mb-5">テキストに「SEARCH」、背景色をオレンジに設定した際、線・文字色が白色で表示されます。</p>
564.  
565.  
566.  
567. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="631" src="https://anco-lab.com/wp-content/uploads/2024/09/dbf6475a9b02c894b24a84334a5855b0-1024x631.png" alt="" class="wp-image-1248" srcset="https://anco-lab.com/wp-content/uploads/2024/09/dbf6475a9b02c894b24a84334a5855b0-1024x631.png 1024w, https://anco-lab.com/wp-content/uploads/2024/09/dbf6475a9b02c894b24a84334a5855b0-300x185.png 300w, https://anco-lab.com/wp-content/uploads/2024/09/dbf6475a9b02c894b24a84334a5855b0-768x473.png 768w, https://anco-lab.com/wp-content/uploads/2024/09/dbf6475a9b02c894b24a84334a5855b0-1536x946.png 1536w, https://anco-lab.com/wp-content/uploads/2024/09/dbf6475a9b02c894b24a84334a5855b0-2048x1261.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
568. </div>
569. </div>
570.  
571.  
572.  
573. <h2 class="wp-block-heading">【カスタマイズその1】検索ボタンを電話番号に変更</h2>
574.  
575.  
576.  
577. <p class="u-mb-ctrl u-mb-5"><strong>完成形はこちら！</strong><br>左にロゴ、右側に電話アイコンとハンバーガーメニューというデザインにします！</p>
578.  
579.  
580. <div class="wp-block-image">
581. <figure class="alignleft size-full is-resized"><img decoding="async" width="698" height="150" src="https://anco-lab.com/wp-content/uploads/2024/09/d20bd49a72dea22b0cdcca766a19aba3.png" alt="" class="wp-image-1260" style="width:400px" srcset="https://anco-lab.com/wp-content/uploads/2024/09/d20bd49a72dea22b0cdcca766a19aba3.png 698w, https://anco-lab.com/wp-content/uploads/2024/09/d20bd49a72dea22b0cdcca766a19aba3-300x64.png 300w" sizes="(max-width: 698px) 100vw, 698px" /></figure></div>
582.  
583.  
584. <p><span class="swl-marker mark_blue">検索ボタンを電話番号に変更する手順</span></p>
585.  
586.  
587.  
588. <div class="wp-block-columns">
589. <div class="wp-block-column">
590. <figure class="wp-block-image size-large is-resized"><img decoding="async" width="629" height="1024" src="https://anco-lab.com/wp-content/uploads/2024/09/057013ba51dc44d1c02268480d74e890-629x1024.png" alt="" class="wp-image-1246" style="width:200px" srcset="https://anco-lab.com/wp-content/uploads/2024/09/057013ba51dc44d1c02268480d74e890-629x1024.png 629w, https://anco-lab.com/wp-content/uploads/2024/09/057013ba51dc44d1c02268480d74e890-184x300.png 184w, https://anco-lab.com/wp-content/uploads/2024/09/057013ba51dc44d1c02268480d74e890.png 630w" sizes="(max-width: 629px) 100vw, 629px" /></figure>
591. </div>
592.  
593.  
594.  
595. <div class="wp-block-column">
596. <p>①外観 &gt; ヘッダーにて、画面下部の「カスタムボタン設定」へ移動</p>
597. </div>
598. </div>
599.  
600.  
601.  
602. <div class="wp-block-columns">
603. <div class="wp-block-column">
604. <figure class="wp-block-image size-full is-resized"><img decoding="async" width="311" height="504" src="https://anco-lab.com/wp-content/uploads/2024/09/Group-3186.jpg" alt="" class="wp-image-1264" style="width:200px" srcset="https://anco-lab.com/wp-content/uploads/2024/09/Group-3186.jpg 311w, https://anco-lab.com/wp-content/uploads/2024/09/Group-3186-185x300.jpg 185w" sizes="(max-width: 311px) 100vw, 311px" /></figure>
605. </div>
606.  
607.  
608.  
609. <div class="wp-block-column">
610. <p>②アイコンと電話番号を設置<br><br>アイコン：今回は「icon-phone」を使用<br><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-01-color">※アイコンはSWELL公式のアイコン一覧から選択してください。</mark><br><br>アイコン下に表示するテキスト：空欄<br>カスタムボタン背景色：「クリア」(透明)<br><br>リンク先URL：「tel:」の後ろに電話番号を入力</p>
611. </div>
612. </div>
613.  
614.  
615.  
616. <p>手順はこれだけ！めちゃくちゃ簡単ですよね！</p>
617.  
618.  
619.  
620. <h2 class="wp-block-heading">【カスタマイズその2】ナビメニューのホバーアニメーションをオリジナルに変更</h2>
621.  
622.  
623.  
624. <p class="u-mb-ctrl u-mb-0">元の状態：ナビメニューアニメーションのヘッダーメニュー（グローバルナビ）設定は以下で設定している。<br>マウスホバーエフェクト：「ラインの出現（中央から）」メニューの下中央からラインを表示<br><br>ナビメニューのちょっと下に、メインカラーである青色の線が表示されていますね。</p>
625.  
626.  
627.  
628. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="400" src="https://anco-lab.com/wp-content/uploads/2024/09/8819633401b12fded6f5b73a33cdaa53-1024x400.png" alt="" class="wp-image-1265" srcset="https://anco-lab.com/wp-content/uploads/2024/09/8819633401b12fded6f5b73a33cdaa53-1024x400.png 1024w, https://anco-lab.com/wp-content/uploads/2024/09/8819633401b12fded6f5b73a33cdaa53-300x117.png 300w, https://anco-lab.com/wp-content/uploads/2024/09/8819633401b12fded6f5b73a33cdaa53-768x300.png 768w, https://anco-lab.com/wp-content/uploads/2024/09/8819633401b12fded6f5b73a33cdaa53-1536x600.png 1536w, https://anco-lab.com/wp-content/uploads/2024/09/8819633401b12fded6f5b73a33cdaa53-2048x800.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
629.  
630.  
631.  
632. <p class="u-mb-ctrl u-mb-5"><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-03-color">表示例①</mark></strong>　ホバーの線位置や高さ、線の色を変化させたい場合</p>
633.  
634.  
635.  
636. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="394" src="https://anco-lab.com/wp-content/uploads/2024/09/e99b5c1ea470b5acdb8b20d307f1fbf7-1024x394.png" alt="" class="wp-image-1266" srcset="https://anco-lab.com/wp-content/uploads/2024/09/e99b5c1ea470b5acdb8b20d307f1fbf7-1024x394.png 1024w, https://anco-lab.com/wp-content/uploads/2024/09/e99b5c1ea470b5acdb8b20d307f1fbf7-300x116.png 300w, https://anco-lab.com/wp-content/uploads/2024/09/e99b5c1ea470b5acdb8b20d307f1fbf7-768x296.png 768w, https://anco-lab.com/wp-content/uploads/2024/09/e99b5c1ea470b5acdb8b20d307f1fbf7-1536x592.png 1536w, https://anco-lab.com/wp-content/uploads/2024/09/e99b5c1ea470b5acdb8b20d307f1fbf7-2048x789.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
637.  
638.  
639.  
640. <p class="u-mb-ctrl u-mb-0">追加コードはこちら！</p>
641.  
642.  
643.  
644. <pre class="wp-block-code"><code>.c-gnav&gt;.menu-item&gt;a:after {
645. background: rgb(104 162 185 / 30%) !important; /* 線の色を透過度のある水色に変更 */
646. bottom: 0.8em !important; /* 表示位置を少し上に変更 */
647. height: 0.2em !important; /* 線太さを少し太めに変更 */
648. }</code></pre>
649.  
650.  
651.  
652. <p class="u-mb-ctrl u-mb-5"><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-03-color">表示例②</mark></strong>　ホバー時の線は削除して文字色を変化させたい場合</p>
653.  
654.  
655.  
656. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="400" src="https://anco-lab.com/wp-content/uploads/2024/09/1a50f9fd9974dcd5f72d24757b399799-1024x400.png" alt="" class="wp-image-1271" srcset="https://anco-lab.com/wp-content/uploads/2024/09/1a50f9fd9974dcd5f72d24757b399799-1024x400.png 1024w, https://anco-lab.com/wp-content/uploads/2024/09/1a50f9fd9974dcd5f72d24757b399799-300x117.png 300w, https://anco-lab.com/wp-content/uploads/2024/09/1a50f9fd9974dcd5f72d24757b399799-768x300.png 768w, https://anco-lab.com/wp-content/uploads/2024/09/1a50f9fd9974dcd5f72d24757b399799-1536x600.png 1536w, https://anco-lab.com/wp-content/uploads/2024/09/1a50f9fd9974dcd5f72d24757b399799-2048x800.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
657.  
658.  
659.  
660. <p class="u-mb-ctrl u-mb-0">追加コードはこちら！</p>
661.  
662.  
663.  
664. <pre class="wp-block-code"><code>/* 文字はspanタグで書かれてるので、spanクラスに対し自然なアニメーションをかける */
665. .c-gnav>.menu-item:hover>a .ttl {
666. transition: color .3s ease;
667. }
668. /* 文字の色を水色に変更 */
669. .c-gnav>.menu-item:hover>a .ttl {
670. color: #68a2b9 !important;
671. }
672. /* ホバー時の線は不要なので非表示に変更 */
673. .c-gnav>.menu-item>a:after {
674. display: none;
675. }</code></pre>
676.  
677.  
678.  
679. <p>このように、様々なカスタマイズが可能です！<br>是非色々触ってみてください。</p>
680.  
681.  
682.  
683. <h2 class="wp-block-heading">まとめ</h2>
684.  
685.  
686.  
687. <p>SWELLのデフォルト機能を使えば、良い感じのデザイン表現は可能です！<br>少しデフォルト機能だけでは物足りないなと感じる方は、是非CSS調整を行なってみてください。</p>
688.  
689.  
690.  
691. <p class="u-mb-ctrl u-mb-20">最後までご覧頂き、ありがとうございました！！</p>
692.  
693.  
694.  
695. <p class="has-text-align-center u-mb-ctrl u-mb-10"><strong><mark style="background-color:rgba(0, 0, 0, 0);color:#43618e" class="has-inline-color">＼当サイトはSWELLを使用しています／<br>気になった方は、是非バナーから公式サイトをチェックしてみてくださいね！</mark></strong></p>
696.  
697.  
698. <div class="p-adBox -normal -border-on" data-id="1062" data-ad="normal"><div class="p-adBox__body"><div class="p-adBox__img"><a href="//af.moshimo.com/af/c/click?a_id=4638363&#038;p_id=3885&#038;pc_id=9646&#038;pl_id=53839" rel="nofollow" referrerpolicy="no-referrer-when-downgrade" attributionsrc><img decoding="async" src="//image.moshimo.com/af-img/3130/000000053839.png" width="400" height="300" style="border:none;"></a><img decoding="async" src="//i.moshimo.com/af/i/impression?a_id=4638363&#038;p_id=3885&#038;pc_id=9646&#038;pl_id=53839" width="1" height="1" style="border:none;" loading="lazy"></div></div></div>
699.  
700. <div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://anco-lab.com/wp-content/uploads/2024/01/1-150x150.png" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="http://anco-lab.com/wp-content/uploads/2024/01/1-150x150.png" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -thinking -border-on"><div class="c-balloon__text">SWELLでのサイト制作や他テーマ、オリジナルでの制作も承っておりますので、Xをフォロー頂きお気軽にご相談ください！<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div><p>The post <a href="https://anco-lab.com/archives/1140">【CSSコード付き】SWELLヘッダー全体設定・カスタマイズ方法を解説</a> first appeared on <a href="https://anco-lab.com">あんころブログ</a>.</p>]]></content:encoded>
702. <wfw:commentRss>https://anco-lab.com/archives/1140/feed</wfw:commentRss>
703. <slash:comments>0</slash:comments>
706. </item>
707. <item>
708. <title>転職を繰り返した20代でも、IT系転職以降スキルを身につけフリーランスで稼げるようになった話</title>
709. <link>https://anco-lab.com/archives/1069</link>
710. <comments>https://anco-lab.com/archives/1069#respond</comments>
712. <dc:creator><![CDATA[ancolo]]></dc:creator>
713. <pubDate>Fri, 23 Aug 2024 05:08:02 +0000</pubDate>
714. <category><![CDATA[私のこと]]></category>
715. <guid isPermaLink="false">https://anco-lab.com/?p=1069</guid>
716.  
717. <description><![CDATA[<p><img src="https://anco-lab.com/wp-content/uploads/2024/08/blog-tensyoku-1024x651.jpg" class="webfeedsFeaturedVisual" /></p><p>今はWeb制作フリーランスとして会社員時代よりも収入を稼げるようになった私ですが、27歳頃までは転職を繰り返し何社か転々としていました。もちろん収入も全然上がらず、自分のしたいことが分からない日々を過ごしていた思い出があ [&#8230;]</p>
718. <p>The post <a href="https://anco-lab.com/archives/1069">転職を繰り返した20代でも、IT系転職以降スキルを身につけフリーランスで稼げるようになった話</a> first appeared on <a href="https://anco-lab.com">あんころブログ</a>.</p>]]></description>
719. <content:encoded><![CDATA[<p><img src="https://anco-lab.com/wp-content/uploads/2024/08/blog-tensyoku-1024x651.jpg" class="webfeedsFeaturedVisual" /></p><p>今はWeb制作フリーランスとして会社員時代よりも収入を稼げるようになった私ですが、<br>27歳頃までは転職を繰り返し何社か転々としていました。<br>もちろん収入も全然上がらず、自分のしたいことが分からない日々を過ごしていた思い出があります。。</p>
720.  
721.  
722.  
723. <p>20代の私はスキルを身につけてフリーランスでバリバリ稼ぐ友人を見て「羨ましい&#8230;」とばかり思ってました。<br>皆さんも、こんなお悩みを持ったことはありませんか？？</p>
724.  
725.  
726. <div class="c-balloon -bln-left" data-col="blue"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://anco-lab.com/wp-content/uploads/2024/01/ko1@2x-150x150.png" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="http://anco-lab.com/wp-content/uploads/2024/01/ko1@2x-150x150.png" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -thinking -border-none"><div class="c-balloon__text">アラサー世代からでもスキルを身につけて稼げるようになるの？<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div>
727.  
728.  
729. <div class="c-balloon -bln-left" data-col="blue"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://anco-lab.com/wp-content/uploads/2024/01/ko1@2x-150x150.png" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="http://anco-lab.com/wp-content/uploads/2024/01/ko1@2x-150x150.png" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -thinking -border-none"><div class="c-balloon__text">スキルを身につけるって、何から始めればいいの？<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div>
730.  
731.  
732.  
733. <p>今回の記事では、スキルの無かった私がどうやって個人で稼げるようになったかお話していきたいと思います！<br>この記事が、少しでも皆さんの励みや参考になれば嬉しいです！！！</p>
734.  
735.  
736.  
737. <h2 class="wp-block-heading">IT系職種に就く前の仕事について</h2>
738.  
739.  
740.  
741. <p>元々は建築／インテリア系の職種に7年ほど従事し、<strong>好きなことを仕事に出来たら</strong>と当時考えていました。。<br>ざっと仕事内容を紹介させて頂きますね！</p>
742.  
743.  
744.  
745. <p class="has-border -border04 is-style-bg_stripe">過去の仕事<br>・雑貨兼家具屋で店舗販売員<br>・某ハウスメーカーにて社内システムのヘルプデスク<br>（システムの操作マニュアル作成したり、全国大都市の説明会で説明したり！）<br>・CAD使用し、設計図面作成</p>
746.  
747.  
748.  
749. <h2 class="wp-block-heading">なぜ転職を繰り返していたのか・・</h2>
750.  
751.  
752.  
753. <p>「好きなことを仕事にして生きていきたい！」という気持ちはずっとありました。</p>
754.  
755.  
756.  
757. <p>ただ、<br>就職した会社での働きづらさを感じたり、サービス残業ばかりで収入が増えない辛さがあったり。<br>理不尽なルールに縛られ窮屈さを感じている状態で。。（仕事と関係のないことで難癖を付けられたことも&#8230;）</p>
758.  
759.  
760.  
761. <p><span class="swl-marker mark_blue">上記のようなことを解消したい！という気持ち</span>から、色々彷徨っていたというのが転職を繰り返した理由です！</p>
762.  
763.  
764.  
765. <p>転職を繰り返していた私が、なぜ未経験のIT系職種へ転職したいという気持ちになったのか？</p>
766.  
767.  
768.  
769. <p><strong>理由は2つ！</strong><br>・周りにいた友人が「IT系フリーランスで稼いでる」という話を聞いたから。<br>・某ハウスメーカーのヘルプデスク時代に、他社SEと仕事したことでスキルを身につけたいと思ったから。</p>
770.  
771.  
772.  
773. <p><strong><span class="swl-fz u-fz-l"><mark style="background-color:rgba(0, 0, 0, 0);color:#668dc9" class="has-inline-color">ここからは、IT系職種に転職〜個人で稼ぐスキルを身につけるまでの流れを説明します！</mark></span></strong></p>
774.  
775.  
776.  
777. <h2 class="wp-block-heading">未経験の職種に転職する際、やっておけば良かったこと</h2>
778.  
779.  
780.  
781. <p>私が転職した2019年頃は、ポートフォリオが無くても未経験でもIT系への就職はそこまで難しくなかったです。</p>
782.  
783.  
784.  
785. <p>ですが、<span class="swl-marker mark_yellow">2024年の今は転職希望者もかなり増えてる印象なので、ポートフォリオは必須</span>と言えます！<br>自身が「ここで働きたい！」と思える会社に入れるよう、しっかり制作物を準備して挑みましょう。</p>
786.  
787.  
788.  
789. <p>転職時にやっておけば良かったこと一覧詳細はこちら。<br>今やSNS活用は当たり前。<br>その時その時に合わせて、求人サイトやSNSを活用しておくことが大事だと考えます！</p>
790.  
791.  
792.  
793. <p class="is-style-big_kakko_box"><strong>転職時やっておけば良かったこと</strong><br>①ポートフォリオ作成<br>　→個性や自身の強みを活かした資料で他者と異なるアピールをする！<br>②架空実績をいくつか制作<br>　→Webデザイナー：バナーやサイトデザインなど。<br>　　Webコーダー：サイトコーディング（HPやLP）など。<br>　　フロントエンドエンジニア：簡単なサイトを作って動的処理付加など。<br>　　バックエンドエンジニア：使用言語を選定し、簡単な動的処理付加など。<br>③ SNSで自身の活動を発信<br>　→Xなどでは、会社の求人応募が投稿されることもよく見ます！<br>　　自身の学習・転職活動を発信することで働きたい会社へのアピールに繋がったり、<br>　　気になる求人募集へすぐ反応でき、結果として内定に繋がる可能性も十分にあります。</p>
794.  
795.  
796.  
797. <h2 class="wp-block-heading">転職活動時までに備えておきたいものって何が必要？</h2>
798.  
799.  
800.  
801. <p>以下は、私が備えておいて良かったと思う最低限必須のスキルとなります！</p>
802.  
803.  
804.  
805. <p class="is-style-big_kakko_box">・最低限のパソコンスキル（エクセルやパワーポイントなど）<br>→この辺はIT系に限らず、どの業種に転職する際も必要と言えますね。<br><br>・社会人としてのビジネススキル<br>→こちらも必須ですよね。<br>　未経験での転職の場合は特に気を付けて、評価が下がらないようにしておきましょう。<br><br>・コミュニケーションスキル<br>→特に、開発はチームでのプロジェクトがほとんどなので、連携プレーが超重要です！！<br><br>・どのような言語があるか、業務内容なのか”用語”を知っておく<br>→どういう業務内容かによって必要なスキルが変わります。<br>　ググれば色々な情報が出てくると思うので、事前に調べておくことで「自身で色々調べれる人」という<br>　認識を持ってもらいやすくなります！</p>
806.  
807.  
808.  
809. <p>一言で『IT系』と言っても、本当に色々あります！！！<br>フロントエンドやバックエンド、インフラ系、Webデザインなどここには書ききれないので省略しますが。</p>
810.  
811.  
812.  
813. <p>なので、これから自分がやりたいことを含めて、<br>その先長く活用できるような経験を積める会社はどこなのか？を調べ、面接で色々聞けると良いですね！</p>
814.  
815.  
816.  
817. <h2 class="wp-block-heading">個人で稼げるようになりたいと思った時、何から始めるのが良いの？</h2>
818.  
819.  
820.  
821. <p>上記までは、転職のお話でした。<br>では、個人（フリーランス）で稼ぎたいと思った時どのようなことから始めるのが良いのか、お話します！</p>
822.  
823.  
824.  
825. <p>ここからは「私がWeb制作フリーランスになりたい」と思った時の流れを書かせて頂きますね。</p>
826.  
827.  
828.  
829. <p class="is-style-bg_stripe"><strong>Web制作フリーランスになるまでにやったこと</strong><br>①無料の学習教材を活用<br>・初学者向け<br>ドットインストール、Progate、模写修行など<br>→<span class="swl-marker mark_yellow">コンテンツの質と量的にドットインストールはかなりおすすめ！</span><br>・中級者向け<br>無料コーディング練習所、Codejumpなど<br>→デザインカンプを見ながらサイト模写していくことで、手を動かすスピードが上がります！<br><br>②添削ありの教材や質問できる環境の活用<br>私はデイトラで学習して良かった！と今でも思ってます。<br>会社員で学習時間もあまり取れなかった・学習する習慣がなかったので、<br>ライバルがいる環境はとても刺激的でした。<br><span class="swl-marker mark_yellow">質問できる環境を作っておくことでメンタルの維持にもつながります！</span><br><br>③とにかく手を動かしてやってみる！<br>1番大事なことは、『フリーランスになって困らないよう、自己解決力や自走力』を身につけること。<br>個人で仕事を受けるなら、当然責任感が伴います。<br>仕事を受けてから「できませんでした」は通用しません。。<br><br>分からないことや調べても解決できない！とその場で大変なことにならないよう、<br>私はコミュニティを活用し<span class="swl-marker mark_yellow">”聞ける環境”を用意</span>しています！</p>
830.  
831.  
832. <div class="swell-block-postLink"> <div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
833. <div class="p-blogCard__inner">
834. <span class="p-blogCard__caption">あわせて読みたい</span>
835. <div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://anco-lab.com/wp-content/uploads/2024/01/アイキャッチ3@2x-300x191.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div> <div class="p-blogCard__body">
836. <a class="p-blogCard__title" href="https://anco-lab.com/archives/451">残業あり会社員でも４ヶ月でWeb制作学習を終えた方法</a>
837. <span class="p-blogCard__excerpt">兼業しながら学習を毎日継続するって、なかなか難しいですよね。私は残業する日が多く20時や21時に帰ることがほとんどでした！ 学習開始当時の私はこんなことを思ってい&#8230;</span> </div>
838. </div>
839. </div>
840. </div>
841.  
842.  
843. <h2 class="wp-block-heading">中長期的に稼ぐ為に、私が心掛けていること</h2>
844.  
845.  
846.  
847. <p>1年半ほどフリーランスとして活動してきた私が、ずっと心掛けていること。</p>
848.  
849.  
850.  
851. <p>それは<br><strong>人との繋がりを大事に、自分が今出来ることで最大限価値貢献すること</strong><br>です！！</p>
852.  
853.  
854.  
855. <p>個人事業主になったとしても、結局仕事する時は1人じゃありません！<br>提携先、協業の方、同じフリーランスなど、どこかで人と繋がっています。</p>
856.  
857.  
858.  
859. <p>自分が今出来ることで最大限価値貢献することというのは<br>出来ないことを「出来る」といって嘘をつかず、<br>調べたり代替案を提案したり、”今”自分に最大限できることで価値貢献することが大事だなと。</p>
860.  
861.  
862.  
863. <p>ただ、努力してない状態で「最大限」とは言わないので、<br>調べる努力、スキルを上げる努力を行なった上で、<span class="swl-marker mark_blue">お客様のご要望・目的を叶えることがベスト</span>と考えてます！</p>
864.  
865.  
866.  
867. <h2 class="wp-block-heading">【まとめ】優秀な経歴じゃなくても個人で稼げる力は身につけれる！</h2>
868.  
869.  
870.  
871. <p>この記事を読んでくださった方は、私が全然優秀じゃないということを分かって頂けたかと思いますw</p>
872.  
873.  
874.  
875. <p>今では、<br>・色々な案件に携わらせて頂いたり<br>・1案件100万円超えの案件を受注できるような力を付けたり<br>・メンターなど教える立場として1年半ほど経験してたり<br>・コーディングだけでなく上流工程から制作に携わるスキルを身につけたり<br>と順風満帆に思われがちですが、<br>色々な経験を経てこその今なので、今後も皆さんと一緒に頑張っていけたらと思ってます！</p>
876.  
877.  
878.  
879. <p>悩みながらも頑張って前に進んでいきましょう。</p>
880.  
881.  
882.  
883. <p>最後までご覧頂き、ありがとうございました！！</p><p>The post <a href="https://anco-lab.com/archives/1069">転職を繰り返した20代でも、IT系転職以降スキルを身につけフリーランスで稼げるようになった話</a> first appeared on <a href="https://anco-lab.com">あんころブログ</a>.</p>]]></content:encoded>
885. <wfw:commentRss>https://anco-lab.com/archives/1069/feed</wfw:commentRss>
886. <slash:comments>0</slash:comments>
889. </item>
890. <item>
891. <title>エクセルで作った表をホームぺージで表示させる方法について</title>
892. <link>https://anco-lab.com/archives/1044</link>
893. <comments>https://anco-lab.com/archives/1044#respond</comments>
895. <dc:creator><![CDATA[ancolo]]></dc:creator>
896. <pubDate>Sun, 28 Jul 2024 01:54:15 +0000</pubDate>
897. <category><![CDATA[Web制作]]></category>
898. <guid isPermaLink="false">https://anco-lab.com/?p=1044</guid>
899.  
900. <description><![CDATA[<p><img src="https://anco-lab.com/wp-content/uploads/2024/07/blog-excelHP-1024x650.jpg" class="webfeedsFeaturedVisual" /></p><p>エクセルで作成した表をホームページで表示させる方法はいくつかありますが、ここでは代表的な方法をいくつか紹介します。 それぞれの方法について、ステップバイステップで説明します。 方法1: エクセル表をHTMLに変換して埋め [&#8230;]</p>
901. <p>The post <a href="https://anco-lab.com/archives/1044">エクセルで作った表をホームぺージで表示させる方法について</a> first appeared on <a href="https://anco-lab.com">あんころブログ</a>.</p>]]></description>
902. <content:encoded><![CDATA[<p><img src="https://anco-lab.com/wp-content/uploads/2024/07/blog-excelHP-1024x650.jpg" class="webfeedsFeaturedVisual" /></p><p>エクセルで作成した表をホームページで表示させる方法はいくつかありますが、ここでは代表的な方法をいくつか紹介します。</p>
903.  
904.  
905.  
906. <p>それぞれの方法について、ステップバイステップで説明します。</p>
907.  
908.  
909.  
910. <h2 class="wp-block-heading">方法1: エクセル表をHTMLに変換して埋め込む</h2>
911.  
912.  
913.  
914. <h3 class="wp-block-heading">ステップ1: エクセル表をHTMLに変換</h3>
915.  
916.  
917.  
918. <ol class="wp-block-list">
919. <li>エクセルを開き、表示させたい表を選択します。</li>
920.  
921.  
922.  
923. <li>「ファイル」メニューから「名前を付けて保存」を選択します。</li>
924.  
925.  
926.  
927. <li>ファイル形式を「Webページ（*.htm, *.html）」に設定し、保存します。</li>
928.  
929.  
930.  
931. <li>保存されたHTMLファイルをテキストエディタ（例：メモ帳）で開きます。</li>
932. </ol>
933.  
934.  
935.  
936. <h3 class="wp-block-heading">ステップ2: HTMLコードをコピー</h3>
937.  
938.  
939.  
940. <ol class="wp-block-list">
941. <li>テキストエディタで開いたHTMLファイルの内容を全てコピーします。</li>
942. </ol>
943.  
944.  
945.  
946. <h3 class="wp-block-heading">ステップ3: HTMLコードをホームページに埋め込む</h3>
947.  
948.  
949.  
950. <ol class="wp-block-list">
951. <li>ホームページを編集するツール（例：WordPress、静的サイトジェネレーター）を開きます。</li>
952.  
953.  
954.  
955. <li>表を表示させたい場所にコピーしたHTMLコードを貼り付けます。</li>
956.  
957.  
958.  
959. <li>保存して、ホームページをプレビューまたは公開します。</li>
960. </ol>
961.  
962.  
963.  
964. <h2 class="wp-block-heading">方法2: Googleスプレッドシートを利用する</h2>
965.  
966.  
967.  
968. <h3 class="wp-block-heading">ステップ1: エクセル表をGoogleスプレッドシートにインポート</h3>
969.  
970.  
971.  
972. <ol class="wp-block-list">
973. <li>Googleドライブにアクセスし、Googleスプレッドシートを開きます。</li>
974.  
975.  
976.  
977. <li>「ファイル」メニューから「インポート」を選択します。</li>
978.  
979.  
980.  
981. <li>「アップロード」タブでエクセルファイルをアップロードします。</li>
982. </ol>
983.  
984.  
985.  
986. <h3 class="wp-block-heading">ステップ2: 公開用リンクを取得</h3>
987.  
988.  
989.  
990. <ol class="wp-block-list">
991. <li>Googleスプレッドシートの「ファイル」メニューから「ウェブに公開」を選択します。</li>
992.  
993.  
994.  
995. <li>「リンク」タブで、「公開」をクリックします。</li>
996.  
997.  
998.  
999. <li>表示されたリンクをコピーします。</li>
1000. </ol>
1001.  
1002.  
1003.  
1004. <h3 class="wp-block-heading">ステップ3: HTMLに埋め込む</h3>
1005.  
1006.  
1007.  
1008. <ol class="wp-block-list">
1009. <li>ホームページを編集するツールを開きます。</li>
1010.  
1011.  
1012.  
1013. <li>表を表示させたい場所に次のようなiframeタグを使用してリンクを埋め込みます。</li>
1014. </ol>
1015.  
1016.  
1017.  
1018. <pre class="wp-block-code"><code>&lt;iframe src="https://docs.google.com/spreadsheets/d/e/XXXXXXXXXXXX/pubhtml?widget=true&amp;amp;headers=false"&gt;&lt;/iframe&gt;</code></pre>
1019.  
1020.  
1021.  
1022. <p>（XXXXXXXXXXXXは取得したリンクに含まれるIDに置き換えます）</p>
1023.  
1024.  
1025.  
1026. <h2 class="wp-block-heading">方法3: JavaScriptライブラリを使用する</h2>
1027.  
1028.  
1029.  
1030. <h3 class="wp-block-heading">ステップ1: エクセル表をCSV形式で保存</h3>
1031.  
1032.  
1033.  
1034. <ol class="wp-block-list">
1035. <li>エクセルを開き、表示させたい表を選択します。</li>
1036.  
1037.  
1038.  
1039. <li>「ファイル」メニューから「名前を付けて保存」を選択します。</li>
1040.  
1041.  
1042.  
1043. <li>ファイル形式を「CSV（カンマ区切り）」に設定し、保存します。</li>
1044. </ol>
1045.  
1046.  
1047.  
1048. <h3 class="wp-block-heading">ステップ2: JavaScriptライブラリを利用</h3>
1049.  
1050.  
1051.  
1052. <ol class="wp-block-list">
1053. <li>保存したCSVファイルをウェブサーバーにアップロードします。</li>
1054.  
1055.  
1056.  
1057. <li>以下のようなHTMLとJavaScriptコードを使用して、CSVファイルを読み込み、表を表示します。</li>
1058. </ol>
1059.  
1060.  
1061.  
1062. <pre class="wp-block-code"><code>&lt;!DOCTYPE html&gt;
1063. <html>
1064. <head>
1065.    <title>CSV Table</title>
1066.    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
1067.    <script src="https://cdn.jsdelivr.net/npm/papaparse@5.3.0/papaparse.min.js"></script>
1068. </head>
1069. <body>
1070.    <table id="csv-table"></table>
1071.  
1072.    <script>
1073.        $(document).ready(function () {
1074.            Papa.parse("path/to/your/file.csv", {
1075.                download: true,
1076.                complete: function (results) {
1077.                    var data = results.data;
1078.                    var table = $("#csv-table");
1079.                    data.forEach(function (row, index) {
1080.                        var tr = $("<tr>");
1081.                        row.forEach(function (cell) {
1082.                            var td = $("<td>").text(cell);
1083.                            tr.append(td);
1084.                        });
1085.                        table.append(tr);
1086.                    });
1087.                }
1088.            });
1089.        });
1090.    </script>
1091. </body>
1092. &lt;/html&gt;</code></pre>
1093.  
1094.  
1095.  
1096. <p>この方法では、PapaParseライブラリを使用してCSVファイルを読み込み、jQueryを使用してHTMLテーブルに変換しています。</p>
1097.  
1098.  
1099.  
1100. <h2 class="wp-block-heading">まとめ</h2>
1101.  
1102.  
1103.  
1104. <p>エクセルで作成した表をホームページに表示する方法は、直接HTMLに変換して埋め込む方法、Googleスプレッドシートを利用する方法、JavaScriptライブラリを使用する方法などがあります。</p>
1105.  
1106.  
1107.  
1108. <p>目的や技術レベルに応じて、最適な方法を選んで実装してください。</p><p>The post <a href="https://anco-lab.com/archives/1044">エクセルで作った表をホームぺージで表示させる方法について</a> first appeared on <a href="https://anco-lab.com">あんころブログ</a>.</p>]]></content:encoded>
1110. <wfw:commentRss>https://anco-lab.com/archives/1044/feed</wfw:commentRss>
1111. <slash:comments>0</slash:comments>
1114. </item>
1115. <item>
1116. <title>ホームページに動画を埋め込む際のサイズについて</title>
1117. <link>https://anco-lab.com/archives/1046</link>
1118. <comments>https://anco-lab.com/archives/1046#respond</comments>
1120. <dc:creator><![CDATA[ancolo]]></dc:creator>
1121. <pubDate>Tue, 23 Jul 2024 02:14:48 +0000</pubDate>
1122. <category><![CDATA[Web制作]]></category>
1123. <guid isPermaLink="false">https://anco-lab.com/?p=1046</guid>
1124.  
1125. <description><![CDATA[<p><img src="https://anco-lab.com/wp-content/uploads/2024/07/blog-video-1024x650.jpg" class="webfeedsFeaturedVisual" /></p><p>ホームページに動画を埋め込む際のサイズ設定は、ユーザー体験やページのレイアウトに大きく影響します。 ここでは、動画を埋め込む際に考慮すべきポイントや具体的なサイズ設定方法について詳しく説明します！ 動画の埋め込み方法 1 [&#8230;]</p>
1126. <p>The post <a href="https://anco-lab.com/archives/1046">ホームページに動画を埋め込む際のサイズについて</a> first appeared on <a href="https://anco-lab.com">あんころブログ</a>.</p>]]></description>
1127. <content:encoded><![CDATA[<p><img src="https://anco-lab.com/wp-content/uploads/2024/07/blog-video-1024x650.jpg" class="webfeedsFeaturedVisual" /></p><p>ホームページに動画を埋め込む際のサイズ設定は、ユーザー体験やページのレイアウトに大きく影響します。</p>
1128.  
1129.  
1130. <div class="c-balloon -bln-left" data-col="blue"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://anco-lab.com/wp-content/uploads/2024/01/ko1@2x-150x150.png" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="http://anco-lab.com/wp-content/uploads/2024/01/ko1@2x-150x150.png" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -thinking -border-none"><div class="c-balloon__text">動画を埋め込む際、サイズ指定などできるの？<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div>
1131.  
1132.  
1133. <div class="c-balloon -bln-left" data-col="blue"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://anco-lab.com/wp-content/uploads/2024/01/ko1@2x-150x150.png" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="http://anco-lab.com/wp-content/uploads/2024/01/ko1@2x-150x150.png" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -thinking -border-none"><div class="c-balloon__text">レスポンシブした時にも綺麗に表示できる方法を知りたい！<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div>
1134.  
1135.  
1136.  
1137. <p>ここでは、動画を埋め込む際に考慮すべきポイントや具体的なサイズ設定方法について詳しく説明します！</p>
1138.  
1139.  
1140.  
1141. <h2 class="wp-block-heading">動画の埋め込み方法</h2>
1142.  
1143.  
1144.  
1145. <h3 class="wp-block-heading">1. YouTubeやVimeoからの埋め込み</h3>
1146.  
1147.  
1148.  
1149. <p>YouTubeやVimeoなどの動画プラットフォームから動画を埋め込む場合、以下の手順を使用します。</p>
1150.  
1151.  
1152.  
1153. <h4 class="wp-block-heading">ステップ1: 埋め込みコードを取得</h4>
1154.  
1155.  
1156.  
1157. <ol class="wp-block-list">
1158. <li>YouTubeやVimeoの動画ページで「共有」ボタンをクリックします。</li>
1159.  
1160.  
1161.  
1162. <li>「埋め込み」オプションを選択し、表示されたコードをコピーします。</li>
1163. </ol>
1164.  
1165.  
1166.  
1167. <h4 class="wp-block-heading">ステップ2: 埋め込みコードをホームページに貼り付け</h4>
1168.  
1169.  
1170.  
1171. <ol class="wp-block-list">
1172. <li>ホームページのHTMLコードを編集します。</li>
1173.  
1174.  
1175.  
1176. <li>動画を表示させたい場所にコピーした埋め込みコードを貼り付けます。</li>
1177. </ol>
1178.  
1179.  
1180.  
1181. <pre class="wp-block-code"><code>&lt;iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;</code></pre>
1182.  
1183.  
1184.  
1185. <h3 class="wp-block-heading">2. 自分のサーバーから動画を埋め込む</h3>
1186.  
1187.  
1188.  
1189. <p>自分のサーバーから動画を直接埋め込む場合、以下の手順を使用します。</p>
1190.  
1191.  
1192.  
1193. <h4 class="wp-block-heading">ステップ1: 動画ファイルをサーバーにアップロード</h4>
1194.  
1195.  
1196.  
1197. <ol class="wp-block-list">
1198. <li>動画ファイルをウェブサーバーにアップロードします。</li>
1199.  
1200.  
1201.  
1202. <li>アップロードしたファイルのURLを取得します。</li>
1203. </ol>
1204.  
1205.  
1206.  
1207. <h4 class="wp-block-heading">ステップ2: HTML5のvideoタグを使用して埋め込む</h4>
1208.  
1209.  
1210.  
1211. <ol class="wp-block-list">
1212. <li>ホームページのHTMLコードを編集します。</li>
1213.  
1214.  
1215.  
1216. <li>videoタグを使用して動画を埋め込みます。</li>
1217. </ol>
1218.  
1219.  
1220.  
1221. <pre class="wp-block-code"><code>&lt;video width="640" height="360" controls&gt;
1222.  <source src="path/to/your/video.mp4" type="video/mp4">
1223.  Your browser does not support the video tag.
1224. &lt;/video&gt;</code></pre>
1225.  
1226.  
1227.  
1228. <h2 class="wp-block-heading">動画サイズの設定</h2>
1229.  
1230.  
1231.  
1232. <h3 class="wp-block-heading">1. サイズの指定方法</h3>
1233.  
1234.  
1235.  
1236. <p>埋め込みコードのwidthとheight属性を使用して、動画のサイズを指定します。<br>以下のように設定することで、表示するサイズを調整できます。</p>
1237.  
1238.  
1239.  
1240. <pre class="wp-block-code"><code>&lt;iframe width="800" height="450" src="https://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;</code></pre>
1241.  
1242.  
1243.  
1244. <h3 class="wp-block-heading">2. レスポンシブデザインの考慮</h3>
1245.  
1246.  
1247.  
1248. <p>レスポンシブデザインを考慮する場合、固定サイズではなく、割合を使用してサイズを設定することが一般的です。<br>以下にその方法を示します。</p>
1249.  
1250.  
1251.  
1252. <h4 class="wp-block-heading">CSSを使用したレスポンシブ動画埋め込み</h4>
1253.  
1254.  
1255.  
1256. <ol class="wp-block-list">
1257. <li>CSSファイルに以下のコードを追加します。</li>
1258. </ol>
1259.  
1260.  
1261.  
1262. <pre class="wp-block-code"><code>.responsive-video {
1263.  position: relative;
1264.  padding-bottom: 56.25%; /* 16:9 アスペクト比 */
1265.  height: 0;
1266.  overflow: hidden;
1267.  max-width: 100%;
1268.  background: #000;
1269. }
1270.  
1271. .responsive-video iframe,
1272. .responsive-video object,
1273. .responsive-video embed {
1274.  position: absolute;
1275.  top: 0;
1276.  left: 0;
1277.  width: 100%;
1278.  height: 100%;
1279. }</code></pre>
1280.  
1281.  
1282.  
1283. <ol start="2" class="wp-block-list">
1284. <li>HTMLコードに以下のようにクラスを追加します。</li>
1285. </ol>
1286.  
1287.  
1288.  
1289. <pre class="wp-block-code"><code>&lt;div class="responsive-video"&gt;
1290.  <iframe src="https://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen></iframe>
1291. &lt;/div&gt;</code></pre>
1292.  
1293.  
1294.  
1295. <p>この方法を使用すると、動画は親要素の幅に合わせてサイズが調整されます。</p>
1296.  
1297.  
1298.  
1299. <h2 class="wp-block-heading">動画サイズのベストプラクティスとは？</h2>
1300.  
1301.  
1302.  
1303. <ol class="wp-block-list">
1304. <li class="u-mb-ctrl u-mb-10"><strong>適切な解像度を選択する</strong>: <br>動画の解像度は視聴デバイスに応じて適切に選択します。<br><span class="swl-marker mark_yellow">一般的に、720p（1280&#215;720）や1080p（1920&#215;1080）の解像度</span>が適しています。</li>
1305.  
1306.  
1307.  
1308. <li class="u-mb-ctrl u-mb-10"><strong>ファイルサイズを最適化する</strong>: <br>高品質の動画を使用する場合でも、ファイルサイズが大きすぎるとページの読み込みが遅くなります。<br>圧縮技術を使用してファイルサイズを最適化しましょう。</li>
1309.  
1310.  
1311.  
1312. <li><strong>自動再生を避ける</strong>: <br>ユーザー体験を損なわないために、動画の自動再生を避けることが推奨されます。</li>
1313. </ol>
1314.  
1315.  
1316.  
1317. <p>これらの方法を使用して、ホームページに適切に動画を埋め込み、ユーザーにとって<strong>快適な視聴体験</strong>を提供することができます。</p><p>The post <a href="https://anco-lab.com/archives/1046">ホームページに動画を埋め込む際のサイズについて</a> first appeared on <a href="https://anco-lab.com">あんころブログ</a>.</p>]]></content:encoded>
1319. <wfw:commentRss>https://anco-lab.com/archives/1046/feed</wfw:commentRss>
1320. <slash:comments>0</slash:comments>
1323. </item>
1324. <item>
1325. <title>ホームページにGoogleカレンダーを埋め込む方法について</title>
1326. <link>https://anco-lab.com/archives/1048</link>
1327. <comments>https://anco-lab.com/archives/1048#respond</comments>
1329. <dc:creator><![CDATA[ancolo]]></dc:creator>
1330. <pubDate>Tue, 23 Jul 2024 00:37:40 +0000</pubDate>
1331. <category><![CDATA[Web制作]]></category>
1332. <guid isPermaLink="false">https://anco-lab.com/?p=1048</guid>
1333.  
1334. <description><![CDATA[<p><img src="https://anco-lab.com/wp-content/uploads/2024/07/blog-calendar-1024x650.jpg" class="webfeedsFeaturedVisual" /></p><p>ホームページにGoogleカレンダーを埋め込んで、イベントやスケジュールを簡単に共有したいなという時ってありますよね・・ Googleカレンダーは登録した情報をカレンダー形式で表示でき、簡単にホームページに埋め込むことが [&#8230;]</p>
1335. <p>The post <a href="https://anco-lab.com/archives/1048">ホームページにGoogleカレンダーを埋め込む方法について</a> first appeared on <a href="https://anco-lab.com">あんころブログ</a>.</p>]]></description>
1336. <content:encoded><![CDATA[<p><img src="https://anco-lab.com/wp-content/uploads/2024/07/blog-calendar-1024x650.jpg" class="webfeedsFeaturedVisual" /></p><p>ホームページにGoogleカレンダーを埋め込んで、<br>イベントやスケジュールを簡単に共有したいなという時ってありますよね・・</p>
1337.  
1338.  
1339. <div class="c-balloon -bln-left" data-col="blue"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://anco-lab.com/wp-content/uploads/2024/01/ko1@2x-150x150.png" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="http://anco-lab.com/wp-content/uploads/2024/01/ko1@2x-150x150.png" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -thinking -border-none"><div class="c-balloon__text">営業日やイベント日程、予約状況などを共有したい！<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div>
1340.  
1341.  
1342. <div class="c-balloon -bln-left" data-col="blue"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://anco-lab.com/wp-content/uploads/2024/01/ko1@2x-150x150.png" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="http://anco-lab.com/wp-content/uploads/2024/01/ko1@2x-150x150.png" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -thinking -border-none"><div class="c-balloon__text">カレンダーの色やサイズ、枠線なども自由にカスタマイズできるの？<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div>
1343.  
1344.  
1345.  
1346. <p>Googleカレンダーは登録した情報をカレンダー形式で表示でき、簡単にホームページに埋め込むことができるため、とても便利です。</p>
1347.  
1348.  
1349.  
1350. <p>カレンダーの色やサイズ、枠線など自由にカスタマイズできますし、<br>レスポンシブデザインにも対応しているので、スマートフォンやタブレット端末でも見やすく表示されます。</p>
1351.  
1352.  
1353.  
1354. <p>この記事では、Googleカレンダーをホームページに埋め込むための手順をご紹介します！</p>
1355.  
1356.  
1357.  
1358. <h2 class="wp-block-heading">ステップ1: Googleカレンダーを公開する</h2>
1359.  
1360.  
1361.  
1362. <p><strong>Googleカレンダーにアクセス</strong>:</p>
1363.  
1364.  
1365.  
1366. <ul class="wp-block-list">
1367. <li><a href="https://calendar.google.com/">Googleカレンダー</a>にアクセスし、埋め込みたいカレンダーを開きます。</li>
1368. </ul>
1369.  
1370.  
1371.  
1372. <p><strong>カレンダーの設定を開く</strong>:</p>
1373.  
1374.  
1375.  
1376. <ul class="wp-block-list">
1377. <li>左側の「マイカレンダー」リストから、埋め込みたいカレンダーの横にある三点アイコン（⋮）をクリックし、<br>「設定と共有」を選択します。</li>
1378. </ul>
1379.  
1380.  
1381.  
1382. <p><strong>カレンダーを公開する</strong>:</p>
1383.  
1384.  
1385.  
1386. <ul class="wp-block-list">
1387. <li>「カレンダーの設定」ページで、「カレンダーを公開」にチェックを入れます。</li>
1388. </ul>
1389.  
1390.  
1391.  
1392. <h2 class="wp-block-heading">ステップ2: 埋め込みコードを取得する</h2>
1393.  
1394.  
1395.  
1396. <p><strong>埋め込みコードの生成</strong>:</p>
1397.  
1398.  
1399.  
1400. <ul class="wp-block-list">
1401. <li>「カレンダーの統合」セクションに移動し、「カレンダーを埋め込む」オプションを見つけます。</li>
1402.  
1403.  
1404.  
1405. <li>ここで表示されるiframeコードが埋め込みコードです。このコードをコピーします。</li>
1406. </ul>
1407.  
1408.  
1409.  
1410. <pre class="wp-block-code"><code>&lt;iframe src="https://calendar.google.com/calendar/embed?src=あなたのカレンダーID&amp;ctz=あなたのタイムゾーン" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"&gt;&lt;/iframe&gt;</code></pre>
1411.  
1412.  
1413.  
1414. <h2 class="wp-block-heading">ステップ3: HTMLコードに埋め込む</h2>
1415.  
1416.  
1417.  
1418. <p><strong>ホームページのHTMLファイルを開く</strong>:</p>
1419.  
1420.  
1421.  
1422. <ul class="wp-block-list">
1423. <li>使用しているホームページビルダーやCMS（WordPressなど）でHTMLを編集できる場所を開きます。</li>
1424. </ul>
1425.  
1426.  
1427.  
1428. <p><strong>埋め込みコードを貼り付ける</strong>:</p>
1429.  
1430.  
1431.  
1432. <ul class="wp-block-list">
1433. <li>カレンダーを表示させたい場所に、先ほどコピーしたiframeコードを貼り付けます。</li>
1434. </ul>
1435.  
1436.  
1437.  
1438. <pre class="wp-block-code"><code>&lt;div style="max-width: 100%; overflow: auto;"&gt;
1439.  <iframe src="https://calendar.google.com/calendar/embed?src=あなたのカレンダーID&ctz=あなたのタイムゾーン" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
1440. &lt;/div&gt;</code></pre>
1441.  
1442.  
1443.  
1444. <h2 class="wp-block-heading">ステップ4: カレンダーのカスタマイズ</h2>
1445.  
1446.  
1447.  
1448. <h3 class="wp-block-heading">サイズの調整</h3>
1449.  
1450.  
1451.  
1452. <p>iframeのwidthやheight属性を調整して、カレンダーの表示サイズを変更できます。</p>
1453.  
1454.  
1455.  
1456. <p class="u-mb-ctrl u-mb-5">例えば、レスポンシブデザインを考慮する場合、<br>次のようにCSSを使用してカレンダーを柔軟に調整できます。</p>
1457.  
1458.  
1459.  
1460. <pre class="wp-block-code"><code>&lt;div style="max-width: 100%; overflow: auto;"&gt;
1461.  <iframe src="https://calendar.google.com/calendar/embed?src=あなたのカレンダーID&ctz=あなたのタイムゾーン" style="border: 0; width: 100%; height: 600px;" frameborder="0" scrolling="no"></iframe>
1462. &lt;/div&gt;</code></pre>
1463.  
1464.  
1465.  
1466. <h3 class="wp-block-heading">表示オプションのカスタマイズ</h3>
1467.  
1468.  
1469.  
1470. <p>埋め込みURLにパラメータを追加して、カレンダーの表示方法をカスタマイズできます。</p>
1471.  
1472.  
1473.  
1474. <p>以下は主なパラメータの例です。</p>
1475.  
1476.  
1477.  
1478. <ul class="wp-block-list">
1479. <li><code>showTitle=0</code>：タイトルを非表示にする</li>
1480.  
1481.  
1482.  
1483. <li><code>showDate=0</code>：日付を非表示にする</li>
1484.  
1485.  
1486.  
1487. <li><code>showNav=0</code>：ナビゲーションバーを非表示にする</li>
1488.  
1489.  
1490.  
1491. <li><code>showPrint=0</code>：印刷アイコンを非表示にする</li>
1492.  
1493.  
1494.  
1495. <li><code>showTabs=0</code>：タブを非表示にする</li>
1496.  
1497.  
1498.  
1499. <li><code>showCalendars=0</code>：他のカレンダーを非表示にする</li>
1500.  
1501.  
1502.  
1503. <li><code>mode=AGENDA</code>：アジェンダビューに設定する</li>
1504.  
1505.  
1506.  
1507. <li><code>mode=WEEK</code>：週間ビューに設定する</li>
1508.  
1509.  
1510.  
1511. <li><code>mode=MONTH</code>：月間ビューに設定する</li>
1512. </ul>
1513.  
1514.  
1515.  
1516. <p class="u-mb-ctrl u-mb-5">例えば、月間ビューでタイトルとナビゲーションバーを非表示にしたい場合、<br>次のようにURLを修正します。</p>
1517.  
1518.  
1519.  
1520. <pre class="wp-block-code"><code>&lt;iframe src="https://calendar.google.com/calendar/embed?src=あなたのカレンダーID&amp;ctz=あなたのタイムゾーン&amp;mode=MONTH&amp;showTitle=0&amp;showNav=0" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"&gt;&lt;/iframe&gt;</code></pre>
1521.  
1522.  
1523.  
1524. <h2 class="wp-block-heading">まとめ</h2>
1525.  
1526.  
1527.  
1528. <p>Googleカレンダーをホームページに埋め込むことで、簡単にスケジュールやイベントを共有できます。</p>
1529.  
1530.  
1531.  
1532. <p>カレンダーの公開設定を行い、取得した埋め込みコードをHTMLに貼り付けるだけで表示可能です。<br>また、iframeの属性やURLのパラメータを調整することで、<span class="swl-marker mark_blue">表示方法をカスタマイズできます！</span></p>
1533.  
1534.  
1535.  
1536. <p>これにより、ユーザーにとって見やすいカレンダーを提供することができるので<br>是非活用してみてください！</p><p>The post <a href="https://anco-lab.com/archives/1048">ホームページにGoogleカレンダーを埋め込む方法について</a> first appeared on <a href="https://anco-lab.com">あんころブログ</a>.</p>]]></content:encoded>
1538. <wfw:commentRss>https://anco-lab.com/archives/1048/feed</wfw:commentRss>
1539. <slash:comments>0</slash:comments>
1542. </item>
1543. <item>
1544. <title>ホームページにLINEボタンを埋め込む方法について</title>
1545. <link>https://anco-lab.com/archives/994</link>
1546. <comments>https://anco-lab.com/archives/994#respond</comments>
1548. <dc:creator><![CDATA[ancolo]]></dc:creator>
1549. <pubDate>Tue, 23 Jul 2024 00:19:55 +0000</pubDate>
1550. <category><![CDATA[Web制作]]></category>
1551. <guid isPermaLink="false">https://anco-lab.com/?p=994</guid>
1552.  
1553. <description><![CDATA[<p><img src="https://anco-lab.com/wp-content/uploads/2024/07/blog-line-1024x650.jpg" class="webfeedsFeaturedVisual" /></p><p>ホームページにLINEボタンを埋め込む方法について、詳しく説明します。 LINEボタンを追加することで、訪問者が簡単にLINEでコンテンツを共有したり、LINEアカウントと連携したりすることができます。 LINEのシェア [&#8230;]</p>
1554. <p>The post <a href="https://anco-lab.com/archives/994">ホームページにLINEボタンを埋め込む方法について</a> first appeared on <a href="https://anco-lab.com">あんころブログ</a>.</p>]]></description>
1555. <content:encoded><![CDATA[<p><img src="https://anco-lab.com/wp-content/uploads/2024/07/blog-line-1024x650.jpg" class="webfeedsFeaturedVisual" /></p><p>ホームページにLINEボタンを埋め込む方法について、詳しく説明します。</p>
1556.  
1557.  
1558.  
1559. <p>LINEボタンを追加することで、訪問者が簡単にLINEでコンテンツを共有したり、LINEアカウントと連携したりすることができます。</p>
1560.  
1561.  
1562.  
1563. <h2 class="wp-block-heading">LINEのシェアボタンを追加する</h2>
1564.  
1565.  
1566.  
1567. <p>LINEのシェアボタンを使うと、訪問者が簡単にページをLINEの友達やグループに共有できます。</p>
1568.  
1569.  
1570.  
1571. <p>以下はその手順です。</p>
1572.  
1573.  
1574.  
1575. <h3 class="wp-block-heading">手順</h3>
1576.  
1577.  
1578.  
1579. <ol class="wp-block-list">
1580. <li><strong>LINEのシェアボタンのスクリプトを追加</strong></li>
1581. </ol>
1582.  
1583.  
1584.  
1585. <p>HTMLの<code>&lt;head&gt;</code>タグ内に以下のスクリプトを追加します。</p>
1586.  
1587.  
1588.  
1589. <pre class="wp-block-code"><code>&lt;head&gt;
1590.  ...
1591.  <script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
1592. &lt;/head&gt;</code></pre>
1593.  
1594.  
1595.  
1596. <ol class="wp-block-list" start="2">
1597. <li><strong>LINEのシェアボタンを埋め込む</strong></li>
1598. </ol>
1599.  
1600.  
1601.  
1602. <p>HTMLの<code>&lt;body&gt;</code>タグ内の適切な場所に以下のコードを追加します。</p>
1603.  
1604.  
1605.  
1606. <pre class="wp-block-code"><code>&lt;body&gt;
1607.  ...
1608.  <div class="line-it-button" data-lang="ja" data-type="share-a" data-ver="3" data-url="https://example.com" data-color="default" data-size="large" data-count="false" style="display: none;"></div>
1609.  <script>
1610.    (function(d, s, id) {
1611.      var js, fjs = d.getElementsByTagName(s)[0];
1612.      if (!d.getElementById(id)) {
1613.        js = d.createElement(s); js.id = id;
1614.        js.src = "https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js";
1615.        fjs.parentNode.insertBefore(js, fjs);
1616.      }
1617.    }(document, 'script', 'line-it-button-script'));
1618.  </script>
1619. &lt;/body&gt;</code></pre>
1620.  
1621.  
1622.  
1623. <h3 class="wp-block-heading">パラメータの説明</h3>
1624.  
1625.  
1626.  
1627. <ul class="wp-block-list">
1628. <li><code>data-lang</code>: 言語設定（例: &#8220;ja&#8221; for Japanese）</li>
1629.  
1630.  
1631.  
1632. <li><code>data-type</code>: ボタンの種類（&#8221;share-a&#8221; はシェアボタン）</li>
1633.  
1634.  
1635.  
1636. <li><code>data-url</code>: シェアするURL（例: &#8220;https://example.com&#8221;）</li>
1637.  
1638.  
1639.  
1640. <li><code>data-color</code>: ボタンの色（&#8221;default&#8221; または &#8220;white&#8221;）</li>
1641.  
1642.  
1643.  
1644. <li><code>data-size</code>: ボタンのサイズ（&#8221;small&#8221;, &#8220;medium&#8221;, &#8220;large&#8221;）</li>
1645.  
1646.  
1647.  
1648. <li><code>data-count</code>: シェア数を表示するかどうか（&#8221;true&#8221; または &#8220;false&#8221;）</li>
1649. </ul>
1650.  
1651.  
1652.  
1653. <h2 class="wp-block-heading">LINEの公式アカウント友だち追加ボタンを追加する</h2>
1654.  
1655.  
1656.  
1657. <p>LINE公式アカウントの友だち追加ボタンを設置すると、訪問者が簡単にあなたのLINE公式アカウントを友だち追加できます。</p>
1658.  
1659.  
1660.  
1661. <h3 class="wp-block-heading">手順</h3>
1662.  
1663.  
1664.  
1665. <ol class="wp-block-list">
1666. <li><strong>LINEの友だち追加ボタンのスクリプトを追加</strong></li>
1667. </ol>
1668.  
1669.  
1670.  
1671. <p>HTMLの<code>&lt;head&gt;</code>タグ内に以下のスクリプトを追加します。</p>
1672.  
1673.  
1674.  
1675. <pre class="wp-block-code"><code>&lt;head&gt;
1676.  ...
1677.  <script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
1678. &lt;/head&gt;</code></pre>
1679.  
1680.  
1681.  
1682. <ol class="wp-block-list" start="2">
1683. <li><strong>LINEの友だち追加ボタンを埋め込む</strong></li>
1684. </ol>
1685.  
1686.  
1687.  
1688. <p>HTMLの<code>&lt;body&gt;</code>タグ内の適切な場所に以下のコードを追加します。</p>
1689.  
1690.  
1691.  
1692. <pre class="wp-block-code"><code>&lt;body&gt;
1693.  ...
1694.  <div class="line-it-button" data-lang="ja" data-type="friend" data-lineid="@YOUR_LINE_ID" data-count="false" data-home="true" style="display: none;"></div>
1695.  <script>
1696.    (function(d, s, id) {
1697.      var js, fjs = d.getElementsByTagName(s)[0];
1698.      if (!d.getElementById(id)) {
1699.        js = d.createElement(s); js.id = id;
1700.        js.src = "https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js";
1701.        fjs.parentNode.insertBefore(js, fjs);
1702.      }
1703.    }(document, 'script', 'line-it-button-script'));
1704.  </script>
1705. &lt;/body&gt;</code></pre>
1706.  
1707.  
1708.  
1709. <h3 class="wp-block-heading">パラメータの説明</h3>
1710.  
1711.  
1712.  
1713. <ul class="wp-block-list">
1714. <li><code>data-lang</code>: 言語設定（例: &#8220;ja&#8221; for Japanese）</li>
1715.  
1716.  
1717.  
1718. <li><code>data-type</code>: ボタンの種類（&#8221;friend&#8221; は友だち追加ボタン）</li>
1719.  
1720.  
1721.  
1722. <li><code>data-lineid</code>: LINE公式アカウントのID（例: &#8220;@YOUR_LINE_ID&#8221;）</li>
1723.  
1724.  
1725.  
1726. <li><code>data-count</code>: 友だち数を表示するかどうか（&#8221;true&#8221; または &#8220;false&#8221;）</li>
1727.  
1728.  
1729.  
1730. <li><code>data-home</code>: ホームに誘導するかどうか（&#8221;true&#8221; または &#8220;false&#8221;）</li>
1731. </ul>
1732.  
1733.  
1734.  
1735. <h2 class="wp-block-heading">まとめ</h2>
1736.  
1737.  
1738.  
1739. <p>LINEボタンをホームページに埋め込むことで、訪問者が簡単にページをシェアしたり、LINE公式アカウントを友だち追加したりすることができます。</p>
1740.  
1741.  
1742.  
1743. <p>LINEのシェアボタンと友だち追加ボタンは、簡単なHTMLとJavaScriptのコードを追加するだけで実装できます。</p>
1744.  
1745.  
1746.  
1747. <p>これにより、LINEを活用したマーケティングやコミュニケーションがさらに効果的になります。</p><p>The post <a href="https://anco-lab.com/archives/994">ホームページにLINEボタンを埋め込む方法について</a> first appeared on <a href="https://anco-lab.com">あんころブログ</a>.</p>]]></content:encoded>
1749. <wfw:commentRss>https://anco-lab.com/archives/994/feed</wfw:commentRss>
1750. <slash:comments>0</slash:comments>
1753. </item>
1754. <item>
1755. <title>【SWELL】フッター直前に、リッチなCTAを設置するカスタマイズする方法</title>
1756. <link>https://anco-lab.com/archives/905</link>
1757. <comments>https://anco-lab.com/archives/905#respond</comments>
1759. <dc:creator><![CDATA[ancolo]]></dc:creator>
1760. <pubDate>Tue, 25 Jun 2024 02:22:57 +0000</pubDate>
1761. <category><![CDATA[SWELL]]></category>
1762. <guid isPermaLink="false">https://anco-lab.com/?p=905</guid>
1763.  
1764. <description><![CDATA[<p><img src="https://anco-lab.com/wp-content/uploads/2024/06/blog06-1024x650.jpg" class="webfeedsFeaturedVisual" /></p><p>SWELLのブログパーツを使用して、フッター直前にリッチなCTAを設置したいなと思ったことはありませんか？ 今回ご紹介するのは投稿一覧ページなど（固定ページから追加できないページに対し）へのCTA設置です。 完成サンプル [&#8230;]</p>
1765. <p>The post <a href="https://anco-lab.com/archives/905">【SWELL】フッター直前に、リッチなCTAを設置するカスタマイズする方法</a> first appeared on <a href="https://anco-lab.com">あんころブログ</a>.</p>]]></description>
1766. <content:encoded><![CDATA[<p><img src="https://anco-lab.com/wp-content/uploads/2024/06/blog06-1024x650.jpg" class="webfeedsFeaturedVisual" /></p><p>SWELLのブログパーツを使用して、フッター直前にリッチなCTAを設置したいなと思ったことはありませんか？</p>
1767.  
1768.  
1769.  
1770. <p>今回ご紹介するのは投稿一覧ページなど（固定ページから追加できないページに対し）へのCTA設置です。</p>
1771.  
1772.  
1773.  
1774. <p class="u-mb-ctrl u-mb-5"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-02-color"><strong>完成サンプルはこちら！</strong></mark><br>投稿一覧・サイドバー下部の幅全面にCTA（お問い合わせセクション）が表示されていることが確認できます！</p>
1775.  
1776.  
1777.  
1778. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="990" src="https://anco-lab.com/wp-content/uploads/2024/06/screencapture-swell-memo-stg-info-2024-06-24-16_55_42-1024x990.png" alt="" class="wp-image-922" srcset="https://anco-lab.com/wp-content/uploads/2024/06/screencapture-swell-memo-stg-info-2024-06-24-16_55_42-1024x990.png 1024w, https://anco-lab.com/wp-content/uploads/2024/06/screencapture-swell-memo-stg-info-2024-06-24-16_55_42-300x290.png 300w, https://anco-lab.com/wp-content/uploads/2024/06/screencapture-swell-memo-stg-info-2024-06-24-16_55_42-768x743.png 768w, https://anco-lab.com/wp-content/uploads/2024/06/screencapture-swell-memo-stg-info-2024-06-24-16_55_42.png 1487w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
1779.  
1780.  
1781.  
1782. <p><br>基本的なブログパーツ使用方法は他の方がブログでご紹介されていることを見かけますが、<br>このカスタマイズ方法は検索してもあまりヒットしませんので、是非<strong><span class="swl-marker mark_orange">当記事をご覧頂き実装してみてください！</span></strong></p>
1783.  
1784.  
1785.  
1786. <h2 class="wp-block-heading">前提条件：以下の操作ができる方のみご使用ください！</h2>
1787.  
1788.  
1789.  
1790. <p class="u-mb-ctrl u-mb-5">①WordPressの操作に慣れている方でないと危険です！</p>
1791.  
1792.  
1793.  
1794. <p>PHPファイルを編集する際、条件分岐の話なども出てきます。<br>WordPressが全然分からない！という方は、基本の条件分岐タグなどを理解してから行いましょう。</p>
1795.  
1796.  
1797.  
1798. <p class="u-mb-ctrl u-mb-5">②FTPソフトを編集出来る環境のある方のみ、今回の実装方法が可能です！</p>
1799.  
1800.  
1801.  
1802. <p>今回の実装方法では、FTPソフトを使用し子テーマにファイルをアップロードする流れとなります。<br><span class="swl-marker mark_yellow">FTPに接続できない場合は、まず接続できる状態にしてから以下方法を行ないましょう！</span></p>
1803.  
1804.  
1805.  
1806. <h2 class="wp-block-heading">SWELLのブログパーツ作成について</h2>
1807.  
1808.  
1809.  
1810. <h3 class="wp-block-heading">テーマカスタマイズ機能だけでCTA設置出来ないの？</h3>
1811.  
1812.  
1813.  
1814. <p><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-04-color">もちろん、カスタマイズ機能だけでできることはあります！</mark></strong></p>
1815.  
1816.  
1817.  
1818. <p class="u-mb-ctrl u-mb-5">カスタマイズ機能の「ブログパーツ」で何が出来るのか、ご紹介しますね。</p>
1819.  
1820.  
1821.  
1822. <p class="is-style-icon_pen">・記事内で使う場合（※記事内のエリアに表示することは可能）<br>・ウィジェットで使う場合<br>・メインビジュアルで使う場合<br>・カテゴリー、タグページで使う場合<br>・ブロックパターンとして使う場合<br>・著者アーカイブページで使う場合</p>
1823.  
1824.  
1825.  
1826. <p>ただ、今回表示させたい箇所は以下です！<br>・投稿一覧ページ下部<br>・記事詳細ページ下部（記事内エリアではなく、ページ下部全体に表示させたい場合）<br>など、<span class="swl-marker mark_yellow">指定ページのエリア・サイドバーの下部に表示するといった内容になります。</span></p>
1827.  
1828.  
1829.  
1830. <p class="u-mb-ctrl u-mb-5">ここで、ブログパーツを「CTAウィジェット」に設置した場合との表示の違いを説明します！</p>
1831.  
1832.  
1833.  
1834. <div class="wp-block-columns">
1835. <div class="wp-block-column">
1836. <p class="has-text-align-center">ブログパーツを「CTAウィジェット」にて設置</p>
1837.  
1838.  
1839.  
1840. <figure class="wp-block-image size-large"><img decoding="async" width="989" height="1024" src="https://anco-lab.com/wp-content/uploads/2024/06/sample_middle-989x1024.jpg" alt="" class="wp-image-931" srcset="https://anco-lab.com/wp-content/uploads/2024/06/sample_middle-989x1024.jpg 989w, https://anco-lab.com/wp-content/uploads/2024/06/sample_middle-290x300.jpg 290w, https://anco-lab.com/wp-content/uploads/2024/06/sample_middle-768x796.jpg 768w, https://anco-lab.com/wp-content/uploads/2024/06/sample_middle.jpg 1114w" sizes="(max-width: 989px) 100vw, 989px" /></figure>
1841. </div>
1842.  
1843.  
1844.  
1845. <div class="wp-block-column">
1846. <p class="has-text-align-center">ブログパーツを今回の方法で表示</p>
1847.  
1848.  
1849.  
1850. <figure class="wp-block-image size-large"><img decoding="async" width="905" height="1024" src="https://anco-lab.com/wp-content/uploads/2024/06/sample_comp-905x1024.jpg" alt="" class="wp-image-932" srcset="https://anco-lab.com/wp-content/uploads/2024/06/sample_comp-905x1024.jpg 905w, https://anco-lab.com/wp-content/uploads/2024/06/sample_comp-265x300.jpg 265w, https://anco-lab.com/wp-content/uploads/2024/06/sample_comp-768x869.jpg 768w, https://anco-lab.com/wp-content/uploads/2024/06/sample_comp.jpg 1114w" sizes="(max-width: 905px) 100vw, 905px" /></figure>
1851. </div>
1852. </div>
1853.  
1854.  
1855.  
1856. <p><strong>この表示を見て頂ければ、一目瞭然ですよね？</strong><br>今回の実装方法をご使用頂ければ、固定ページ以外にも指定可能なのでレイアウトパターンが広がります！</p>
1857.  
1858.  
1859.  
1860. <h3 class="wp-block-heading">CTA用ブログパーツを作成しよう</h3>
1861.  
1862.  
1863.  
1864. <p class="u-mb-ctrl u-mb-5">①ブログパーツメニューで「CTA」パーツを新規追加</p>
1865.  
1866.  
1867.  
1868. <figure class="wp-block-image size-full"><img decoding="async" width="490" height="319" src="https://anco-lab.com/wp-content/uploads/2024/06/cfe93542fad044ea3901e6713fcd6a6a.png" alt="" class="wp-image-921" srcset="https://anco-lab.com/wp-content/uploads/2024/06/cfe93542fad044ea3901e6713fcd6a6a.png 490w, https://anco-lab.com/wp-content/uploads/2024/06/cfe93542fad044ea3901e6713fcd6a6a-300x195.png 300w" sizes="(max-width: 490px) 100vw, 490px" /></figure>
1869.  
1870.  
1871.  
1872. <p class="u-mb-ctrl u-mb-5">②タイトルやボタンなど、必要なコンテンツを作成</p>
1873.  
1874.  
1875.  
1876. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="524" src="https://anco-lab.com/wp-content/uploads/2024/06/a3466fe44d38d42967fdb7cba23f990b-1024x524.png" alt="" class="wp-image-920" srcset="https://anco-lab.com/wp-content/uploads/2024/06/a3466fe44d38d42967fdb7cba23f990b-1024x524.png 1024w, https://anco-lab.com/wp-content/uploads/2024/06/a3466fe44d38d42967fdb7cba23f990b-300x154.png 300w, https://anco-lab.com/wp-content/uploads/2024/06/a3466fe44d38d42967fdb7cba23f990b-768x393.png 768w, https://anco-lab.com/wp-content/uploads/2024/06/a3466fe44d38d42967fdb7cba23f990b.png 1493w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
1877.  
1878.  
1879.  
1880. <p class="is-style-icon_announce">実際に表示確認しないとレイアウト調整が難しいと思うので、<br>まずはCTAに入れたい内容を作成するだけでも大丈夫です。CSS調整は後で行いましょう！</p>
1881.  
1882.  
1883.  
1884. <h2 class="wp-block-heading">【注意解説あり！】footer.phpを子テーマ内に複製し、コードをカスタマイズ</h2>
1885.  
1886.  
1887.  
1888. <p><strong>ブログパーツを作成出来たら、コードのカスタマイズに入ります！</strong></p>
1889.  
1890.  
1891.  
1892. <p>①FTPソフトを開きます。<br>私の場合は「FileZilla」を使用しています！</p>
1893.  
1894.  
1895.  
1896. <p class="u-mb-ctrl u-mb-5">②親テーマ swell 内の「footer.php」ファイル（赤色部分のファイル）をコピーして<br>子テーマ swell-childフォルダ直下に貼り付け。</p>
1897.  
1898.  
1899.  
1900. <figure class="wp-block-image size-large u-mb-ctrl u-mb-10"><img decoding="async" width="1024" height="592" src="https://anco-lab.com/wp-content/uploads/2024/06/74ab420a324d4dec2174d23b09dc0cff-1024x592.png" alt="" class="wp-image-923" srcset="https://anco-lab.com/wp-content/uploads/2024/06/74ab420a324d4dec2174d23b09dc0cff-1024x592.png 1024w, https://anco-lab.com/wp-content/uploads/2024/06/74ab420a324d4dec2174d23b09dc0cff-300x173.png 300w, https://anco-lab.com/wp-content/uploads/2024/06/74ab420a324d4dec2174d23b09dc0cff-768x444.png 768w, https://anco-lab.com/wp-content/uploads/2024/06/74ab420a324d4dec2174d23b09dc0cff.png 1512w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
1901.  
1902.  
1903.  
1904. <p class="u-mb-ctrl u-mb-10">　<strong>↓</strong><br>functions.phpなどがあるフォルダと同じ場所にファイルを置きます。</p>
1905.  
1906.  
1907.  
1908. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="544" src="https://anco-lab.com/wp-content/uploads/2024/06/a591d88d01b86fb294986b83eba0ba73-1024x544.png" alt="" class="wp-image-919" srcset="https://anco-lab.com/wp-content/uploads/2024/06/a591d88d01b86fb294986b83eba0ba73-1024x544.png 1024w, https://anco-lab.com/wp-content/uploads/2024/06/a591d88d01b86fb294986b83eba0ba73-300x159.png 300w, https://anco-lab.com/wp-content/uploads/2024/06/a591d88d01b86fb294986b83eba0ba73-768x408.png 768w, https://anco-lab.com/wp-content/uploads/2024/06/a591d88d01b86fb294986b83eba0ba73.png 1518w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
1909.  
1910.  
1911.  
1912. <p class="is-style-big_icon_caution">・親テーマのファイルは削除したり編集しないよう、気をつけてください！<br>・子テーマにファイル貼り付け後、親テーマのファイル更新日時などが変更ないか、念の為確認することもオススメです。</p>
1913.  
1914.  
1915.  
1916. <p>③作成した「CTA」ブログパーツのショートコードをコピーしましょう。</p>
1917.  
1918.  
1919.  
1920. <p class="u-mb-ctrl u-mb-5">今回だと「<strong><mark style="background-color:rgba(0, 0, 0, 0);color:#e45757" class="has-inline-color"><div class="p-blogParts post_content" data-partsID="82"></div></mark></strong>」をコピーしています。</p>
1921.  
1922.  
1923.  
1924. <figure class="wp-block-image size-full"><img decoding="async" width="971" height="308" src="https://anco-lab.com/wp-content/uploads/2024/06/31257f745a9a9da535c3d2a44cafa94d.png" alt="" class="wp-image-925" srcset="https://anco-lab.com/wp-content/uploads/2024/06/31257f745a9a9da535c3d2a44cafa94d.png 971w, https://anco-lab.com/wp-content/uploads/2024/06/31257f745a9a9da535c3d2a44cafa94d-300x95.png 300w, https://anco-lab.com/wp-content/uploads/2024/06/31257f745a9a9da535c3d2a44cafa94d-768x244.png 768w" sizes="(max-width: 971px) 100vw, 971px" /></figure>
1925.  
1926.  
1927.  
1928. <p>④ファイルを子テーマに複製できたら、WordPress管理画面に戻ります。<br>外観＞テーマファイルエディターを選択し、右メニューから「テーマフッター（footer.php）」を選択します。<br><strong><span class="swl-marker mark_yellow">※編集するテーマは「SWELL CHILD」となっていることを確認してください！</span></strong></p>
1929.  
1930.  
1931.  
1932. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="487" src="https://anco-lab.com/wp-content/uploads/2024/06/0161889c210fc87c36ebfd98ede9b366-1024x487.png" alt="" class="wp-image-946" srcset="https://anco-lab.com/wp-content/uploads/2024/06/0161889c210fc87c36ebfd98ede9b366-1024x487.png 1024w, https://anco-lab.com/wp-content/uploads/2024/06/0161889c210fc87c36ebfd98ede9b366-300x143.png 300w, https://anco-lab.com/wp-content/uploads/2024/06/0161889c210fc87c36ebfd98ede9b366-768x365.png 768w, https://anco-lab.com/wp-content/uploads/2024/06/0161889c210fc87c36ebfd98ede9b366-1536x730.png 1536w, https://anco-lab.com/wp-content/uploads/2024/06/0161889c210fc87c36ebfd98ede9b366-2048x973.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
1933.  
1934.  
1935.  
1936. <p class="u-mb-ctrl u-mb-5">コード追加場所<br><strong>27行目ぱんくずの条件分岐しPHPコードを閉じた後、footerタグが始まる前</strong>に入れます。</p>
1937.  
1938.  
1939.  
1940. <pre class="wp-block-code"><code>    // ぱんくず
1941.    if ( 'top' !== $SETTING['pos_breadcrumb'] ) :
1942.        SWELL_Theme::get_parts( 'parts/breadcrumb' );
1943.    endif;
1944. ?>
1945.  
1946. <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-black-color"><strong>&lt;?php
1947.    if( </strong></mark><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-02-color">is_home() || is_single() || is_category() || is_archive()</mark></strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-black-color"><strong> ) {
1948.        echo do_shortcode('</strong></mark><strong><mark style="background-color:rgba(0, 0, 0, 0);color:#e45757" class="has-inline-color">&#091;blog_parts id="82"]</mark></strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-black-color"><strong>');
1949.    }
1950. ?&gt;</strong></mark>
1951.  
1952. &lt;footer id="footer" class="l-footer"&gt;</code></pre>
1953.  
1954.  
1955.  
1956. <p class="is-style-big_icon_check"><strong>ポイント1</strong><br>条件分岐内（<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-02-color">青色文字</mark>）のページ指定は、サイトによって変わります！<br>どのページに表示したいのか、WordPressの条件分岐タグを確認しましょう。<br><br><strong>ポイント2</strong><br>ショートコード埋め込み（<mark style="background-color:rgba(0, 0, 0, 0);color:#e45757" class="has-inline-color">赤色文字</mark>）は当記事用のコードになるので、<br>自身で作成したコードをコピーすることを忘れずに！</p>
1957.  
1958.  
1959.  
1960. <p>⑤CTAレイアウトをCSSで調整すれば完成です！<br>検証ツールを使用し、見た目を綺麗にしましょう。</p>
1961.  
1962.  
1963. <div class="swell-block-postLink"> <div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
1964. <div class="p-blogCard__inner">
1965. <span class="p-blogCard__caption">あわせて読みたい</span>
1966. <div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://anco-lab.com/wp-content/uploads/2023/11/検証ツールサムネイル-300x190.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div> <div class="p-blogCard__body">
1967. <a class="p-blogCard__title" href="https://anco-lab.com/archives/262">検証ツールを使いこなして見た目の崩れやエラーを解決する方法を解説！</a>
1968. <span class="p-blogCard__excerpt">コーディングをしていて、こんな経験で困ったことはありませんか？？ ・見た目が崩れていて、どこを修正すればいいのか分からない…・スタイルの微調整をしたいけどどう&#8230;</span> </div>
1969. </div>
1970. </div>
1971. </div>
1972.  
1973.  
1974. <h2 class="wp-block-heading">まとめ</h2>
1975.  
1976.  
1977.  
1978. <p>SWELLのデフォルト機能とコードカスタマイズを上手く活用すれば今回のような形が再現できます！<br>WordPressコードにあまり慣れていない方は多少戸惑うかもしれませんが、<br>操作自体は簡単なので是非レイアウトパターンを広げる際に使用してみてください。</p>
1979.  
1980.  
1981.  
1982. <p>最後までご覧頂き、ありがとうございました！！</p>
1983.  
1984.  
1985. <div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://anco-lab.com/wp-content/uploads/2024/01/1-150x150.png" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="http://anco-lab.com/wp-content/uploads/2024/01/1-150x150.png" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -thinking -border-on"><div class="c-balloon__text">SWELLでのサイト制作や他テーマ、オリジナルでの制作も承っておりますので、Xをフォロー頂きお気軽にご相談ください！<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div><p>The post <a href="https://anco-lab.com/archives/905">【SWELL】フッター直前に、リッチなCTAを設置するカスタマイズする方法</a> first appeared on <a href="https://anco-lab.com">あんころブログ</a>.</p>]]></content:encoded>
1987. <wfw:commentRss>https://anco-lab.com/archives/905/feed</wfw:commentRss>
1988. <slash:comments>0</slash:comments>
1991. </item>
1992. <item>
1993. <title>【CSSコード付き】SWELLメインビジュアルの基本設定・カスタマイズ方法を解説</title>
1994. <link>https://anco-lab.com/archives/598</link>
1995. <comments>https://anco-lab.com/archives/598#respond</comments>
1997. <dc:creator><![CDATA[ancolo]]></dc:creator>
1998. <pubDate>Fri, 14 Jun 2024 10:35:29 +0000</pubDate>
1999. <category><![CDATA[SWELL]]></category>
2000. <guid isPermaLink="false">https://anco-lab.com/?p=598</guid>
2001.  
2002. <description><![CDATA[<p><img src="https://anco-lab.com/wp-content/uploads/2024/06/66c6cfd038ea197bceb291d88f4aa856-1024x651.jpg" class="webfeedsFeaturedVisual" /></p><p>サイトの顔となる場所、それはTOPページのメインビジュアルですよね！テーマの場合「どこまで設定、カスタマイズできるのか？」不安な方も多くいらっしゃるのでは・・ 例えば、このような疑問などありませんか？ SWELLではよく [&#8230;]</p>
2003. <p>The post <a href="https://anco-lab.com/archives/598">【CSSコード付き】SWELLメインビジュアルの基本設定・カスタマイズ方法を解説</a> first appeared on <a href="https://anco-lab.com">あんころブログ</a>.</p>]]></description>
2004. <content:encoded><![CDATA[<p><img src="https://anco-lab.com/wp-content/uploads/2024/06/66c6cfd038ea197bceb291d88f4aa856-1024x651.jpg" class="webfeedsFeaturedVisual" /></p><p>サイトの顔となる場所、それはTOPページのメインビジュアルですよね！<br>テーマの場合「どこまで設定、カスタマイズできるのか？」不安な方も多くいらっしゃるのでは・・</p>
2005.  
2006.  
2007.  
2008. <p>例えば、このような疑問などありませんか？</p>
2009.  
2010.  
2011. <div class="c-balloon -bln-left" data-col="blue"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://anco-lab.com/wp-content/uploads/2024/01/ko1@2x-150x150.png" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="http://anco-lab.com/wp-content/uploads/2024/01/ko1@2x-150x150.png" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -thinking -border-none"><div class="c-balloon__text">メインビジュアルの設定って簡単なの？<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div>
2012.  
2013.  
2014. <div class="c-balloon -bln-left" data-col="blue"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://anco-lab.com/wp-content/uploads/2024/01/ko1@2x-150x150.png" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="http://anco-lab.com/wp-content/uploads/2024/01/ko1@2x-150x150.png" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -thinking -border-none"><div class="c-balloon__text">タイトルの位置をちょっと変えてみたいけど出来るのかな・・<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div>
2015.  
2016.  
2017.  
2018. <p>SWELLではよく見るレイアウトを簡単に設定できます！<br>今回は、メインビジュアルの基本設定〜ちょっとひと癖変えたレイアウトのカスタマイズ方法をご紹介します。</p>
2019.  
2020.  
2021.  
2022. <h2 class="wp-block-heading">メインビジュアルの表示設定手順</h2>
2023.  
2024.  
2025.  
2026. <p>メインビジュアルのカスタマイズは以下手順で設定場所を表示できます。</p>
2027.  
2028.  
2029.  
2030. <p class="has-border -border01">設定場所<br>外観 &gt; カスタマイズ &gt; トップページ &gt; メインビジュアル</p>
2031.  
2032.  
2033.  
2034. <div class="wp-block-columns">
2035. <div class="wp-block-column">
2036. <figure class="wp-block-image size-large is-resized"><img decoding="async" width="633" height="1024" src="https://anco-lab.com/wp-content/uploads/2024/06/0b16726fba9950294f862dccb118592b-633x1024.png" alt="" class="wp-image-761" style="width:auto;height:335px" srcset="https://anco-lab.com/wp-content/uploads/2024/06/0b16726fba9950294f862dccb118592b-633x1024.png 633w, https://anco-lab.com/wp-content/uploads/2024/06/0b16726fba9950294f862dccb118592b-186x300.png 186w, https://anco-lab.com/wp-content/uploads/2024/06/0b16726fba9950294f862dccb118592b.png 642w" sizes="(max-width: 633px) 100vw, 633px" /></figure>
2037. </div>
2038.  
2039.  
2040.  
2041. <div class="wp-block-column">
2042. <figure class="wp-block-image size-full"><img decoding="async" width="652" height="528" src="https://anco-lab.com/wp-content/uploads/2024/06/96b9561e949c40a317562005651de386.png" alt="" class="wp-image-762" srcset="https://anco-lab.com/wp-content/uploads/2024/06/96b9561e949c40a317562005651de386.png 652w, https://anco-lab.com/wp-content/uploads/2024/06/96b9561e949c40a317562005651de386-300x243.png 300w" sizes="(max-width: 652px) 100vw, 652px" /></figure>
2043. </div>
2044.  
2045.  
2046.  
2047. <div class="wp-block-column">
2048. <figure class="wp-block-image size-large is-resized"><img decoding="async" width="569" height="1024" src="https://anco-lab.com/wp-content/uploads/2024/06/b8d107c9bf4f425b8204bdfe43a3bbfc-569x1024.png" alt="" class="wp-image-763" style="width:auto;height:335px" srcset="https://anco-lab.com/wp-content/uploads/2024/06/b8d107c9bf4f425b8204bdfe43a3bbfc-569x1024.png 569w, https://anco-lab.com/wp-content/uploads/2024/06/b8d107c9bf4f425b8204bdfe43a3bbfc-167x300.png 167w, https://anco-lab.com/wp-content/uploads/2024/06/b8d107c9bf4f425b8204bdfe43a3bbfc.png 648w" sizes="(max-width: 569px) 100vw, 569px" /></figure>
2049. </div>
2050. </div>
2051.  
2052.  
2053.  
2054. <h3 class="wp-block-heading">カスタマイズの各設定詳細</h3>
2055.  
2056.  
2057.  
2058. <p class="u-mb-ctrl u-mb-5"><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-03-color">メインビジュアルの表示内容</mark></strong></p>
2059.  
2060.  
2061.  
2062. <div class="wp-block-columns">
2063. <div class="wp-block-column" style="flex-basis:33.33%">
2064. <figure class="wp-block-image size-full"><img decoding="async" width="626" height="326" src="https://anco-lab.com/wp-content/uploads/2024/06/2f1291e302efbac0e0a8fb229cb98fa8.png" alt="" class="wp-image-805" srcset="https://anco-lab.com/wp-content/uploads/2024/06/2f1291e302efbac0e0a8fb229cb98fa8.png 626w, https://anco-lab.com/wp-content/uploads/2024/06/2f1291e302efbac0e0a8fb229cb98fa8-300x156.png 300w" sizes="(max-width: 626px) 100vw, 626px" /></figure>
2065. </div>
2066.  
2067.  
2068.  
2069. <div class="wp-block-column" style="flex-basis:66.66%">
2070. <p>「表示しない」選択時<br>メインビジュアルそのものを非表示に</p>
2071.  
2072.  
2073.  
2074. <p>「画像」選択時<br>1枚ものの画像設定または複数枚設定した際はスライダーで表示</p>
2075.  
2076.  
2077.  
2078. <p>「動画」選択時<br>動画を表示</p>
2079. </div>
2080. </div>
2081.  
2082.  
2083.  
2084. <p class="is-style-icon_info">上記の選択により、以降表示されるエリアで設定項目が変化します。</p>
2085.  
2086.  
2087.  
2088. <p class="u-mb-ctrl u-mb-5"><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-03-color">表示設定</mark></strong></p>
2089.  
2090.  
2091.  
2092. <div class="wp-block-columns">
2093. <div class="wp-block-column" style="flex-basis:33.33%">
2094. <figure class="wp-block-image size-full"><img decoding="async" width="356" height="171" src="https://anco-lab.com/wp-content/uploads/2024/06/0ad6a30ce93766b518f2057c71d7a272.png" alt="" class="wp-image-807" srcset="https://anco-lab.com/wp-content/uploads/2024/06/0ad6a30ce93766b518f2057c71d7a272.png 356w, https://anco-lab.com/wp-content/uploads/2024/06/0ad6a30ce93766b518f2057c71d7a272-300x144.png 300w" sizes="(max-width: 356px) 100vw, 356px" /></figure>
2095. </div>
2096.  
2097.  
2098.  
2099. <div class="wp-block-column" style="flex-basis:66.66%">
2100. <p>「周りに余白をつける」チェックボックス<br>メインビジュアルの上下左右に余白をつけることができます。<br>SP時は8pxずつ、PC(600px以上のサイズ)時は16pxずつの数値がデフォルト設定です。</p>
2101. </div>
2102. </div>
2103.  
2104.  
2105.  
2106. <div class="wp-block-columns">
2107. <div class="wp-block-column" style="flex-basis:33.33%">
2108. <figure class="wp-block-image size-full"><img decoding="async" width="354" height="161" src="https://anco-lab.com/wp-content/uploads/2024/06/4fe23dd2bcffcf46fab87e5951dcad68.png" alt="" class="wp-image-808" srcset="https://anco-lab.com/wp-content/uploads/2024/06/4fe23dd2bcffcf46fab87e5951dcad68.png 354w, https://anco-lab.com/wp-content/uploads/2024/06/4fe23dd2bcffcf46fab87e5951dcad68-300x136.png 300w" sizes="(max-width: 354px) 100vw, 354px" /></figure>
2109. </div>
2110.  
2111.  
2112.  
2113. <div class="wp-block-column" style="flex-basis:66.66%">
2114. <p>「Scrollボタンを表示する」チェックボックス<br>メインビジュアル中央下部にアニメーション付きのスクロールボタンを設置できます。</p>
2115. </div>
2116. </div>
2117.  
2118.  
2119.  
2120. <p class="u-mb-ctrl u-mb-5">Scrollボタン設置例</p>
2121.  
2122.  
2123.  
2124. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="128" src="https://anco-lab.com/wp-content/uploads/2024/06/dc2b34806efee1a0407dd8e5c965fb19-1024x128.png" alt="" class="wp-image-768" srcset="https://anco-lab.com/wp-content/uploads/2024/06/dc2b34806efee1a0407dd8e5c965fb19-1024x128.png 1024w, https://anco-lab.com/wp-content/uploads/2024/06/dc2b34806efee1a0407dd8e5c965fb19-300x38.png 300w, https://anco-lab.com/wp-content/uploads/2024/06/dc2b34806efee1a0407dd8e5c965fb19-768x96.png 768w, https://anco-lab.com/wp-content/uploads/2024/06/dc2b34806efee1a0407dd8e5c965fb19-1536x192.png 1536w, https://anco-lab.com/wp-content/uploads/2024/06/dc2b34806efee1a0407dd8e5c965fb19-2048x256.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
2125.  
2126.  
2127.  
2128. <p class="u-mb-ctrl u-mb-5"><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-03-color">メインビジュアルの高さ設定</mark></strong></p>
2129.  
2130.  
2131.  
2132. <div class="wp-block-columns u-mb-ctrl u-mb-5">
2133. <div class="wp-block-column" style="flex-basis:33.33%">
2134. <figure class="wp-block-image size-full"><img decoding="async" width="353" height="92" src="https://anco-lab.com/wp-content/uploads/2024/06/0ef8f0362d8fee2ee8af8d261a5c8140.png" alt="" class="wp-image-818" srcset="https://anco-lab.com/wp-content/uploads/2024/06/0ef8f0362d8fee2ee8af8d261a5c8140.png 353w, https://anco-lab.com/wp-content/uploads/2024/06/0ef8f0362d8fee2ee8af8d261a5c8140-300x78.png 300w" sizes="(max-width: 353px) 100vw, 353px" /></figure>
2135. </div>
2136.  
2137.  
2138.  
2139. <div class="wp-block-column" style="flex-basis:66.66%">
2140. <p>画像・動画サイズのまま<br>画像を縦横比は”そのままで”表示</p>
2141.  
2142.  
2143.  
2144. <p>コンテンツに応じる<br>メインビジュアル内の入力項目に合わせて画像サイズを変えて表示</p>
2145.  
2146.  
2147.  
2148. <p>数値で設定する<br><strong>PCサイズ</strong>&nbsp;(幅960px以上)と<strong>&nbsp;SPサイズ</strong>（幅960px未満）で分けて指定表示</p>
2149.  
2150.  
2151.  
2152. <p>ウインドウサイズにフィットさせる<br>トップページ全体に画像を表示</p>
2153. </div>
2154. </div>
2155.  
2156.  
2157.  
2158. <p class="is-style-icon_pen"><strong>素材によって大きく変わる部分なので、設定後画質や見た目の確認を忘れず行いましょう！</strong></p>
2159.  
2160.  
2161.  
2162. <p class="u-mb-ctrl u-mb-5"><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-03-color"><strong>画像（動画）の上に表示されるボタンの丸み</strong></mark></strong></p>
2163.  
2164.  
2165.  
2166. <div class="wp-block-columns">
2167. <div class="wp-block-column" style="flex-basis:33.33%">
2168. <figure class="wp-block-image size-full"><img decoding="async" width="354" height="95" src="https://anco-lab.com/wp-content/uploads/2024/06/48672fe2981fc828d5703aca1119ed12.png" alt="" class="wp-image-822" srcset="https://anco-lab.com/wp-content/uploads/2024/06/48672fe2981fc828d5703aca1119ed12.png 354w, https://anco-lab.com/wp-content/uploads/2024/06/48672fe2981fc828d5703aca1119ed12-300x81.png 300w" sizes="(max-width: 354px) 100vw, 354px" /></figure>
2169. </div>
2170.  
2171.  
2172.  
2173. <div class="wp-block-column" style="flex-basis:66.66%">
2174. <p>なし<br>角丸なし、純粋な四角形で表示</p>
2175.  
2176.  
2177.  
2178. <p>少し丸める<br>少し角を取った四角形で表示</p>
2179.  
2180.  
2181.  
2182. <p>丸める<br>角は全くなし、丸みの帯びたボタンを表示</p>
2183. </div>
2184. </div>
2185.  
2186.  
2187.  
2188. <p class="u-mb-ctrl u-mb-5"><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-03-color"><strong><strong>フィルター処理</strong></strong></mark></strong></p>
2189.  
2190.  
2191.  
2192. <div class="wp-block-columns">
2193. <div class="wp-block-column" style="flex-basis:33.33%">
2194. <figure class="wp-block-image size-full"><img decoding="async" width="356" height="118" src="https://anco-lab.com/wp-content/uploads/2024/06/e345ea62c46a00cd7f8df5e0ac0e7fe3.png" alt="" class="wp-image-813" srcset="https://anco-lab.com/wp-content/uploads/2024/06/e345ea62c46a00cd7f8df5e0ac0e7fe3.png 356w, https://anco-lab.com/wp-content/uploads/2024/06/e345ea62c46a00cd7f8df5e0ac0e7fe3-300x99.png 300w" sizes="(max-width: 356px) 100vw, 356px" /></figure>
2195. </div>
2196.  
2197.  
2198.  
2199. <div class="wp-block-column" style="flex-basis:66.66%">
2200. <p>なし<br>設定した画像そのままで表示</p>
2201.  
2202.  
2203.  
2204. <p>ブラー<br>画像にぼかしを入れる</p>
2205.  
2206.  
2207.  
2208. <p>グレースケール<br>画像を白黒のように加工</p>
2209.  
2210.  
2211.  
2212. <p>ドット<br>細かなドットを画像の上に表現</p>
2213.  
2214.  
2215.  
2216. <p>ブラシ<br>ブラシでなぞったようなザザッと感を画像の上に表現</p>
2217. </div>
2218. </div>
2219.  
2220.  
2221.  
2222. <p class="u-mb-ctrl u-mb-5"><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-03-color"><strong><strong><strong>オーバーレイカラー</strong></strong></strong></mark></strong></p>
2223.  
2224.  
2225.  
2226. <div class="wp-block-columns">
2227. <div class="wp-block-column" style="flex-basis:33.33%">
2228. <figure class="wp-block-image size-full"><img decoding="async" width="622" height="408" src="https://anco-lab.com/wp-content/uploads/2024/06/ce98ce4ec8a0a938b00bf90b4f11d1a7.png" alt="" class="wp-image-776" srcset="https://anco-lab.com/wp-content/uploads/2024/06/ce98ce4ec8a0a938b00bf90b4f11d1a7.png 622w, https://anco-lab.com/wp-content/uploads/2024/06/ce98ce4ec8a0a938b00bf90b4f11d1a7-300x197.png 300w" sizes="(max-width: 622px) 100vw, 622px" /></figure>
2229. </div>
2230.  
2231.  
2232.  
2233. <div class="wp-block-column" style="flex-basis:66.66%">
2234. <p>①カラー設定<br>画像または動画の上に被せるカラーを設定</p>
2235.  
2236.  
2237.  
2238. <p>②カラーの不透明度設定<br>少数で設定（1は透明度無し）<br><span class="swl-marker mark_blue">小数点に制限はないですが「0.3」や「0.5」など少数第一位までで設定する形で、私は普段設定してます！</span></p>
2239. </div>
2240. </div>
2241.  
2242.  
2243.  
2244. <h2 class="wp-block-heading">メインビジュアルの画像または動画設定方法</h2>
2245.  
2246.  
2247.  
2248. <p class="is-style-big_icon_caution"><span style="font-size:18px" class="swl-fz"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-main-color"><strong>表示スピード対策のための事前準備</strong></mark></span><br>画像または動画挿入前に、<strong>必ずサイズ圧縮を行った上でSWELL内に埋め込みましょう</strong>！<br>埋め込む素材のサイズが大きい場合、表示に時間がかかりSEOにも影響してしまいます。</p>
2249.  
2250.  
2251.  
2252. <h3 class="wp-block-heading">メインビジュアルにおける画像サイズの指定方法</h3>
2253.  
2254.  
2255.  
2256. <p>設定方法については上記詳細部分で記載していますが、ここでは画像も交えて詳細解説します！</p>
2257.  
2258.  
2259.  
2260. <p>①画像・動画サイズのまま</p>
2261.  
2262.  
2263.  
2264. <p class="u-mb-ctrl u-mb-5">画像または動画サイズそのままで、左上基準に画像を表示します。</p>
2265.  
2266.  
2267.  
2268. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="616" src="https://anco-lab.com/wp-content/uploads/2024/06/ef6a0ba27bda0be229052650a6df3865-1024x616.png" alt="" class="wp-image-830" srcset="https://anco-lab.com/wp-content/uploads/2024/06/ef6a0ba27bda0be229052650a6df3865-1024x616.png 1024w, https://anco-lab.com/wp-content/uploads/2024/06/ef6a0ba27bda0be229052650a6df3865-300x180.png 300w, https://anco-lab.com/wp-content/uploads/2024/06/ef6a0ba27bda0be229052650a6df3865-768x462.png 768w, https://anco-lab.com/wp-content/uploads/2024/06/ef6a0ba27bda0be229052650a6df3865.png 1364w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
2269.  
2270.  
2271.  
2272. <p>②コンテンツに応じる</p>
2273.  
2274.  
2275.  
2276. <p class="u-mb-ctrl u-mb-5">メインビジュアル内の入力項目に合わせて画像サイズを変えて表示します。</p>
2277.  
2278.  
2279.  
2280. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="231" src="https://anco-lab.com/wp-content/uploads/2024/06/94af853641ea9a28d63a06de0b43e3cf-1024x231.png" alt="" class="wp-image-831" srcset="https://anco-lab.com/wp-content/uploads/2024/06/94af853641ea9a28d63a06de0b43e3cf-1024x231.png 1024w, https://anco-lab.com/wp-content/uploads/2024/06/94af853641ea9a28d63a06de0b43e3cf-300x68.png 300w, https://anco-lab.com/wp-content/uploads/2024/06/94af853641ea9a28d63a06de0b43e3cf-768x174.png 768w, https://anco-lab.com/wp-content/uploads/2024/06/94af853641ea9a28d63a06de0b43e3cf.png 1376w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
2281.  
2282.  
2283.  
2284. <p>③数値で設定する</p>
2285.  
2286.  
2287.  
2288. <p class="u-mb-ctrl u-mb-5">PCサイズ・SPサイズ、それぞれ指定した高さに応じて表示します。</p>
2289.  
2290.  
2291.  
2292. <div class="wp-block-columns">
2293. <div class="wp-block-column" style="flex-basis:33.33%">
2294. <figure class="wp-block-image size-full"><img decoding="async" width="354" height="219" src="https://anco-lab.com/wp-content/uploads/2024/06/b799914384980e16ce52579ddd18796a.png" alt="" class="wp-image-834" srcset="https://anco-lab.com/wp-content/uploads/2024/06/b799914384980e16ce52579ddd18796a.png 354w, https://anco-lab.com/wp-content/uploads/2024/06/b799914384980e16ce52579ddd18796a-300x186.png 300w" sizes="(max-width: 354px) 100vw, 354px" /></figure>
2295. </div>
2296.  
2297.  
2298.  
2299. <div class="wp-block-column" style="flex-basis:66.66%">
2300. <p>高さ指定する場合<br><strong>PCサイズ</strong>&nbsp;(幅960px以上)と<strong>&nbsp;SPサイズ</strong>（幅960px未満）で分けて指定表示できます！</p>
2301.  
2302.  
2303.  
2304. <p>高さによって見え方も変わってくるので、<br><span class="swl-marker mark_yellow">数値で指定する場合HTML・CSSが分からない方はオススメしません！</span></p>
2305. </div>
2306. </div>
2307.  
2308.  
2309.  
2310. <p class="is-style-big_icon_point">高さを指定する場合の数値は、<strong>単位付き</strong>で、かつ<strong>半角</strong>で入力してください。<br><code>px</code>や<code>vw</code>,&nbsp;<code>vh</code>などが有効です。（ただし、<code>%</code>は使えません）</p>
2311.  
2312.  
2313.  
2314. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="613" src="https://anco-lab.com/wp-content/uploads/2024/06/897c868aeba6986f120ff3713c898f2c-1024x613.png" alt="" class="wp-image-833" srcset="https://anco-lab.com/wp-content/uploads/2024/06/897c868aeba6986f120ff3713c898f2c-1024x613.png 1024w, https://anco-lab.com/wp-content/uploads/2024/06/897c868aeba6986f120ff3713c898f2c-300x180.png 300w, https://anco-lab.com/wp-content/uploads/2024/06/897c868aeba6986f120ff3713c898f2c-768x460.png 768w, https://anco-lab.com/wp-content/uploads/2024/06/897c868aeba6986f120ff3713c898f2c.png 1363w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
2315.  
2316.  
2317.  
2318. <p>④ウインドウサイズにフィットさせる</p>
2319.  
2320.  
2321.  
2322. <p class="u-mb-ctrl u-mb-5">トップページ全体に画像を表示します。<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-04-color">1番オススメの設定方法！</mark></strong></p>
2323.  
2324.  
2325.  
2326. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="615" src="https://anco-lab.com/wp-content/uploads/2024/06/b5b65bcd0bf31a800a47e439925bd5d1-1024x615.png" alt="" class="wp-image-838" srcset="https://anco-lab.com/wp-content/uploads/2024/06/b5b65bcd0bf31a800a47e439925bd5d1-1024x615.png 1024w, https://anco-lab.com/wp-content/uploads/2024/06/b5b65bcd0bf31a800a47e439925bd5d1-300x180.png 300w, https://anco-lab.com/wp-content/uploads/2024/06/b5b65bcd0bf31a800a47e439925bd5d1-768x462.png 768w, https://anco-lab.com/wp-content/uploads/2024/06/b5b65bcd0bf31a800a47e439925bd5d1.png 1361w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
2327.  
2328.  
2329.  
2330. <h3 class="wp-block-heading">スライダーを設置する</h3>
2331.  
2332.  
2333.  
2334. <p class="u-mb-ctrl u-mb-5">画像を複数枚設定すると自動的に「スライダー」扱いとなります。<br>スライド画像を2枚設定すると、3枚目のスライド設定箇所が表示されますので順に設定しましょう！<br><strong>最大5枚まで設定可能です。</strong></p>
2335.  
2336.  
2337.  
2338. <div class="wp-block-columns">
2339. <div class="wp-block-column" style="flex-basis:33.33%">
2340. <figure class="wp-block-image size-full"><img decoding="async" width="357" height="506" src="https://anco-lab.com/wp-content/uploads/2024/06/cca831278fb9f6a1d571dfba263a5437.png" alt="" class="wp-image-843" srcset="https://anco-lab.com/wp-content/uploads/2024/06/cca831278fb9f6a1d571dfba263a5437.png 357w, https://anco-lab.com/wp-content/uploads/2024/06/cca831278fb9f6a1d571dfba263a5437-212x300.png 212w" sizes="(max-width: 357px) 100vw, 357px" /></figure>
2341. </div>
2342.  
2343.  
2344.  
2345. <div class="wp-block-column" style="flex-basis:66.66%">
2346. <p>スライドの設定<br><strong>PCサイズ</strong>&nbsp;(幅960px以上)と<strong>&nbsp;SPサイズ</strong>（幅960px未満）で分けて指定表示</p>
2347.  
2348.  
2349.  
2350. <p>※SPサイズの画像設定について<br>SPサイズの画像は絶対必要ということではありません！</p>
2351.  
2352.  
2353.  
2354. <p><span class="swl-marker mark_yellow">SPサイズの画像を設定していない場合は、<br>PCサイズの画像の左右中央を基準に表示する仕組みとなっております。</span></p>
2355. </div>
2356. </div>
2357.  
2358.  
2359.  
2360. <figure class="wp-block-table is-style-double"><table class="has-white-background-color has-background"><tbody style="--tbody-th-color--bg:#fff;--tbody-th-color--txt:var(--swl-text_color--black)"><tr><td>PC</td><td>一般的によく使われているフルHPモニターサイズに合わせて、横1920px・縦1080px。<br>画面サイズいっぱいに広げたいのでモニターサイズに合わせたサイズです。</td></tr><tr><td>スマホ</td><td>スマホの画面の2倍で作る。横780px・縦1750pxや横750px・縦1334pxなど。</td></tr></tbody></table></figure>
2361.  
2362.  
2363.  
2364. <h3 class="wp-block-heading">動画を設定する</h3>
2365.  
2366.  
2367.  
2368. <div class="wp-block-columns">
2369. <div class="wp-block-column" style="flex-basis:33.33%">
2370. <figure class="wp-block-image size-full"><img decoding="async" width="352" height="522" src="https://anco-lab.com/wp-content/uploads/2024/06/5035be8a9f5576e534fc10b34d37286b.png" alt="" class="wp-image-841" srcset="https://anco-lab.com/wp-content/uploads/2024/06/5035be8a9f5576e534fc10b34d37286b.png 352w, https://anco-lab.com/wp-content/uploads/2024/06/5035be8a9f5576e534fc10b34d37286b-202x300.png 202w" sizes="(max-width: 352px) 100vw, 352px" /></figure>
2371. </div>
2372.  
2373.  
2374.  
2375. <div class="wp-block-column" style="flex-basis:66.66%">
2376. <p>動画設定<br><strong>PCサイズ</strong>&nbsp;(幅960px以上)と<strong>&nbsp;SPサイズ</strong>（幅960px未満）で分けて指定表示</p>
2377.  
2378.  
2379.  
2380. <p>ポスター画像<br>動画サイズが大きい場合、表示までに少し時間がかかると思います。<br>そのため、動画読み込み完了までの画像を設定できます。</p>
2381.  
2382.  
2383.  
2384. <p>ポスター画像サイズは、画像・動画同様、<br><strong>PCサイズ</strong>&nbsp;(幅960px以上)と<strong>&nbsp;SPサイズ</strong>（幅960px未満）で分けて指定表示</p>
2385. </div>
2386. </div>
2387.  
2388.  
2389.  
2390. <h2 class="wp-block-heading">メインビジュアルのテキスト設定方法</h2>
2391.  
2392.  
2393.  
2394. <h3 class="wp-block-heading">メインビジュアルでのタイトル・サブタイトルを設定する</h3>
2395.  
2396.  
2397.  
2398. <p class="u-mb-ctrl u-mb-5">メインビジュアルに任意のテキストを表示できます。</p>
2399.  
2400.  
2401.  
2402. <div class="wp-block-columns">
2403. <div class="wp-block-column" style="flex-basis:33.33%">
2404. <figure class="wp-block-image size-full"><img decoding="async" width="353" height="245" src="https://anco-lab.com/wp-content/uploads/2024/06/65ac6a6d358b2fd9a1538054e9c5a676.png" alt="" class="wp-image-848" srcset="https://anco-lab.com/wp-content/uploads/2024/06/65ac6a6d358b2fd9a1538054e9c5a676.png 353w, https://anco-lab.com/wp-content/uploads/2024/06/65ac6a6d358b2fd9a1538054e9c5a676-300x208.png 300w" sizes="(max-width: 353px) 100vw, 353px" /></figure>
2405. </div>
2406.  
2407.  
2408.  
2409. <div class="wp-block-column" style="flex-basis:66.66%">
2410. <p>メインタイトル<br>キャッチコピーを設定</p>
2411.  
2412.  
2413.  
2414. <p>サブテキスト<br>サブキャッチコピーを設定</p>
2415. </div>
2416. </div>
2417.  
2418.  
2419.  
2420. <p class="is-style-icon_announce">SWELLの基本機能にはこのフォントの大きさを変更することはできません。<br>もしフォントサイズを変更したい場合は、CSSで調整しましょう。</p>
2421.  
2422.  
2423.  
2424. <h3 class="wp-block-heading">テキストカラーを変更する</h3>
2425.  
2426.  
2427.  
2428. <p class="u-mb-ctrl u-mb-5">カラーの設定は2つあり、「文字カラー」「文字シャドウカラー」をそれぞれ設定できます。</p>
2429.  
2430.  
2431.  
2432. <div class="wp-block-columns">
2433. <div class="wp-block-column" style="flex-basis:33.33%">
2434. <figure class="wp-block-image size-full"><img decoding="async" width="352" height="181" src="https://anco-lab.com/wp-content/uploads/2024/06/7d460c2ac98e5f6800debe148609d77d.png" alt="" class="wp-image-852" srcset="https://anco-lab.com/wp-content/uploads/2024/06/7d460c2ac98e5f6800debe148609d77d.png 352w, https://anco-lab.com/wp-content/uploads/2024/06/7d460c2ac98e5f6800debe148609d77d-300x154.png 300w" sizes="(max-width: 352px) 100vw, 352px" /></figure>
2435. </div>
2436.  
2437.  
2438.  
2439. <div class="wp-block-column" style="flex-basis:66.66%">
2440. <p>テキストカラー<br>文字そのものの色を設定</p>
2441.  
2442.  
2443.  
2444. <p>テキストシャドウカラー<br>文字の右下に影をつけることができる設定</p>
2445. </div>
2446. </div>
2447.  
2448.  
2449.  
2450. <p class="u-mb-ctrl u-mb-5">表示例）テキストカラー「白色」で、テキストシャドウカラーを「ピンク色」に設定した場合<br>うっすらピンク色が見えますよね。</p>
2451.  
2452.  
2453. <div class="wp-block-image">
2454. <figure class="alignleft size-full"><img decoding="async" width="723" height="294" src="https://anco-lab.com/wp-content/uploads/2024/06/ed030b1058406d4387aaf974c614d692.png" alt="" class="wp-image-853" srcset="https://anco-lab.com/wp-content/uploads/2024/06/ed030b1058406d4387aaf974c614d692.png 723w, https://anco-lab.com/wp-content/uploads/2024/06/ed030b1058406d4387aaf974c614d692-300x122.png 300w" sizes="(max-width: 723px) 100vw, 723px" /></figure></div>
2455.  
2456.  
2457. <p class="is-style-icon_announce">テキストシャドウカラーのシャドウ範囲は変更できません。<br>もしシャドウ範囲を変更したい場合は、フォントサイズ同様CSSで調整しましょう。</p>
2458.  
2459.  
2460.  
2461. <h3 class="wp-block-heading">メインビジュアルの文字位置の設定</h3>
2462.  
2463.  
2464.  
2465. <div class="wp-block-columns">
2466. <div class="wp-block-column" style="flex-basis:33.33%">
2467. <figure class="wp-block-image size-full"><img decoding="async" width="343" height="119" src="https://anco-lab.com/wp-content/uploads/2024/06/19fd996264d063cf31ed56170a492836.png" alt="" class="wp-image-860" srcset="https://anco-lab.com/wp-content/uploads/2024/06/19fd996264d063cf31ed56170a492836.png 343w, https://anco-lab.com/wp-content/uploads/2024/06/19fd996264d063cf31ed56170a492836-300x104.png 300w" sizes="(max-width: 343px) 100vw, 343px" /></figure>
2468. </div>
2469.  
2470.  
2471.  
2472. <div class="wp-block-column" style="flex-basis:66.66%">
2473. <p>テキストの位置<br>左右どこの位置に表示するか設定</p>
2474.  
2475.  
2476.  
2477. <p>※ブログパーツ内は適用外です。</p>
2478. </div>
2479. </div>
2480.  
2481.  
2482.  
2483. <div class="wp-block-columns">
2484. <div class="wp-block-column">
2485. <p>「左」選択時</p>
2486.  
2487.  
2488.  
2489. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="603" src="https://anco-lab.com/wp-content/uploads/2024/06/8a6811cbab3cf605aff19c1b72ef3aea-1024x603.png" alt="" class="wp-image-862" srcset="https://anco-lab.com/wp-content/uploads/2024/06/8a6811cbab3cf605aff19c1b72ef3aea-1024x603.png 1024w, https://anco-lab.com/wp-content/uploads/2024/06/8a6811cbab3cf605aff19c1b72ef3aea-300x177.png 300w, https://anco-lab.com/wp-content/uploads/2024/06/8a6811cbab3cf605aff19c1b72ef3aea-768x452.png 768w, https://anco-lab.com/wp-content/uploads/2024/06/8a6811cbab3cf605aff19c1b72ef3aea.png 1309w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
2490. </div>
2491.  
2492.  
2493.  
2494. <div class="wp-block-column">
2495. <p>「中央」選択時</p>
2496.  
2497.  
2498.  
2499. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="602" src="https://anco-lab.com/wp-content/uploads/2024/06/d8cc69b4e40f8833e92b27daee8cc7fd-1024x602.png" alt="" class="wp-image-863" srcset="https://anco-lab.com/wp-content/uploads/2024/06/d8cc69b4e40f8833e92b27daee8cc7fd-1024x602.png 1024w, https://anco-lab.com/wp-content/uploads/2024/06/d8cc69b4e40f8833e92b27daee8cc7fd-300x176.png 300w, https://anco-lab.com/wp-content/uploads/2024/06/d8cc69b4e40f8833e92b27daee8cc7fd-768x452.png 768w, https://anco-lab.com/wp-content/uploads/2024/06/d8cc69b4e40f8833e92b27daee8cc7fd.png 1309w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
2500. </div>
2501.  
2502.  
2503.  
2504. <div class="wp-block-column">
2505. <p>「右」選択時</p>
2506.  
2507.  
2508.  
2509. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="603" src="https://anco-lab.com/wp-content/uploads/2024/06/ce0a4ffae26dc8902344a5afc3fa4c3e-1024x603.png" alt="" class="wp-image-864" srcset="https://anco-lab.com/wp-content/uploads/2024/06/ce0a4ffae26dc8902344a5afc3fa4c3e-1024x603.png 1024w, https://anco-lab.com/wp-content/uploads/2024/06/ce0a4ffae26dc8902344a5afc3fa4c3e-300x177.png 300w, https://anco-lab.com/wp-content/uploads/2024/06/ce0a4ffae26dc8902344a5afc3fa4c3e-768x452.png 768w, https://anco-lab.com/wp-content/uploads/2024/06/ce0a4ffae26dc8902344a5afc3fa4c3e.png 1306w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
2510. </div>
2511. </div>
2512.  
2513.  
2514.  
2515. <p class="is-style-big_icon_check">テキスト位置は左右または中央のいずれか設定は可能ですが、上下の位置設定はできません。<br>上下位置のカスタマイズ方法は <a href="#title-custom" title="">メインビジュアルのタイトル位置を変えてみよう</a> 箇所をご覧ください！</p>
2516.  
2517.  
2518.  
2519. <h2 class="wp-block-heading">メインビジュアルにボタンを配置する方法</h2>
2520.  
2521.  
2522.  
2523. <h3 class="wp-block-heading">ボタンの文字・背景色を設定する</h3>
2524.  
2525.  
2526.  
2527. <div class="wp-block-columns">
2528. <div class="wp-block-column" style="flex-basis:33.33%">
2529. <figure class="wp-block-image size-full"><img decoding="async" width="353" height="176" src="https://anco-lab.com/wp-content/uploads/2024/06/f3b88aedf4b1c0a22aabe006cc953e2c.png" alt="" class="wp-image-858" srcset="https://anco-lab.com/wp-content/uploads/2024/06/f3b88aedf4b1c0a22aabe006cc953e2c.png 353w, https://anco-lab.com/wp-content/uploads/2024/06/f3b88aedf4b1c0a22aabe006cc953e2c-300x150.png 300w" sizes="(max-width: 353px) 100vw, 353px" /></figure>
2530.  
2531.  
2532.  
2533. <figure class="wp-block-image size-full"><img decoding="async" width="355" height="94" src="https://anco-lab.com/wp-content/uploads/2024/06/b2af77cfb2d4dba70dc89a426dd0dbbe.png" alt="" class="wp-image-857" srcset="https://anco-lab.com/wp-content/uploads/2024/06/b2af77cfb2d4dba70dc89a426dd0dbbe.png 355w, https://anco-lab.com/wp-content/uploads/2024/06/b2af77cfb2d4dba70dc89a426dd0dbbe-300x79.png 300w" sizes="(max-width: 355px) 100vw, 355px" /></figure>
2534. </div>
2535.  
2536.  
2537.  
2538. <div class="wp-block-column" style="flex-basis:66.66%">
2539. <p>リンク先URL<br>遷移させたいページ・サイトのURLを設定</p>
2540.  
2541.  
2542.  
2543. <p>ボタンテキスト<br>ボタン内のテキストを設定</p>
2544.  
2545.  
2546.  
2547. <p>ボタンカラー<br>ボタンの背景色を設定</p>
2548. </div>
2549. </div>
2550.  
2551.  
2552.  
2553. <p class="is-style-icon_announce">文字を設定しただけではボタンは表示されません！<br><strong>必ず、同時にURL設定を行なってください。</strong></p>
2554.  
2555.  
2556.  
2557. <h3 class="wp-block-heading">ボタンのURL設定について</h3>
2558.  
2559.  
2560.  
2561. <p>メインビジュアルに設置するボタンは<strong>外部リンク（別タブ表示）</strong>扱いとなります。<br><span class="swl-marker mark_yellow">別タブで表示させたくない場合は、functions.phpにコードを追記する必要があります。</span></p>
2562.  
2563.  
2564.  
2565. <div class="wp-block-columns">
2566. <div class="wp-block-column" style="flex-basis:33.33%">
2567. <figure class="wp-block-image size-full"><img decoding="async" width="353" height="176" src="https://anco-lab.com/wp-content/uploads/2024/06/f3b88aedf4b1c0a22aabe006cc953e2c.png" alt="" class="wp-image-858" srcset="https://anco-lab.com/wp-content/uploads/2024/06/f3b88aedf4b1c0a22aabe006cc953e2c.png 353w, https://anco-lab.com/wp-content/uploads/2024/06/f3b88aedf4b1c0a22aabe006cc953e2c-300x150.png 300w" sizes="(max-width: 353px) 100vw, 353px" /></figure>
2568. </div>
2569.  
2570.  
2571.  
2572. <div class="wp-block-column" style="flex-basis:66.66%">
2573. <p>リンク先URLの書き方について</p>
2574.  
2575.  
2576.  
2577. <p>①同サイトの別ページを表示させたい場合<br>左図のように、ページ名URLの前に「/」を入れましょう。</p>
2578.  
2579.  
2580.  
2581. <p>②外部サイトに遷移させたい場合<br>URLは絶対パス「https://〜〜」から書きましょう。</p>
2582. </div>
2583. </div>
2584.  
2585.  
2586.  
2587. <h2 class="wp-block-heading">メインビジュアルのタイトル表現方法をカスタマイズ</h2>
2588.  
2589.  
2590.  
2591. <h3 class="wp-block-heading" id="title-custom">メインビジュアルのタイトル位置を変えてみよう</h3>
2592.  
2593.  
2594.  
2595. <p class="u-mb-ctrl u-mb-5">元の状態：タイトル・サブタイトルを入力し、位置は「左」指定で表示</p>
2596.  
2597.  
2598.  
2599. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="651" src="https://anco-lab.com/wp-content/uploads/2024/06/4475621e5c1ac4bd576c6af25215f74e-1024x651.png" alt="" class="wp-image-872" srcset="https://anco-lab.com/wp-content/uploads/2024/06/4475621e5c1ac4bd576c6af25215f74e-1024x651.png 1024w, https://anco-lab.com/wp-content/uploads/2024/06/4475621e5c1ac4bd576c6af25215f74e-300x191.png 300w, https://anco-lab.com/wp-content/uploads/2024/06/4475621e5c1ac4bd576c6af25215f74e-768x489.png 768w, https://anco-lab.com/wp-content/uploads/2024/06/4475621e5c1ac4bd576c6af25215f74e.png 1333w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
2600.  
2601.  
2602.  
2603. <p class="u-mb-ctrl u-mb-5"><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-03-color">表示例①</mark></strong>　サブタイトルを上に、タイトルを下に逆転配置させたい場合</p>
2604.  
2605.  
2606.  
2607. <figure class="wp-block-image size-large u-mb-ctrl u-mb-10"><img decoding="async" width="1024" height="651" src="https://anco-lab.com/wp-content/uploads/2024/06/901c6daa9f0694eb1348eb2b3b9ad170-1-1024x651.png" alt="" class="wp-image-881" srcset="https://anco-lab.com/wp-content/uploads/2024/06/901c6daa9f0694eb1348eb2b3b9ad170-1-1024x651.png 1024w, https://anco-lab.com/wp-content/uploads/2024/06/901c6daa9f0694eb1348eb2b3b9ad170-1-300x191.png 300w, https://anco-lab.com/wp-content/uploads/2024/06/901c6daa9f0694eb1348eb2b3b9ad170-1-768x488.png 768w, https://anco-lab.com/wp-content/uploads/2024/06/901c6daa9f0694eb1348eb2b3b9ad170-1.png 1332w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
2608.  
2609.  
2610.  
2611. <p class="u-mb-ctrl u-mb-0">追加コードはこちら！</p>
2612.  
2613.  
2614.  
2615. <pre class="wp-block-code"><code>
2616. .p-mainVisual__textLayer {
2617.    flex-direction: column-reverse !important;
2618. }</code></pre>
2619.  
2620.  
2621.  
2622. <p class="u-mb-ctrl u-mb-5"><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-03-color">表示例②</mark></strong>　タイトル・サブタイトルの表示位置を少し上に表示させたい場合</p>
2623.  
2624.  
2625.  
2626. <figure class="wp-block-image size-large u-mb-ctrl u-mb-10"><img decoding="async" width="1024" height="650" src="https://anco-lab.com/wp-content/uploads/2024/06/b9d4d503a219dd178135588619d89039-1024x650.png" alt="" class="wp-image-873" srcset="https://anco-lab.com/wp-content/uploads/2024/06/b9d4d503a219dd178135588619d89039-1024x650.png 1024w, https://anco-lab.com/wp-content/uploads/2024/06/b9d4d503a219dd178135588619d89039-300x190.png 300w, https://anco-lab.com/wp-content/uploads/2024/06/b9d4d503a219dd178135588619d89039-768x488.png 768w, https://anco-lab.com/wp-content/uploads/2024/06/b9d4d503a219dd178135588619d89039.png 1334w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
2627.  
2628.  
2629.  
2630. <p class="u-mb-ctrl u-mb-0">追加コードはこちら！<br>※heightの％数値は表示したい箇所に合わせて変更してください。<br>（上に表示：数値下げる、下に表示：数値上げる）</p>
2631.  
2632.  
2633.  
2634. <pre class="wp-block-code"><code>
2635. .p-mainVisual__textLayer {
2636.    justify-content: flex-end !important;
2637.    height: <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-main-color">36</mark>% !important;
2638. }</code></pre>
2639.  
2640.  
2641.  
2642. <h3 class="wp-block-heading">メインビジュアルのタイトルを画像に変えてみよう</h3>
2643.  
2644.  
2645.  
2646. <p><span class="swl-marker mark_yellow">メインビジュアルのテキスト設定は、画像設定も可能</span>です！<br>設定箇所に、HTMLタグを挿入し画像を表示させてみましょう。</p>
2647.  
2648.  
2649.  
2650. <p class="u-mb-ctrl u-mb-5"><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-03-color">表示例</mark></strong>　メインタイトルに画像を表示<br>「SAMPLE」という画像を埋め込んでみました！</p>
2651.  
2652.  
2653.  
2654. <figure class="wp-block-image size-large u-mb-ctrl u-mb-10"><img decoding="async" width="1024" height="651" src="https://anco-lab.com/wp-content/uploads/2024/06/c29a7a4a7532d6f3b184e4d74d6097d7-1024x651.png" alt="" class="wp-image-888" srcset="https://anco-lab.com/wp-content/uploads/2024/06/c29a7a4a7532d6f3b184e4d74d6097d7-1024x651.png 1024w, https://anco-lab.com/wp-content/uploads/2024/06/c29a7a4a7532d6f3b184e4d74d6097d7-300x191.png 300w, https://anco-lab.com/wp-content/uploads/2024/06/c29a7a4a7532d6f3b184e4d74d6097d7-768x489.png 768w, https://anco-lab.com/wp-content/uploads/2024/06/c29a7a4a7532d6f3b184e4d74d6097d7.png 1333w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
2655.  
2656.  
2657.  
2658. <p class="u-mb-ctrl u-mb-0">カスタマイズ「メインテキスト」に設定する内容はこちら</p>
2659.  
2660.  
2661.  
2662. <p class="u-mb-ctrl u-mb-5">①メディアライブラリに画像を新規登録</p>
2663.  
2664.  
2665.  
2666. <p class="u-mb-ctrl u-mb-5">②登録した際に「URLをクリップボードにコピー」押下</p>
2667.  
2668.  
2669. <div class="wp-block-image">
2670. <figure class="alignleft size-full"><img decoding="async" width="503" height="86" src="https://anco-lab.com/wp-content/uploads/2024/06/82691b39fa277af12613e8c32a458015.png" alt="" class="wp-image-890" srcset="https://anco-lab.com/wp-content/uploads/2024/06/82691b39fa277af12613e8c32a458015.png 503w, https://anco-lab.com/wp-content/uploads/2024/06/82691b39fa277af12613e8c32a458015-300x51.png 300w" sizes="(max-width: 503px) 100vw, 503px" /></figure></div>
2671.  
2672.  
2673. <p class="u-mb-ctrl u-mb-0">③コピーしたURLを「src」内に挿入<br>幅、altは自由に設定してください。</p>
2674.  
2675.  
2676.  
2677. <pre class="wp-block-code"><code>&lt;img src="<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-02-color">http://swell.memo-stg.info/wp-content/uploads/2024/06/sample.png</mark>" width="<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-02-color">240</mark>" alt="<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-02-color">SAMPLE</mark>"&gt;</code></pre>
2678.  
2679.  
2680.  
2681. <p>このように、様々なカスタマイズが可能です！<br>是非色々触ってみてください。</p>
2682.  
2683.  
2684.  
2685. <h2 class="wp-block-heading">まとめ</h2>
2686.  
2687.  
2688.  
2689. <p>SWELLのデフォルト機能を使えば、良い感じのデザイン表現は可能です！<br>少しデフォルト機能だけでは物足りないなと感じる方は、是非CSS調整を行なってみてください。</p>
2690.  
2691.  
2692.  
2693. <p class="u-mb-ctrl u-mb-20">最後までご覧頂き、ありがとうございました！！</p>
2694.  
2695.  
2696.  
2697. <p class="has-text-align-center u-mb-ctrl u-mb-10"><strong><mark style="background-color:rgba(0, 0, 0, 0);color:#43618e" class="has-inline-color">＼当サイトはSWELLを使用しています／<br>気になった方は、是非バナーから公式サイトをチェックしてみてくださいね！</mark></strong></p>
2698.  
2699.  
2700. <div class="p-adBox -normal -border-on" data-id="1062" data-ad="normal"><div class="p-adBox__body"><div class="p-adBox__img"><a href="//af.moshimo.com/af/c/click?a_id=4638363&#038;p_id=3885&#038;pc_id=9646&#038;pl_id=53839" rel="nofollow" referrerpolicy="no-referrer-when-downgrade" attributionsrc><img decoding="async" src="//image.moshimo.com/af-img/3130/000000053839.png" width="400" height="300" style="border:none;"></a><img decoding="async" src="//i.moshimo.com/af/i/impression?a_id=4638363&#038;p_id=3885&#038;pc_id=9646&#038;pl_id=53839" width="1" height="1" style="border:none;" loading="lazy"></div></div></div>
2701.  
2702. <div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://anco-lab.com/wp-content/uploads/2024/01/1-150x150.png" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="http://anco-lab.com/wp-content/uploads/2024/01/1-150x150.png" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript></div><div class="c-balloon__body -thinking -border-on"><div class="c-balloon__text">SWELLでのサイト制作や他テーマ、オリジナルでの制作も承っておりますので、Xをフォロー頂きお気軽にご相談ください！<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div><p>The post <a href="https://anco-lab.com/archives/598">【CSSコード付き】SWELLメインビジュアルの基本設定・カスタマイズ方法を解説</a> first appeared on <a href="https://anco-lab.com">あんころブログ</a>.</p>]]></content:encoded>
2704. <wfw:commentRss>https://anco-lab.com/archives/598/feed</wfw:commentRss>
2705. <slash:comments>0</slash:comments>
2708. </item>
2709. </channel>
2710. </rss>
2711.