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 (16 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 (90 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 (16 occurrences) [help]

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

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

  <p><strong><span class="swl-fz u-fz-l"><mark style="background-color:rgba(0, ...
  

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

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

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

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

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

  <figure class="wp-block-image size-large"><img decoding="async" width="1024" ...
  

• line 1243, 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( ...
  

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

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

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

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

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

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

• line 2023, column 0: content:encoded should not contain referrerpolicy attribute [help]

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

• line 2023, column 0: content:encoded should not contain attributionsrc attribute [help]

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

• line 2023, column 0: content:encoded should not contain loading attribute [help]

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

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

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

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>Mon, 16 Sep 2024 04:05:12 +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.6.2</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>転職を繰り返した20代でも、IT系転職以降スキルを身につけフリーランスで稼げるようになった話</title>
32. <link>https://anco-lab.com/archives/1069</link>
33. <comments>https://anco-lab.com/archives/1069#respond</comments>
35. <dc:creator><![CDATA[ancolo]]></dc:creator>
36. <pubDate>Fri, 23 Aug 2024 05:08:02 +0000</pubDate>
37. <category><![CDATA[私のこと]]></category>
38. <guid isPermaLink="false">https://anco-lab.com/?p=1069</guid>
39.  
40. <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>
41. <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>
42. <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>
43.  
44.  
45.  
46. <p>20代の私はスキルを身につけてフリーランスでバリバリ稼ぐ友人を見て「羨ましい&#8230;」とばかり思ってました。<br>皆さんも、こんなお悩みを持ったことはありませんか？？</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>この記事が、少しでも皆さんの励みや参考になれば嬉しいです！！！</p>
57.  
58.  
59.  
60. <h2 class="wp-block-heading">IT系職種に就く前の仕事について</h2>
61.  
62.  
63.  
64. <p>元々は建築／インテリア系の職種に7年ほど従事し、<strong>好きなことを仕事に出来たら</strong>と当時考えていました。。<br>ざっと仕事内容を紹介させて頂きますね！</p>
65.  
66.  
67.  
68. <p class="has-border -border04 is-style-bg_stripe">過去の仕事<br>・雑貨兼家具屋で店舗販売員<br>・某ハウスメーカーにて社内システムのヘルプデスク<br>（システムの操作マニュアル作成したり、全国大都市の説明会で説明したり！）<br>・CAD使用し、設計図面作成</p>
69.  
70.  
71.  
72. <h2 class="wp-block-heading">なぜ転職を繰り返していたのか・・</h2>
73.  
74.  
75.  
76. <p>「好きなことを仕事にして生きていきたい！」という気持ちはずっとありました。</p>
77.  
78.  
79.  
80. <p>ただ、<br>就職した会社での働きづらさを感じたり、サービス残業ばかりで収入が増えない辛さがあったり。<br>理不尽なルールに縛られ窮屈さを感じている状態で。。（仕事と関係のないことで難癖を付けられたことも&#8230;）</p>
81.  
82.  
83.  
84. <p><span class="swl-marker mark_blue">上記のようなことを解消したい！という気持ち</span>から、色々彷徨っていたというのが転職を繰り返した理由です！</p>
85.  
86.  
87.  
88. <p>転職を繰り返していた私が、なぜ未経験のIT系職種へ転職したいという気持ちになったのか？</p>
89.  
90.  
91.  
92. <p><strong>理由は2つ！</strong><br>・周りにいた友人が「IT系フリーランスで稼いでる」という話を聞いたから。<br>・某ハウスメーカーのヘルプデスク時代に、他社SEと仕事したことでスキルを身につけたいと思ったから。</p>
93.  
94.  
95.  
96. <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>
97.  
98.  
99.  
100. <h2 class="wp-block-heading">未経験の職種に転職する際、やっておけば良かったこと</h2>
101.  
102.  
103.  
104. <p>私が転職した2019年頃は、ポートフォリオが無くても未経験でもIT系への就職はそこまで難しくなかったです。</p>
105.  
106.  
107.  
108. <p>ですが、<span class="swl-marker mark_yellow">2024年の今は転職希望者もかなり増えてる印象なので、ポートフォリオは必須</span>と言えます！<br>自身が「ここで働きたい！」と思える会社に入れるよう、しっかり制作物を準備して挑みましょう。</p>
109.  
110.  
111.  
112. <p>転職時にやっておけば良かったこと一覧詳細はこちら。<br>今やSNS活用は当たり前。<br>その時その時に合わせて、求人サイトやSNSを活用しておくことが大事だと考えます！</p>
113.  
114.  
115.  
116. <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>
117.  
118.  
119.  
120. <h2 class="wp-block-heading">転職活動時までに備えておきたいものって何が必要？</h2>
121.  
122.  
123.  
124. <p>以下は、私が備えておいて良かったと思う最低限必須のスキルとなります！</p>
125.  
126.  
127.  
128. <p class="is-style-big_kakko_box">・最低限のパソコンスキル（エクセルやパワーポイントなど）<br>→この辺はIT系に限らず、どの業種に転職する際も必要と言えますね。<br><br>・社会人としてのビジネススキル<br>→こちらも必須ですよね。<br>　未経験での転職の場合は特に気を付けて、評価が下がらないようにしておきましょう。<br><br>・コミュニケーションスキル<br>→特に、開発はチームでのプロジェクトがほとんどなので、連携プレーが超重要です！！<br><br>・どのような言語があるか、業務内容なのか”用語”を知っておく<br>→どういう業務内容かによって必要なスキルが変わります。<br>　ググれば色々な情報が出てくると思うので、事前に調べておくことで「自身で色々調べれる人」という<br>　認識を持ってもらいやすくなります！</p>
129.  
130.  
131.  
132. <p>一言で『IT系』と言っても、本当に色々あります！！！<br>フロントエンドやバックエンド、インフラ系、Webデザインなどここには書ききれないので省略しますが。</p>
133.  
134.  
135.  
136. <p>なので、これから自分がやりたいことを含めて、<br>その先長く活用できるような経験を積める会社はどこなのか？を調べ、面接で色々聞けると良いですね！</p>
137.  
138.  
139.  
140. <h2 class="wp-block-heading">個人で稼げるようになりたいと思った時、何から始めるのが良いの？</h2>
141.  
142.  
143.  
144. <p>上記までは、転職のお話でした。<br>では、個人（フリーランス）で稼ぎたいと思った時どのようなことから始めるのが良いのか、お話します！</p>
145.  
146.  
147.  
148. <p>ここからは「私がWeb制作フリーランスになりたい」と思った時の流れを書かせて頂きますね。</p>
149.  
150.  
151.  
152. <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>
153.  
154.  
155. <div class="swell-block-postLink"> <div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
156. <div class="p-blogCard__inner">
157. <span class="p-blogCard__caption">あわせて読みたい</span>
158. <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">
159. <a class="p-blogCard__title" href="https://anco-lab.com/archives/451">残業あり会社員でも４ヶ月でWeb制作学習を終えた方法</a>
160. <span class="p-blogCard__excerpt">兼業しながら学習を毎日継続するって、なかなか難しいですよね。私は残業する日が多く20時や21時に帰ることがほとんどでした！ 学習開始当時の私はこんなことを思ってい&#8230;</span> </div>
161. </div>
162. </div>
163. </div>
164.  
165.  
166. <h2 class="wp-block-heading">中長期的に稼ぐ為に、私が心掛けていること</h2>
167.  
168.  
169.  
170. <p>1年半ほどフリーランスとして活動してきた私が、ずっと心掛けていること。</p>
171.  
172.  
173.  
174. <p>それは<br><strong>人との繋がりを大事に、自分が今出来ることで最大限価値貢献すること</strong><br>です！！</p>
175.  
176.  
177.  
178. <p>個人事業主になったとしても、結局仕事する時は1人じゃありません！<br>提携先、協業の方、同じフリーランスなど、どこかで人と繋がっています。</p>
179.  
180.  
181.  
182. <p>自分が今出来ることで最大限価値貢献することというのは<br>出来ないことを「出来る」といって嘘をつかず、<br>調べたり代替案を提案したり、”今”自分に最大限できることで価値貢献することが大事だなと。</p>
183.  
184.  
185.  
186. <p>ただ、努力してない状態で「最大限」とは言わないので、<br>調べる努力、スキルを上げる努力を行なった上で、<span class="swl-marker mark_blue">お客様のご要望・目的を叶えることがベスト</span>と考えてます！</p>
187.  
188.  
189.  
190. <h2 class="wp-block-heading">【まとめ】優秀な経歴じゃなくても個人で稼げる力は身につけれる！</h2>
191.  
192.  
193.  
194. <p>この記事を読んでくださった方は、私が全然優秀じゃないということを分かって頂けたかと思いますw</p>
195.  
196.  
197.  
198. <p>今では、<br>・色々な案件に携わらせて頂いたり<br>・1案件100万円超えの案件を受注できるような力を付けたり<br>・メンターなど教える立場として1年半ほど経験してたり<br>・コーディングだけでなく上流工程から制作に携わるスキルを身につけたり<br>と順風満帆に思われがちですが、<br>色々な経験を経てこその今なので、今後も皆さんと一緒に頑張っていけたらと思ってます！</p>
199.  
200.  
201.  
202. <p>悩みながらも頑張って前に進んでいきましょう。</p>
203.  
204.  
205.  
206. <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>
208. <wfw:commentRss>https://anco-lab.com/archives/1069/feed</wfw:commentRss>
209. <slash:comments>0</slash:comments>
212. </item>
213. <item>
214. <title>エクセルで作った表をホームぺージで表示させる方法について</title>
215. <link>https://anco-lab.com/archives/1044</link>
216. <comments>https://anco-lab.com/archives/1044#respond</comments>
218. <dc:creator><![CDATA[ancolo]]></dc:creator>
219. <pubDate>Sun, 28 Jul 2024 01:54:15 +0000</pubDate>
220. <category><![CDATA[Web制作]]></category>
221. <guid isPermaLink="false">https://anco-lab.com/?p=1044</guid>
222.  
223. <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>
224. <p>The post <a href="https://anco-lab.com/archives/1044">エクセルで作った表をホームぺージで表示させる方法について</a> first appeared on <a href="https://anco-lab.com">あんころブログ</a>.</p>]]></description>
225. <content:encoded><![CDATA[<p><img src="https://anco-lab.com/wp-content/uploads/2024/07/blog-excelHP-1024x650.jpg" class="webfeedsFeaturedVisual" /></p><p>エクセルで作成した表をホームページで表示させる方法はいくつかありますが、ここでは代表的な方法をいくつか紹介します。</p>
226.  
227.  
228.  
229. <p>それぞれの方法について、ステップバイステップで説明します。</p>
230.  
231.  
232.  
233. <h2 class="wp-block-heading">方法1: エクセル表をHTMLに変換して埋め込む</h2>
234.  
235.  
236.  
237. <h3 class="wp-block-heading">ステップ1: エクセル表をHTMLに変換</h3>
238.  
239.  
240.  
241. <ol class="wp-block-list">
242. <li>エクセルを開き、表示させたい表を選択します。</li>
243.  
244.  
245.  
246. <li>「ファイル」メニューから「名前を付けて保存」を選択します。</li>
247.  
248.  
249.  
250. <li>ファイル形式を「Webページ（*.htm, *.html）」に設定し、保存します。</li>
251.  
252.  
253.  
254. <li>保存されたHTMLファイルをテキストエディタ（例：メモ帳）で開きます。</li>
255. </ol>
256.  
257.  
258.  
259. <h3 class="wp-block-heading">ステップ2: HTMLコードをコピー</h3>
260.  
261.  
262.  
263. <ol class="wp-block-list">
264. <li>テキストエディタで開いたHTMLファイルの内容を全てコピーします。</li>
265. </ol>
266.  
267.  
268.  
269. <h3 class="wp-block-heading">ステップ3: HTMLコードをホームページに埋め込む</h3>
270.  
271.  
272.  
273. <ol class="wp-block-list">
274. <li>ホームページを編集するツール（例：WordPress、静的サイトジェネレーター）を開きます。</li>
275.  
276.  
277.  
278. <li>表を表示させたい場所にコピーしたHTMLコードを貼り付けます。</li>
279.  
280.  
281.  
282. <li>保存して、ホームページをプレビューまたは公開します。</li>
283. </ol>
284.  
285.  
286.  
287. <h2 class="wp-block-heading">方法2: Googleスプレッドシートを利用する</h2>
288.  
289.  
290.  
291. <h3 class="wp-block-heading">ステップ1: エクセル表をGoogleスプレッドシートにインポート</h3>
292.  
293.  
294.  
295. <ol class="wp-block-list">
296. <li>Googleドライブにアクセスし、Googleスプレッドシートを開きます。</li>
297.  
298.  
299.  
300. <li>「ファイル」メニューから「インポート」を選択します。</li>
301.  
302.  
303.  
304. <li>「アップロード」タブでエクセルファイルをアップロードします。</li>
305. </ol>
306.  
307.  
308.  
309. <h3 class="wp-block-heading">ステップ2: 公開用リンクを取得</h3>
310.  
311.  
312.  
313. <ol class="wp-block-list">
314. <li>Googleスプレッドシートの「ファイル」メニューから「ウェブに公開」を選択します。</li>
315.  
316.  
317.  
318. <li>「リンク」タブで、「公開」をクリックします。</li>
319.  
320.  
321.  
322. <li>表示されたリンクをコピーします。</li>
323. </ol>
324.  
325.  
326.  
327. <h3 class="wp-block-heading">ステップ3: HTMLに埋め込む</h3>
328.  
329.  
330.  
331. <ol class="wp-block-list">
332. <li>ホームページを編集するツールを開きます。</li>
333.  
334.  
335.  
336. <li>表を表示させたい場所に次のようなiframeタグを使用してリンクを埋め込みます。</li>
337. </ol>
338.  
339.  
340.  
341. <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>
342.  
343.  
344.  
345. <p>（XXXXXXXXXXXXは取得したリンクに含まれるIDに置き換えます）</p>
346.  
347.  
348.  
349. <h2 class="wp-block-heading">方法3: JavaScriptライブラリを使用する</h2>
350.  
351.  
352.  
353. <h3 class="wp-block-heading">ステップ1: エクセル表をCSV形式で保存</h3>
354.  
355.  
356.  
357. <ol class="wp-block-list">
358. <li>エクセルを開き、表示させたい表を選択します。</li>
359.  
360.  
361.  
362. <li>「ファイル」メニューから「名前を付けて保存」を選択します。</li>
363.  
364.  
365.  
366. <li>ファイル形式を「CSV（カンマ区切り）」に設定し、保存します。</li>
367. </ol>
368.  
369.  
370.  
371. <h3 class="wp-block-heading">ステップ2: JavaScriptライブラリを利用</h3>
372.  
373.  
374.  
375. <ol class="wp-block-list">
376. <li>保存したCSVファイルをウェブサーバーにアップロードします。</li>
377.  
378.  
379.  
380. <li>以下のようなHTMLとJavaScriptコードを使用して、CSVファイルを読み込み、表を表示します。</li>
381. </ol>
382.  
383.  
384.  
385. <pre class="wp-block-code"><code>&lt;!DOCTYPE html&gt;
386. <html>
387. <head>
388.    <title>CSV Table</title>
389.    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
390.    <script src="https://cdn.jsdelivr.net/npm/papaparse@5.3.0/papaparse.min.js"></script>
391. </head>
392. <body>
393.    <table id="csv-table"></table>
394.  
395.    <script>
396.        $(document).ready(function () {
397.            Papa.parse("path/to/your/file.csv", {
398.                download: true,
399.                complete: function (results) {
400.                    var data = results.data;
401.                    var table = $("#csv-table");
402.                    data.forEach(function (row, index) {
403.                        var tr = $("<tr>");
404.                        row.forEach(function (cell) {
405.                            var td = $("<td>").text(cell);
406.                            tr.append(td);
407.                        });
408.                        table.append(tr);
409.                    });
410.                }
411.            });
412.        });
413.    </script>
414. </body>
415. &lt;/html&gt;</code></pre>
416.  
417.  
418.  
419. <p>この方法では、PapaParseライブラリを使用してCSVファイルを読み込み、jQueryを使用してHTMLテーブルに変換しています。</p>
420.  
421.  
422.  
423. <h2 class="wp-block-heading">まとめ</h2>
424.  
425.  
426.  
427. <p>エクセルで作成した表をホームページに表示する方法は、直接HTMLに変換して埋め込む方法、Googleスプレッドシートを利用する方法、JavaScriptライブラリを使用する方法などがあります。</p>
428.  
429.  
430.  
431. <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>
433. <wfw:commentRss>https://anco-lab.com/archives/1044/feed</wfw:commentRss>
434. <slash:comments>0</slash:comments>
437. </item>
438. <item>
439. <title>ホームページに動画を埋め込む際のサイズについて</title>
440. <link>https://anco-lab.com/archives/1046</link>
441. <comments>https://anco-lab.com/archives/1046#respond</comments>
443. <dc:creator><![CDATA[ancolo]]></dc:creator>
444. <pubDate>Tue, 23 Jul 2024 02:14:48 +0000</pubDate>
445. <category><![CDATA[Web制作]]></category>
446. <guid isPermaLink="false">https://anco-lab.com/?p=1046</guid>
447.  
448. <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>
449. <p>The post <a href="https://anco-lab.com/archives/1046">ホームページに動画を埋め込む際のサイズについて</a> first appeared on <a href="https://anco-lab.com">あんころブログ</a>.</p>]]></description>
450. <content:encoded><![CDATA[<p><img src="https://anco-lab.com/wp-content/uploads/2024/07/blog-video-1024x650.jpg" class="webfeedsFeaturedVisual" /></p><p>ホームページに動画を埋め込む際のサイズ設定は、ユーザー体験やページのレイアウトに大きく影響します。</p>
451.  
452.  
453. <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>
454.  
455.  
456. <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>
457.  
458.  
459.  
460. <p>ここでは、動画を埋め込む際に考慮すべきポイントや具体的なサイズ設定方法について詳しく説明します！</p>
461.  
462.  
463.  
464. <h2 class="wp-block-heading">動画の埋め込み方法</h2>
465.  
466.  
467.  
468. <h3 class="wp-block-heading">1. YouTubeやVimeoからの埋め込み</h3>
469.  
470.  
471.  
472. <p>YouTubeやVimeoなどの動画プラットフォームから動画を埋め込む場合、以下の手順を使用します。</p>
473.  
474.  
475.  
476. <h4 class="wp-block-heading">ステップ1: 埋め込みコードを取得</h4>
477.  
478.  
479.  
480. <ol class="wp-block-list">
481. <li>YouTubeやVimeoの動画ページで「共有」ボタンをクリックします。</li>
482.  
483.  
484.  
485. <li>「埋め込み」オプションを選択し、表示されたコードをコピーします。</li>
486. </ol>
487.  
488.  
489.  
490. <h4 class="wp-block-heading">ステップ2: 埋め込みコードをホームページに貼り付け</h4>
491.  
492.  
493.  
494. <ol class="wp-block-list">
495. <li>ホームページのHTMLコードを編集します。</li>
496.  
497.  
498.  
499. <li>動画を表示させたい場所にコピーした埋め込みコードを貼り付けます。</li>
500. </ol>
501.  
502.  
503.  
504. <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>
505.  
506.  
507.  
508. <h3 class="wp-block-heading">2. 自分のサーバーから動画を埋め込む</h3>
509.  
510.  
511.  
512. <p>自分のサーバーから動画を直接埋め込む場合、以下の手順を使用します。</p>
513.  
514.  
515.  
516. <h4 class="wp-block-heading">ステップ1: 動画ファイルをサーバーにアップロード</h4>
517.  
518.  
519.  
520. <ol class="wp-block-list">
521. <li>動画ファイルをウェブサーバーにアップロードします。</li>
522.  
523.  
524.  
525. <li>アップロードしたファイルのURLを取得します。</li>
526. </ol>
527.  
528.  
529.  
530. <h4 class="wp-block-heading">ステップ2: HTML5のvideoタグを使用して埋め込む</h4>
531.  
532.  
533.  
534. <ol class="wp-block-list">
535. <li>ホームページのHTMLコードを編集します。</li>
536.  
537.  
538.  
539. <li>videoタグを使用して動画を埋め込みます。</li>
540. </ol>
541.  
542.  
543.  
544. <pre class="wp-block-code"><code>&lt;video width="640" height="360" controls&gt;
545.  <source src="path/to/your/video.mp4" type="video/mp4">
546.  Your browser does not support the video tag.
547. &lt;/video&gt;</code></pre>
548.  
549.  
550.  
551. <h2 class="wp-block-heading">動画サイズの設定</h2>
552.  
553.  
554.  
555. <h3 class="wp-block-heading">1. サイズの指定方法</h3>
556.  
557.  
558.  
559. <p>埋め込みコードのwidthとheight属性を使用して、動画のサイズを指定します。<br>以下のように設定することで、表示するサイズを調整できます。</p>
560.  
561.  
562.  
563. <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>
564.  
565.  
566.  
567. <h3 class="wp-block-heading">2. レスポンシブデザインの考慮</h3>
568.  
569.  
570.  
571. <p>レスポンシブデザインを考慮する場合、固定サイズではなく、割合を使用してサイズを設定することが一般的です。<br>以下にその方法を示します。</p>
572.  
573.  
574.  
575. <h4 class="wp-block-heading">CSSを使用したレスポンシブ動画埋め込み</h4>
576.  
577.  
578.  
579. <ol class="wp-block-list">
580. <li>CSSファイルに以下のコードを追加します。</li>
581. </ol>
582.  
583.  
584.  
585. <pre class="wp-block-code"><code>.responsive-video {
586.  position: relative;
587.  padding-bottom: 56.25%; /* 16:9 アスペクト比 */
588.  height: 0;
589.  overflow: hidden;
590.  max-width: 100%;
591.  background: #000;
592. }
593.  
594. .responsive-video iframe,
595. .responsive-video object,
596. .responsive-video embed {
597.  position: absolute;
598.  top: 0;
599.  left: 0;
600.  width: 100%;
601.  height: 100%;
602. }</code></pre>
603.  
604.  
605.  
606. <ol start="2" class="wp-block-list">
607. <li>HTMLコードに以下のようにクラスを追加します。</li>
608. </ol>
609.  
610.  
611.  
612. <pre class="wp-block-code"><code>&lt;div class="responsive-video"&gt;
613.  <iframe src="https://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen></iframe>
614. &lt;/div&gt;</code></pre>
615.  
616.  
617.  
618. <p>この方法を使用すると、動画は親要素の幅に合わせてサイズが調整されます。</p>
619.  
620.  
621.  
622. <h2 class="wp-block-heading">動画サイズのベストプラクティスとは？</h2>
623.  
624.  
625.  
626. <ol class="wp-block-list">
627. <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>
628.  
629.  
630.  
631. <li class="u-mb-ctrl u-mb-10"><strong>ファイルサイズを最適化する</strong>: <br>高品質の動画を使用する場合でも、ファイルサイズが大きすぎるとページの読み込みが遅くなります。<br>圧縮技術を使用してファイルサイズを最適化しましょう。</li>
632.  
633.  
634.  
635. <li><strong>自動再生を避ける</strong>: <br>ユーザー体験を損なわないために、動画の自動再生を避けることが推奨されます。</li>
636. </ol>
637.  
638.  
639.  
640. <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>
642. <wfw:commentRss>https://anco-lab.com/archives/1046/feed</wfw:commentRss>
643. <slash:comments>0</slash:comments>
646. </item>
647. <item>
648. <title>ホームページにGoogleカレンダーを埋め込む方法について</title>
649. <link>https://anco-lab.com/archives/1048</link>
650. <comments>https://anco-lab.com/archives/1048#respond</comments>
652. <dc:creator><![CDATA[ancolo]]></dc:creator>
653. <pubDate>Tue, 23 Jul 2024 00:37:40 +0000</pubDate>
654. <category><![CDATA[Web制作]]></category>
655. <guid isPermaLink="false">https://anco-lab.com/?p=1048</guid>
656.  
657. <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>
658. <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>
659. <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>
660.  
661.  
662. <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>
663.  
664.  
665. <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>
666.  
667.  
668.  
669. <p>Googleカレンダーは登録した情報をカレンダー形式で表示でき、簡単にホームページに埋め込むことができるため、とても便利です。</p>
670.  
671.  
672.  
673. <p>カレンダーの色やサイズ、枠線など自由にカスタマイズできますし、<br>レスポンシブデザインにも対応しているので、スマートフォンやタブレット端末でも見やすく表示されます。</p>
674.  
675.  
676.  
677. <p>この記事では、Googleカレンダーをホームページに埋め込むための手順をご紹介します！</p>
678.  
679.  
680.  
681. <h2 class="wp-block-heading">ステップ1: Googleカレンダーを公開する</h2>
682.  
683.  
684.  
685. <p><strong>Googleカレンダーにアクセス</strong>:</p>
686.  
687.  
688.  
689. <ul class="wp-block-list">
690. <li><a href="https://calendar.google.com/">Googleカレンダー</a>にアクセスし、埋め込みたいカレンダーを開きます。</li>
691. </ul>
692.  
693.  
694.  
695. <p><strong>カレンダーの設定を開く</strong>:</p>
696.  
697.  
698.  
699. <ul class="wp-block-list">
700. <li>左側の「マイカレンダー」リストから、埋め込みたいカレンダーの横にある三点アイコン（⋮）をクリックし、<br>「設定と共有」を選択します。</li>
701. </ul>
702.  
703.  
704.  
705. <p><strong>カレンダーを公開する</strong>:</p>
706.  
707.  
708.  
709. <ul class="wp-block-list">
710. <li>「カレンダーの設定」ページで、「カレンダーを公開」にチェックを入れます。</li>
711. </ul>
712.  
713.  
714.  
715. <h2 class="wp-block-heading">ステップ2: 埋め込みコードを取得する</h2>
716.  
717.  
718.  
719. <p><strong>埋め込みコードの生成</strong>:</p>
720.  
721.  
722.  
723. <ul class="wp-block-list">
724. <li>「カレンダーの統合」セクションに移動し、「カレンダーを埋め込む」オプションを見つけます。</li>
725.  
726.  
727.  
728. <li>ここで表示されるiframeコードが埋め込みコードです。このコードをコピーします。</li>
729. </ul>
730.  
731.  
732.  
733. <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>
734.  
735.  
736.  
737. <h2 class="wp-block-heading">ステップ3: HTMLコードに埋め込む</h2>
738.  
739.  
740.  
741. <p><strong>ホームページのHTMLファイルを開く</strong>:</p>
742.  
743.  
744.  
745. <ul class="wp-block-list">
746. <li>使用しているホームページビルダーやCMS（WordPressなど）でHTMLを編集できる場所を開きます。</li>
747. </ul>
748.  
749.  
750.  
751. <p><strong>埋め込みコードを貼り付ける</strong>:</p>
752.  
753.  
754.  
755. <ul class="wp-block-list">
756. <li>カレンダーを表示させたい場所に、先ほどコピーしたiframeコードを貼り付けます。</li>
757. </ul>
758.  
759.  
760.  
761. <pre class="wp-block-code"><code>&lt;div style="max-width: 100%; overflow: auto;"&gt;
762.  <iframe src="https://calendar.google.com/calendar/embed?src=あなたのカレンダーID&ctz=あなたのタイムゾーン" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
763. &lt;/div&gt;</code></pre>
764.  
765.  
766.  
767. <h2 class="wp-block-heading">ステップ4: カレンダーのカスタマイズ</h2>
768.  
769.  
770.  
771. <h3 class="wp-block-heading">サイズの調整</h3>
772.  
773.  
774.  
775. <p>iframeのwidthやheight属性を調整して、カレンダーの表示サイズを変更できます。</p>
776.  
777.  
778.  
779. <p class="u-mb-ctrl u-mb-5">例えば、レスポンシブデザインを考慮する場合、<br>次のようにCSSを使用してカレンダーを柔軟に調整できます。</p>
780.  
781.  
782.  
783. <pre class="wp-block-code"><code>&lt;div style="max-width: 100%; overflow: auto;"&gt;
784.  <iframe src="https://calendar.google.com/calendar/embed?src=あなたのカレンダーID&ctz=あなたのタイムゾーン" style="border: 0; width: 100%; height: 600px;" frameborder="0" scrolling="no"></iframe>
785. &lt;/div&gt;</code></pre>
786.  
787.  
788.  
789. <h3 class="wp-block-heading">表示オプションのカスタマイズ</h3>
790.  
791.  
792.  
793. <p>埋め込みURLにパラメータを追加して、カレンダーの表示方法をカスタマイズできます。</p>
794.  
795.  
796.  
797. <p>以下は主なパラメータの例です。</p>
798.  
799.  
800.  
801. <ul class="wp-block-list">
802. <li><code>showTitle=0</code>：タイトルを非表示にする</li>
803.  
804.  
805.  
806. <li><code>showDate=0</code>：日付を非表示にする</li>
807.  
808.  
809.  
810. <li><code>showNav=0</code>：ナビゲーションバーを非表示にする</li>
811.  
812.  
813.  
814. <li><code>showPrint=0</code>：印刷アイコンを非表示にする</li>
815.  
816.  
817.  
818. <li><code>showTabs=0</code>：タブを非表示にする</li>
819.  
820.  
821.  
822. <li><code>showCalendars=0</code>：他のカレンダーを非表示にする</li>
823.  
824.  
825.  
826. <li><code>mode=AGENDA</code>：アジェンダビューに設定する</li>
827.  
828.  
829.  
830. <li><code>mode=WEEK</code>：週間ビューに設定する</li>
831.  
832.  
833.  
834. <li><code>mode=MONTH</code>：月間ビューに設定する</li>
835. </ul>
836.  
837.  
838.  
839. <p class="u-mb-ctrl u-mb-5">例えば、月間ビューでタイトルとナビゲーションバーを非表示にしたい場合、<br>次のようにURLを修正します。</p>
840.  
841.  
842.  
843. <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>
844.  
845.  
846.  
847. <h2 class="wp-block-heading">まとめ</h2>
848.  
849.  
850.  
851. <p>Googleカレンダーをホームページに埋め込むことで、簡単にスケジュールやイベントを共有できます。</p>
852.  
853.  
854.  
855. <p>カレンダーの公開設定を行い、取得した埋め込みコードをHTMLに貼り付けるだけで表示可能です。<br>また、iframeの属性やURLのパラメータを調整することで、<span class="swl-marker mark_blue">表示方法をカスタマイズできます！</span></p>
856.  
857.  
858.  
859. <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>
861. <wfw:commentRss>https://anco-lab.com/archives/1048/feed</wfw:commentRss>
862. <slash:comments>0</slash:comments>
865. </item>
866. <item>
867. <title>ホームページにLINEボタンを埋め込む方法について</title>
868. <link>https://anco-lab.com/archives/994</link>
869. <comments>https://anco-lab.com/archives/994#respond</comments>
871. <dc:creator><![CDATA[ancolo]]></dc:creator>
872. <pubDate>Tue, 23 Jul 2024 00:19:55 +0000</pubDate>
873. <category><![CDATA[Web制作]]></category>
874. <guid isPermaLink="false">https://anco-lab.com/?p=994</guid>
875.  
876. <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>
877. <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>
878. <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>
879.  
880.  
881.  
882. <p>LINEボタンを追加することで、訪問者が簡単にLINEでコンテンツを共有したり、LINEアカウントと連携したりすることができます。</p>
883.  
884.  
885.  
886. <h2 class="wp-block-heading">LINEのシェアボタンを追加する</h2>
887.  
888.  
889.  
890. <p>LINEのシェアボタンを使うと、訪問者が簡単にページをLINEの友達やグループに共有できます。</p>
891.  
892.  
893.  
894. <p>以下はその手順です。</p>
895.  
896.  
897.  
898. <h3 class="wp-block-heading">手順</h3>
899.  
900.  
901.  
902. <ol class="wp-block-list">
903. <li><strong>LINEのシェアボタンのスクリプトを追加</strong></li>
904. </ol>
905.  
906.  
907.  
908. <p>HTMLの<code>&lt;head&gt;</code>タグ内に以下のスクリプトを追加します。</p>
909.  
910.  
911.  
912. <pre class="wp-block-code"><code>&lt;head&gt;
913.  ...
914.  <script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
915. &lt;/head&gt;</code></pre>
916.  
917.  
918.  
919. <ol class="wp-block-list" start="2">
920. <li><strong>LINEのシェアボタンを埋め込む</strong></li>
921. </ol>
922.  
923.  
924.  
925. <p>HTMLの<code>&lt;body&gt;</code>タグ内の適切な場所に以下のコードを追加します。</p>
926.  
927.  
928.  
929. <pre class="wp-block-code"><code>&lt;body&gt;
930.  ...
931.  <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>
932.  <script>
933.    (function(d, s, id) {
934.      var js, fjs = d.getElementsByTagName(s)[0];
935.      if (!d.getElementById(id)) {
936.        js = d.createElement(s); js.id = id;
937.        js.src = "https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js";
938.        fjs.parentNode.insertBefore(js, fjs);
939.      }
940.    }(document, 'script', 'line-it-button-script'));
941.  </script>
942. &lt;/body&gt;</code></pre>
943.  
944.  
945.  
946. <h3 class="wp-block-heading">パラメータの説明</h3>
947.  
948.  
949.  
950. <ul class="wp-block-list">
951. <li><code>data-lang</code>: 言語設定（例: &#8220;ja&#8221; for Japanese）</li>
952.  
953.  
954.  
955. <li><code>data-type</code>: ボタンの種類（&#8221;share-a&#8221; はシェアボタン）</li>
956.  
957.  
958.  
959. <li><code>data-url</code>: シェアするURL（例: &#8220;https://example.com&#8221;）</li>
960.  
961.  
962.  
963. <li><code>data-color</code>: ボタンの色（&#8221;default&#8221; または &#8220;white&#8221;）</li>
964.  
965.  
966.  
967. <li><code>data-size</code>: ボタンのサイズ（&#8221;small&#8221;, &#8220;medium&#8221;, &#8220;large&#8221;）</li>
968.  
969.  
970.  
971. <li><code>data-count</code>: シェア数を表示するかどうか（&#8221;true&#8221; または &#8220;false&#8221;）</li>
972. </ul>
973.  
974.  
975.  
976. <h2 class="wp-block-heading">LINEの公式アカウント友だち追加ボタンを追加する</h2>
977.  
978.  
979.  
980. <p>LINE公式アカウントの友だち追加ボタンを設置すると、訪問者が簡単にあなたのLINE公式アカウントを友だち追加できます。</p>
981.  
982.  
983.  
984. <h3 class="wp-block-heading">手順</h3>
985.  
986.  
987.  
988. <ol class="wp-block-list">
989. <li><strong>LINEの友だち追加ボタンのスクリプトを追加</strong></li>
990. </ol>
991.  
992.  
993.  
994. <p>HTMLの<code>&lt;head&gt;</code>タグ内に以下のスクリプトを追加します。</p>
995.  
996.  
997.  
998. <pre class="wp-block-code"><code>&lt;head&gt;
999.  ...
1000.  <script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
1001. &lt;/head&gt;</code></pre>
1002.  
1003.  
1004.  
1005. <ol class="wp-block-list" start="2">
1006. <li><strong>LINEの友だち追加ボタンを埋め込む</strong></li>
1007. </ol>
1008.  
1009.  
1010.  
1011. <p>HTMLの<code>&lt;body&gt;</code>タグ内の適切な場所に以下のコードを追加します。</p>
1012.  
1013.  
1014.  
1015. <pre class="wp-block-code"><code>&lt;body&gt;
1016.  ...
1017.  <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>
1018.  <script>
1019.    (function(d, s, id) {
1020.      var js, fjs = d.getElementsByTagName(s)[0];
1021.      if (!d.getElementById(id)) {
1022.        js = d.createElement(s); js.id = id;
1023.        js.src = "https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js";
1024.        fjs.parentNode.insertBefore(js, fjs);
1025.      }
1026.    }(document, 'script', 'line-it-button-script'));
1027.  </script>
1028. &lt;/body&gt;</code></pre>
1029.  
1030.  
1031.  
1032. <h3 class="wp-block-heading">パラメータの説明</h3>
1033.  
1034.  
1035.  
1036. <ul class="wp-block-list">
1037. <li><code>data-lang</code>: 言語設定（例: &#8220;ja&#8221; for Japanese）</li>
1038.  
1039.  
1040.  
1041. <li><code>data-type</code>: ボタンの種類（&#8221;friend&#8221; は友だち追加ボタン）</li>
1042.  
1043.  
1044.  
1045. <li><code>data-lineid</code>: LINE公式アカウントのID（例: &#8220;@YOUR_LINE_ID&#8221;）</li>
1046.  
1047.  
1048.  
1049. <li><code>data-count</code>: 友だち数を表示するかどうか（&#8221;true&#8221; または &#8220;false&#8221;）</li>
1050.  
1051.  
1052.  
1053. <li><code>data-home</code>: ホームに誘導するかどうか（&#8221;true&#8221; または &#8220;false&#8221;）</li>
1054. </ul>
1055.  
1056.  
1057.  
1058. <h2 class="wp-block-heading">まとめ</h2>
1059.  
1060.  
1061.  
1062. <p>LINEボタンをホームページに埋め込むことで、訪問者が簡単にページをシェアしたり、LINE公式アカウントを友だち追加したりすることができます。</p>
1063.  
1064.  
1065.  
1066. <p>LINEのシェアボタンと友だち追加ボタンは、簡単なHTMLとJavaScriptのコードを追加するだけで実装できます。</p>
1067.  
1068.  
1069.  
1070. <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>
1072. <wfw:commentRss>https://anco-lab.com/archives/994/feed</wfw:commentRss>
1073. <slash:comments>0</slash:comments>
1076. </item>
1077. <item>
1078. <title>【SWELL】フッター直前に、リッチなCTAを設置するカスタマイズする方法</title>
1079. <link>https://anco-lab.com/archives/905</link>
1080. <comments>https://anco-lab.com/archives/905#respond</comments>
1082. <dc:creator><![CDATA[ancolo]]></dc:creator>
1083. <pubDate>Tue, 25 Jun 2024 02:22:57 +0000</pubDate>
1084. <category><![CDATA[SWELL]]></category>
1085. <guid isPermaLink="false">https://anco-lab.com/?p=905</guid>
1086.  
1087. <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>
1088. <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>
1089. <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>
1090.  
1091.  
1092.  
1093. <p>今回ご紹介するのは投稿一覧ページなど（固定ページから追加できないページに対し）へのCTA設置です。</p>
1094.  
1095.  
1096.  
1097. <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>
1098.  
1099.  
1100.  
1101. <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>
1102.  
1103.  
1104.  
1105. <p><br>基本的なブログパーツ使用方法は他の方がブログでご紹介されていることを見かけますが、<br>このカスタマイズ方法は検索してもあまりヒットしませんので、是非<strong><span class="swl-marker mark_orange">当記事をご覧頂き実装してみてください！</span></strong></p>
1106.  
1107.  
1108.  
1109. <h2 class="wp-block-heading">前提条件：以下の操作ができる方のみご使用ください！</h2>
1110.  
1111.  
1112.  
1113. <p class="u-mb-ctrl u-mb-5">①WordPressの操作に慣れている方でないと危険です！</p>
1114.  
1115.  
1116.  
1117. <p>PHPファイルを編集する際、条件分岐の話なども出てきます。<br>WordPressが全然分からない！という方は、基本の条件分岐タグなどを理解してから行いましょう。</p>
1118.  
1119.  
1120.  
1121. <p class="u-mb-ctrl u-mb-5">②FTPソフトを編集出来る環境のある方のみ、今回の実装方法が可能です！</p>
1122.  
1123.  
1124.  
1125. <p>今回の実装方法では、FTPソフトを使用し子テーマにファイルをアップロードする流れとなります。<br><span class="swl-marker mark_yellow">FTPに接続できない場合は、まず接続できる状態にしてから以下方法を行ないましょう！</span></p>
1126.  
1127.  
1128.  
1129. <h2 class="wp-block-heading">SWELLのブログパーツ作成について</h2>
1130.  
1131.  
1132.  
1133. <h3 class="wp-block-heading">テーマカスタマイズ機能だけでCTA設置出来ないの？</h3>
1134.  
1135.  
1136.  
1137. <p><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-04-color">もちろん、カスタマイズ機能だけでできることはあります！</mark></strong></p>
1138.  
1139.  
1140.  
1141. <p class="u-mb-ctrl u-mb-5">カスタマイズ機能の「ブログパーツ」で何が出来るのか、ご紹介しますね。</p>
1142.  
1143.  
1144.  
1145. <p class="is-style-icon_pen">・記事内で使う場合（※記事内のエリアに表示することは可能）<br>・ウィジェットで使う場合<br>・メインビジュアルで使う場合<br>・カテゴリー、タグページで使う場合<br>・ブロックパターンとして使う場合<br>・著者アーカイブページで使う場合</p>
1146.  
1147.  
1148.  
1149. <p>ただ、今回表示させたい箇所は以下です！<br>・投稿一覧ページ下部<br>・記事詳細ページ下部（記事内エリアではなく、ページ下部全体に表示させたい場合）<br>など、<span class="swl-marker mark_yellow">指定ページのエリア・サイドバーの下部に表示するといった内容になります。</span></p>
1150.  
1151.  
1152.  
1153. <p class="u-mb-ctrl u-mb-5">ここで、ブログパーツを「CTAウィジェット」に設置した場合との表示の違いを説明します！</p>
1154.  
1155.  
1156.  
1157. <div class="wp-block-columns">
1158. <div class="wp-block-column">
1159. <p class="has-text-align-center">ブログパーツを「CTAウィジェット」にて設置</p>
1160.  
1161.  
1162.  
1163. <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>
1164. </div>
1165.  
1166.  
1167.  
1168. <div class="wp-block-column">
1169. <p class="has-text-align-center">ブログパーツを今回の方法で表示</p>
1170.  
1171.  
1172.  
1173. <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>
1174. </div>
1175. </div>
1176.  
1177.  
1178.  
1179. <p><strong>この表示を見て頂ければ、一目瞭然ですよね？</strong><br>今回の実装方法をご使用頂ければ、固定ページ以外にも指定可能なのでレイアウトパターンが広がります！</p>
1180.  
1181.  
1182.  
1183. <h3 class="wp-block-heading">CTA用ブログパーツを作成しよう</h3>
1184.  
1185.  
1186.  
1187. <p class="u-mb-ctrl u-mb-5">①ブログパーツメニューで「CTA」パーツを新規追加</p>
1188.  
1189.  
1190.  
1191. <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>
1192.  
1193.  
1194.  
1195. <p class="u-mb-ctrl u-mb-5">②タイトルやボタンなど、必要なコンテンツを作成</p>
1196.  
1197.  
1198.  
1199. <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>
1200.  
1201.  
1202.  
1203. <p class="is-style-icon_announce">実際に表示確認しないとレイアウト調整が難しいと思うので、<br>まずはCTAに入れたい内容を作成するだけでも大丈夫です。CSS調整は後で行いましょう！</p>
1204.  
1205.  
1206.  
1207. <h2 class="wp-block-heading">【注意解説あり！】footer.phpを子テーマ内に複製し、コードをカスタマイズ</h2>
1208.  
1209.  
1210.  
1211. <p><strong>ブログパーツを作成出来たら、コードのカスタマイズに入ります！</strong></p>
1212.  
1213.  
1214.  
1215. <p>①FTPソフトを開きます。<br>私の場合は「FileZilla」を使用しています！</p>
1216.  
1217.  
1218.  
1219. <p class="u-mb-ctrl u-mb-5">②親テーマ swell 内の「footer.php」ファイル（赤色部分のファイル）をコピーして<br>子テーマ swell-childフォルダ直下に貼り付け。</p>
1220.  
1221.  
1222.  
1223. <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>
1224.  
1225.  
1226.  
1227. <p class="u-mb-ctrl u-mb-10">　<strong>↓</strong><br>functions.phpなどがあるフォルダと同じ場所にファイルを置きます。</p>
1228.  
1229.  
1230.  
1231. <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>
1232.  
1233.  
1234.  
1235. <p class="is-style-big_icon_caution">・親テーマのファイルは削除したり編集しないよう、気をつけてください！<br>・子テーマにファイル貼り付け後、親テーマのファイル更新日時などが変更ないか、念の為確認することもオススメです。</p>
1236.  
1237.  
1238.  
1239. <p>③作成した「CTA」ブログパーツのショートコードをコピーしましょう。</p>
1240.  
1241.  
1242.  
1243. <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>
1244.  
1245.  
1246.  
1247. <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>
1248.  
1249.  
1250.  
1251. <p>④ファイルを子テーマに複製できたら、WordPress管理画面に戻ります。<br>外観＞テーマファイルエディターを選択し、右メニューから「テーマフッター（footer.php）」を選択します。<br><strong><span class="swl-marker mark_yellow">※編集するテーマは「SWELL CHILD」となっていることを確認してください！</span></strong></p>
1252.  
1253.  
1254.  
1255. <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>
1256.  
1257.  
1258.  
1259. <p class="u-mb-ctrl u-mb-5">コード追加場所<br><strong>27行目ぱんくずの条件分岐しPHPコードを閉じた後、footerタグが始まる前</strong>に入れます。</p>
1260.  
1261.  
1262.  
1263. <pre class="wp-block-code"><code>    // ぱんくず
1264.    if ( 'top' !== $SETTING['pos_breadcrumb'] ) :
1265.        SWELL_Theme::get_parts( 'parts/breadcrumb' );
1266.    endif;
1267. ?>
1268.  
1269. <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-black-color"><strong>&lt;?php
1270.    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> ) {
1271.        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>');
1272.    }
1273. ?&gt;</strong></mark>
1274.  
1275. &lt;footer id="footer" class="l-footer"&gt;</code></pre>
1276.  
1277.  
1278.  
1279. <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>
1280.  
1281.  
1282.  
1283. <p>⑤CTAレイアウトをCSSで調整すれば完成です！<br>検証ツールを使用し、見た目を綺麗にしましょう。</p>
1284.  
1285.  
1286. <div class="swell-block-postLink"> <div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
1287. <div class="p-blogCard__inner">
1288. <span class="p-blogCard__caption">あわせて読みたい</span>
1289. <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">
1290. <a class="p-blogCard__title" href="https://anco-lab.com/archives/262">検証ツールを使いこなして見た目の崩れやエラーを解決する方法を解説！</a>
1291. <span class="p-blogCard__excerpt">コーディングをしていて、こんな経験で困ったことはありませんか？？ ・見た目が崩れていて、どこを修正すればいいのか分からない…・スタイルの微調整をしたいけどどう&#8230;</span> </div>
1292. </div>
1293. </div>
1294. </div>
1295.  
1296.  
1297. <h2 class="wp-block-heading">まとめ</h2>
1298.  
1299.  
1300.  
1301. <p>SWELLのデフォルト機能とコードカスタマイズを上手く活用すれば今回のような形が再現できます！<br>WordPressコードにあまり慣れていない方は多少戸惑うかもしれませんが、<br>操作自体は簡単なので是非レイアウトパターンを広げる際に使用してみてください。</p>
1302.  
1303.  
1304.  
1305. <p>最後までご覧頂き、ありがとうございました！！</p>
1306.  
1307.  
1308. <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>
1310. <wfw:commentRss>https://anco-lab.com/archives/905/feed</wfw:commentRss>
1311. <slash:comments>0</slash:comments>
1314. </item>
1315. <item>
1316. <title>【CSSコード付き】SWELLメインビジュアルの基本設定・カスタマイズ方法を解説</title>
1317. <link>https://anco-lab.com/archives/598</link>
1318. <comments>https://anco-lab.com/archives/598#respond</comments>
1320. <dc:creator><![CDATA[ancolo]]></dc:creator>
1321. <pubDate>Fri, 14 Jun 2024 10:35:29 +0000</pubDate>
1322. <category><![CDATA[SWELL]]></category>
1323. <guid isPermaLink="false">https://anco-lab.com/?p=598</guid>
1324.  
1325. <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>
1326. <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>
1327. <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>
1328.  
1329.  
1330.  
1331. <p>例えば、このような疑問などありませんか？</p>
1332.  
1333.  
1334. <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>
1335.  
1336.  
1337. <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>
1338.  
1339.  
1340.  
1341. <p>SWELLではよく見るレイアウトを簡単に設定できます！<br>今回は、メインビジュアルの基本設定〜ちょっとひと癖変えたレイアウトのカスタマイズ方法をご紹介します。</p>
1342.  
1343.  
1344.  
1345. <h2 class="wp-block-heading">メインビジュアルの表示設定手順</h2>
1346.  
1347.  
1348.  
1349. <p>メインビジュアルのカスタマイズは以下手順で設定場所を表示できます。</p>
1350.  
1351.  
1352.  
1353. <p class="has-border -border01">設定場所<br>外観 &gt; カスタマイズ &gt; トップページ &gt; メインビジュアル</p>
1354.  
1355.  
1356.  
1357. <div class="wp-block-columns">
1358. <div class="wp-block-column">
1359. <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>
1360. </div>
1361.  
1362.  
1363.  
1364. <div class="wp-block-column">
1365. <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>
1366. </div>
1367.  
1368.  
1369.  
1370. <div class="wp-block-column">
1371. <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>
1372. </div>
1373. </div>
1374.  
1375.  
1376.  
1377. <h3 class="wp-block-heading">カスタマイズの各設定詳細</h3>
1378.  
1379.  
1380.  
1381. <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>
1382.  
1383.  
1384.  
1385. <div class="wp-block-columns">
1386. <div class="wp-block-column" style="flex-basis:33.33%">
1387. <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>
1388. </div>
1389.  
1390.  
1391.  
1392. <div class="wp-block-column" style="flex-basis:66.66%">
1393. <p>「表示しない」選択時<br>メインビジュアルそのものを非表示に</p>
1394.  
1395.  
1396.  
1397. <p>「画像」選択時<br>1枚ものの画像設定または複数枚設定した際はスライダーで表示</p>
1398.  
1399.  
1400.  
1401. <p>「動画」選択時<br>動画を表示</p>
1402. </div>
1403. </div>
1404.  
1405.  
1406.  
1407. <p class="is-style-icon_info">上記の選択により、以降表示されるエリアで設定項目が変化します。</p>
1408.  
1409.  
1410.  
1411. <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>
1412.  
1413.  
1414.  
1415. <div class="wp-block-columns">
1416. <div class="wp-block-column" style="flex-basis:33.33%">
1417. <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>
1418. </div>
1419.  
1420.  
1421.  
1422. <div class="wp-block-column" style="flex-basis:66.66%">
1423. <p>「周りに余白をつける」チェックボックス<br>メインビジュアルの上下左右に余白をつけることができます。<br>SP時は8pxずつ、PC(600px以上のサイズ)時は16pxずつの数値がデフォルト設定です。</p>
1424. </div>
1425. </div>
1426.  
1427.  
1428.  
1429. <div class="wp-block-columns">
1430. <div class="wp-block-column" style="flex-basis:33.33%">
1431. <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>
1432. </div>
1433.  
1434.  
1435.  
1436. <div class="wp-block-column" style="flex-basis:66.66%">
1437. <p>「Scrollボタンを表示する」チェックボックス<br>メインビジュアル中央下部にアニメーション付きのスクロールボタンを設置できます。</p>
1438. </div>
1439. </div>
1440.  
1441.  
1442.  
1443. <p class="u-mb-ctrl u-mb-5">Scrollボタン設置例</p>
1444.  
1445.  
1446.  
1447. <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>
1448.  
1449.  
1450.  
1451. <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>
1452.  
1453.  
1454.  
1455. <div class="wp-block-columns u-mb-ctrl u-mb-5">
1456. <div class="wp-block-column" style="flex-basis:33.33%">
1457. <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>
1458. </div>
1459.  
1460.  
1461.  
1462. <div class="wp-block-column" style="flex-basis:66.66%">
1463. <p>画像・動画サイズのまま<br>画像を縦横比は”そのままで”表示</p>
1464.  
1465.  
1466.  
1467. <p>コンテンツに応じる<br>メインビジュアル内の入力項目に合わせて画像サイズを変えて表示</p>
1468.  
1469.  
1470.  
1471. <p>数値で設定する<br><strong>PCサイズ</strong>&nbsp;(幅960px以上)と<strong>&nbsp;SPサイズ</strong>（幅960px未満）で分けて指定表示</p>
1472.  
1473.  
1474.  
1475. <p>ウインドウサイズにフィットさせる<br>トップページ全体に画像を表示</p>
1476. </div>
1477. </div>
1478.  
1479.  
1480.  
1481. <p class="is-style-icon_pen"><strong>素材によって大きく変わる部分なので、設定後画質や見た目の確認を忘れず行いましょう！</strong></p>
1482.  
1483.  
1484.  
1485. <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>
1486.  
1487.  
1488.  
1489. <div class="wp-block-columns">
1490. <div class="wp-block-column" style="flex-basis:33.33%">
1491. <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>
1492. </div>
1493.  
1494.  
1495.  
1496. <div class="wp-block-column" style="flex-basis:66.66%">
1497. <p>なし<br>角丸なし、純粋な四角形で表示</p>
1498.  
1499.  
1500.  
1501. <p>少し丸める<br>少し角を取った四角形で表示</p>
1502.  
1503.  
1504.  
1505. <p>丸める<br>角は全くなし、丸みの帯びたボタンを表示</p>
1506. </div>
1507. </div>
1508.  
1509.  
1510.  
1511. <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>
1512.  
1513.  
1514.  
1515. <div class="wp-block-columns">
1516. <div class="wp-block-column" style="flex-basis:33.33%">
1517. <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>
1518. </div>
1519.  
1520.  
1521.  
1522. <div class="wp-block-column" style="flex-basis:66.66%">
1523. <p>なし<br>設定した画像そのままで表示</p>
1524.  
1525.  
1526.  
1527. <p>ブラー<br>画像にぼかしを入れる</p>
1528.  
1529.  
1530.  
1531. <p>グレースケール<br>画像を白黒のように加工</p>
1532.  
1533.  
1534.  
1535. <p>ドット<br>細かなドットを画像の上に表現</p>
1536.  
1537.  
1538.  
1539. <p>ブラシ<br>ブラシでなぞったようなザザッと感を画像の上に表現</p>
1540. </div>
1541. </div>
1542.  
1543.  
1544.  
1545. <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>
1546.  
1547.  
1548.  
1549. <div class="wp-block-columns">
1550. <div class="wp-block-column" style="flex-basis:33.33%">
1551. <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>
1552. </div>
1553.  
1554.  
1555.  
1556. <div class="wp-block-column" style="flex-basis:66.66%">
1557. <p>①カラー設定<br>画像または動画の上に被せるカラーを設定</p>
1558.  
1559.  
1560.  
1561. <p>②カラーの不透明度設定<br>少数で設定（1は透明度無し）<br><span class="swl-marker mark_blue">小数点に制限はないですが「0.3」や「0.5」など少数第一位までで設定する形で、私は普段設定してます！</span></p>
1562. </div>
1563. </div>
1564.  
1565.  
1566.  
1567. <h2 class="wp-block-heading">メインビジュアルの画像または動画設定方法</h2>
1568.  
1569.  
1570.  
1571. <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>
1572.  
1573.  
1574.  
1575. <h3 class="wp-block-heading">メインビジュアルにおける画像サイズの指定方法</h3>
1576.  
1577.  
1578.  
1579. <p>設定方法については上記詳細部分で記載していますが、ここでは画像も交えて詳細解説します！</p>
1580.  
1581.  
1582.  
1583. <p>①画像・動画サイズのまま</p>
1584.  
1585.  
1586.  
1587. <p class="u-mb-ctrl u-mb-5">画像または動画サイズそのままで、左上基準に画像を表示します。</p>
1588.  
1589.  
1590.  
1591. <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>
1592.  
1593.  
1594.  
1595. <p>②コンテンツに応じる</p>
1596.  
1597.  
1598.  
1599. <p class="u-mb-ctrl u-mb-5">メインビジュアル内の入力項目に合わせて画像サイズを変えて表示します。</p>
1600.  
1601.  
1602.  
1603. <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>
1604.  
1605.  
1606.  
1607. <p>③数値で設定する</p>
1608.  
1609.  
1610.  
1611. <p class="u-mb-ctrl u-mb-5">PCサイズ・SPサイズ、それぞれ指定した高さに応じて表示します。</p>
1612.  
1613.  
1614.  
1615. <div class="wp-block-columns">
1616. <div class="wp-block-column" style="flex-basis:33.33%">
1617. <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>
1618. </div>
1619.  
1620.  
1621.  
1622. <div class="wp-block-column" style="flex-basis:66.66%">
1623. <p>高さ指定する場合<br><strong>PCサイズ</strong>&nbsp;(幅960px以上)と<strong>&nbsp;SPサイズ</strong>（幅960px未満）で分けて指定表示できます！</p>
1624.  
1625.  
1626.  
1627. <p>高さによって見え方も変わってくるので、<br><span class="swl-marker mark_yellow">数値で指定する場合HTML・CSSが分からない方はオススメしません！</span></p>
1628. </div>
1629. </div>
1630.  
1631.  
1632.  
1633. <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>
1634.  
1635.  
1636.  
1637. <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>
1638.  
1639.  
1640.  
1641. <p>④ウインドウサイズにフィットさせる</p>
1642.  
1643.  
1644.  
1645. <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>
1646.  
1647.  
1648.  
1649. <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>
1650.  
1651.  
1652.  
1653. <h3 class="wp-block-heading">スライダーを設置する</h3>
1654.  
1655.  
1656.  
1657. <p class="u-mb-ctrl u-mb-5">画像を複数枚設定すると自動的に「スライダー」扱いとなります。<br>スライド画像を2枚設定すると、3枚目のスライド設定箇所が表示されますので順に設定しましょう！<br><strong>最大5枚まで設定可能です。</strong></p>
1658.  
1659.  
1660.  
1661. <div class="wp-block-columns">
1662. <div class="wp-block-column" style="flex-basis:33.33%">
1663. <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>
1664. </div>
1665.  
1666.  
1667.  
1668. <div class="wp-block-column" style="flex-basis:66.66%">
1669. <p>スライドの設定<br><strong>PCサイズ</strong>&nbsp;(幅960px以上)と<strong>&nbsp;SPサイズ</strong>（幅960px未満）で分けて指定表示</p>
1670.  
1671.  
1672.  
1673. <p>※SPサイズの画像設定について<br>SPサイズの画像は絶対必要ということではありません！</p>
1674.  
1675.  
1676.  
1677. <p><span class="swl-marker mark_yellow">SPサイズの画像を設定していない場合は、<br>PCサイズの画像の左右中央を基準に表示する仕組みとなっております。</span></p>
1678. </div>
1679. </div>
1680.  
1681.  
1682.  
1683. <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>
1684.  
1685.  
1686.  
1687. <h3 class="wp-block-heading">動画を設定する</h3>
1688.  
1689.  
1690.  
1691. <div class="wp-block-columns">
1692. <div class="wp-block-column" style="flex-basis:33.33%">
1693. <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>
1694. </div>
1695.  
1696.  
1697.  
1698. <div class="wp-block-column" style="flex-basis:66.66%">
1699. <p>動画設定<br><strong>PCサイズ</strong>&nbsp;(幅960px以上)と<strong>&nbsp;SPサイズ</strong>（幅960px未満）で分けて指定表示</p>
1700.  
1701.  
1702.  
1703. <p>ポスター画像<br>動画サイズが大きい場合、表示までに少し時間がかかると思います。<br>そのため、動画読み込み完了までの画像を設定できます。</p>
1704.  
1705.  
1706.  
1707. <p>ポスター画像サイズは、画像・動画同様、<br><strong>PCサイズ</strong>&nbsp;(幅960px以上)と<strong>&nbsp;SPサイズ</strong>（幅960px未満）で分けて指定表示</p>
1708. </div>
1709. </div>
1710.  
1711.  
1712.  
1713. <h2 class="wp-block-heading">メインビジュアルのテキスト設定方法</h2>
1714.  
1715.  
1716.  
1717. <h3 class="wp-block-heading">メインビジュアルでのタイトル・サブタイトルを設定する</h3>
1718.  
1719.  
1720.  
1721. <p class="u-mb-ctrl u-mb-5">メインビジュアルに任意のテキストを表示できます。</p>
1722.  
1723.  
1724.  
1725. <div class="wp-block-columns">
1726. <div class="wp-block-column" style="flex-basis:33.33%">
1727. <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>
1728. </div>
1729.  
1730.  
1731.  
1732. <div class="wp-block-column" style="flex-basis:66.66%">
1733. <p>メインタイトル<br>キャッチコピーを設定</p>
1734.  
1735.  
1736.  
1737. <p>サブテキスト<br>サブキャッチコピーを設定</p>
1738. </div>
1739. </div>
1740.  
1741.  
1742.  
1743. <p class="is-style-icon_announce">SWELLの基本機能にはこのフォントの大きさを変更することはできません。<br>もしフォントサイズを変更したい場合は、CSSで調整しましょう。</p>
1744.  
1745.  
1746.  
1747. <h3 class="wp-block-heading">テキストカラーを変更する</h3>
1748.  
1749.  
1750.  
1751. <p class="u-mb-ctrl u-mb-5">カラーの設定は2つあり、「文字カラー」「文字シャドウカラー」をそれぞれ設定できます。</p>
1752.  
1753.  
1754.  
1755. <div class="wp-block-columns">
1756. <div class="wp-block-column" style="flex-basis:33.33%">
1757. <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>
1758. </div>
1759.  
1760.  
1761.  
1762. <div class="wp-block-column" style="flex-basis:66.66%">
1763. <p>テキストカラー<br>文字そのものの色を設定</p>
1764.  
1765.  
1766.  
1767. <p>テキストシャドウカラー<br>文字の右下に影をつけることができる設定</p>
1768. </div>
1769. </div>
1770.  
1771.  
1772.  
1773. <p class="u-mb-ctrl u-mb-5">表示例）テキストカラー「白色」で、テキストシャドウカラーを「ピンク色」に設定した場合<br>うっすらピンク色が見えますよね。</p>
1774.  
1775.  
1776. <div class="wp-block-image">
1777. <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>
1778.  
1779.  
1780. <p class="is-style-icon_announce">テキストシャドウカラーのシャドウ範囲は変更できません。<br>もしシャドウ範囲を変更したい場合は、フォントサイズ同様CSSで調整しましょう。</p>
1781.  
1782.  
1783.  
1784. <h3 class="wp-block-heading">メインビジュアルの文字位置の設定</h3>
1785.  
1786.  
1787.  
1788. <div class="wp-block-columns">
1789. <div class="wp-block-column" style="flex-basis:33.33%">
1790. <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>
1791. </div>
1792.  
1793.  
1794.  
1795. <div class="wp-block-column" style="flex-basis:66.66%">
1796. <p>テキストの位置<br>左右どこの位置に表示するか設定</p>
1797.  
1798.  
1799.  
1800. <p>※ブログパーツ内は適用外です。</p>
1801. </div>
1802. </div>
1803.  
1804.  
1805.  
1806. <div class="wp-block-columns">
1807. <div class="wp-block-column">
1808. <p>「左」選択時</p>
1809.  
1810.  
1811.  
1812. <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>
1813. </div>
1814.  
1815.  
1816.  
1817. <div class="wp-block-column">
1818. <p>「中央」選択時</p>
1819.  
1820.  
1821.  
1822. <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>
1823. </div>
1824.  
1825.  
1826.  
1827. <div class="wp-block-column">
1828. <p>「右」選択時</p>
1829.  
1830.  
1831.  
1832. <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>
1833. </div>
1834. </div>
1835.  
1836.  
1837.  
1838. <p class="is-style-big_icon_check">テキスト位置は左右または中央のいずれか設定は可能ですが、上下の位置設定はできません。<br>上下位置のカスタマイズ方法は <a href="#title-custom" title="">メインビジュアルのタイトル位置を変えてみよう</a> 箇所をご覧ください！</p>
1839.  
1840.  
1841.  
1842. <h2 class="wp-block-heading">メインビジュアルにボタンを配置する方法</h2>
1843.  
1844.  
1845.  
1846. <h3 class="wp-block-heading">ボタンの文字・背景色を設定する</h3>
1847.  
1848.  
1849.  
1850. <div class="wp-block-columns">
1851. <div class="wp-block-column" style="flex-basis:33.33%">
1852. <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>
1853.  
1854.  
1855.  
1856. <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>
1857. </div>
1858.  
1859.  
1860.  
1861. <div class="wp-block-column" style="flex-basis:66.66%">
1862. <p>リンク先URL<br>遷移させたいページ・サイトのURLを設定</p>
1863.  
1864.  
1865.  
1866. <p>ボタンテキスト<br>ボタン内のテキストを設定</p>
1867.  
1868.  
1869.  
1870. <p>ボタンカラー<br>ボタンの背景色を設定</p>
1871. </div>
1872. </div>
1873.  
1874.  
1875.  
1876. <p class="is-style-icon_announce">文字を設定しただけではボタンは表示されません！<br><strong>必ず、同時にURL設定を行なってください。</strong></p>
1877.  
1878.  
1879.  
1880. <h3 class="wp-block-heading">ボタンのURL設定について</h3>
1881.  
1882.  
1883.  
1884. <p>メインビジュアルに設置するボタンは<strong>外部リンク（別タブ表示）</strong>扱いとなります。<br><span class="swl-marker mark_yellow">別タブで表示させたくない場合は、functions.phpにコードを追記する必要があります。</span></p>
1885.  
1886.  
1887.  
1888. <div class="wp-block-columns">
1889. <div class="wp-block-column" style="flex-basis:33.33%">
1890. <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>
1891. </div>
1892.  
1893.  
1894.  
1895. <div class="wp-block-column" style="flex-basis:66.66%">
1896. <p>リンク先URLの書き方について</p>
1897.  
1898.  
1899.  
1900. <p>①同サイトの別ページを表示させたい場合<br>左図のように、ページ名URLの前に「/」を入れましょう。</p>
1901.  
1902.  
1903.  
1904. <p>②外部サイトに遷移させたい場合<br>URLは絶対パス「https://〜〜」から書きましょう。</p>
1905. </div>
1906. </div>
1907.  
1908.  
1909.  
1910. <h2 class="wp-block-heading">メインビジュアルのタイトル表現方法をカスタマイズ</h2>
1911.  
1912.  
1913.  
1914. <h3 class="wp-block-heading" id="title-custom">メインビジュアルのタイトル位置を変えてみよう</h3>
1915.  
1916.  
1917.  
1918. <p class="u-mb-ctrl u-mb-5">元の状態：タイトル・サブタイトルを入力し、位置は「左」指定で表示</p>
1919.  
1920.  
1921.  
1922. <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>
1923.  
1924.  
1925.  
1926. <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>
1927.  
1928.  
1929.  
1930. <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>
1931.  
1932.  
1933.  
1934. <p class="u-mb-ctrl u-mb-0">追加コードはこちら！</p>
1935.  
1936.  
1937.  
1938. <pre class="wp-block-code"><code>
1939. .p-mainVisual__textLayer {
1940.    flex-direction: column-reverse !important;
1941. }</code></pre>
1942.  
1943.  
1944.  
1945. <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>
1946.  
1947.  
1948.  
1949. <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>
1950.  
1951.  
1952.  
1953. <p class="u-mb-ctrl u-mb-0">追加コードはこちら！<br>※heightの％数値は表示したい箇所に合わせて変更してください。<br>（上に表示：数値下げる、下に表示：数値上げる）</p>
1954.  
1955.  
1956.  
1957. <pre class="wp-block-code"><code>
1958. .p-mainVisual__textLayer {
1959.    justify-content: flex-end !important;
1960.    height: <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-main-color">36</mark>% !important;
1961. }</code></pre>
1962.  
1963.  
1964.  
1965. <h3 class="wp-block-heading">メインビジュアルのタイトルを画像に変えてみよう</h3>
1966.  
1967.  
1968.  
1969. <p><span class="swl-marker mark_yellow">メインビジュアルのテキスト設定は、画像設定も可能</span>です！<br>設定箇所に、HTMLタグを挿入し画像を表示させてみましょう。</p>
1970.  
1971.  
1972.  
1973. <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>
1974.  
1975.  
1976.  
1977. <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>
1978.  
1979.  
1980.  
1981. <p class="u-mb-ctrl u-mb-0">カスタマイズ「メインテキスト」に設定する内容はこちら</p>
1982.  
1983.  
1984.  
1985. <p class="u-mb-ctrl u-mb-5">①メディアライブラリに画像を新規登録</p>
1986.  
1987.  
1988.  
1989. <p class="u-mb-ctrl u-mb-5">②登録した際に「URLをクリップボードにコピー」押下</p>
1990.  
1991.  
1992. <div class="wp-block-image">
1993. <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>
1994.  
1995.  
1996. <p class="u-mb-ctrl u-mb-0">③コピーしたURLを「src」内に挿入<br>幅、altは自由に設定してください。</p>
1997.  
1998.  
1999.  
2000. <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>
2001.  
2002.  
2003.  
2004. <p>このように、様々なカスタマイズが可能です！<br>是非色々触ってみてください。</p>
2005.  
2006.  
2007.  
2008. <h2 class="wp-block-heading">まとめ</h2>
2009.  
2010.  
2011.  
2012. <p>SWELLのデフォルト機能を使えば、良い感じのデザイン表現は可能です！<br>少しデフォルト機能だけでは物足りないなと感じる方は、是非CSS調整を行なってみてください。</p>
2013.  
2014.  
2015.  
2016. <p class="u-mb-ctrl u-mb-20">最後までご覧頂き、ありがとうございました！！</p>
2017.  
2018.  
2019.  
2020. <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>
2021.  
2022.  
2023. <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>
2024.  
2025. <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>
2027. <wfw:commentRss>https://anco-lab.com/archives/598/feed</wfw:commentRss>
2028. <slash:comments>0</slash:comments>
2031. </item>
2032. <item>
2033. <title>【制作前に見て！】SWELLでサイトカスタマイズする際に知ってほしいこと</title>
2034. <link>https://anco-lab.com/archives/621</link>
2035. <comments>https://anco-lab.com/archives/621#respond</comments>
2037. <dc:creator><![CDATA[ancolo]]></dc:creator>
2038. <pubDate>Thu, 06 Jun 2024 23:34:03 +0000</pubDate>
2039. <category><![CDATA[SWELL]]></category>
2040. <guid isPermaLink="false">https://anco-lab.com/?p=621</guid>
2041.  
2042. <description><![CDATA[<p><img src="https://anco-lab.com/wp-content/uploads/2024/06/アイキャッチ4-1024x650.jpg" class="webfeedsFeaturedVisual" /></p><p>コーディング案件を数多く経験してる私ですが、ちょうど1年前にSWELL案件を受注して以来、SWELLでのオリジナルサイトをいくつか制作してきました！ SWELL未経験当時はカスタマイズ方法や注意点が分からず不安だらけでし [&#8230;]</p>
2043. <p>The post <a href="https://anco-lab.com/archives/621">【制作前に見て！】SWELLでサイトカスタマイズする際に知ってほしいこと</a> first appeared on <a href="https://anco-lab.com">あんころブログ</a>.</p>]]></description>
2044. <content:encoded><![CDATA[<p><img src="https://anco-lab.com/wp-content/uploads/2024/06/アイキャッチ4-1024x650.jpg" class="webfeedsFeaturedVisual" /></p><p>コーディング案件を数多く経験してる私ですが、<br>ちょうど1年前にSWELL案件を受注して以来、SWELLでのオリジナルサイトをいくつか制作してきました！</p>
2045.  
2046.  
2047.  
2048. <p>SWELL未経験当時はカスタマイズ方法や注意点が分からず不安だらけでした・・・</p>
2049.  
2050.  
2051. <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>
2052.  
2053.  
2054. <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>
2055.  
2056.  
2057. <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">WordPressにあまり詳しくないから制作できるか不安・・<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div>
2058.  
2059.  
2060.  
2061. <p>この記事では<span class="swl-marker mark_yellow">「SWELL」を使用してどのように制作を進めたのか</span>をお伝えします。<br>是非最後までご覧頂けますと幸いです！</p>
2062.  
2063.  
2064.  
2065. <h2 class="wp-block-heading">オリジナルサイト制作はSWELLでも制作可能！</h2>
2066.  
2067.  
2068.  
2069. <p>「SWELLってブログ系サイトじゃないの？」<br>と思ってらっしゃる方も多いのではと思います。</p>
2070.  
2071.  
2072.  
2073. <p><strong><span class="swl-marker mark_yellow">そのお考え、間違っています！！！！</span></strong></p>
2074.  
2075.  
2076.  
2077. <p>SWELLはカスタマイズで出来ることも多く、<br>SWELLで制作されたとは思えないサイトも制作可能だということをお伝えさせて頂きます！</p>
2078.  
2079.  
2080.  
2081. <p class="has-border -border02">SWELL開発者「了さん」のデモサイト一覧をご覧ください。<br>見た目やコンテンツ内容の見せ方はかなり幅広いテーマとなっております！<br><a href="https://swell-theme.com/demos/" target="_blank" rel="noopener nofollow" title="">デモサイト一覧を見る</a></p>
2082.  
2083.  
2084.  
2085. <h2 class="wp-block-heading">オリジナルサイト制作でSWELLを使用する際のメリット</h2>
2086.  
2087.  
2088.  
2089. <h3 class="wp-block-heading">ノーコードでの制作が可能！</h3>
2090.  
2091.  
2092.  
2093. <p>テーマの良い所はなんといっても「ノーコードで制作」できること！<br>ノーコードで制作できるとどのように良いのか、いくつか例をピックアップします。</p>
2094.  
2095.  
2096.  
2097. <ol class="wp-block-list">
2098. <li>サイト更新時は、お客様の方で簡単に変更できる</li>
2099.  
2100.  
2101.  
2102. <li>コードに詳しくない方でも制作しやすい</li>
2103.  
2104.  
2105.  
2106. <li>予算や工数を抑えることが可能</li>
2107. </ol>
2108.  
2109.  
2110.  
2111. <h3 class="wp-block-heading">ブロックエディターの活用で表現の幅が広がる</h3>
2112.  
2113.  
2114.  
2115. <p>SWELLはブロックエディター<strong><span class="swl-marker mark_yellow">「Gutenberg（グーテンベルグ）」に完全対応</span></strong>したテーマです。<br>SWELLのブロックエディターには以下のような特徴があります。</p>
2116.  
2117.  
2118.  
2119. <p class="has-border -border02">・SWELL独自のブロックが豊富で、コードに詳しくない方でも思い通りの表現ができる<br>・標準搭載のブロックも機能拡張されており、簡単にカスタムしやすい</p>
2120.  
2121.  
2122.  
2123. <p><strong>ここで、私がよく使用するブロックエディターをご紹介します！！</strong></p>
2124.  
2125.  
2126.  
2127. <div class="wp-block-columns">
2128. <div class="wp-block-column">
2129. <p class="has-text-align-center"><strong><mark style="background-color:rgba(0, 0, 0, 0);color:#6c9de6" class="has-inline-color">フルワイド</mark></strong></p>
2130.  
2131.  
2132.  
2133. <p>セクション作成時に入れるブロック。<br>余白設定も簡単なのでセクション間の収まりが良い！</p>
2134.  
2135.  
2136.  
2137. <figure class="wp-block-image size-full"><img decoding="async" width="708" height="464" src="https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-06-12.06.23.png" alt="" class="wp-image-658" srcset="https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-06-12.06.23.png 708w, https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-06-12.06.23-300x197.png 300w" sizes="(max-width: 708px) 100vw, 708px" /></figure>
2138. </div>
2139.  
2140.  
2141.  
2142. <div class="wp-block-column">
2143. <p class="has-text-align-center"><strong><mark style="background-color:rgba(0, 0, 0, 0);color:#6c9de6" class="has-inline-color">カラム、リッチカラム</mark></strong></p>
2144.  
2145.  
2146.  
2147. <p>デザインをカスタマイズしたいコンテンツや、セクション内のコンテンツに設定するブロック。</p>
2148.  
2149.  
2150.  
2151. <figure class="wp-block-image size-full"><img decoding="async" width="708" height="462" src="https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-06-12.06.11-2.png" alt="" class="wp-image-659" srcset="https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-06-12.06.11-2.png 708w, https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-06-12.06.11-2-300x196.png 300w" sizes="(max-width: 708px) 100vw, 708px" /></figure>
2152. </div>
2153. </div>
2154.  
2155.  
2156.  
2157. <div class="wp-block-columns">
2158. <div class="wp-block-column">
2159. <p class="has-text-align-center"><strong><mark style="background-color:rgba(0, 0, 0, 0);color:#6c9de6" class="has-inline-color">見出し</mark></strong></p>
2160.  
2161.  
2162.  
2163. <p>セクションタイトルやブログ見出しを書く際に使用するブロック。</p>
2164.  
2165.  
2166.  
2167. <figure class="wp-block-image size-full"><img decoding="async" width="706" height="462" src="https://anco-lab.com/wp-content/uploads/2024/06/見出し.png" alt="" class="wp-image-661" srcset="https://anco-lab.com/wp-content/uploads/2024/06/見出し.png 706w, https://anco-lab.com/wp-content/uploads/2024/06/見出し-300x196.png 300w" sizes="(max-width: 706px) 100vw, 706px" /></figure>
2168. </div>
2169.  
2170.  
2171.  
2172. <div class="wp-block-column">
2173. <p class="has-text-align-center"><strong><mark style="background-color:rgba(0, 0, 0, 0);color:#6c9de6" class="has-inline-color">リスト</mark></strong></p>
2174.  
2175.  
2176.  
2177. <p>リストは順序有無を選択でき、容易にデザインが表現できるリストブロック。</p>
2178.  
2179.  
2180.  
2181. <figure class="wp-block-image size-full"><img decoding="async" width="738" height="484" src="https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-06-12.49.16.png" alt="" class="wp-image-675" srcset="https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-06-12.49.16.png 738w, https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-06-12.49.16-300x197.png 300w" sizes="(max-width: 738px) 100vw, 738px" /></figure>
2182. </div>
2183. </div>
2184.  
2185.  
2186.  
2187. <div class="wp-block-columns">
2188. <div class="wp-block-column">
2189. <p class="has-text-align-center"><strong><mark style="background-color:rgba(0, 0, 0, 0);color:#6c9de6" class="has-inline-color">画像</mark></strong></p>
2190.  
2191.  
2192.  
2193. <p>メディアライブラリに登録した画像を表示する際に使用するブロック。</p>
2194.  
2195.  
2196.  
2197. <figure class="wp-block-image size-full"><img decoding="async" width="706" height="686" src="https://anco-lab.com/wp-content/uploads/2024/06/画像.png" alt="" class="wp-image-665" srcset="https://anco-lab.com/wp-content/uploads/2024/06/画像.png 706w, https://anco-lab.com/wp-content/uploads/2024/06/画像-300x292.png 300w" sizes="(max-width: 706px) 100vw, 706px" /></figure>
2198. </div>
2199.  
2200.  
2201.  
2202. <div class="wp-block-column">
2203. <p class="has-text-align-center"><strong><mark style="background-color:rgba(0, 0, 0, 0);color:#6c9de6" class="has-inline-color">投稿リスト</mark></strong></p>
2204.  
2205.  
2206.  
2207. <p>通常投稿やカスタム投稿のリストを表示したい際に使用するブロック。表示設定などカスタマイズが簡単！</p>
2208.  
2209.  
2210.  
2211. <figure class="wp-block-image size-full"><img decoding="async" width="706" height="644" src="https://anco-lab.com/wp-content/uploads/2024/06/投稿リスト-1.png" alt="" class="wp-image-666" srcset="https://anco-lab.com/wp-content/uploads/2024/06/投稿リスト-1.png 706w, https://anco-lab.com/wp-content/uploads/2024/06/投稿リスト-1-300x274.png 300w" sizes="(max-width: 706px) 100vw, 706px" /></figure>
2212. </div>
2213. </div>
2214.  
2215.  
2216.  
2217. <h3 class="wp-block-heading">マニュアル完備、様々なブログサイトのお陰で疑問もすぐ解消できる！</h3>
2218.  
2219.  
2220.  
2221. <p>SWELL公式サイトには、使い方を解説した設定マニュアルと会員制フォーラムがあります。<br><span class="swl-marker mark_yellow">自社がサイト制作で疑問や課題が発生しても、マニュアルやフォーラムで解決できます。</span></p>
2222.  
2223.  
2224.  
2225. <p>私自身もSWELLで分からないことが発生した際は、様々な方のブログにお世話になっています！！<br>情報量も多いので、制作時は安心してご使用ください！</p>
2226.  
2227.  
2228.  
2229. <h2 class="wp-block-heading">オリジナルサイト制作でSWELLを使用する際のデメリット</h2>
2230.  
2231.  
2232.  
2233. <h3 class="wp-block-heading">他テーマと比較すると、テーマ料金が高め</h3>
2234.  
2235.  
2236.  
2237. <p>SWELLはめちゃくちゃおすすめできるテーマなんですが、デメリットの１つとして挙げるのは<br><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-04-color">テーマ料金が比較的高め</mark></strong><br>なので、テーマ初心者にはちょっとお高く感じる料金だと思います。。</p>
2238.  
2239.  
2240.  
2241. <p>他テーマと比較するとこんな感じです。</p>
2242.  
2243.  
2244.  
2245. <figure class="wp-block-table"><table><thead style="--thead-color--bg:#f8eddb;--thead-color--txt:var(--swl-text_color--black)"><tr><th>テーマ名</th><th>料金</th></tr></thead><tbody><tr><td>賢威8</td><td>27,280円（税込）</td></tr><tr><td>FAKE</td><td>22,800円（税込）</td></tr><tr><td><strong><span class="swl-fz u-fz-l">SWELL</span></strong></td><td><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-main-color"><span class="swl-fz u-fz-l">17,600円（税込）</span></mark></strong></td></tr><tr><td>THE THOR</td><td>16,280円（税込）</td></tr><tr><td>Emanon Business</td><td>12,800円（税込）</td></tr><tr><td>LIQUID CORPORATE</td><td>10,890円（税込）</td></tr><tr><td>NEXTAGE</td><td>9,980円（税込）</td></tr></tbody></table></figure>
2246.  
2247.  
2248.  
2249. <h3 class="wp-block-heading">コードを編集しないといけない場合が発生する</h3>
2250.  
2251.  
2252.  
2253. <p>メリットで「ノーコードでの制作が可能！」というお話をさせて頂きましたが、<br>デザインの再現によっては、<span class="swl-marker mark_yellow">コードの編集が必要になる場合があります</span>。</p>
2254.  
2255.  
2256.  
2257. <p>そのような場合、<br>やはりHTML・css の技術が必要になるので制作は「Web構築者のプロ」に任せることが適切です！<br>※コストはかかりますが、品質の良いサイトが完成しますよ。</p>
2258.  
2259.  
2260.  
2261. <h2 class="wp-block-heading">【コード追加説明付き】CSSでプロパティを追加する時の流れ</h2>
2262.  
2263.  
2264.  
2265. <p class="has-border -border03"><mark style="background-color:rgba(0, 0, 0, 0);color:#5e6bd5" class="has-inline-color"><strong>前提条件と準備</strong></mark><br>・子テーマ「SWELL CHILD」のファイルを更新する。<br>（親テーマの場合アップデートで編集が消える可能性がある為、注意です！）<br>・CSSの記載は、外観＞テーマ＞テーマファイルエディター style.css での編集がオススメ！</p>
2266.  
2267.  
2268.  
2269. <p>①サイト表示し検証ツールを開き、カスタマイズしたい要素のプロパティ確認</p>
2270.  
2271.  
2272.  
2273. <p>例）上記「<mark style="background-color:rgba(0, 0, 0, 0);color:#5e6bd5" class="has-inline-color">前提条件と準備</mark>」枠に背景色を付けたい場合<br>SWELLでは「-border03」というクラスが付与されているので、このクラスに対し背景色プロパティを追加すれば良いという考えになります。</p>
2274.  
2275.  
2276.  
2277. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="301" src="https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-06-16.50.18-1024x301.png" alt="" class="wp-image-705" srcset="https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-06-16.50.18-1024x301.png 1024w, https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-06-16.50.18-300x88.png 300w, https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-06-16.50.18-768x226.png 768w, https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-06-16.50.18.png 1429w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
2278.  
2279.  
2280.  
2281. <p>②テーマファイルエディター style.css 編集画面で内容更新</p>
2282.  
2283.  
2284.  
2285. <p>例）「-border03」クラスに背景色を追加<br>style.css内で必要なコードを入力後、「ファイルを更新」で変更完了です。</p>
2286.  
2287.  
2288.  
2289. <figure class="wp-block-image size-full"><img decoding="async" width="797" height="676" src="https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-06-16.56.12.png" alt="" class="wp-image-707" srcset="https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-06-16.56.12.png 797w, https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-06-16.56.12-300x254.png 300w, https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-06-16.56.12-768x651.png 768w" sizes="(max-width: 797px) 100vw, 797px" /></figure>
2290.  
2291.  
2292.  
2293. <p>③style.css での変更内容が反映されているか確認して完了！</p>
2294.  
2295.  
2296. <div class="swell-block-postLink"> <div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
2297. <div class="p-blogCard__inner">
2298. <span class="p-blogCard__caption">あわせて読みたい</span>
2299. <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">
2300. <a class="p-blogCard__title" href="https://anco-lab.com/archives/262">検証ツールを使いこなして見た目の崩れやエラーを解決する方法を解説！</a>
2301. <span class="p-blogCard__excerpt">コーディングをしていて、こんな経験で困ったことはありませんか？？ ・見た目が崩れていて、どこを修正すればいいのか分からない…・スタイルの微調整をしたいけどどう&#8230;</span> </div>
2302. </div>
2303. </div>
2304. </div>
2305.  
2306.  
2307. <h2 class="wp-block-heading">【要チェック！】見た目をカスタマイズする時のポイント</h2>
2308.  
2309.  
2310.  
2311. <h3 class="wp-block-heading">お客様の更新箇所を考慮しながら、ブロック構造を作成しよう</h3>
2312.  
2313.  
2314.  
2315. <p>サイトによって、お客様の更新箇所は異なります。<br>特に気を付けたいことは<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-swl-deep-04-color">更新頻度の高い画像やタイトル・テキスト部分の設計構想をしてから実装すること</mark></strong>。</p>
2316.  
2317.  
2318.  
2319. <p>私自身、こんなことが発生しないようブロックを利用してサイト制作しております！<br>・テキスト変更やボタン追加など、新規ブロックが増減してもレイアウトが崩れないこと<br>・無駄なブロックは作らず、シンプルな構造かつお客様がどこを触れば良いか一目で分かりやすいこと</p>
2320.  
2321.  
2322.  
2323. <h3 class="wp-block-heading">テーマの「カスタマイズ」で出来ることを確認しておくことが大切</h3>
2324.  
2325.  
2326.  
2327. <p>SWELLでは色々なカスタマイズがあります！！</p>
2328.  
2329.  
2330.  
2331. <p>その逆もあり、デフォルトのレイアウトも細かく設定されているので<br>テーマ内の「カスタマイズ」で出来ない設定も出てきます。</p>
2332.  
2333.  
2334.  
2335. <p>そのため、<strong><span class="swl-marker mark_yellow">構築者はカスタマイズで出来る範囲と出来ない範囲を知ることが大切</span></strong><br>だと経験を通して感じています！</p>
2336.  
2337.  
2338. <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>
2339.  
2340.  
2341. <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>
2342.  
2343.  
2344.  
2345. <p>上記のようになって欲しくないので、<br><span class="swl-marker mark_blue">実装着手する前に「本当に想定通りに出来そうか？」をテスト実装してみることをおすすめします！</span></p>
2346.  
2347.  
2348.  
2349. <h3 class="wp-block-heading">CSSで調整する時は、テーマのスタイルに打ち勝たないといけない</h3>
2350.  
2351.  
2352.  
2353. <p>SWELLではすでに様々なレイアウトが備わっています。<br>ただ、サイトのデザインによってはそのスタイルが不要な場合が発生しますよね・・・</p>
2354.  
2355.  
2356.  
2357. <p>CSSでプロパティを追加する時の流れを説明させて頂きましたが、<br>ここではテーマのスタイルに打ち勝たないといけない場合の流れをご説明します！</p>
2358.  
2359.  
2360.  
2361. <p>①サイト表示し検証ツールを開き、カスタマイズしたい要素のプロパティ確認</p>
2362.  
2363.  
2364.  
2365. <p>例）緑のチェックアイコンの線の色を青色に変えたい場合<br>SWELLでは「is-style-big_icon_check」というクラスが付与されているので、このクラスに対し<br>線の色プロパティを追加すれば良いという考えになります。</p>
2366.  
2367.  
2368.  
2369. <p>付与されているプロパティは「border-color: var(&#8211;the-color,currentColor);」となっていることが分かりますね。</p>
2370.  
2371.  
2372.  
2373. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="446" src="https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-07-8.21.44-1024x446.png" alt="" class="wp-image-714" srcset="https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-07-8.21.44-1024x446.png 1024w, https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-07-8.21.44-300x131.png 300w, https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-07-8.21.44-768x334.png 768w, https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-07-8.21.44.png 1293w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
2374.  
2375.  
2376.  
2377. <p>②テーマファイルエディター style.css 編集画面で内容更新</p>
2378.  
2379.  
2380.  
2381. <p>例）「is-style-big_icon_check」クラスに背景色を追加<br>style.css内で線の色プロパティを入力、その時に<strong>!important</strong>付与を忘れず「ファイルを更新」で変更完了です。</p>
2382.  
2383.  
2384.  
2385. <figure class="wp-block-image size-full"><img decoding="async" width="681" height="641" src="https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-07-8.23.09.png" alt="" class="wp-image-715" srcset="https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-07-8.23.09.png 681w, https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-07-8.23.09-300x282.png 300w" sizes="(max-width: 681px) 100vw, 681px" /></figure>
2386.  
2387.  
2388.  
2389. <p>③style.css での変更内容が反映されているか確認して完了！</p>
2390.  
2391.  
2392.  
2393. <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="378" src="https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-07-8.23.33-1024x378.png" alt="" class="wp-image-717" srcset="https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-07-8.23.33-1024x378.png 1024w, https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-07-8.23.33-300x111.png 300w, https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-07-8.23.33-768x284.png 768w, https://anco-lab.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-07-8.23.33.png 1256w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
2394.  
2395.  
2396.  
2397. <p class="is-style-big_icon_point">・変更前に、変更する箇所の「クラス名」「プロパティ」情報を必ず確認しましょう。<br>・テーマのスタイルを変更する際は「<strong>!important</strong>」を付けて優先させましょう！</p>
2398.  
2399.  
2400.  
2401. <h2 class="wp-block-heading">【結論】SWELLは最高のテーマです！</h2>
2402.  
2403.  
2404.  
2405. <p>SWELLは、幅広くカスタマイズができるので１番おすすめできるテーマです！！<br>アップデートで出来ることが日々増えていたり、セキュリティや表示スピードについても他テーマに劣らないので<br>お客様にも安心しておすすめさせて頂いております。</p>
2406.  
2407.  
2408.  
2409. <p>皆さんもSWELLをご使用される際は色々と調べてみてもらえると楽しさが分かるかと思います。<br><span class="swl-marker mark_yellow">私のブログでは、今後もSWELLで出来ることや技術的なお話を共有させて頂きます！</span></p>
2410.  
2411.  
2412.  
2413. <p>最後までご覧頂き、ありがとうございました！！</p>
2414.  
2415.  
2416. <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>
2417.  
2418.  
2419.  
2420. <p><br></p><p>The post <a href="https://anco-lab.com/archives/621">【制作前に見て！】SWELLでサイトカスタマイズする際に知ってほしいこと</a> first appeared on <a href="https://anco-lab.com">あんころブログ</a>.</p>]]></content:encoded>
2422. <wfw:commentRss>https://anco-lab.com/archives/621/feed</wfw:commentRss>
2423. <slash:comments>0</slash:comments>
2426. </item>
2427. </channel>
2428. </rss>
2429.  

If you would like to create a banner that links to this page (i.e. this validation result), do the following:

1. Download the "valid RSS" banner.

2. Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)

3. Add this HTML to your page (change the image src attribute if necessary):

   <a href="http://www.feedvalidator.org/check.cgi?url=https%3A//anco-lab.com/feed"><img src="valid-rss-rogers.png" alt="[Valid RSS]" title="Validate my RSS feed" /></a>

If you would like to create a text link instead, here is the URL you can use:

http://www.feedvalidator.org/check.cgi?url=https%3A//anco-lab.com/feed

Home · About · News · Docs · Terms