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

<channel>
	<title>アイコンリスト &#8211; mayulog</title>
	<atom:link href="https://mayulog.xyz/tag/%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%83%AA%E3%82%B9%E3%83%88/feed/" rel="self" type="application/rss+xml" />
	<link>https://mayulog.xyz</link>
	<description></description>
	<lastBuildDate>Wed, 12 Aug 2020 07:13:42 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://mayulog.xyz/wp-content/uploads/2020/08/cropped-f_f_traffic_11_s512_f_traffic_11_2bg-1-32x32.png</url>
	<title>アイコンリスト &#8211; mayulog</title>
	<link>https://mayulog.xyz</link>
	<width>32</width>
	<height>32</height>
</image> 
<atom:link rel="hub" href="https://pubsubhubbub.appspot.com"/>
<atom:link rel="hub" href="https://pubsubhubbub.superfeedr.com"/>
<atom:link rel="hub" href="https://websubhub.com/hub"/>
<atom:link rel="self" href="https://mayulog.xyz/tag/%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%83%AA%E3%82%B9%E3%83%88/feed/"/>
	<item>
		<title>【WordPress・Cocoon】アイコンリストの使い方【超初心者向け】</title>
		<link>https://mayulog.xyz/iconlist/</link>
					<comments>https://mayulog.xyz/iconlist/#respond</comments>
		
		<dc:creator><![CDATA[MAYU]]></dc:creator>
		<pubDate>Mon, 29 Jun 2020 05:42:21 +0000</pubDate>
				<category><![CDATA[ブログ運営]]></category>
		<category><![CDATA[Cocoon]]></category>
		<category><![CDATA[Cocoonブロック]]></category>
		<category><![CDATA[アイコンリスト]]></category>
		<category><![CDATA[ブログ初心者]]></category>
		<guid isPermaLink="false">https://mayulog.xyz/?p=797</guid>

					<description><![CDATA[<p><img src="https://mayulog.xyz/wp-content/uploads/2020/06/955b91886764282bd29559bb8e279d88-1024x538.jpg" class="webfeedsFeaturedVisual" /></p>WordPress/Cocoonテーマ　アイコンリストの使い方 Cocoonブロックのアイコンリストの解説です。超初心者向けなので高度な設定の追加CSSについては記載していません。 私がブロックの一覧を見ても名称も機能も [&#8230;]]]></description>
										<content:encoded><![CDATA[<p><img src="https://mayulog.xyz/wp-content/uploads/2020/06/955b91886764282bd29559bb8e279d88-1024x538.jpg" class="webfeedsFeaturedVisual" /></p>
<h2 class="wp-block-heading">WordPress/Cocoonテーマ　アイコンリストの使い方</h2>



<p>Cocoonブロックのアイコンリストの解説です。<br>超初心者向けなので高度な設定の追加CSSについては記載していません。<br><br>私がブロックの一覧を見ても名称も機能もさっぱりわからなかった経験から同じ初心者さんのお役に立てたらと思い解説していきます。</p>



<h3 class="wp-block-heading">Cocoonブロックでできること</h3>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="365" src="https://mayulog.xyz/wp-content/uploads/2020/06/6e6073cbf2bf5747d3e6b303cc243961-1024x365.jpg" alt="" class="wp-image-861" srcset="https://mayulog.xyz/wp-content/uploads/2020/06/6e6073cbf2bf5747d3e6b303cc243961-1024x365.jpg 1024w, https://mayulog.xyz/wp-content/uploads/2020/06/6e6073cbf2bf5747d3e6b303cc243961-300x107.jpg 300w, https://mayulog.xyz/wp-content/uploads/2020/06/6e6073cbf2bf5747d3e6b303cc243961-768x274.jpg 768w, https://mayulog.xyz/wp-content/uploads/2020/06/6e6073cbf2bf5747d3e6b303cc243961-1536x548.jpg 1536w, https://mayulog.xyz/wp-content/uploads/2020/06/6e6073cbf2bf5747d3e6b303cc243961-2048x730.jpg 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>ブロックの追加→下にスクロールして、Cocoonブロックで開きます。</p>



<p>※画像では[∨]のマークのところを指定していますが[∨]じゃなくても開きます。</p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-arrow-right block-box has-background has-icon-color has-watery-blue-background-color has-amber-icon-color"><div class="iconlist-title">Cocoonブロック一覧</div>
<ul class="wp-block-list"><li>吹き出し</li><li><span class="bold-red">アイコンリスト</span></li><li>ブログカード</li><li>アイコンボックス</li><li>白抜きボックス</li><li>案内ボックス</li><li>検索案内</li><li>付箋風ボックス</li><li>囲みボタン</li><li>タブボックス</li><li>ボタン</li><li>トグルボックス</li><li>タイムライン</li></ul>
</div>







<h3 class="wp-block-heading">アイコンリストの表示</h3>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-caret-right block-box"><div class="iconlist-title">タイトルがある場合はここに入力できます</div>
<ul class="wp-block-list"><li>リスト</li><li>リスト</li><li>リスト</li></ul>
</div>



<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" width="800" height="413" src="https://mayulog.xyz/wp-content/uploads/2020/06/d160a53f71104dc4e5ed3c300ba3ba79.png" alt="" class="wp-image-817" srcset="https://mayulog.xyz/wp-content/uploads/2020/06/d160a53f71104dc4e5ed3c300ba3ba79.png 800w, https://mayulog.xyz/wp-content/uploads/2020/06/d160a53f71104dc4e5ed3c300ba3ba79-300x155.png 300w, https://mayulog.xyz/wp-content/uploads/2020/06/d160a53f71104dc4e5ed3c300ba3ba79-768x396.png 768w" sizes="(max-width: 800px) 100vw, 800px" /></figure></div>



<p>アイコンは画面右側の設定が文書のままだと表示されないので、ブロックに切り替えてください。<br><br>この設定画面が閉じている場合は、右上の公開するの横の車輪マークで開きます。</p>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-arrow-circle-right block-box has-border-color has-icon-color has-yellow-border-color has-red-icon-color"><div class="iconlist-title">タイトルは入力しなくてもOK</div>
<ul class="wp-block-list"><li>アイコンは数種類あります</li><li>アイコン色も設定できます</li><li>ボーダー色で枠がつけられます</li></ul>
</div>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-star block-box has-text-color has-background has-border-color has-red-color has-watery-green-background-color has-grey-border-color"><div class="iconlist-title">文字色も変更できます</div>
<ol class="wp-block-list"><li>数字にするとアイコンは選択できません</li><li>ボーダー色・背景色・文字色の設定はできます</li><li>改行したい場合は[shift]＋[enter]で改行します（アイコン同様）</li></ol>
</div>



<h4 class="wp-block-heading">アイコンと数字の切り替え</h4>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="255" src="https://mayulog.xyz/wp-content/uploads/2020/06/dc54aea775f1a4597941d9227674de0e-1024x255.png" alt="" class="wp-image-809" srcset="https://mayulog.xyz/wp-content/uploads/2020/06/dc54aea775f1a4597941d9227674de0e-1024x255.png 1024w, https://mayulog.xyz/wp-content/uploads/2020/06/dc54aea775f1a4597941d9227674de0e-300x75.png 300w, https://mayulog.xyz/wp-content/uploads/2020/06/dc54aea775f1a4597941d9227674de0e-768x191.png 768w, https://mayulog.xyz/wp-content/uploads/2020/06/dc54aea775f1a4597941d9227674de0e.png 1452w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>※ここが数字で設定されているとアイコンの選択ができません。</p>



<h4 class="wp-block-heading">スタイル設定以外での装飾方法</h4>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="255" src="https://mayulog.xyz/wp-content/uploads/2020/06/dc54aea775f1a4597941d9227674de0e-1-1024x255.png" alt="" class="wp-image-818" srcset="https://mayulog.xyz/wp-content/uploads/2020/06/dc54aea775f1a4597941d9227674de0e-1-1024x255.png 1024w, https://mayulog.xyz/wp-content/uploads/2020/06/dc54aea775f1a4597941d9227674de0e-1-300x75.png 300w, https://mayulog.xyz/wp-content/uploads/2020/06/dc54aea775f1a4597941d9227674de0e-1-768x191.png 768w, https://mayulog.xyz/wp-content/uploads/2020/06/dc54aea775f1a4597941d9227674de0e-1.png 1452w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-angle-right block-box has-icon-color has-amber-icon-color"><div class="iconlist-title">スタイル設定以外での装飾</div>
<ul class="wp-block-list"><li><strong>リスト</strong>（太字）</li><li><span class="mark_blue">リスト</span>（青色アンダーラインマーカー）</li><li><span class="bold-green">リスト</span>（緑太字）</li><li><span class="mark_yellow">リスト</span>（黄色マーカー）</li><li><s><span class="has-inline-color has-pink-color">リスト</span></s>（文字色＋取り消し線）</li><li><ruby>リスト<rt>りすと</rt></ruby>（ふりがな）</li></ul>
</div>



<p>このような感じになりました。</p>



<h4 class="wp-block-heading">あとがき</h4>



<p>このブログでも使用しているCocoon（コクーン）というテーマは無料なのが信じられないほどとても高機能でオススメです。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-think sbp-l sbis-sn cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://mayulog.xyz/wp-content/uploads/2020/06/animal_chara_computer_azarashi-150x150.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p>有料テーマ？…無料テーマ？<br>どう違うの？もうわかんないことばかりだ…</p>
</div></div>



<p>悩みすぎて諦めなくて大丈夫です。<br>Cocoonユーザーはたくさんいますので、安心して始められます。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-sn cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://mayulog.xyz/wp-content/uploads/2020/06/animal_chara_computer_penguin-150x150.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p>私も悩んで迷って消耗したけどさ</p>
</div></div>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-together">








<p><a rel="noreferrer noopener" target="_blank" href="https://mayulog.xyz/cocoon-block/">https://mayulog.xyz/cocoon-block/</a></p>








</div>







<a href="https://px.a8.net/svt/ejp?a8mat=2ZPRJ1+CFPZOY+50+2HOB4X" rel="nofollow">
<img decoding="async" border="0" width="728" height="90" alt="" src="https://www23.a8.net/svt/bgt?aid=180920989752&amp;wid=001&amp;eno=01&amp;mid=s00000000018015062000&amp;mc=1"></a>
<img decoding="async" border="0" width="1" height="1" src="https://www12.a8.net/0.gif?a8mat=2ZPRJ1+CFPZOY+50+2HOB4X" alt="">
]]></content:encoded>
					
					<wfw:commentRss>https://mayulog.xyz/iconlist/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
