<p>前回に引き続きのテーマですが、<br />
今回は方法がちょっと違います。</p>
<p>前回は、背景画像をスライドさせる形でしたが、<br />
今回は、ul,liタグ使い、写真を複数置いたビジュアルをスライドさせた形になります。</p>
<p>それでは、DEMOをご覧下さい。</p>
<p><a href="/demo/abe/24/" target="_blank" class="demo">DEMO</a></p>
<p>margin-leftを使用し、ulをずらしています。<br />
見えなくなった先頭の要素を一番後ろに入れて、、<br />
というの繰り返して無限ループになるようになってます。</p>
<p>以下、javascritになります。</p>
<p></p>

		<div id="crayon-64953fd584ad2384515221" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$(function(){
	setInterval("photoslide()", 50);	
});

var current = 0;
function photoslide(){
	current -= 1;
	//先頭の写真が見えなくなった時の処理
	if(current == -400){
		var copy = $(".slide ul li:first").clone();
		$(".slide ul li:first").remove();
		$(".slide ul").append(copy);
		current = 0;
		
	};
	
	$('.slide ul').css("margin-left", current+"px");	
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-2">2</div><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-4">4</div><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-6">6</div><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-8">8</div><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-10">10</div><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-12">12</div><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-14">14</div><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-16">16</div><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-18">18</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd584ad2384515221-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-2"><span class="crayon-h">	</span><span class="crayon-r">setInterval</span><span class="crayon-sy">(</span><span class="crayon-s">"photoslide()"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">50</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h">	</span></div><div class="crayon-line" id="crayon-64953fd584ad2384515221-3"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-4">&nbsp;</div><div class="crayon-line" id="crayon-64953fd584ad2384515221-5"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">current</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-6"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">photoslide</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd584ad2384515221-7"><span class="crayon-h">	</span><span class="crayon-i">current</span><span class="crayon-h"> </span>-=<span class="crayon-h"> </span><span class="crayon-cn">1</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-8"><span class="crayon-h">	</span><span class="crayon-c">//先頭の写真が見えなくなった時の処理</span></div><div class="crayon-line" id="crayon-64953fd584ad2384515221-9"><span class="crayon-h">	</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-i">current</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span>-<span class="crayon-cn">400</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-10"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">copy</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">".slide ul li:first"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">clone</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd584ad2384515221-11"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">".slide ul li:first"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">remove</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-12"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">".slide ul"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">append</span><span class="crayon-sy">(</span><span class="crayon-i">copy</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd584ad2384515221-13"><span class="crayon-h">		</span><span class="crayon-i">current</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-14"><span class="crayon-h">		</span></div><div class="crayon-line" id="crayon-64953fd584ad2384515221-15"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-16"><span class="crayon-h">	</span></div><div class="crayon-line" id="crayon-64953fd584ad2384515221-17"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.slide ul'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">css</span><span class="crayon-sy">(</span><span class="crayon-s">"margin-left"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">current</span>+<span class="crayon-s">"px"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h">	</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-18"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>HTML</p>
<p></p>

		<div id="crayon-64953fd584ad6195428807" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;div class="slide"&gt;
            	&lt;ul&gt;
                	&lt;li&gt;&lt;img src="images/sample1.jpg"&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;img src="images/sample2.jpg"&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;img src="images/sample3.jpg"&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;img src="images/sample4.jpg"&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd584ad6195428807-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad6195428807-2">2</div><div class="crayon-num" data-line="crayon-64953fd584ad6195428807-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad6195428807-4">4</div><div class="crayon-num" data-line="crayon-64953fd584ad6195428807-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad6195428807-6">6</div><div class="crayon-num" data-line="crayon-64953fd584ad6195428807-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad6195428807-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd584ad6195428807-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"slide"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad6195428807-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	</span><span class="crayon-r ">&lt;ul&gt;</span></div><div class="crayon-line" id="crayon-64953fd584ad6195428807-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"images/sample1.jpg"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad6195428807-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"images/sample2.jpg"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64953fd584ad6195428807-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"images/sample3.jpg"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad6195428807-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"images/sample4.jpg"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64953fd584ad6195428807-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/ul&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad6195428807-8"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>しかし、これは汎用性があるとはいえません。。。。<br />
画像のサイズは指定しなければいけないですし、<br />
画像の横幅も均一にしなければいけません。。。</p>
<p>横幅もバラバラの場合を都合上作ることができませんでした。</p>
<p>うーん、悔しい。</p>

メインビジュアルを自動でゆっくりスライドさせて流す方法②

メインビジュアルを自動でゆっくりスライドさせて流す方法①

<p>最近の若い人達では、縦書ではなく、横書が主になっているようで、<br />
年賀状や、結婚式の受付の記帳なども横書きになっていたりするとか。。。<br />
なんでも縦書だとバランスが取れなくて、バラバラになってしまうです。</p>
<p>そんなこんなで、縦書の美しさを普及するために(特に縦書が好きってわけではないですがww)、<br />
今回は、テキストを自動的に縦書にしてくれるjavascriptのプラグインを紹介したいと思います。</p>
<p>その名も<strong>「竹取.js」</strong>というものです。</p>
<p>プラグインのサイトは以下のURLです。</p>
<p><a href="http://taketori.org/js.html" target="_blank">竹取 JS</a></p>
<p>簡単なデモサイトを作ってみましたので、<br />
よろしければご覧ください。</p>
<p><a href="/demo/abe/22/" class="demo" target="_blank">DEMO</a><br />
(chromeでご覧ください。)</p>
<p>使い方はシンプルで簡単なんですが、<br />
レイアウトが難しい感じでした。<br />
横と縦の捉え方がこんがらがって混乱しながら作っていました・・・笑</p>
<h2>竹取.jsの使い方</h3>
<p>まずは、ダウンロードしたファイルを読み込みます。</p>
<p></p>

		<div id="crayon-64953fd581da7044631577" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;link rel="stylesheet" href="css/taketori.css" &gt;
&lt;script src="js/taketori.js"&gt;&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd581da7044631577-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581da7044631577-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd581da7044631577-1"><span class="crayon-r ">&lt;link </span><span class="crayon-e ">rel</span>=<span class="crayon-s ">"stylesheet"</span><span class="crayon-h"> </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"css/taketori.css"</span><span class="crayon-r "> &gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581da7044631577-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/taketori.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>あとは、</p>

		<div id="crayon-64953fd581dac313463174" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;script type="text/javascript"&gt;
//&lt;![CDATA[
//(new Taketori()).set({設定項目:'値',設定項目:'値'}).element('縦書き対象要素ID').toVertical(画面の読み込み待ちをするかどうか);
//DEMOは以下のように設定しました
(new Taketori()).set({fontFamily:'serif',height:'auto'}).element('msg','nav','logo').toVertical();
//]]&gt;
&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd581dac313463174-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581dac313463174-2">2</div><div class="crayon-num" data-line="crayon-64953fd581dac313463174-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581dac313463174-4">4</div><div class="crayon-num" data-line="crayon-64953fd581dac313463174-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581dac313463174-6">6</div><div class="crayon-num" data-line="crayon-64953fd581dac313463174-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd581dac313463174-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581dac313463174-2"><span class="crayon-c">//&lt;![CDATA[</span></div><div class="crayon-line" id="crayon-64953fd581dac313463174-3"><span class="crayon-c">//(new Taketori()).set({設定項目:'値',設定項目:'値'}).element('縦書き対象要素ID').toVertical(画面の読み込み待ちをするかどうか);</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581dac313463174-4"><span class="crayon-c">//DEMOは以下のように設定しました</span></div><div class="crayon-line" id="crayon-64953fd581dac313463174-5"><span class="crayon-sy">(</span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Taketori</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">set</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-i">fontFamily</span><span class="crayon-sy">:</span><span class="crayon-s">'serif'</span><span class="crayon-sy">,</span><span class="crayon-i">height</span><span class="crayon-sy">:</span><span class="crayon-s">'auto'</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">element</span><span class="crayon-sy">(</span><span class="crayon-s">'msg'</span><span class="crayon-sy">,</span><span class="crayon-s">'nav'</span><span class="crayon-sy">,</span><span class="crayon-s">'logo'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">toVertical</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581dac313463174-6"><span class="crayon-c">//]]&gt;</span></div><div class="crayon-line" id="crayon-64953fd581dac313463174-7"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>とすればOK!</p>
<p>エレメントを複数指定できるようです。<br />
設定がいろいろありますが、全部把握できておりません。。。</p>
<p>設定は、サイトをご覧下さい。</p>
<p><a href="http://taketori.org/js.html" target="_blank">竹取 JS</a></p>
<p>縦と横との切り替えを簡単に設定できたりするようです。</p>
<p>縦書は和風のようなデザインに適していると思います。<br />
他にも小説のようなテイストにもできますし、<br />
使うシーンはいろいろありそうですね！</p>

Blogブログ

Articles

Contact Us