<?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>HTML &#8211; Esperanza</title>
	<atom:link href="https://dolcevivace.com/demo/esperanza/tag/html/feed" rel="self" type="application/rss+xml" />
	<link>https://dolcevivace.com/demo/esperanza</link>
	<description>Dolce &#38; Vivace</description>
	<lastBuildDate>Fri, 21 Oct 2016 01:36:07 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.5.1</generator>
	<item>
		<title>投稿スタイル</title>
		<link>https://dolcevivace.com/demo/esperanza/demo/style.html</link>
					<comments>https://dolcevivace.com/demo/esperanza/demo/style.html#comments</comments>
		
		<dc:creator><![CDATA[Dolce]]></dc:creator>
		<pubDate>Wed, 08 Apr 2015 03:00:27 +0000</pubDate>
				<category><![CDATA[Demo]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Theme]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">http://dolcevivace.com/demo/esperanza/?p=75</guid>

					<description><![CDATA[テーマの投稿スタイルです。 HTMLやCSSを知らなくても、いつも通り記事を投稿するだけであなたのWordPressが素敵なデザインに。 テーマの雰囲気をきちんと感じて頂くために、このデモサイトではプラグインなどは利用し...]]></description>
										<content:encoded><![CDATA[<article>
<p>テーマの投稿スタイルです。<br>
HTMLやCSSを知らなくても、いつも通り記事を投稿するだけであなたのWordPressが素敵なデザインに。</p>
<p>テーマの雰囲気をきちんと感じて頂くために、このデモサイトではプラグインなどは利用していません。</p>
<span id="more-75"></span>

<section class="section">
	<div id="js-responsive-images" class="scrollspy plus-minus"><h2>Responsive-images <span class="text-m grey-text marl10">[ レスポンシブイメージ ]</span></h2></div> 
    <p>画面サイズが変わっても画像の端が切れることなくレスポンシブに表示されます。</p>

	<div class="row">
	<div class="col s12">
	<span class="photo"><img src="https://dolcevivace.com/demo/esperanza/wp-content/uploads/2015/04/girl-437989_1280.jpg" alt="image1"></span>
    </div>
	</div>
    
</section>

<section class="section">
	<div id="js-headings" class="scrollspy plus-minus"><h2>Headings <span class="text-m grey-text marl10">[ 見出し ]</span></h2></div>
    
    <div class="ml50-screen-only">
    <div class="row">
	<div class="col s12 m6">   
    <div class="marb20">デフォルト </div>
    <h1>マテリアルデザイン WordPress　&lt;h1&gt;</h1>
    <h2>マテリアルデザイン WordPress　&lt;h2&gt;</h2>
  	<h3>マテリアルデザイン WordPress　&lt;h3&gt;</h3>
    <h4>マテリアルデザイン WordPress　&lt;h4&gt;</h4>
    <h5>マテリアルデザイン WordPress　&lt;h5&gt;</h5>
    <h6>マテリアルデザイン WordPress　&lt;h6&gt;</h6>    
    </div>
    <div class="col s12 m6">
    <div class="marb20">プレーン </div>
    <h1 class="plain">マテリアルデザイン WordPress　&lt;h1&gt;</h1>
    <h2 class="plain">マテリアルデザイン WordPress　&lt;h2&gt;</h2>
  	<h3 class="plain">マテリアルデザイン WordPress　&lt;h3&gt;</h3>
    <h4 class="plain">マテリアルデザイン WordPress　&lt;h4&gt;</h4>
    <h5 class="plain">マテリアルデザイン WordPress　&lt;h5&gt;</h5>
    <h6 class="plain">マテリアルデザイン WordPress　&lt;h6&gt;</h6>
    </div>
    </div>
    </div>
    
</section> 
<br>

<section class="section">
	<div id="js-paragraph" class="scrollspy plus-minus"><h2>Paragraph <span class="text-m grey-text marl10">[ 段落 ]</span></h2></div>


	<p>町の上に高く柱がそびえ、その上に幸福の王子の像が立っていました。 王子の像は全体を薄い純金で覆われ、 目は二つの輝くサファイアで、 王子の剣のつかには大きな赤いルビーが光っていました。王子は皆の自慢でした。 「風見鶏と同じくらいに美しい」と、 芸術的なセンスがあるという評判を得たがっている一人の市会議員が言いました。 「もっとも風見鶏ほど便利じゃないがね」と付け加えて言いました。 
    これは夢想家だと思われないように、と心配したからです。 実際には彼は夢想家なんかじゃなかったのですが。</p>
	<p>「どうしてあの幸福の王子みたいにちゃんとできないの」 月が欲しいと泣いている幼い男の子に、賢明なお母さんが聞きました。 「幸福の王子は決して何かを欲しがって泣いたりしないのよ」</p>
    <cite><span class="citeright">オスカー・ワイルド『幸福の王子』　結城浩訳</span></cite>  
    
    <p>Give me your pardon, sir: I&#8217;ve done you wrong; But pardon&#8217;t, as you are a gentleman. This presence knows, And you must needs have heard, how I am punish&#8217;d With sore distraction.
    What I have done, That might your nature, honour and exception Roughly awake, I here proclaim was madness. Was&#8217;t Hamlet wrong&#8217;d Laertes? Never Hamlet: 
    If Hamlet from himself be ta&#8217;en away, And when he&#8217;s not himself does wrong Laertes, Then Hamlet does it not, Hamlet denies it. Who does it, then? His madness: if&#8217;t be so,
	Hamlet is of the faction that is wrong&#8217;d; His madness is poor Hamlet&#8217;s enemy. Sir, in this audience, Let my disclaiming from a purposed evil Free me so far in your most generous thoughts, 
    That I have shot mine arrow o&#8217;er the house, And hurt my brother. </p> 
	<cite><span class="citeright">Shakespeare, Hamlet: Act 5, Scene 2</span></cite>	

</section>  
<br>
<section class="section">
	<div id="js-blockquote" class="scrollspy plus-minus"><h2>Blockquote <span class="text-m grey-text marl10">[ 引用 ]</span></h2></div>
    
      
	<blockquote>
	<p>「僕はピラミッドに出発するよ。じゃあね」</p>
	</blockquote>

	<blockquote>
	レスポンシブWebデザイン <b>【responsive web design】</b> <br>
	Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。
	(中略)
	表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定された単一のファイルを制作し、すべての機器に同じように送信する。
	(後略)
	<cite><a href="http://e-words.jp/w/E383ACE382B9E3839DE383B3E382B7E38396E38387E382B6E382A4E383B3.html" rel="nofollow" >IT用語辞典 e-Words</a></cite>
	</blockquote>
	
</section>  
<br>
<section class="section">
	<div id="js-list" class="scrollspy plus-minus"><h2>List <span class="text-m grey-text marl10">[ リスト ]</span></h2></div>  

	<div class="row ">
	<div class="col s12 m4">   
		<div class="marb20">List（デフォルト）</div>
		<ul>
		<li>リスト</li>
		<li>リスト</li>
		<li><a href="#">リスト</a></li>
		</ul>
	</div>

	<div class="col s12 m4"> 
		<div class="marb20">Disc List（箇条書き）</div>
		<ul>
		<li class="disc">リスト</li>
		<li class="disc">リスト</li>
		<li class="disc"><a href="#">リスト</a></li>
		</ul>
	</div>
    
	<div class="col s12 m4"> 
		<div class="marb20">Ordered List（番号付き）</div>
		<ol>
		<li>リスト</li>
		<li>リスト</li>
		<li><a href="#">リスト</a></li>
		</ol>
	</div>
	</div>

</section>
<br>
<section class="section">
	<div id="js-table" class="scrollspy plus-minus"><h2>Table <span class="text-m grey-text marl10">[ テーブル ]</span></h2></div>
    
	<div class="row">
    
	<div class="col s12 m6 marb50">
    	<div>
		Borderless Table　<span class="text-s grey-text marl10">[ボーダーなし：デフォルト]</span>
		
        
      <table>
        <thead>
          <tr>
              <th data-field="album">Album</th>
              <th data-field="price">Price</th>
              <th data-field="date">Release Date</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Girls Voice Studio 11</td>
            <td><i class="fa fa-jpy"></i>　3,146</td>
            <td>2002.3.6</td>
          </tr>
          <tr>
            <td>Roots</td>
            <td><i class="fa fa-jpy"></i>　3,146</td>
            <td>2000.6.21</td>
          </tr>
          <tr>
            <td>Next Lounge</td>
            <td><i class="fa fa-jpy"></i>　1,258</td>
            <td>2000.5.17</td>
          </tr>
        </tbody>
      </table>
		</div> 
    </div>
    
    <div class="col s12 m6 marb50">
    	<div>
		Bordered Table <span class="text-s grey-text marl10">[ボーダーあり]</span>
       
 
      <table class="bordered" >
        <thead>
          <tr>
              <th data-field="album">Album</th>
              <th data-field="price">Price</th>
              <th data-field="date">Release Date</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Girls Voice Studio 11</td>
            <td><i class="fa fa-jpy"></i>　3,146</td>
            <td>2002.3.6</td>
          </tr>
          <tr>
            <td>Roots</td>
            <td><i class="fa fa-jpy"></i>　3,146</td>
            <td>2000.6.21</td>
          </tr>
          <tr>
            <td>Next Lounge</td>
            <td><i class="fa fa-jpy"></i>　1,258</td>
            <td>2000.5.17</td>
          </tr>
        </tbody>
      </table>
		</div> 
    </div>
    
    </div>
    <div class="row">
    
    <div class="col s12 m6 marb50">
    	<div>
		Striped Table <span class="text-s grey-text marl10">[ストライプテーブル]</span>

      <table class="striped">
        <thead>
          <tr>
              <th data-field="album">Album</th>
              <th data-field="price">Price</th>
              <th data-field="date">Release Date</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Girls Voice Studio 11</td>
            <td><i class="fa fa-jpy"></i>　3,146</td>
            <td>2002.3.6</td>
          </tr>
          <tr>
            <td>Roots</td>
            <td><i class="fa fa-jpy"></i>　3,146</td>
            <td>2000.6.21</td>
          </tr>
          <tr>
            <td>Next Lounge</td>
            <td><i class="fa fa-jpy"></i>　1,258</td>
            <td>2000.5.17</td>
          </tr>
        </tbody>
      </table>
		</div>
    </div>
    
    <div class="col s12 m6 marb50">
    	<div>
		Hoverable Table <span class="text-s grey-text marl10">[マウスオーバーテーブル]</span>

      <table class="hoverable" >
        <thead>
          <tr>
              <th data-field="album">Album</th>
              <th data-field="price">Price</th>
              <th data-field="date">Release Date</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Girls Voice Studio 11</td>
            <td><i class="fa fa-jpy"></i>　3,146</td>
            <td>2002.3.6</td>
          </tr>
          <tr>
            <td>Roots</td>
            <td><i class="fa fa-jpy"></i>　3,146</td>
            <td>2000.6.21</td>
          </tr>
          <tr>
            <td>Next Lounge</td>
            <td><i class="fa fa-jpy"></i>　1,258</td>
            <td>2000.5.17</td>
          </tr>
        </tbody>
      </table>
		</div>
    </div>
    
    </div>

</section>
<br>
<section class="section">
	<div id="js-code" class="scrollspy plus-minus"><h2>Code <span class="text-m grey-text marl10">[ プログラムコード ]</span></h2></div>  

    
    
	<pre><code>$(&quot;#trigger&quot;).click(function(){</code></pre>
    
	<pre><code>&lt;ul class=&quot;collection with-header&quot;&gt;
　　&lt;li class=&quot;collection-header&quot;&gt;&lt;h4&gt;First Names&lt;/h4&gt;&lt;/li&gt;
　　&lt;li class=&quot;collection-item&quot;&gt;&lt;div&gt;Alvin&lt;a href=&quot;#!&quot; class=&quot;secondary-content&quot;&gt;&lt;i class=&quot;mdi-content-send&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;&lt;i class=&quot;mdi-content-send&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
　　&lt;li class=&quot;collection-item&quot;&gt;&lt;div&gt;Alvin&lt;a href=&quot;#!&quot; class=&quot;secondary-content&quot;&gt;&lt;i class=&quot;mdi-content-send&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
　　&lt;li class=&quot;collection-item&quot;&gt;&lt;div&gt;Alvin&lt;a href=&quot;#!&quot; class=&quot;secondary-content&quot;&gt;&lt;i class=&quot;mdi-content-send&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
　　&lt;li class=&quot;collection-item&quot;&gt;&lt;div&gt;Alvin&lt;a href=&quot;#!&quot; class=&quot;secondary-content&quot;&gt;&lt;i class=&quot;mdi-content-send&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>

</section>  

</article>

<br>

<article class="mart24rem">

<h1 class="entry-title"><i class="fa fa-diamond blue-grey-text icon-left fa-fw"></i>
Style Components <span class="text-m grey-text marl10">[ スタイルコンポーネント ]</span></h1>
<p>投稿画面のドロップダウンからショートコードを選ぶだけで簡単に利用できるテーマの拡張スタイルや便利なコンポーネントです。<br>
便利なワードプレスを【Esperanza】テーマでさらにおしゃれに使いこなしましょう。</p>

<!-- js-fonts -->
<section class="section">
	<div id="js-fonts" class="scrollspy plus-minus clearfix">
    <h2>Fonts <span class="text-m grey-text marl10">[ フォント ]</span>
    <span class=" text-s float-right mart5"><cite>Fonts : <a href="https://www.google.com/fonts">[ Google Fonts ]</a>
    <a href="http://creativecommons.org/licenses/by/3.0/" rel="nofollow" class="text-muted">License: CC BY 3.0</a></cite></span>
    </h2></div><br>
    
<!-- -->
                                
	<h3>Vollkorn</h3>

    <div class="mlr50-screen-only">

		<p class="mart40"><span class="font-vollkorn" style="font-size:36px">
		Boy meets girl.
		</span></p>

    </div>   
                    
<!-- -->
    
    <h3>Tangerine</h3>

    <div class="mlr50-screen-only">

		<p class="mart40"><span class="font-tangerine" style="font-size:54px">
		Make my day.
		</span></p>

    </div>   
                          
<!-- -->                              
	
	<h3>Damion</h3>

    <div class="mlr50-screen-only">

		<p class="mart40"><span class="font-damion" style="font-size:42px">
		I love you.
		</span></p>

    </div>   
    
<!-- -->                              
	
	<h3>Cinzel</h3>

    <div class="mlr50-screen-only">

		<p class="mart40"><span class="font-cinzel" style="font-size:42px">
		TIME
		</span></p>

    </div>   
                  
<!-- -->             
	
	<h3>Source Code Pro </h3>  

    <div class="mlr50-screen-only">

		<div class="font-code mart30 marb30">
		<span class="grey-text">//ワードプレスコードなどを表示する際には等幅Webフォントが便利です。</span><br>
		sw = new System.IO.StreamWriter(fpath, false, enc);<br>
		for (int i = 0; i &gt;= dt.Length &#8211; 1; i++)
		</div>

    </div>   
    
</section>  


<!-- js-fontsize -->				
<section class="section-topspace">
	<div id="js-fontsize" class="scrollspy plus-minus"><h2>Font size <span class="text-m grey-text marl10">[ フォントサイズ ]</span></h2></div>
	
    <div class="ml50-screen-only">
	<div class="row  mart20">  
 
	<div class="text-xs marb20">不思議の国のアリス Alice</div>
	<div class="text-s marb20">不思議の国のアリス Alice</div>
	<div class="text-m marb20">不思議の国のアリス Alice</div>
	<div class="text-l marb15">不思議の国のアリス Alice</div>
	<div class="text-xl marb10">不思議の国のアリス Alice</div>
	<div class="text-xxl">不思議の国のアリス Alice</div>
	<div class="text-xxxl">不思議の国のアリス Alice</div>
    
	</div>
    </div>


</section>


<!-- js-fontcolor -->				
<section class="section-topspace">
	<div id="js-fontcolor" class="scrollspy plus-minus"><h2>Font color <span class="text-m grey-text marl10">[ フォントカラー ]</span></h2></div>
    
    <div class="ml50-screen-only">
	<div class="row mart20">
    
    <p class="text-primary">「君を好きになってもいいかい」とツバメは言いました。<a href="javascript:void(0);" class="text-primary">『幸福な王子』オスカー・ワイルド</a></p> 
	<p class="text-info">「君を好きになってもいいかい」とツバメは言いました。<a href="javascript:void(0);" class="text-info">『幸福な王子』オスカー・ワイルド</a></p> 
	<p class="text-success">「君を好きになってもいいかい」とツバメは言いました。<a href="javascript:void(0);" class="text-success">『幸福な王子』オスカー・ワイルド</a></p> 
	<p class="text-warning">「君を好きになってもいいかい」とツバメは言いました。<a href="javascript:void(0);" class="text-warning">『幸福な王子』オスカー・ワイルド</a></p> 
	<p class="text-danger">「君を好きになってもいいかい」とツバメは言いました。<a href="javascript:void(0);" class="text-danger">『幸福な王子』オスカー・ワイルド</a></p> 
	<p class="text-muted">「君を好きになってもいいかい」とツバメは言いました。<a href="javascript:void(0);" class="text-muted">『幸福な王子』オスカー・ワイルド</a></p> 
    
    </div>
    </div>


</section>

<!-- js-icons -->				
<section class="section-topspace">
	<div id="js-icons" class="scrollspy plus-minus clearfix">
    <h2>Icons <span class="text-m grey-text marl10">[ アイコン ]</span>
    <span class=" text-s float-right mart5"><cite>Icons : <a href="http://fortawesome.github.io/Font-Awesome/license/" rel="nofollow">[ Font Awesome ]</a>
	<a href="http://scripts.sil.org/OFL" class=" text-muted" rel="nofollow">License: SIL OFL 1.1</a></cite></span>
    </h2></div>
    
    <p>WordPressテーマ【Esperanza】にはアイコンWebフォントを採用しているので、
	<i class="fa fa-asterisk"></i>
	<i class="fa fa-check"></i>
	<i class="fa fa-pencil-square-o"></i>
	<i class="fa fa-fast-forward"></i>
	ような楽しくて美しいアイコンを利用できます。<br>
	CSSで読み込んでいるためサイズや色も簡単に変更可能です。</p>

	<div class="ml50-screen-only">
	<p><span class="marl30"><i class="fa fa-heart"></i></span>
	<span class="marl30"><i class="fa fa-heart text-xl text-info"></i></span>
	<span class="marl30"><i class="fa fa-heart text-xxl text-danger"></i></span></p>
	</div>

</section>

<!-- js-images-->				
<section class="section-topspace">
	<div id="js-images" class="scrollspy plus-minus"><h2>Images <span class="text-m grey-text marl10">[ イメージ ]</span></h2></div>

	<h3>Photo-like effect <span class="text-m grey-text marl10">[ 写真風エフェクト ]</span></h3>
	<br>

	<div class="row">
	<div class="col s6 l5">
    <div class="ml50-screen-only">
	<div class="text-s">リンクなし</div>
	<span class="photo"><img src="https://dolcevivace.com/demo/esperanza/wp-content/uploads/2015/04/asian-413123_1280-300x199.jpg" alt="image1"></span>
	</div></div>
	<div class="col s6 l7">
    <div class="ml50-screen-only">
	<div class="text-s">画像リンク</div>
	<span class="photo"><a href="javascript:void(0);"><img src="https://dolcevivace.com/demo/esperanza/wp-content/uploads/2015/04/asian-413123_1280-300x199.jpg" alt="image1"></a></span>
	</div></div>
	</div>
	<br>

				

<!-- -->


	<h3>Retouch <span class="text-m grey-text marl10">[ 色調補正 ]</span><span class="text-s text-info marl10"><i class="fa fa-exclamation-triangle"></i> 一部のブラウザは対応していません。ご利用の際にはご注意下さい。</span></h3>
    <br>

    <div class="row">
	<div class="col s6 l5">
    <div class="ml50-screen-only">
	<div class="text-s marb10">グレースケール</div>
	<img src="https://dolcevivace.com/demo/esperanza/wp-content/uploads/2015/04/asian-413123_1280-300x199.jpg" alt="image1" class="image-grayscale">
	</div></div>
	<div class="col s6 l7">
    <div class="ml50-screen-only">
	<div class="text-s marb10">セピア</div>
	<img src="https://dolcevivace.com/demo/esperanza/wp-content/uploads/2015/04/asian-413123_1280-300x199.jpg" alt="image1" class="image-sepia">
	</div></div>
	</div>
 

</section>


<!-- js-lightbox"-->				
<section class="section-topspace">
	<div id="js-lightbox" class="scrollspy plus-minus clearfix">
    <h2>Lightbox <span class="text-m grey-text marl10">[ ライトボックス ]</span>
    <span class=" text-s float-right mart5"><cite>Plugin : <a href="http://formstone.it/components/boxer" rel="nofollow">[ Boxer ]</a>
    <span class="text-muted">License: MIT Licence</span></cite></span>
    </h2></div>
    
    <p>画像をクリックすると拡大して表示されます。</p>
    <div class="ml50-screen-only">
     <a href="https://dolcevivace.com/demo/esperanza/wp-content/uploads/2015/04/51.jpg" class="boxer"><img src="https://dolcevivace.com/demo/esperanza/wp-content/uploads/2015/04/51-300x169.jpg" alt="Thumbnail" width="300"></a>
	</div>
  
</section>

<!-- js-video -->				
<section class="section-topspace">
	<div id="js-video" class="scrollspy plus-minus"><h2>Responsive-video <span class="text-m grey-text marl10">[ レスポンシブ埋め込み動画 ]</span></h2></div>
	<p>Youtubeの動画などを埋め込む際に画面サイズに応じてレスポンシブに表示されます。</p><br>

    <div class="row">
	<div class="col s12">
    
    	<div class="responsive-video">

	<div class="responsive-video"><iframe src="https://www.youtube.com/embed/3s6X5ht5k_A" frameborder="0" allowfullscreen></iframe></div>

		</div>
    
    </div>
	</div>


</section>

<!-- js-panels -->				
<section class="section-topspace">
	<div id="js-panels" class="scrollspy plus-minus"><h2>Panels <span class="text-m grey-text marl10">[ パネル ]</span></h2></div>
    
    <h3>Text Panel <span class="text-m grey-text marl10">[ テキストパネル ]</span></h3>
  
    <div class="mlr50-screen-only mart40">
    	<div class="card-panel">
		<h4 class="plain">【目次】</h4>
		<ul>
		<li>1.あらすじ</li>
		<li>2.<a href="javascript:void(0);">原典</a></li>
		<li>3.<a href="javascript:void(0);">作品解説</a></li>
		<li>4.<a href="javascript:void(0);">日本語訳</a></li>
		</ul>
		</div><br>

     
	</div>
 
    <h3>Photo Panel <span class="text-m grey-text marl10">[ フォトパネル ]</span></h3> 
       
    <div class="mlr50-screen-only mart40">
     
        <div class="card" style="width:100%">
        <div class="card-image">
        <img src="https://dolcevivace.com/demo/esperanza/wp-content/uploads/2015/04/8.jpg">
        </div>
        <div class="card-content">
        <p>愛は目ではなく、心で見るもの。<br>だから翼の天使キューピッドは盲目に描かれる。 </p>
<div class="text-right text-xs grey-text"><cite>Shakespeare, A Midsummer Night&#8217;s Dream: Act 1, Scene 1</cite></div>
        </div>
        </div>
    
	</div>

</section>

<!-- js-buttons"-->				
<section class="section-topspace">
	<div id="js-buttons" class="scrollspy plus-minus"><h2>Buttons <span class="text-m grey-text marl10">[ ボタン ]</span></h2></div>
    <p>マテリアルデザインの素敵なボタンを用途に応じて使い分けることが可能です。</p>

    <div class="row mart20">
	<div class="col s12 m4 text-center" style="height:100px;">
    <div class="text-s mart10" style="padding-bottom:10px;">ボタン(large)</div>
    <a href="javascript:void(0);" class="btn waves-effect waves-light btn-large">Attention</a>
    </div>
    <div class="col s12 m4 text-center" style="height:100px;">
    <div class="text-s mart10" style="padding-bottom:20px;">ボタン</div>
    <a href="javascript:void(0);" class="btn waves-effect waves-light">Contact</a>
    </div>
    <div class="col s12 m4 text-center" style="height:100px;">
    <div class="text-s mart10" style="padding-bottom:27px;">ボタン(small)</div>
    <a href="javascript:void(0);" class="btn waves-effect waves-light btn-small">詳しくはこちら</a>
    </div>
    </div>
    
    <br>
    
    <div class="row">
	<div class="col s12 m4 text-center" style="height:100px;">
    <div class="text-s mart10" style="padding-bottom:10px;">フラットボタン(large)</div>
    <a href="javascript:void(0);" class="btn-flat waves-effect waves-teal btn-large">Attention</a>
    </div>
    <div class="col s12 m4 text-center" style="height:100px;">
    <div class="text-s mart10" style="padding-bottom:20px;">フラットボタン</div>
    <a href="javascript:void(0);" class="btn-flat waves-effect waves-teal">Contact</a>
    </div>
    <div class="col s12 m4 text-center" style="height:100px;">
    <div class="text-s mart10" style="padding-bottom:27px;">フラットボタン(small)</div>
    <a href="javascript:void(0);" class="btn-flat waves-effect waves-teal btn-small">詳しくはこちら</a>
    </div>
    </div>


</section>

<!-- js-dropdown"-->				
<section class="section-topspace">
	<div id="js-dropdown" class="scrollspy plus-minus"><h2>Dropdown <span class="text-m grey-text marl10">[ ドロップダウン ]</span></h2></div>
    <p>動きのあるマテリアルデザインのドロップダウンメニューです。</p>

    <div class="ml50-screen-only">
    
    <ul id="dropdown" class="dropdown-content">
    	<li><a href="javascript:void(0);">リンク</a></li>
        <li><a href="javascript:void(0);">リンク</a></li>  
        <li><a href="javascript:void(0);">リンク</a></li>              
    </ul>      
	<a class="btn dropdown-button waves-effect" href="javascript:void(0);" data-activates="dropdown">Dropdown<i class="fa fa-caret-down icon-right"></i></a>
    
    </div>
  
</section>

<!-- js-modal -->				
<section class="section-topspace">
	<div id="js-modal" class="scrollspy plus-minus"><h2>Modal <span class="text-m grey-text marl10">[ モーダルウィンドウ ]</span></h2></div>
    <p>デザイン性のある子ウィンドウをモーダル表示できます。</p>

    <div class="ml50-screen-only">
    	
        <aside>
        
		<a class="waves-effect waves-light btn modal-trigger" href="#modal-name">重要なお知らせ</a>

		<div id="modal-name" class="modal">
    	<div class="modal-content">
    	<h2>重要なお知らせ</h2>
    	<h3 class="plain">サービス停止のお知らせ</h3>
		<p>2015/5/2はサーバメンテンナンスのためサービスが停止する時間帯があります。ご不便をお掛け致しますが、ご理解賜りますようお願い申し上げます。</p>
    	</div>
    	<div class="modal-footer">
     	<a href="#" class="waves-effect waves-green btn modal-action modal-close">確認</a>
    	</div>
		</div>
        
        </aside>
    
    </div>


</section>

<!-- js-tooltip-->				
<section class="section-topspace">
	<div id="js-tooltip" class="scrollspy plus-minus"><h2>Tooltip <span class="text-m grey-text marl10">[ ツールチップ ]</span></h2></div>
    <p>注釈やヒント、コメントなどを表示するのに便利なツールチップです。</p>

    <div class="ml50-screen-only">
        
    <div class="row">
	<div class="col s12">
	<div class="text-s marb10">テキスト</div>
    	<p>
    	ウィリアム・シェイクスピアは
        <span class="tooltipped text" data-position="top" data-delay="50" data-tooltip="『ハムレット』、『マクベス』、『オセロ』、『リア王』">四大悲劇</span>
        で人間の実存的な葛藤を力強く描き出した。
    	</p>
	</div>
    </div>
    <div class="row">
	<div class="col s12">
	<div class="text-s marb10">ボタン</div>
		<span class="tooltipped btn" data-position="right" data-delay="50" data-tooltip="創作イタリアンレシピ"><a href="javascript:void(0);">レシピ</a></span>
	</div>
	</div>
    
    <br>
    
    <div class="row">
	<div class="col s6 l5">
	<div class="text-s marb20">イメージ</div>
		<span class="tooltipped image" data-position="bottom" data-delay="50" data-tooltip="2015.12.2"><img src="https://dolcevivace.com/demo/esperanza/wp-content/uploads/2015/04/accessories-519693_1280-300x200.jpg" alt="image1"></span>
	</div>
	<div class="col s6 l7">
	<div class="text-s marb10">フォト</div>
		<span class="tooltipped photo" data-position="left" data-delay="50" data-tooltip="Photo by YUKI"><a href="javascript:void(0);"><img src="https://dolcevivace.com/demo/esperanza/wp-content/uploads/2015/04/accessories-519693_1280-300x200.jpg" alt="image1"></a></span>
	</div>
	</div>
    
    </div>
    
</section>


<!-- js-accordion -->				
<section class="section-topspace">
	<div id="js-accordion" class="scrollspy plus-minus"><h2>Accordion <span class="text-m grey-text marl10">[ アコーディオン ]</span></h2></div>
    <p>開閉できるアコーディオンでコンテンツを見やすく表示できます。</p>
    
    <div class="mlr50-screen-only">
    
    <ul class="collapsible" data-collapsible="accordion">
    <li>
      <div class="collapsible-header active">フレデリック・ショパン　<span class="text-s grey-text marl10">Fryderyk Franciszek Chopin</span></div>
      <div class="collapsible-body"><p>フレデリック・フランソワ・ショパンは、ポーランドの前期ロマン派音楽を代表する作曲家である。当時のヨーロッパにおいてもピアニストとして、また作曲家として有名であった。その作曲のほとんどをピアノ独奏曲が占め、ピアノの詩人とも呼ばれるように、様々な形式、美しい旋律、半音階的和声法などによってピアノの表現様式を拡大し、ピアノ音楽の新しい地平を切り開いた。ノクターンやワルツなど、今日でも彼の作曲したピアノ曲はクラシック音楽ファン以外にもよく知られており、ピアノの演奏会において取り上げられることが最も多い作曲家の一人でもある。また、強いポーランドへの愛国心からフランスの作曲家としての側面が強調されることは少ないが、父の出身地で主要な活躍地であった同国の音楽史に占める重要性も無視できない。<cite>（出典：<a href="http://ja.wikipedia.org/wiki/%E3%83%95%E3%83%AC%E3%83%87%E3%83%AA%E3%83%83%E3%82%AF%E3%83%BB%E3%82%B7%E3%83%A7%E3%83%91%E3%83%B3" rel="nofollow">ウィキペディア</a>）</cite></p>
      </div>
    </li>
    <li>
      <div class="collapsible-header">フランツ・リスト　<span class="text-s grey-text marl10">Franz Liszt</span></div>
      <div class="collapsible-body"><p>フランツ・リストは、ハンガリーに生まれ、ドイツやオーストリアなどヨーロッパ各国で活躍したピアニスト・作曲家。両親の血統、母語、もっとも長い活躍地のいずれもドイツに属し、当時中東欧に多数存在したドイツ植民の一人だが、自身生地のハンガリー（当時はオーストリア支配下の形式的独立国としてのハンガリー王国の版図内、現在はオーストリアに帰属している）を祖国と呼び、死後もドイツ人（オーストリア人）よりはハンガリー人と記載されることが多い。ただし、こうした出自や、生涯ハンガリー語を習得することがなかったこともあり、非音楽大国系の民族運動としての国民楽派に含めることは殆どなく、多くはドイツロマン派の中に位置づけられる。<cite>（出典：<a href="http://ja.wikipedia.org/wiki/%E3%83%95%E3%83%A9%E3%83%B3%E3%83%84%E3%83%BB%E3%83%AA%E3%82%B9%E3%83%88" rel="nofollow">ウィキペディア</a>）</cite></p>
      </div>
    </li>
    <li>
      <div class="collapsible-header">アルトゥール・ルービンシュタイン　<span class="text-s grey-text marl10">Arthur Rubinstein</span></div>
      <div class="collapsible-body"><p>アルトゥール・ルービンシュタインは、ポーランド出身のピアニスト。様々な作曲家の作品の演奏で国際的な名声を博し、特にショパンの演奏では同時代の最も優れたピアニストであるとみなされている。また、20世紀の代表的なピアニストの1人である。ルービンシュタインの演奏家としてのキャリアは80年にも及んだ。前半生はヨーロッパで、後半生はアメリカ合衆国で活躍した。ショパン以外では、ブラームスやスペインのピアノ音楽も得意とした。<cite>（出典：<a href="http://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%AB%E3%83%88%E3%82%A5%E3%83%BC%E3%83%AB%E3%83%BB%E3%83%AB%E3%83%BC%E3%83%93%E3%83%B3%E3%82%B7%E3%83%A5%E3%82%BF%E3%82%A4%E3%83%B3" rel="nofollow">ウィキペディア</a>）</cite></p>
      </div>
    </li>
	</ul>
    
	</div>
                
</section>


<!-- js-progress -->				
<section class="section-topspace">
	<div id="js-progress" class="scrollspy plus-minus"><h2>Progress bars <span class="text-m grey-text marl10">[ プログレスバー ]</span></h2></div>
    <p>進捗状態などを表すプログレスバーを表示できます。</p>
    <br>
    
    <div class="mlr50-screen-only">
    
    <div class="progress">
  　<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%;">
    <span class="sr-only">20%</span>
  　</div>
　　</div>
  
　　<div class="progress">
  　<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%;">
    60%
  　</div>
　　</div>

	</div>
	
</section>


<!-- js-qrcode -->				
<section class="section-topspace">
	<div id="js-qrcode" class="scrollspy plus-minus"><h2>QR Code <span class="text-m grey-text marl10">[ QRコード ]</span></h2></div>
	<p>便利なQRコードもプラグインを使わずに簡単に設置することができます。</p>
    <div class="ml50-screen-only">
	<div class="row  mart20">  
 
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https://dolcevivace.com/&choe=UTF-8 " alt="QR Code"/>
   
	</div>
    </div>

</section>


<!-- js-tabs -->				
<section class="section-topspace">
	<div id="js-tabs" class="scrollspy plus-minus"><h2>Tabs <span class="text-m grey-text marl10">[ タブ ]</span></h2></div>
    <p>ページ遷移なく同一ページ内でコンテンツを切り替えることができます。</p>
    <div class="mlr50-screen-only">
    
    <aside>

  　<div class="row">
      <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3"><a class="active" href="#tab-name1">ハムレット</a></li>
        <li class="tab col s3"><a href="#tab-name2">マクベス</a></li>
        <li class="tab col s3"><a href="#tab-name3">オセロ</a></li>
        <li class="tab col s3"><a href="#tab-name4">リア王</a></li>
      </ul>
      </div>
      <div id="tab-name1" class="col s12">
      <h3>あらすじ</h3>
      <p>デンマーク王が急死する。王の弟クローディアスは王妃と結婚し、跡を継いでデンマーク王の座に就く。父王の死と母の早い再婚とで憂いに沈む王子ハムレットは、従臣から父の亡霊が夜な夜な城壁に現れるという話を聞き、自らも確かめる。亡霊に会ったハムレットは、実は父の死はクローディアスによる毒殺だったと告げられる。</p>
	  <p>復讐を誓ったハムレットは狂気を装う。王と王妃はその変貌ぶりに憂慮するが、宰相ポローニアスは、その原因を娘オフィーリアへの実らぬ恋ゆえだと察する。父の命令で探りを入れるオフィーリアを、ハムレットは無下に扱う。やがて、王が父を暗殺したという確かな証拠を掴んだハムレットだが、母である王妃と会話しているところを隠れて盗み聞きしていたポローニアスを、王と誤って刺殺してしまう。オフィーリアは度重なる悲しみのあまり狂い、やがて溺死する。ポローニアスの息子レアティーズは、父と妹の仇をとろうと怒りを燃やす。</p>
	  <p>ハムレットの存在に危険を感じた王はレアティーズと結託し、毒剣と毒入りの酒を用意して、ハムレットを剣術試合に招き、秘かに殺そうとする。しかし試合のさなか、王妃が毒入りとは知らずに酒を飲んで死に、ハムレットとレアティーズ両者とも試合中に毒剣で傷を負う。死にゆくレアティーズから真相を聞かされたハムレットは、王を殺して復讐を果たした後、事の顛末を語り伝えてくれるよう親友ホレイショーに言い残し、死んでいく。</p>
      </div>
      <div id="tab-name2" class="col s12">
      <h3>第1幕</h3>
      <p>3人の魔女の乱舞から始まる。「きれいは汚い、汚いはきれい」などという不可思議なせりふが劇の展開を暗示する。次いでスコットランド軍対反乱軍とノルウェー軍の戦場にて、スコットランド大勝利の報告を受ける国王ダンカン。戦果をあげたスコットランドの将軍にしてグラミスの領主マクベスは、 バンクォーと陣営に戻る途中、荒野で3人の魔女に出会う。魔女達はマクベスに対し「万歳、コーダーの領主」「万歳、いずれ王になるお方」と呼びかけ、バンクォーには「王にはなれないが、子孫が王になる」と予言し消える。そこへダンカン王の使者が現われ、マクベスが武勲により新しくコーダーの領主に任ぜられたと伝える。魔女の言葉通りとなったことに2人は驚き、マクベスは王になるという予言にも秘かに希望を膨らませる。</p>
      <p>フォレスの城に帰還したマクベス達をダンカン王が迎える。ダンカン王は両将の功績を讃えつつ、息子のマルカム王子を王位継承者に定める。予言の実現を危ぶんだマクベスはある決心をする。</p>
      <p>マクベスから事の顛末を記した手紙を受け取り、マクベス夫人は興奮する。夫を国王の座につけるべく、王の一行より一足先に城に戻ったマクベスと共にダンカン王暗殺の計画を企てる。一度は決意したものの、内心では罪悪感を覚えて及び腰になるマクベスを叱咤し奮い立たせるマクベス夫人。やがてダンカン王の一行が城に到着し、宴会が始まる。</p>
      </div>
      <div id="tab-name3" class="col s12">
      <h3>あらすじ</h3>
      <p>ヴェニスの軍人でムーア人であるオセロは、デズデモーナと愛し合い、デズデモーナの父ブラバンショーの反対を押し切って駆け落ちする。オセロを嫌っている旗手イアーゴーは、自分をさしおいて昇進した同輩キャシオーがデズデモーナと密通していると、オセロに讒言する。嘘の真実味を増すために、イアーゴーは、オセロがデズデモーナに送ったハンカチを盗み、キャシオーの部屋に置く。</p>
      <p>イアーゴーの作り事を信じてしまったオセロは嫉妬に苦しみ怒り、イアーゴーにキャシオーを殺すように命じ、自らはデズデモーナを殺してしまう。だが、イアーゴーの妻のエミリアは、ハンカチを盗んだのは夫であることを告白し、イアーゴーはエミリアを刺し殺して逃げる。イアーゴーは捕らえられるが、オセロはデズデモーナに口づけをしながら自殺をする。</p>
      </div>
      <div id="tab-name4" class="col s12">
      <h3>あらすじ</h3>
      <p>ブリテンの王であるリアは、高齢のため退位するにあたり、国を3人の娘に分割し与えることにした。長女ゴネリルと次女リーガンは言葉巧みに父王を喜ばせるが、末娘コーディリアの率直な物言いに、立腹したリアはコーディリアを勘当し、コーディリアをかばったケント伯も追放される。コーディリアは勘当された身でフランス王妃となり、ケントは風貌を変えてリアに再び仕える。</p>
      <p>リアは先の約束通り、2人の娘ゴネリルとリーガンを頼るが、裏切られて荒野をさまようことになり、次第に狂気にとりつかれていく。リアを助けるため、コーディリアはフランス軍とともにドーバーに上陸、父との再会を果たす。だがフランス軍は敗れ、リアとコーディリアは捕虜となる。ケントらの尽力でリアは助け出されるが、コーディリアは獄中で殺されており、娘の遺体を抱いて現れたリアは悲しみに絶叫し世を去る。</p>
      </div>
　  </div>

    </aside>

	</div>



</section>

<!-- 追加ショートコード -->
<!-- 2カラム【 レイアウト：2カラム 】 -->
<section class="section">
	<div id="js-2col" class="scrollspy plus-minus clearfix"><h2> 2カラム<span class="text-m grey-text marl10">【 レイアウト：2カラム 】</span> </h2></div>

    <p>記事内のお好きな位置に2カラムレイアウトのボックスを設置することができます。<br>
<span class="text-s grey-text">
* 範囲を分かりやすくするためにグレーの点線の枠を設けていますが、実際にショートコードをご利用頂く際には枠は表示されません。<br> 
* レスポンシブデザインに対応しており、PCでは2カラム、スマホ/タブレットでは1カラムになります。</span></p>
   
    
    <div class="mlr50-screen-only">
    
    <div class="row">
	<div class="col s12 l6">
    
	<div style="border:#CCC dashed 1px; text-align:center; padding:40px 20px 0;">
    <img loading="lazy" src="https://dolcevivace.com/wp/wp-content/uploads/2016/07/sample1.jpg" width="200" height="200" style="border-radius: 150px;-moz-border-image: border-radius: 150px;-webkit-border-image: border-radius: 150px;">
	<p class="mart10 grey-text">左カラム</p>
    </div>
    
	</div>
	<div class="col s12 l6">
	
    <div style="border:#CCC dashed 1px; text-align:center; padding:40px 20px 0;">
    <img loading="lazy" src="https://dolcevivace.com/wp/wp-content/uploads/2016/07/sample2.jpg" width="200" height="200" style="border-radius: 150px;-moz-border-image: border-radius: 150px;-webkit-border-image: border-radius: 150px;">
	<p class="mart10 grey-text">右カラム</p>
    </div>
    
	</div>
	</div>

	</div>
<br>
  
</section>
<br>
<!-- -->



<!-- 3カラム【 レイアウト：3カラム 】 -->
<section class="section">
	<div id="js-3col" class="scrollspy plus-minus"><h2>3カラム<span class="text-m grey-text marl10">【 レイアウト：3カラム 】</span> </h2></div>

    <p>記事内のお好きな位置に3カラムレイアウトのボックスを設置することができます。<br>
<span class="text-s grey-text">
* 範囲を分かりやすくするためにグレーの点線の枠を設けていますが、実際にショートコードをご利用頂く際には枠は表示されません。<br> 
* レスポンシブデザインに対応しており、PCでは3カラム、スマホ/タブレットでは1カラムになります。</span></p>
   
    
    <div class="mlr50-screen-only">
    
    <div class="row">
	<div class="col s12 l4">
    
	<div style="border:#CCC dashed 1px; text-align:center; padding:40px 20px 0;">
    <img loading="lazy" src="https://dolcevivace.com/wp/wp-content/uploads/2016/07/sample3.jpg" width="200" height="200">
	<p class="mart10 grey-text">左カラム</p>
    </div>
    
	</div>
	<div class="col s12 l4">
	
    <div style="border:#CCC dashed 1px; text-align:center; padding:40px 20px 0;">
    <img loading="lazy" src="https://dolcevivace.com/wp/wp-content/uploads/2016/07/sample4.jpg" width="200" height="200">
	<p class="mart10 grey-text">中央カラム</p>
    </div>
    
	</div>
    <div class="col s12 l4">
	
    <div style="border:#CCC dashed 1px; text-align:center; padding:40px 20px 0;">
    <img loading="lazy" src="https://dolcevivace.com/wp/wp-content/uploads/2016/07/sample5.jpg" width="200" height="200">
	<p class="mart10 grey-text">右カラム</p>
    </div>
    
	</div>
	</div>

	</div>
    
  <br>

</section>
 <br>
<!-- -->


<!-- 4カラム【 レイアウト：4カラム 】 -->
<section class="section">
	<div id="js-4col" class="scrollspy plus-minus"><h2>4カラム<span class="text-m grey-text marl10">【 レイアウト：4カラム 】</span> </h2></div>

    <p>記事内のお好きな位置に4カラムレイアウトのボックスを設置することができます。<br>
<span class="text-s grey-text">
* 範囲を分かりやすくするためにグレーの点線の枠を設けていますが、実際にショートコードをご利用頂く際には枠は表示されません。<br> 
* レスポンシブデザインに対応しており、PCでは4カラム、スマホ/タブレットでは2カラムになります。</span></p>
   
    
    <div class="mlr50-screen-only">
    
    <div class="row">
	<div class="col s6 l3">
    
	<div style="border:#CCC dashed 1px; text-align:center; padding:40px 20px 0;">
    <img src="https://dolcevivace.com/wp/wp-content/uploads/2016/07/church-300x200.jpg">
	<p class="mart10 grey-text">最左カラム</p>
    </div>
    
	</div>
	<div class="col s6 l3">
	
    <div style="border:#CCC dashed 1px; text-align:center; padding:40px 20px 0;">
    <img src="https://dolcevivace.com/wp/wp-content/uploads/2016/07/IMG_0451-300x200.jpg">
	<p class="mart10 grey-text">中央カラム</p>
    </div>
    
	</div>
    <div class="col s6 l3">
	
    <div style="border:#CCC dashed 1px; text-align:center; padding:40px 20px 0;">
    <img src="https://dolcevivace.com/wp/wp-content/uploads/2016/07/IMG_0345-300x200.jpg">
	<p class="mart10 grey-text">中央カラム</p>
    </div>
    
	</div>
    <div class="col s6 l3">
	
    <div style="border:#CCC dashed 1px; text-align:center; padding:40px 20px 0;">
    <img src="https://dolcevivace.com/wp/wp-content/uploads/2016/07/IMG_0017-300x200.jpg">
	<p class="mart10 grey-text">最右カラム</p>
    </div>
    
	</div>
	</div>

	</div>

  
</section>

<!-- -->
<!-- 追加ショートコード -->

<br>

</article>
]]></content:encoded>
					
					<wfw:commentRss>https://dolcevivace.com/demo/esperanza/demo/style.html/feed</wfw:commentRss>
			<slash:comments>4</slash:comments>
		
		
			</item>
		<item>
		<title>テーマオプションで簡単カスタマイズ</title>
		<link>https://dolcevivace.com/demo/esperanza/demo/theme-option.html</link>
		
		<dc:creator><![CDATA[Dolce]]></dc:creator>
		<pubDate>Tue, 07 Apr 2015 18:00:43 +0000</pubDate>
				<category><![CDATA[Demo]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Theme]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">http://dolcevivace.com/demo/esperanza/?p=359</guid>

					<description><![CDATA[HTMLなどの知識がなくても管理画面にあるテーマオプションで簡単にサイトをカスタマイズして頂けます。 基本的なロゴや画像の設定だけでなく、レイアウトや配色などのデザインカスタマイズも直感的に行うことが可能です。さらに、ツ...]]></description>
										<content:encoded><![CDATA[<p>HTMLなどの知識がなくても管理画面にあるテーマオプションで簡単にサイトをカスタマイズして頂けます。</p>
<span id="more-359"></span>

<div class="text-center">
<a href="https://dolcevivace.com/demo/esperanza2/wp-content/uploads/2015/04/esperanza_3.jpg" class="boxer"><img src="https://dolcevivace.com/demo/esperanza2/wp-content/uploads/2015/04/esperanza_3.jpg" alt="テーマオプション" title="テーマオプション" width="500"></a>
</div><br>

<p>基本的なロゴや画像の設定だけでなく、レイアウトや配色などのデザインカスタマイズも直感的に行うことが可能です。さらに、ツイッターやFacebook等のSNS連携の設定や、11箇所から自由に選べるアフィリエイト広告の設置 / 管理、SEO対策設定、Google Mapsの設定など、通常プラグインなどを利用する必要がある機能をテーマ標準の機能としてご用意しています。</p>

<div class="text-center">
<a href="https://dolcevivace.com/demo/esperanza2/wp-content/uploads/2015/04/esperanza_6.jpg" class="boxer"><img src="https://dolcevivace.com/demo/esperanza2/wp-content/uploads/2015/04/esperanza_6.jpg" alt="テーマオプション2" title="テーマオプション2" width="500"></a>
</div><br>

<p>このデモサイトはテーマの最低限の設定のみを行った状態となっています。<br>
テーマオプションでの配色やレイアウトのカスタマイズ例をご覧になりたい方は、<a href="https://dolcevivace.com/demo/esperanza2/">こちらのデモサイト</a> をご覧下さい。</p>

<p>さらに上級者の方向けに、WordPressの自動整形機能をオフする機能や、別途プラグインなどでショートコードを利用していてテーマ専用ショートコードを使いたくない場合にはオフする機能なども必要に応じてテーマオプションから設定して頂けます。</p>

<p><em>『よくわからない！』『カスタマイズなんかしたくない！』という方も、もちろん初期設定で快適にご利用頂けるのでご安心下さい。</em></p>]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>SEOに最適化されたWordPressテーマ</title>
		<link>https://dolcevivace.com/demo/esperanza/demo/seo.html</link>
		
		<dc:creator><![CDATA[Dolce]]></dc:creator>
		<pubDate>Tue, 07 Apr 2015 17:00:54 +0000</pubDate>
				<category><![CDATA[Demo]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">http://dolcevivace.com/demo/esperanza/?p=356</guid>

					<description><![CDATA[Dolce &#38; VivaceのWordPressテーマはSEOの専門家の監修の下でコーディングされています。 EsperanzaテーマはHTML5+CSS3でのコーディングになっており、Microdata構造化マ...]]></description>
										<content:encoded><![CDATA[<p>Dolce &amp; VivaceのWordPressテーマはSEOの専門家の監修の下でコーディングされています。</p>
<span id="more-356"></span>

<p>EsperanzaテーマはHTML5+CSS3でのコーディングになっており、Microdata構造化マークアップにも対応しています。リッチスペニットに対応したパンくずリストや構造化された記事が書き出される検索エンジンに最適化されたWordPressテーマとなっています。また、meta情報の設定やGoogleAnalyticsのトラッキングコード登録も管理画面のテーマオプションで簡単に行うことができます。</p>

<p>SEO対策で最も重要なのは継続的にサイトを更新して価値のある良質なコンテンツを提供することです。</p>

<p>良質なコンテンツの提供の結果としてそのサイトが広く認知されると自然と被リンクが増大します。検索エンジンもそれを検索結果上位表示の判断基準のひとつにしているため、被リンクの獲得を主な目的とするのがSEO対策における「外部施策」と呼ばれるものです。</p>

<p>また、良質なコンテンツを提供するためには伝達方法も良質であるべきだとされています。情報が雑然と並んでいるサイトよりも、構造化して整頓されたサイトの方が見る人にとってわかりやすくて素晴らしいという考えです。そのためのHTMLタグの選別や構造化などがSEO対策における「内部施策」と呼ばれるものです。</p>

<p>Dolce &amp; VivaceのWordPressテーマは構造化などのSEO内部施策について十分に配慮されたWordPressテーマとなっています。</p>

<p>上記構造化については専用のソフトウェアやGoogleのテストツールなどで十分な検証を行っています。</p>
<div class="text-center">
<a href="https://dolcevivace.com/demo/esperanza/wp-content/uploads/2015/04/esperanza_7.jpg" class="boxer"><img src="https://dolcevivace.com/demo/esperanza/wp-content/uploads/2015/04/esperanza_7.jpg" alt="Google test tool" title="Google test tool" width="500"></a>
</div><br>]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
