<p class="thumb"><img src="http://web-marketing.zako.org/images/2010/03/stiqr.jpg" alt="" title="サイトのデザインを、カンタンにカッコよく出来るjQueryプラグイン" width="514" height="204" class="alignleft size-full wp-image-13609" /></p>
<p>ブログやサイトのデザインで、画像が横にはみ出しているとカッコよく感じたりすること、ありますよね。</p>
<p>しかし、それを実現するには割と高度なCSSの知識が必要になってきます。</p>
<p>今回は、それをカンタンに実現できてしまう機能を実装出来るjQueryプラグインをご紹介。</p>
<!--more-->
<p>「<a class='web-site-link' href="http://www.stiqr.com/start" onclick="window.open('http://www.stiqr.com/start'); return false;">stiqr</a>」は、<strong>HTMLサイトだけでなく、WordPressやBlogger、Tumblrを、カンタンにWYSIWYGサイトエディターで編集出来るようにしてしまうjQueryプラグイン。</strong></p>
<p>２行のコードをテンプレートに追加し、アカウントを設定するだけで利用可能になってしまいます。</p>
<h4 class='tips'>ビフォーアフター</h4>
<p class="picture2"><img src="http://web-marketing.zako.org/images/2010/03/stiqr1.png" alt="" title="stiqr1" width="522" height="239" class="alignleft size-full wp-image-13612" /><br />↑このようなデザイン変更を、ページを開いた状態でカンタンにおこなうことができます。</p>
<ul><li>→ <a href="http://web-marketing.zako.org/test/stiqr.html" target="_blank">サンプルページはこちら</a></li></ul>
<h4 class='tips'>ページ上にエディターを設置</h4>
<p><img src="http://web-marketing.zako.org/images/2010/03/stiqr8.png" alt="" title="stiqr8" width="400" height="54" class="alignleft size-full wp-image-13619" /><br />↑2行程度のコードをブログやサイトのテンプレートに追加するだけで、ページ上に、ショートカットキーで開くサイトデザインのエディターを付けることができます。</p>
<p class="picture"><img src="http://web-marketing.zako.org/images/2010/03/stiqr9.png" alt="" title="stiqr9" width="400" height="329" class="alignleft size-full wp-image-13621" /> ↑メニューから画像やテキスト、シェイプなどの追加がおこなえます。</p>
<p class="picture"><img src="http://web-marketing.zako.org/images/2010/03/stiqr7.png" alt="" title="stiqr7" width="399" height="344" class="alignleft size-full wp-image-13622" /> ↑追加した画像を、右クリックメニューで編集することも可能。</p>
<p class="picture"><img src="http://web-marketing.zako.org/images/2010/03/stiqr6.png" alt="" title="stiqr6" width="400" height="480" class="alignleft size-full wp-image-13623" /> ↑より詳細にCSSの設定もできるようになっています。リンク先の設定も可能。</p>
<h4 class='tips'>エディターの設置方法</h4>
<p>まず、下記のコードをサイトテンプレートの <b>&lt;/body&gt; タグの直前</b>に追加します。WordPressやBlogger、Tumblrをお使いの方は<a class='web-site-link' href="http://www.stiqr.com/start" onclick="window.open('http://www.stiqr.com/start'); return false;">こちらのページ</a>でコードを取得してください。</p>
<textarea name="code" class="js" id="code">
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script language="javascript" src="http://www.stiqr.com/sticker/api"></script>
</textarea>
<p>設置したあとに、ページを開いて、 Shift ＋ F2 を押します。するとメールアドレスとパスワードの設定を求められるので、それぞれ設定します。<br /><img src="http://web-marketing.zako.org/images/2010/03/stiqr2.png" alt="" title="stiqr2" width="400" height="186" class="alignleft size-full wp-image-13624" /></p>
<p>設定が完了すると、下記画像のようなダイアログボックスが開くので、OKを押します。<br /><img src="http://web-marketing.zako.org/images/2010/03/stiqr5.png" alt="" title="stiqr5" width="400" height="102" class="alignleft size-full wp-image-13626" /></p>
<p>Shift + F2を押して、パスワードを入力し、「OK」を押すと、エディターが起動します。<br /><img src="http://web-marketing.zako.org/images/2010/03/stiqr4.png" alt="" title="stiqr4" width="400" height="188" class="alignleft size-full wp-image-13627" /></p>
<p>興味のある方は<a class='web-site-link' href="http://www.stiqr.com/" onclick="window.open('http://www.stiqr.com/'); return false;">stiqr</a>へどうぞ。</p>
<p>だんだんと、サイトのデザインをカンタンにする技術が進化してきていますよね。それでもまだまだ難しく感じる人は多いのも事実。今後もっと便利なものが出てくることにも期待したいところです。</p><p>Via：<a class='web-site-link' href="http://delicious.com/url/523ab1e0183804a118f7bd191a704621" onclick="window.open('http://delicious.com/url/523ab1e0183804a118f7bd191a704621'); return false;">delicious</a></p>