<?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>Wordpress活用  |  まろっぱげ。旧館</title>
	<atom:link href="https://play.maro-cyanin.site/tag/motto-wp/feed/" rel="self" type="application/rss+xml" />
	<link>https://play.maro-cyanin.site</link>
	<description>ゲーム＆Cocoon＆イラスト＆雑記の4つでできていた。</description>
	<lastBuildDate>Thu, 06 Feb 2020 12:39:04 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.7.1</generator>

<image>
	<url>https://play.maro-cyanin.site/wp-content/uploads/2020/01/cropped-bigicon2-32x32.png</url>
	<title>Wordpress活用  |  まろっぱげ。旧館</title>
	<link>https://play.maro-cyanin.site</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>WordPressを導入したら、すぐにしておきたい設定5つ</title>
		<link>https://play.maro-cyanin.site/wordpress/wordpress-first/</link>
					<comments>https://play.maro-cyanin.site/wordpress/wordpress-first/#respond</comments>
		
		<dc:creator><![CDATA[まろにー]]></dc:creator>
		<pubDate>Mon, 03 Feb 2020 12:15:21 +0000</pubDate>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[Wordpress活用]]></category>
		<guid isPermaLink="false">https://play.maro-cyanin.site/?p=174</guid>

					<description><![CDATA[ブログを始めよう、既にブログを始めていて、今利用しているサービスではイマイチ物足りない…と感じているタイミングで、Wordpressに移行した方などなど、とりあえずブログを書くなら候補のひとつに上がらないわけがない！のが [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>ブログを始めよう、既にブログを始めていて、今利用しているサービスではイマイチ物足りない…と感じているタイミングで、Wordpressに移行した方などなど、とりあえずブログを書くなら候補のひとつに上がらないわけがない！のが「Wordpress」ですよね。</p>



<p>私自身も、このブログより前に始めたものは「はてなブログ（無料）」からスタートし、「はてなブログ（Pro）」を経て現在Wordpressに移行しています。</p>



<p>なぜ「はてなブログPro」から「Wordpress」に移行したのかは、また別記事で書ければいいなと思っています。→書きました</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-related">
<a href="https://play.maro-cyanin.site/wordpress/blogtalk/hatena-to-wordpress/" title="私がはてなブログproからWordpressに移行した理由と失敗したこと" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img width="160" height="90" src="https://play.maro-cyanin.site/wp-content/uploads/2020/02/hatenatowordpress-160x90.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" loading="lazy" srcset="https://play.maro-cyanin.site/wp-content/uploads/2020/02/hatenatowordpress-160x90.png 160w, https://play.maro-cyanin.site/wp-content/uploads/2020/02/hatenatowordpress-120x68.png 120w, https://play.maro-cyanin.site/wp-content/uploads/2020/02/hatenatowordpress-320x180.png 320w, https://play.maro-cyanin.site/wp-content/uploads/2020/02/hatenatowordpress-317x178.png 317w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">私がはてなブログproからWordpressに移行した理由と失敗したこと</div><div class="blogcard-snippet internal-blogcard-snippet">「とりあえずブログを始めるのであれば、はてなブログ（無料版）がオススメだよ！」という記事を書きました。その記事でははてなは無料でも色々メリットがあるのでいいよ～！という感じの内容を書いたのですが、結局渡しは...</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=play.maro-cyanin.site" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">play.maro-cyanin.site</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2020.02.06</div></div></div></div></a>
</div>



<p>さて、Wordpressはもともと色々と設定する場所が多いのですが、その中でも「できるだけ早くやっておきたい設定」があります。</p>



<p>後から変更するといろいろ面倒くさい部分もありますので、この記事を見てちゃちゃっと完了させちゃってくださいね！</p>



<div class="wp-block-cocoon-blocks-tab-caption-box-1 tab-caption-box block-box has-border-color has-purple-border-color"><div class="tab-caption-box-label block-box-label box-label fab-search"><span class="tab-caption-box-label-text block-box-label-text box-label-text">こんな方にオススメです</span></div><div class="tab-caption-box-content block-box-content box-content">
<p><strong>・Wordpressを導入したけど、何を設定するべきかわからない方<br>・Wordpressを導入したいけど、どのような設定をしたほうがいいのか知っておきたい方</strong></p>
</div></div>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">投稿者名の表示を変更する</a></li><li><a href="#toc2" tabindex="0">サイトタイトル・キャッチフレーズの設定</a></li><li><a href="#toc3" tabindex="0">パーマリンク形式の変更</a></li><li><a href="#toc4" tabindex="0">コメントのメールアドレス入力を必須にしない</a></li><li><a href="#toc5" tabindex="0">プロフィールの設定</a></li><li><a href="#toc6" tabindex="0">早めに設定しておくと後がラク！特に表示名は早めに変更を</a></li></ol>
    </div>
  </div>

<h2><span id="toc1">投稿者名の表示を変更する</span></h2>



<p>早めにやっておきたいのが、「投稿者名の表示の変更」です。</p>



<p>といいますのも、これ、<strong><span class="marker-under">何も設定していないとそのブログ（Wordpress）のユーザー名のままなんですよね。</span></strong><br></p>



<p>WordPressのメニューから「<strong><span class="marker-under-red">ユーザー＞あなたのプロフィール</span></strong>」を選択します。</p>



<p>すると、「名前」の項目にて「ユーザー名」が既に入っているのが確認できるかと思います（画像ではモザイクをかけています）。</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="763" height="345" src="https://play.maro-cyanin.site/wp-content/uploads/2020/02/matome_06.png" alt="" class="wp-image-186" srcset="https://play.maro-cyanin.site/wp-content/uploads/2020/02/matome_06.png 763w, https://play.maro-cyanin.site/wp-content/uploads/2020/02/matome_06-300x136.png 300w" sizes="(max-width: 763px) 100vw, 763px" /></figure>



<p>既に画像には「まろにー」と入っていますが、この「<strong><span class="marker-under-red">ニックネーム</span></strong>」部分にハンドルネームを入力し、下の画像のように「<strong><span class="marker-under-red">ブログ上の表示名</span></strong>」をニックネームに変更しておきましょう。</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="458" height="117" src="https://play.maro-cyanin.site/wp-content/uploads/2020/02/matome_07.png" alt="" class="wp-image-187" srcset="https://play.maro-cyanin.site/wp-content/uploads/2020/02/matome_07.png 458w, https://play.maro-cyanin.site/wp-content/uploads/2020/02/matome_07-300x77.png 300w" sizes="(max-width: 458px) 100vw, 458px" /></figure>



<div class="wp-block-cocoon-blocks-label-box-1 label-box block-box has-text-color has-border-color has-key-color-color has-key-color-border-color"><div class="label-box-label block-box-label box-label"><span class="label-box-label-text block-box-label-text box-label-text">なぜニックネームに変更しなければならないの？</span></div><div class="label-box-content block-box-content box-content">
<p>wordpressのユーザー名は、ログインに使用するユーザー名と同一です。<br>そのため、ユーザー名のままにしておくと、不正ログインを受けるリスクが高まります。<br>セキュリティの観点からも大変よろしくないので、どうしても！な理由がなければ変更することをおすすめします。</p>
</div></div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-13 sbs-flat sbp-l sbis-cn cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="https://play.maro-cyanin.site/wp-content/uploads/2020/01/hae.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p>記事を書いた人として名前が記事に残っちゃうので、いの一番に変更すべき部分だと言えます…</p>
</div></div>



<h2><span id="toc2">サイトタイトル・キャッチフレーズの設定</span></h2>



<p>なんとなく早めに設定しておくといいかな、と思うのが「サイトタイトル」と「キャッチフレーズ」の設定です。</p>



<p>「<strong><span class="marker-under-red">設定＞一般</span></strong>」から進めばOK。</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="607" height="279" src="https://play.maro-cyanin.site/wp-content/uploads/2020/02/wpfirst_03.png" alt="" class="wp-image-192" srcset="https://play.maro-cyanin.site/wp-content/uploads/2020/02/wpfirst_03.png 607w, https://play.maro-cyanin.site/wp-content/uploads/2020/02/wpfirst_03-300x138.png 300w" sizes="(max-width: 607px) 100vw, 607px" /></figure>



<p>特に説明するほどでもありませんが、キャッチフレーズはともかく、サイトのタイトルはある程度早くかためてしまったほうがいいと思います。</p>



<p><strong>私は今更他の名前にしたほうがよかったかな、とも思っているので…。</strong><br>（まあ、後からサイトタイトルを変えても別に問題はないんですけどね）</p>



<h2><span id="toc3">パーマリンク形式の変更</span></h2>



<p>「パーマリンク」とは、その記事がもつ特有のリンクアドレスのことです。<br>たとえば、この記事のパーマリンクは「wordpress-first」という名前になっています。</p>



<p>そのパーマリンクをどういった形式にするかも、Wordpressなら設定できるのでとっても便利！</p>



<p>設定は「<strong><span class="marker-under-red">設定＞パーマリンク設定</span></strong>」から行えます。</p>



<p>進むとこんな感じ。すこし画像が大きいですが…。</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="489" src="https://play.maro-cyanin.site/wp-content/uploads/2020/02/wpfirst_01-1024x489.png" alt="" class="wp-image-189" srcset="https://play.maro-cyanin.site/wp-content/uploads/2020/02/wpfirst_01-1024x489.png 1024w, https://play.maro-cyanin.site/wp-content/uploads/2020/02/wpfirst_01-300x143.png 300w, https://play.maro-cyanin.site/wp-content/uploads/2020/02/wpfirst_01-768x367.png 768w, https://play.maro-cyanin.site/wp-content/uploads/2020/02/wpfirst_01.png 1123w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>SEOなどの観点で言うと「投稿名」がオススメされています。<br>まろっぱげ。では「カスタム構造」を選択し、「<span style="color:#ea5506" class="color">カテゴリー名/記事名</span>」と表示されるように設定しています。</p>



<p>このあたりは好みだと思うのですが、まろっぱげ。のようないろんなテーマが入っているブログだと、記事名だけではどんなカテゴリーに属しているのかわかりづらい、というデメリットがあります。</p>



<p>ですが<span class="marker-under-blue">カテゴリーが表示されていれば、例えばゲームを紹介する記事であれば「Game/○○（記事名）」になるので「ゲームカテゴリーの記事なんだな」と、アドレスでもどんな記事を見ているのか、ブログを見てくださる方がわかりやすいかな？という判断です。</span></p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-15 sbs-flat sbp-l sbis-cn cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="https://play.maro-cyanin.site/wp-content/uploads/2020/01/e-.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p>このへんは本当に好みだと思いますので、投稿名か、私のようにカスタム構造でカテゴリーを表示させる程度でいいんじゃないかなと思います。長過ぎるアドレスもちょっと嫌ですしね…</p>
</div></div>



<p>こちらもあとから変えると内部リンクがおかしくなる可能性もありますし（自分で試してみたところ、素直に内部リンクは飛んでくれたのでそこまでではないかもですが…）、最初に固めてしまったほうがいいでしょう。</p>



<div class="wp-block-cocoon-blocks-icon-box alert-box common-icon-box block-box">
<p>余裕でリンク切れが発生したので、変更は記事を投稿する前がいいでしょう。<br>投稿した後に変える場合は、プラグイン「Redirection」などを利用してリダイレクト処理を行ったほうがいいです。</p>
</div>



<div class="ad-area no-icon ad-shortcode ad-rectangle ad-label-visible cf" itemscope itemtype="https://schema.org/WPAdBlock">
  <div class="ad-label" itemprop="name" data-nosnippet></div>
  <div class="ad-wrap">
    <div class="ad-responsive ad-usual"><!-- レスポンシブコード -->
<ins class="adsbygoogle"
  style="display:block"
  data-ad-client="ca-pub-2782533471359714"
  data-ad-slot="6894203889"
  data-ad-format="rectangle"
  data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
          </div>

</div>




<h2><span id="toc4">コメントのメールアドレス入力を必須にしない</span></h2>



<p>これは迷うところでもあるかと思います。<br>メールアドレスの入力を必須にしておくことでスパムコメントが防ぎやすいですし、変な荒らしコメントをもらうリスクも減りますので…。</p>



<p>しかし、メールアドレスが必須というのは、コメントをもらう上ではちょっとハードルが高いかなとも思いますので、私は必須にしないように設定を変更しました。</p>



<p>「<strong><span class="marker-under-red">設定＞ディスカッション</span></strong>」から設定できます。</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="752" height="270" src="https://play.maro-cyanin.site/wp-content/uploads/2020/02/wpfirst_02.png" alt="" class="wp-image-190" srcset="https://play.maro-cyanin.site/wp-content/uploads/2020/02/wpfirst_02.png 752w, https://play.maro-cyanin.site/wp-content/uploads/2020/02/wpfirst_02-300x108.png 300w" sizes="(max-width: 752px) 100vw, 752px" /></figure>



<p>オレンジ下線を引いた部分が該当箇所です。<br>すでに画像ではチェックが外れていますが、初期設定ではチェックが入った状態なので、それを外してしまいましょう！</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-16 sbs-flat sbp-l sbis-cn cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="https://play.maro-cyanin.site/wp-content/uploads/2020/01/pu-n.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p>なにげに忘れやすい設定なんですよね、これ…</p>
</div></div>



<h2><span id="toc5">プロフィールの設定</span></h2>



<p>これは急いですべき！というほどではありませんが、早めにやっておくと楽＆結構場所を迷いがち、ということで。</p>



<p>サイドバーにプロフィールを掲載される方は多いかと思いますが、そこに表示される文章はWordpressの設定で行えます。</p>



<p>「<strong><span class="marker-under-red">ユーザー＞あなたのプロフィール</span></strong>」に進みましょう。<br>ページの真ん中より下くらいに「<strong>あなたについて</strong>」という項目があり、そこでプロフィールや画像を設定できます。</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="750" height="374" src="https://play.maro-cyanin.site/wp-content/uploads/2020/02/wpfirst_04.png" alt="" class="wp-image-193" srcset="https://play.maro-cyanin.site/wp-content/uploads/2020/02/wpfirst_04.png 750w, https://play.maro-cyanin.site/wp-content/uploads/2020/02/wpfirst_04-300x150.png 300w" sizes="(max-width: 750px) 100vw, 750px" /></figure>



<p>「プロフィール情報」では、アイコンの下に掲載される文章を編集出来ます。<br>この画像の黄色い○で囲まれてる部分ですね。ちょっと長いから整理しよう…（客観的視点大事やなあ）</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img loading="lazy" width="356" height="452" src="https://play.maro-cyanin.site/wp-content/uploads/2020/02/wpfirst_06.png" alt="" class="wp-image-194" srcset="https://play.maro-cyanin.site/wp-content/uploads/2020/02/wpfirst_06.png 356w, https://play.maro-cyanin.site/wp-content/uploads/2020/02/wpfirst_06-236x300.png 236w" sizes="(max-width: 356px) 100vw, 356px" /></figure></div>



<p>アイコンは同ページ、もうちょっと下にある「プロフィール画像」から。<br>「プロフィール画像をアップロード」で、アイコンにしたい画像を選択してください。</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="690" height="477" src="https://play.maro-cyanin.site/wp-content/uploads/2020/02/wpfirst_05.png" alt="" class="wp-image-195" srcset="https://play.maro-cyanin.site/wp-content/uploads/2020/02/wpfirst_05.png 690w, https://play.maro-cyanin.site/wp-content/uploads/2020/02/wpfirst_05-300x207.png 300w" sizes="(max-width: 690px) 100vw, 690px" /></figure>



<p>私は吹き出し用に描いた絵を流用しています。このウザ顔が気に入ったので！</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-11 sbs-flat sbp-l sbis-cn cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="https://play.maro-cyanin.site/wp-content/uploads/2020/01/niko.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p>アイコンは著作権的に問題ないものを使った方がいいですね（他の画像もそうですが）。<br>フリーアイコンを利用したり、依頼で描いてもらうなども手かと思います。</p>
</div></div>



<h2><span id="toc6">早めに設定しておくと後がラク！特に表示名は早めに変更を</span></h2>



<p>今回ご紹介しました設定は、早めにしておくと「ちょっとブログっぽくなってきた！」と感じられるのでオススメです。<br>しかし、表示名の変更はセキュリティ観点からもなるべく早く行うことをオススメします。</p>



<p>プロフィール系はちょっと後からでも大丈夫。内容自体後からいくらでも変更できますので、ブログを始めて「なんかこのプロフィールちゃうなあ」と思ったら適宜書き直していったり、アイコンもブログの雰囲気にあわせて変えていってもいいと思います。<br>私も実際変えていますし（当時はよかったけど、今みたら絵が気に食わなかったので…）。</p>



<p>また、個人的には無料テーマ「<a href="https://wp-cocoon.com">Cocoon</a>」がオススメです。<br>有料テーマもいいのでしょうが、まずは無料で試してみて…というのもアリかと。</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-related">
<a href="https://play.maro-cyanin.site/wordpress/cocoon/cocoon-beginner/" title="見出し変更・アイキャッチ設定など、Cocoon初心者向けポイントまとめ" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img width="160" height="90" src="https://play.maro-cyanin.site/wp-content/uploads/2020/01/matome-160x90.png" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" loading="lazy" srcset="https://play.maro-cyanin.site/wp-content/uploads/2020/01/matome-160x90.png 160w, https://play.maro-cyanin.site/wp-content/uploads/2020/01/matome-120x68.png 120w, https://play.maro-cyanin.site/wp-content/uploads/2020/01/matome-320x180.png 320w, https://play.maro-cyanin.site/wp-content/uploads/2020/01/matome-317x178.png 317w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">見出し変更・アイキャッチ設定など、Cocoon初心者向けポイントまとめ</div><div class="blogcard-snippet internal-blogcard-snippet">無料Wordpressテーマ「Cocoon」で初心者がつまづきがちな「見出し（h2など）変更」「CSSの設定」「アイキャッチのサイズ」といった、「ここどうすればいいんだっけ？」な疑問が出やすい部分の解決策（回答）をまとめました。</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=play.maro-cyanin.site" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">play.maro-cyanin.site</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2020.02.01</div></div></div></div></a>
</div>
]]></content:encoded>
					
					<wfw:commentRss>https://play.maro-cyanin.site/wordpress/wordpress-first/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>WordPressの「再利用ブロック」活用方法！「ちょっとここだけいじりたい」ときに超便利</title>
		<link>https://play.maro-cyanin.site/wordpress/wordpress-block/</link>
					<comments>https://play.maro-cyanin.site/wordpress/wordpress-block/#respond</comments>
		
		<dc:creator><![CDATA[まろにー]]></dc:creator>
		<pubDate>Sat, 25 Jan 2020 03:11:28 +0000</pubDate>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[Wordpress活用]]></category>
		<guid isPermaLink="false">https://play.maro-cyanin.site/?p=124</guid>

					<description><![CDATA[WordPress5.0以降に採用された「Gutenberg（グーテンベルク）」。私は大昔にWordpressにちょっと触れたことはあるものの、本格的に触ったのは5.0以降なので以降のストレスなく利用できています。 とは [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>WordPress5.0以降に採用された「Gutenberg（グーテンベルク）」。<br>私は大昔にWordpressにちょっと触れたことはあるものの、本格的に触ったのは5.0以降なので以降のストレスなく利用できています。</p>



<p>とはいえ、色々なブロックが使える中「これもうちょっとうまく使えないのかなあ」と思っていたのが「<strong>再利用ブロック</strong>」。</p>



<p>色々いじっていたら「<span class="marker">こんな使い方ができるやん！</span>」と思ったので、メモとして残しておきます。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-4" checked><label class="toc-title" for="toc-checkbox-4">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">「再利用ブロック」とは？</a></li><li><a href="#toc2" tabindex="0">再利用ブロックは「通常ブロック」に変化できる！</a></li><li><a href="#toc3" tabindex="0">このサイトでの実用例</a></li><li><a href="#toc4" tabindex="0">写真で説明！「再利用ブロック」の使い方</a><ol><li><a href="#toc5" tabindex="0">事前準備：好きなブロックを「再利用ブロック」にしておく</a></li><li><a href="#toc6" tabindex="0">再利用ブロックをおきたいところに配置</a></li></ol></li><li><a href="#toc7" tabindex="0">「通常ブロックに変換」を選択すると編集できる！</a></li><li><a href="#toc8" tabindex="0">通常ブロックに変換したものを編集する</a></li><li><a href="#toc9" tabindex="0">Cocoonのテンプレートでは編集がすべてに適用されてしまう</a></li><li><a href="#toc10" tabindex="0">「ここ変えたい」なモノが多いなら、活用しない手はない！</a></li></ol>
    </div>
  </div>

<h2><span id="toc1">「再利用ブロック」とは？</span></h2>



<p>「再利用ブロック」とは、自分で作成したブロックの内容を「再利用ブロック」として登録することで、他の記事や固定ページなどで使いまわしができる機能（ブロック）のことです。</p>



<p>毎回ブログに特定の文章を最後に入れている場合など、わざわざメモ帳に残しておいてコピペをしなくても、再利用ブロックを使えばすぐに使える！というわけです。</p>



<h2><span id="toc2">再利用ブロックは「通常ブロック」に変化できる！</span></h2>



<p>「<strong>でも、再利用ブロックは同じ内容しか使えなくない？</strong>」という声もあるでしょう。</p>



<p>再利用ブロックはたしかに同一の内容を何度も使い回す、というもので、再利用ブロックを編集してしまうと、ブロック自体の内容が変更されるため、<span class="marker">例えばページAとページBに再利用ブロックをすでに使用しており、ページCで再利用ブロックを編集した場合、ページAとページBにもその内容が反映さてしまいます。</span></p>



<p>しかし、<strong>再利用ブロックは「通常ブロック」に変化させることもできるんです！</strong></p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-11 sbs-flat sbp-l sbis-cn cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="https://play.maro-cyanin.site/wp-content/uploads/2019/12/blogicon1.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p>テンプレートなどで使い回せる文章を作れるテーマもありますが、再利用ブロックは基本の枠組みを作っておいて内容を変化させるなんてこともできちゃいます！</p>
</div></div>



<h2><span id="toc3">このサイトでの実用例</span></h2>



<p>私はこのサイトで実際に再利用ブロックを活用しています。<br>具体的にどのブロックで活用してるの？といいますと、<strong>Steamリンク</strong>です。</p>



<p>Steamリンクはifremeという属性でいわゆる「埋め込み」を行っているわけですが、いちいちソースをコピペするのは面倒なんですよね。</p>



<p>先日「購入して後悔がなかったSteamゲーム」の記事を書きましたが、そのときに大いに活躍してくれました。</p>



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



<a href="https://play.maro-cyanin.site/recommend-steam-hands/" title="404 NOT FOUND  | まろっぱげ。旧館" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img src="https://play.maro-cyanin.site/wp-content/uploads/cocoon-resources/blog-card-cache/9bc67dfa3dcb74566dd3ce5f9ba284c6.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">404 NOT FOUND  | まろっぱげ。旧館</div><div class="blogcard-snippet external-blogcard-snippet">ゲーム＆Cocoon＆イラスト＆雑記の4つでできていた。</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img src="https://www.google.com/s2/favicons?domain=play.maro-cyanin.site" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">play.maro-cyanin.site</div></div></div></div></a>



</div>



<h2><span id="toc4">写真で説明！「再利用ブロック」の使い方</span></h2>



<p>実際どのように使うのか、写真を交えながら説明していきます。</p>



<h3><span id="toc5">事前準備：好きなブロックを「再利用ブロック」にしておく</span></h3>



<p>これがないと始まりません。自分が使いまわしたい！と思っているアイテムを「再利用ブロック」に指定しておきましょう。</p>



<p>再利用ブロックの作り方は、そのブロックを選択した状態で一番右の「…」が縦に並んでいるアイコンを選択すると表示されるメニューの中から「再利用ブロックに追加」を選びます。</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img loading="lazy" width="778" height="371" src="https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-0.png" alt="" class="wp-image-133" srcset="https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-0.png 778w, https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-0-300x143.png 300w, https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-0-768x366.png 768w" sizes="(max-width: 778px) 100vw, 778px" /></figure></div>



<p>再利用ブロックには名前をつけられるので、自分が判別しやすい名前をつけるといいでしょう。</p>



<h3><span id="toc6">再利用ブロックをおきたいところに配置</span></h3>



<p>まず、「再利用ブロック」を「ここだ！」というところに配置します。</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="465" height="244" src="https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-1.png" alt="" class="wp-image-134" srcset="https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-1.png 465w, https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-1-300x157.png 300w" sizes="(max-width: 465px) 100vw, 465px" /></figure>



<p> この画像では「Steam」が再利用ブロックです 。</p>



<p>再利用ブロックが配置されると、こうなります。</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img loading="lazy" width="904" height="379" src="https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-2.png" alt="" class="wp-image-136" srcset="https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-2.png 904w, https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-2-300x126.png 300w, https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-2-768x322.png 768w" sizes="(max-width: 904px) 100vw, 904px" /></figure></div>



<p>この画像では「Glass Masquerade」になっていますが、このゲームばかりを紹介しているわけではありません。別のゲームに変えられないと意味がない！</p>



<h2><span id="toc7">「通常ブロックに変換」を選択すると編集できる！</span></h2>



<p>そこで、左上のメニューから「<strong>通常ブロックに変換</strong>」を選択します。</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="426" height="322" src="https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-3.png" alt="" class="wp-image-137" srcset="https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-3.png 426w, https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-3-300x227.png 300w" sizes="(max-width: 426px) 100vw, 426px" /></figure>



<p>画像で黄色くハイライトしている部分を選択してください。</p>



<p>すると！</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="796" height="164" src="https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-4.png" alt="" class="wp-image-138" srcset="https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-4.png 796w, https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-4-300x62.png 300w, https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-4-768x158.png 768w" sizes="(max-width: 796px) 100vw, 796px" /></figure>



<p>このように、再利用ブロックからただのHTMLになります。</p>



<div class="wp-block-cocoon-blocks-tab-box-1 blank-box bb-tab bb-tips block-box has-border-color has-blue-border-color">
<p>今回の例は「カスタムHTML」を再利用ブロックとして使っているため、上記画像のようにHTMLが表示されていますが、段落ブロックであればこのように表示が変わることはありません。</p>
</div>



<h2><span id="toc8">通常ブロックに変換したものを編集する</span></h2>



<p><strong><span class="marker-under">通常ブロックに変換すれば、「再利用ブロック」の内容を変更せずに、そのブロックのみ変更を適用することができます。</span></strong></p>



<p>今回の例では、Steamの他のソフトを表示させたいので…</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="358" height="175" src="https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-5.png" alt="" class="wp-image-139" srcset="https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-5.png 358w, https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-5-300x147.png 300w" sizes="(max-width: 358px) 100vw, 358px" /></figure>



<p>表示させるための必要なURLをSteamから取得（赤線部分の数字をコピーするだけ）し、</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="740" height="68" src="https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-6.png" alt="" class="wp-image-140" srcset="https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-6.png 740w, https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-6-300x28.png 300w" sizes="(max-width: 740px) 100vw, 740px" /></figure>



<p>ここを書き換えれば…</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="639" height="212" src="https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-7.png" alt="" class="wp-image-142" srcset="https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-7.png 639w, https://play.maro-cyanin.site/wp-content/uploads/2020/01/snap-7-300x100.png 300w" sizes="(max-width: 639px) 100vw, 639px" /></figure>



<p>こういう表示になり、ちゃんと変わっているのがわかります！</p>



<h2><span id="toc9">Cocoonのテンプレートでは編集がすべてに適用されてしまう</span></h2>



<p>WordPressテーマ「Cocoon」を利用している方であれば「<span class="marker-under-blue">Cocoonのテンプレートでもいいんじゃない？</span>」と思われたかもしれません。</p>



<p>確かにCocoonのテンプレートは非常に便利で、別サイトでも活用していますが、<strong><span class="marker-under">Cocoonのテンプレートは編集するとすべてに適用されてしまうため、「ここのタグのこの一部だけ変えたいんだよね」という使い方には適さないんです。</span></strong></p>



<p>対して、この「再利用ブロック」は今回のような「一部の数字だけちょっと変えたい！」というときに非常に便利。<br>毎回ちょっとした部分を変えるために、わざわざメモ帳からペーストしてくる必要もありません。</p>



<h2><span id="toc10">「ここ変えたい」なモノが多いなら、活用しない手はない！</span></h2>



<p>今回はHTMLタグでしたが、文章であっても「大体これを使いまわしたいけど、ここだけ変えたいんだよね…」なものがあれば、再利用ブロックを活用しない手はない！というレベルです。</p>



<p>これまで使っていなかったわ、という方も、ぜひ一度使ってみてはいかがでしょうか？</p>
]]></content:encoded>
					
					<wfw:commentRss>https://play.maro-cyanin.site/wordpress/wordpress-block/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
