tag:blogger.com,1999:blog-14010683955304476642024-03-20T15:27:12.612+09:00MadewithMuse - Adobe MuseでかんたんWEB制作ブログAdobe Museに関する豆知識、使い方、小技、無料テンプレート・ウィジェットなどをご紹介するブログです。誰でも簡単にWEBサイトが作れるこの優れたソフトを普及させるため日夜努力して参ります。
【Muse総合情報サイト】
http://www.madewithmuse.net/MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comBlogger42125tag:blogger.com,1999:blog-1401068395530447664.post-10808869412941223822016-11-27T22:45:00.001+09:002021-10-08T15:47:22.210+09:00最大50%OFF!Adobe Museで使えるテンプレートなどの便利素材が大セール中!<br />
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><div><a href="https://tateyomi.fun/" target="_blank">おすすめマンガをご紹介!</a></div><div><br /></div><div>
こんにちは!</div>
<div>
<br /></div>
<div>
今現在アメリカではBlack Fridayというセール期間が始まって全米各地で大セールが行われています!Black Fridayはもう終わっているようですが、Cyber Mondayというこれまら大規模なセールが全米各地で行われるようです!!</div>
<div>
<br /></div>
<div>
そして、Museユーザーの方に朗報です!</div>
<div>
当ブログでも何ども取り上げてきたMuseの素材なども販売しているenvato marketさんでも最大50%OFFのセールが行われております!!</div>
<div>
<br /></div>
<div>
もちろんMuseだけでなくイラレやフォトショの素材もセール対象!!</div>
<div>
この機会にちょと見てみて頂いて便利な素材をGETしてみてくださいね。</div>
<div>
<br /></div>
<div>
envatoさんセールページは以下の画像をクリック!</div>
<div>
<br /></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://go.themeforest.net/cybermonday/?ref=madewithmuse" target="_blank"><img alt="" border="0" height="365" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYyNvFL1uEJyK7ro6ARgiHcvtOk-qUxzgBG9CRmPQJKOoMxp76RufY6uKD-XF-on8GP-AiFz4fvmOiIiFW5eIjChO5qbuIB42-nqlMKIvkomZzQh-WXfsqje0eSyyr1AFROoC-TbMeQMPf/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-11-27+22.29.57.png" title="" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://go.themeforest.net/cybermonday/?ref=madewithmuse" target="_blank">セール会場へ行く</a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
セール終了はアメリカ時間の12/1 2PMまでのようです!</div>
<div class="separator" style="clear: both; text-align: left;">
終わる前に急げ〜!</div>
<div>
<br /></div>
MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comtag:blogger.com,1999:blog-1401068395530447664.post-21080358546952594492016-05-05T23:22:00.002+09:002021-10-08T15:47:50.866+09:00Adobe Museで使えるスタイリッシュなレスポンシブ対応テンプレートまとめ<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!--adobe-muse-blog_main_Blog1_300x250_as--><br />
<h2><ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br class="Apple-interchange-newline" /><span style="color: #0000ee; font-size: medium; font-weight: 400; text-decoration-line: underline;"><a href="https://tateyomi.fun/" target="_blank">おすすめマンガをご紹介!</a></span></h2><br />
こんにちは!<br />
<br />
先日待望のレスポンシブ対応が行われたMuseですが、テンプレートの方も続々とレスポンシブ対応が行われています!!<br />
かっこいいテンプレを何個か発見しましたのでご紹介します。<br />
<br />
<h3><b>1.アパレル向けレスポンシブテンプレート BOUTIQUE</b></h3><div>やっぱりね。ファッションやるならこれくらいのレベルのサイトは欲しいところ。</div><div>でも自分にこんなデザインセンスがない!という人は(私も含めて笑)テンプレートに頼ってしまいましょう。</div><div><b><br />
</b></div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNd2dWKJobzkIbE1p8ib_GWYExJRjODuG4Im9bRwb9BNwIMUfh-4_qmPAGacEM6ZyhevC-OKG2GFQTbgGoNVcG-ETa9hXfVGodXkrzmE9DhW9l9Ld-rC78S3ZLhq9hTC5tPFh2p2N_tQbK/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+20.27.08.png"><img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNd2dWKJobzkIbE1p8ib_GWYExJRjODuG4Im9bRwb9BNwIMUfh-4_qmPAGacEM6ZyhevC-OKG2GFQTbgGoNVcG-ETa9hXfVGodXkrzmE9DhW9l9Ld-rC78S3ZLhq9hTC5tPFh2p2N_tQbK/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+20.27.08.png" width="400" /></a><br />
ため息出るほどかっこいい!!<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_oW1fBhUAtKZYMgZXncjscnlQ0an0i9CG3zMWX8VT3NV52Bgiugh4WW7YBpk4UOYtt8A7Ny6hJz5iYnxwpql2O2GNcaYJmRDKI8mQh4mhFUSJE-nAYgTmAkni5tRbCBFVJ9erd5miqGD9/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+20.27.46.png"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_oW1fBhUAtKZYMgZXncjscnlQ0an0i9CG3zMWX8VT3NV52Bgiugh4WW7YBpk4UOYtt8A7Ny6hJz5iYnxwpql2O2GNcaYJmRDKI8mQh4mhFUSJE-nAYgTmAkni5tRbCBFVJ9erd5miqGD9/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+20.27.46.png" /></a><br />
オシャレすぎて鼻血が笑<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWh_gJgGS3KaoQyGOxZABlQcMM_ldd5Bghg0jTcJg3fZi_kkp7Km3pDKZOPqmXGBmcXeinwVNr-wDJYvxGvqgm6DwRCf7iVTH8NnRFqNqtOd-lS1gICpECDRtPEojvW4Iaf8xB-k-RwSpb/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+20.27.18.png"><img border="0" height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWh_gJgGS3KaoQyGOxZABlQcMM_ldd5Bghg0jTcJg3fZi_kkp7Km3pDKZOPqmXGBmcXeinwVNr-wDJYvxGvqgm6DwRCf7iVTH8NnRFqNqtOd-lS1gICpECDRtPEojvW4Iaf8xB-k-RwSpb/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+20.27.18.png" width="400" /></a><br />
<br />
やっぱりアパレルのWEBサイトは洗練されてないとダメですね。かっこよくないと売れるものも売れなくなります。<br />
ECサイトは見せ方が命ですから、サイトも洗練させておけばお客様のブランドへの信頼感も向上し購買に結びつくのではないでしょうか。<br />
ご自身のブランドを立ち上げる時やファションショップを開店する時などにおすすめです。<br />
<br />
<a href="http://themeforest.net/item/boutique-fashion-muse-template/full_screen_preview/15825541?ref=madewithmuse" target="_blank">Boutique - Fashion Muse Templateはこちらから</a><br />
<br />
<h3>2.美容院 ・床屋向けレスポンシブテンプレート Barber</h3><div><br />
</div><div>こちらは海外で言うバーバー、日本で言う床屋さん向けのテンプレート。</div><div>日本の床屋といえば「おじさん向けでなんか古臭い、待ってる間にゴルゴ13を読むところ」というようなイメージですが、そんな時代はもう終わったようです。こんなオシャレなサイトを持ってる床屋さんだったら若者も行きやすいですよね!</div><div>実際最近オシャレ床屋さん増えてるみたいですね。</div><div><br />
</div><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTTrfox0kLqF1CacL2oMmAAu7OQEcvIc3qjUwFcvyDRVSi744S2syuNa9ge7yxlQmP-LJWzFvGMD-Axj59jDiZNa601ADiH-PRxjjA1AJDd9OFYZVy7a2vtC7zwvKBrsQH9i7ytIA2vmtd/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.12.16.png"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTTrfox0kLqF1CacL2oMmAAu7OQEcvIc3qjUwFcvyDRVSi744S2syuNa9ge7yxlQmP-LJWzFvGMD-Axj59jDiZNa601ADiH-PRxjjA1AJDd9OFYZVy7a2vtC7zwvKBrsQH9i7ytIA2vmtd/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.12.16.png" width="400" /></a></div><div>床屋とは思えないほどオシャレ笑</div><div><br />
</div><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0GW3YmWRGkomE9ePMLRUl2oCuJq6HJbtqhkiReHg4-W9lSZMjLnsWDSm5A-7woAHX-xVTaIgWtL-3LPX9QKLCY9DRnI4_j19PlYDUGCNE6huLh0meYAc8Mq2syKJqWPgqgQzYCU3zn7GP/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.12.28.png"><img border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0GW3YmWRGkomE9ePMLRUl2oCuJq6HJbtqhkiReHg4-W9lSZMjLnsWDSm5A-7woAHX-xVTaIgWtL-3LPX9QKLCY9DRnI4_j19PlYDUGCNE6huLh0meYAc8Mq2syKJqWPgqgQzYCU3zn7GP/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.12.28.png" width="400" /></a></div><div>すごい技術を持っていそうに見える洗練されたデザイン</div><div><br />
</div><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBIDvrlnjuLJaLTULAgFbWpP2ADC8Hv8siflAB8HovVcmgoQueDPD9WXlZZ8xGpmerPzYlQhIxXgxebsQBERdvM7weY_j6MaJ900-xnzPX0XZK3fMp-iwf2MEQZm87iunCgtwanMgjqybE/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.12.56.png"><img border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBIDvrlnjuLJaLTULAgFbWpP2ADC8Hv8siflAB8HovVcmgoQueDPD9WXlZZ8xGpmerPzYlQhIxXgxebsQBERdvM7weY_j6MaJ900-xnzPX0XZK3fMp-iwf2MEQZm87iunCgtwanMgjqybE/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.12.56.png" width="400" /></a></div><div>複雑な料金プランもシンプルにまとめてわかりやすく</div><div>日本の美容室や床屋さんてWEBに力を入れているお店が少ないように思いますので、ぜひかっこいいサイトをMuseで簡単に作っていただいて集客アップにつなげていただきたいですね。</div><div><br />
</div><div>え?ホットペッパーに載せてるから自社サイトは必要ないって??</div><div>そんなつれない事言わずにMuseならササッと作れますから作っちゃいましょ。</div><div><br />
</div><div><a href="http://themeforest.net/item/barber-responsive-barber-shop-and-hair-salon-template/full_screen_preview/15600597?ref=madewithmuse" target="_blank"><span style="color: #0000ee;"><u>Barber - Responsive Barber Shop and Hair Salon Templateは</u></span><span style="color: #0000ee; text-decoration: underline;">こちらから</span></a></div><div><br />
</div><span style="font-size: 18.72px; font-weight: bold;">3.マルチに使えるレスポンシブテンプレート Samarth</span><br />
<span style="font-size: 18.72px; font-weight: bold;"><br />
</span> これはどんな業種でも使えるマルチなデザインです。実際とても人気があるようですね。注目したいのがスマホサイトのメニュー部分。メニューが凝ってるサイトって個人的には大好きです笑<br />
<span style="font-size: 18.72px;"><b><br />
</b></span> <span style="font-size: 18.72px; font-weight: bold;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimNqY1yFqgrnZcYSayRmhcg_8xPUQfjoiUNGUzzweExJaiacFg-LnFDZsofho3KTE4c3e-tx9y3x2Q_8K27FckW0mBaA_-MMVdYbtdrxtWIXHIRKwbgOGWs_VH0J1feH5ix-Ec9gQsHiDT/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.20.50.png"><img border="0" height="235" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimNqY1yFqgrnZcYSayRmhcg_8xPUQfjoiUNGUzzweExJaiacFg-LnFDZsofho3KTE4c3e-tx9y3x2Q_8K27FckW0mBaA_-MMVdYbtdrxtWIXHIRKwbgOGWs_VH0J1feH5ix-Ec9gQsHiDT/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.20.50.png" width="400" /></a></span><br />
もはや当たり前のようなオシャレデザイン<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd6gW0eNGV70tDoSZm5IQ_Zzid6ZC-zCoRRX3AQ0Np_9r5iSPoDFHUHlGPjdW9ea4u1PvWsypDleL0LW3uhfCgarbuFj4RBVaD4s-FguWYU3tEaXb8CPrbS9Ivywx7oybNu7paFYbryfuu/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.21.04.png"><img border="0" height="235" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd6gW0eNGV70tDoSZm5IQ_Zzid6ZC-zCoRRX3AQ0Np_9r5iSPoDFHUHlGPjdW9ea4u1PvWsypDleL0LW3uhfCgarbuFj4RBVaD4s-FguWYU3tEaXb8CPrbS9Ivywx7oybNu7paFYbryfuu/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.21.04.png" width="400" /></a><br />
ギャラリー機能もバッチリ<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEApKW-TtW9E8WNWxIivbdIAJII_ZncysMmTn83uBp6tgtCt_UOU3mveZS-HhiiPhxZVRyRvaNrTs0bx1_hpntv0BdWKXkrmaKsGb6S8mDek91yd9vb9rrQRun1eHh0w-UHZXmykGbwOm6/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.21.17.png"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEApKW-TtW9E8WNWxIivbdIAJII_ZncysMmTn83uBp6tgtCt_UOU3mveZS-HhiiPhxZVRyRvaNrTs0bx1_hpntv0BdWKXkrmaKsGb6S8mDek91yd9vb9rrQRun1eHh0w-UHZXmykGbwOm6/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.21.17.png" width="224" /> </a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE6KvPyVxVfBKCKW0ZIOAY4g_0_q3Fkkbdt5J2AXfw5S6qUh6j-r8xs_z-ZddToism7aH0e3uH158xs3tEn5JqPTJYdiHx8vQ_-1Roqpfckc1kcNDs-dOZyfxcsT13k2kjreafPuytRvih/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.21.33.png"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE6KvPyVxVfBKCKW0ZIOAY4g_0_q3Fkkbdt5J2AXfw5S6qUh6j-r8xs_z-ZddToism7aH0e3uH158xs3tEn5JqPTJYdiHx8vQ_-1Roqpfckc1kcNDs-dOZyfxcsT13k2kjreafPuytRvih/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.21.33.png" width="240" /></a><br />
スマホで見るとこんな感じです。右はMENUをクリックした画面。サイドからスルッと全画面メニューが出てきてかっこいい。メニューがかっこいいサイトはなんとなく信用できます笑<br />
<br />
<br />
<div class="p1"><span class="s1"><b><a href="http://themeforest.net/item/samarth-fully-responsive-creative-multipurpose-muse-theme/full_screen_preview/15507392?ref=madewithmuse" target="_blank">Samarth: Fully Responsive Creative Multipurpose Muse Themeはこちら</a></b></span></div><br />
<h3>4.ビジネス向けパララックス&レスポンシブテンプレート Tersus</h3><div><br />
</div>これまで色々ご紹介して来ましたが、これ一個あればもうテンプレート買わなくてもいいんじゃないの??ってくらい充実しています。レスポンシブだけでなく、パララックスにも対応してますし、使いやすいシングルページタイプも収録されていて大活躍間違い無し。どれにしようか迷ったらこれをダウンロードしておけば間違いないでしょう。<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmiFDzPEsGKVbvqptHpF7DVLpVOCSiq-eMhytL3bssxwj2QpNuGRhB_4_-x37XAshtboDLTpresaPj7mRUT5b7kchEh-5wAckKjZtVdLckihJMV-nIwZxkirFNs1kWWb8o5ZtOlQruDf-w/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.31.45.png"><img border="0" height="241" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmiFDzPEsGKVbvqptHpF7DVLpVOCSiq-eMhytL3bssxwj2QpNuGRhB_4_-x37XAshtboDLTpresaPj7mRUT5b7kchEh-5wAckKjZtVdLckihJMV-nIwZxkirFNs1kWWb8o5ZtOlQruDf-w/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.31.45.png" width="400" /></a><br />
一番大事なトップ画面はインパクト大な写真を置いて勝負したい。<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivRdeBX-r1uolnbVf08fLPRo9wOSFqy5oMGqCuh6ONrwxUupbzWkmwTrbJ8DLTiDvMHxnPTvRXkTWHIGwgV5oEhi59qrGwTsdNSBUNdLM-s09Zg4nlAVEyXt1sO3qnQg1H-ihNZ-6tfDrl/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.32.04.png"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim_CWfBd8pNhXRmny18xAeRyDTkzYx2wKSaTpzJPZYITshaUWkhSMVsC_ftaC2snVi4AmxKJM7RwsYouNmU-R73rfEn-EsUMkqUYQhiv-SiL5QSZmnN6qrdsaUIj8TXTh20-neDDRAQEQp/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.32.39.png"><img border="0" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim_CWfBd8pNhXRmny18xAeRyDTkzYx2wKSaTpzJPZYITshaUWkhSMVsC_ftaC2snVi4AmxKJM7RwsYouNmU-R73rfEn-EsUMkqUYQhiv-SiL5QSZmnN6qrdsaUIj8TXTh20-neDDRAQEQp/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.32.39.png" width="400" /></a><br />
海外企業っぽくチーム紹介はいかがでしょうか?<br />
働いている人が見える会社はなぜか安心します。<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxnNnrMBQxFlArI1OboggITWweAyr3sH6X1hvt8qPV9-t0fGop2h8nzWSUsJzzjG-xPHDo8Ffc7MankEr1EYZKI8-FCIhiyUxx3AflDOSxiWPoswZtT9NTZIaiDxZ0SUjUrMhqoOzja8u7/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.32.04.png"><img border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxnNnrMBQxFlArI1OboggITWweAyr3sH6X1hvt8qPV9-t0fGop2h8nzWSUsJzzjG-xPHDo8Ffc7MankEr1EYZKI8-FCIhiyUxx3AflDOSxiWPoswZtT9NTZIaiDxZ0SUjUrMhqoOzja8u7/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.32.04.png" width="400" /></a><br />
プロジェクトポートフォリオもスタイリッシュに。<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHt2-BiAtMfKuvJ9esnNxBeBV48_uVvMbdgsQvM3yA7Yhan1ka3AnIrR2xIq2qayKwnIfdrJKyjue3sVQwF033nF1Td7p0ZDCMnaMcXyfWbg324mSudd8S1eML0HwC4yiApF3mKhHcoma-/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.31.04.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHt2-BiAtMfKuvJ9esnNxBeBV48_uVvMbdgsQvM3yA7Yhan1ka3AnIrR2xIq2qayKwnIfdrJKyjue3sVQwF033nF1Td7p0ZDCMnaMcXyfWbg324mSudd8S1eML0HwC4yiApF3mKhHcoma-/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.31.04.png" width="218" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHt2-BiAtMfKuvJ9esnNxBeBV48_uVvMbdgsQvM3yA7Yhan1ka3AnIrR2xIq2qayKwnIfdrJKyjue3sVQwF033nF1Td7p0ZDCMnaMcXyfWbg324mSudd8S1eML0HwC4yiApF3mKhHcoma-/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.31.04.png"> </a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXtJdUypfb0XfswNeBjbL3JOH_yH01VKmMS7BVnsKJXRWeduME_PkG211Ao4dzmeGtLkNKxQvB4oY_AI4GiZ-d4ezD9ugPnoPBzlbPbbSX_GK1AmgOPrFBtWbdvJGefFsb2MgUutP2mlOM/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.30.55.png"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXtJdUypfb0XfswNeBjbL3JOH_yH01VKmMS7BVnsKJXRWeduME_PkG211Ao4dzmeGtLkNKxQvB4oY_AI4GiZ-d4ezD9ugPnoPBzlbPbbSX_GK1AmgOPrFBtWbdvJGefFsb2MgUutP2mlOM/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2016-05-05+21.30.55.png" width="218" /></a><br />
<br />
<br />
左はスマホ。右がメニューを開いた時。サイドからサラッと表示される黒いバーがたまらなくかっこいいです!!<br />
<br />
<a href="http://themeforest.net/item/tersus-business-portfolio-parallax-muse-template/full_screen_preview/7766546?ref=madewithmuse" target="_blank">Tersus - Business Portfolio Parallax Muse Templateはこちら</a><br />
<br />
さて、待望のレスポンシブ対応をしたMuseですがテンプレートもどんどん進化していってます。去年使っていたテンプレートと今のテンプレートでは表現力が全然違います。<br />
Windows95からWindows10に変わったくらいの差がありますね。<br />
<br />
Museの進化の速さにはいつも驚かされます!!<br />
みなさんもテンプレートを使って効率良くハイレベルなデザインのサイトを作っちゃってくださいね!<br />
<br />
<div class="separator" style="clear: both;">私が運営しているAdobe MUSEの総合情報サイト「Made with Muse」もよろしくお願い致します。</div><br />
<div class="separator" style="clear: both;"><span style="font-size: large;"><a href="http://www.madewithmuse.net/" target="_blank">Made with Muse</a></span></div>MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comtag:blogger.com,1999:blog-1401068395530447664.post-63331639605943954042015-12-02T22:38:00.002+09:002021-10-08T15:48:26.761+09:00【使い方様々】レストラン、バンド、ビジネスなどに使えるAdobe MUSEテンプレート<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!--adobe-muse-blog_main_Blog1_300x250_as--><br />
<h2>
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"><a href="https://tateyomi.fun/" target="_blank">おすすめマンガをご紹介!</a></ins></h2>
<div>
こんにちは!!</div>
<div>
<br /></div>
<div>
本日は最近見つけたおすすめのAdobe Museのテンプレートをご紹介します。</div>
<div>
海外のサイトになりますが、私もよく使っているサイトですので怪しいサイトではありません笑</div>
<div>
<br /></div>
<div>
1.SKYWELL</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL9eYTScot7nOVAuWiP-zTBCCh3keIhV_UlR1FDMVk8P6XfAwljXs0MJcbOuGoW8Ixf84IOjPVbdCZvKiHkm_nAuGvjxaXqIMl7RDhFgb1kxUbl7C-81La9gmhtMg2O11jjnCxXfhOmn71/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-12-02+21.49.03.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="253" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL9eYTScot7nOVAuWiP-zTBCCh3keIhV_UlR1FDMVk8P6XfAwljXs0MJcbOuGoW8Ixf84IOjPVbdCZvKiHkm_nAuGvjxaXqIMl7RDhFgb1kxUbl7C-81La9gmhtMg2O11jjnCxXfhOmn71/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-12-02+21.49.03.png" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
まず最初ですが、いきなり最強のテンプレートをご紹介しちゃいます。</div>
<div>
こちらはSKYWELLというテンプレートなんですが、とにかくかっこいい!!便利!!やすい!と三拍子揃ってるテンプレートです。</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf20X0ghyjal2KLKFkkEoNn8-UiVauBgwwhHMD9ZiraNn743g0eZv9OgKwx-ckuJk7mkVhDS7Ew6ywfGtRsoeWxzeQspTXMhl3VkTPxwNornxAGvNj2sWV8QUHrD7umeRNmoSrpI-MeZ-W/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-12-02+21.49.26.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="235" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf20X0ghyjal2KLKFkkEoNn8-UiVauBgwwhHMD9ZiraNn743g0eZv9OgKwx-ckuJk7mkVhDS7Ew6ywfGtRsoeWxzeQspTXMhl3VkTPxwNornxAGvNj2sWV8QUHrD7umeRNmoSrpI-MeZ-W/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-12-02+21.49.26.png" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfZv4lE3cGVNx0beIV-iseBl7hSfwHSTzFlZ2U0HYIFtY3e9SjiHb9Oi69rQAOUCblEBGK20c9Zzxbi1Fgr_IqXZeft15Spxwkfne5TNU4C8ZK8iPGjJAZbGvI8J-poZWORiZLZIyGBY3s/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-12-02+21.49.37.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfZv4lE3cGVNx0beIV-iseBl7hSfwHSTzFlZ2U0HYIFtY3e9SjiHb9Oi69rQAOUCblEBGK20c9Zzxbi1Fgr_IqXZeft15Spxwkfne5TNU4C8ZK8iPGjJAZbGvI8J-poZWORiZLZIyGBY3s/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-12-02+21.49.37.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
画像を見ているだけでどれだけかっこいいデザインかはお分かりいただけるかと思います。独自のCSSアニメーションやバックグラウンドビデオもサポート。ホバーエフェクトなんて鳥肌ものの格好よさです!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
クールな感じですので、コーポレートサイトやサービス紹介、お店の紹介なんかにも使えると思います。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
本当に色々使えるテンプレだと思いますので、持っていて損はないでしょう。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://themeforest.net/item/skywell-multipurpose-adobe-muse-template/full_screen_preview/12210113?ref=madewithmuse" target="_blank">SKYWELLはこちらをクリック</a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div>
2.KUBE</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU3FDw1gFSL8pZGLATPyoE_YR_F_SGGcAOFMyHP81on_wtSu3QW_h1HpUy6-UY-C-V4QsIsnA8BgoIneukaq7FzNgDGWKbHuNh3EgW-0Z9u4cKYr1wdDqUUyopKQY7mLdQI24febWjGG67/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-12-02+22.15.02.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU3FDw1gFSL8pZGLATPyoE_YR_F_SGGcAOFMyHP81on_wtSu3QW_h1HpUy6-UY-C-V4QsIsnA8BgoIneukaq7FzNgDGWKbHuNh3EgW-0Z9u4cKYr1wdDqUUyopKQY7mLdQI24febWjGG67/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-12-02+22.15.02.png" width="400" /></a></div>
<br />
これちょっとバンドとかDJとか何かしら芸術活動している方におすすめ!<br />
活動にWEBサイトは欠かせないと思いますし、でもわざわざHTMLなんか覚えるのに時間を使うならスクラッチの技術を磨いたほうが全然マシと思うので、MUSEでサクッと簡単にクールなサイトを作ってしまいましょう。<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9onbbkunTVQ3rqrrUyJhZLBRBcl9fdNkUtVQSvKuF4jr5dca_mxSNqrFGBhJxc5ZfAacBK-uLf3vLL9hJi-kggEofRMBRLb2AHIqLcJFAiBAfg39kYWYOX9e5y4CnQKVrMplWfuA2KMlp/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-12-02+22.15.18.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9onbbkunTVQ3rqrrUyJhZLBRBcl9fdNkUtVQSvKuF4jr5dca_mxSNqrFGBhJxc5ZfAacBK-uLf3vLL9hJi-kggEofRMBRLb2AHIqLcJFAiBAfg39kYWYOX9e5y4CnQKVrMplWfuA2KMlp/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-12-02+22.15.18.png" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4NedcVQ7EYsrmP9Ec5buRdL6Or4PT96SXFPkzayVz4zKerNLj7CgQErYuwIpgjkrPGKoOiSjv66ycP2c-Rso1ExrXa8U2ypKSTbDzhBcmpl73wrprlsWb5U7StmCym2yyiBHoosdiA_U2/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-12-02+22.15.31.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4NedcVQ7EYsrmP9Ec5buRdL6Or4PT96SXFPkzayVz4zKerNLj7CgQErYuwIpgjkrPGKoOiSjv66ycP2c-Rso1ExrXa8U2ypKSTbDzhBcmpl73wrprlsWb5U7StmCym2yyiBHoosdiA_U2/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-12-02+22.15.31.png" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAq9zfFF2Z8JV2S7X6o8gABWeGhrN5N9hJp1SVdCDsq1-yxaeLS9Z3rNM9I8aq83iArjVlcFr2unVHWIRVct-Bu3yFd4tDrvkPBOXz6hQ7QlVYxfgTCmNWovY8il5X4iUjXD4xbpkPdMVP/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-12-02+22.15.44.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAq9zfFF2Z8JV2S7X6o8gABWeGhrN5N9hJp1SVdCDsq1-yxaeLS9Z3rNM9I8aq83iArjVlcFr2unVHWIRVct-Bu3yFd4tDrvkPBOXz6hQ7QlVYxfgTCmNWovY8il5X4iUjXD4xbpkPdMVP/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-12-02+22.15.44.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
LIVEの写真ギャラリーとか本当かっこいいですね。</div>
<div class="separator" style="clear: both; text-align: left;">
もちろんSOUNDCLOUDも埋め込めますし、YouTubeの動画もサクッと埋め込めちゃいますよ!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://themeforest.net/item/kube-musician-dj-band-music-muse-template/full_screen_preview/12425026?ref=madewithmuse" target="_blank">KUBEはこちらをクリック</a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
3.SERENA</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio7pcJQP0vfE0WEV4sN_NA8XSxnC44_VRdXbS-9zJEc1_-o7-wSZnNizNH_S7ezgxXYBqH9e-Q-Fyd2fjs8TejKdr69c2vrZvD-gPf70s99mVc-ReVzo_Fkjj4R2wuIhpvXqoU_kwAhbvI/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-12-02+22.25.07.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio7pcJQP0vfE0WEV4sN_NA8XSxnC44_VRdXbS-9zJEc1_-o7-wSZnNizNH_S7ezgxXYBqH9e-Q-Fyd2fjs8TejKdr69c2vrZvD-gPf70s99mVc-ReVzo_Fkjj4R2wuIhpvXqoU_kwAhbvI/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-12-02+22.25.07.png" width="400" /></a></div>
<br />
こちらはベーカリーとか、おしゃれなカフェ、あるいはレストランとか飲食業向けの天雨レートですね。上の画像はベーカリーですが、めちゃくちゃ美味しそうで本当にカリフォルニアまで飛んで行きたくなりますね。<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHD-0p6fL2GI1iJZvfY_YSUasvrsQmZ4_LuQFJwuqppNLVBuN9W4CCykNpJZdkfsFvXOins0SuUtc4vrscDHDnVWoBuYEFBi7jU2VrlWmsNGcTL5HmkgF8NtlASsQU8cJ09jriBizLD34K/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-12-02+22.25.47.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHD-0p6fL2GI1iJZvfY_YSUasvrsQmZ4_LuQFJwuqppNLVBuN9W4CCykNpJZdkfsFvXOins0SuUtc4vrscDHDnVWoBuYEFBi7jU2VrlWmsNGcTL5HmkgF8NtlASsQU8cJ09jriBizLD34K/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-12-02+22.25.47.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoEo_KSC2x7rWdcTQx9yPDnl6Dh0xfvLcmjr78Wt03b_FcJLcq9a3_7FJI50wLhgKcUwK9pXwISCC-hBrDiRmf_vvqhDhoERKFVsmP9CFSFUpLS7FQIGefouS9StrY8wT_vsDGsoBtdDJI/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-12-02+22.26.27.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoEo_KSC2x7rWdcTQx9yPDnl6Dh0xfvLcmjr78Wt03b_FcJLcq9a3_7FJI50wLhgKcUwK9pXwISCC-hBrDiRmf_vvqhDhoERKFVsmP9CFSFUpLS7FQIGefouS9StrY8wT_vsDGsoBtdDJI/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-12-02+22.26.27.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
やっぱりWEBサイトが綺麗なお店って食事も美味しいんだろうなって思っちゃいますよね。個人的には飲食店てあまりWEBサイトにこだわってないお店が多いと思いますので、ここでちょっとクールなサイト作っちゃえば、他店との差別化も図れますね。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
え??サイトなんかより食べログにサクラ投稿した方が効果的だって??</div>
<div class="separator" style="clear: both; text-align: left;">
そんな悲しいこと言わないで、ちょっと見て行ってくださいよ。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://themeforest.net/item/serena-muse-template/full_screen_preview/10748487?ref=madewithmuse" target="_blank">SERENAはこちらをクリック</a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
今回は使用用途の異なるテンプレートをご紹介させていただきました。</div>
<div class="separator" style="clear: both; text-align: left;">
業界によってこんなに雰囲気も違ってくるんですね。</div>
<div class="separator" style="clear: both; text-align: left;">
これらテンプレートは有料なので、もちろんクオリティは高いです。</div>
<div class="separator" style="clear: both; text-align: left;">
買わなくても見ているだけで勉強になりますね。</div>
<div class="separator" style="clear: both; text-align: left;">
ぜひぜひご覧いただければと思います。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
※追記 <a href="http://madewithmuse.blogspot.jp/2016/05/adobe-muse.html">レスポンシブ対応のテンプレートはこちらからご覧ください!!</a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
私が運営しているAdobe MUSEの総合情報サイト「Made with Muse」もよろしくお願い致します。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: large;"><a href="http://www.madewithmuse.net/" target="_blank">Made with Muse</a></span></div>
<br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comtag:blogger.com,1999:blog-1401068395530447664.post-64054191599430044572015-09-25T01:20:00.001+09:002015-09-25T01:20:55.224+09:00Adobe Museの自動ライトボックス機能で映画の公式サイトのような演出を作る。<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />
こんにちは!<br />
<br />
今日はAdobe Museの2015年のアップデートで加わった機能についてご紹介したいと思います。<br />
<br />
誰も気がついてないような機能なのですが、これがちょっと便利なのです。<br />
<br />
みなさんは映画の公式サイトにアクセスした時にいきなり動画が出てきて、再生されるプロモーションムービーに見入ってしまうことはありませんか?<br />
<br />
↓こういうサイトの事です!<br />
<a href="http://shingeki.tv/movie/" target="_blank">http://shingeki.tv/movie/</a><br />
<br />
巷ではポップアップ広告とか呼ばれているこの機能(正式名称はわかりません)<br />
Museでも簡単にできちゃいます!<br />
<br />
やり方はいたって簡単<br />
<br />
①ポップアップを表示させたいページにウィジェットを入れる。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCwYdMitnyW4svEFYvkNZhPEHkENvkZoiiVXqD1cAaC6U1A1KFXf_5-IvJjoEAs7mTIyqkSprDZGLrLPLqfMbCwJcJtnpXsgdVJUgym4iuGvC9LsB_aSSOZag1lEzeHIqDdpxIOkf2PCfX/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-09-25+0.45.30.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCwYdMitnyW4svEFYvkNZhPEHkENvkZoiiVXqD1cAaC6U1A1KFXf_5-IvJjoEAs7mTIyqkSprDZGLrLPLqfMbCwJcJtnpXsgdVJUgym4iuGvC9LsB_aSSOZag1lEzeHIqDdpxIOkf2PCfX/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-09-25+0.45.30.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
こんな感じです。</div>
<div class="separator" style="clear: both; text-align: left;">
使用するウィジェットは「コンポジション」→「ライトボックス表示」になります。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZjWN-BJl3MQExYItaXc9vOgCG9pGLkhn4tgAZF2zIEZTCd1ePm0_sr9vj3gE3zprdKPBqwefKqZxJEu2aWEcQbphuCTCjDJ4aWS0lTXW-Bx1LVHduFtgmZxQUpgOaA5fuMXDt09MK0BYI/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-09-25+0.46.20.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="241" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZjWN-BJl3MQExYItaXc9vOgCG9pGLkhn4tgAZF2zIEZTCd1ePm0_sr9vj3gE3zprdKPBqwefKqZxJEu2aWEcQbphuCTCjDJ4aWS0lTXW-Bx1LVHduFtgmZxQUpgOaA5fuMXDt09MK0BYI/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-09-25+0.46.20.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
左上に3つ小さいボックス(トリガー)がありますが、1個しか使いませんので削除します。パーツの「次へ」「前へ」も使いませんので削除、下に表示されていたテキストも削除しましょう。ここで「自動ライトボックス」にチェックを入れてください。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
②YOUTUBEウィジェットをライトボックスに入れる。</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-yzkfbNA3QzpJ6swhxUOI6tOHRi30syd6w6RRXLGQopthjeq3iL7JNTVhHTWFYs9-Ug-U-lw-WzruER2InTFFqZwNy5ix2dM3wXwqniDI4p1-oLSrBMCXSmDSb-xuvsR5bytw7xCMd8kJ/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-09-25+0.48.12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-yzkfbNA3QzpJ6swhxUOI6tOHRi30syd6w6RRXLGQopthjeq3iL7JNTVhHTWFYs9-Ug-U-lw-WzruER2InTFFqZwNy5ix2dM3wXwqniDI4p1-oLSrBMCXSmDSb-xuvsR5bytw7xCMd8kJ/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-09-25+0.48.12.png" width="400" /></a></div>
<br />
次にYOUTUBEのウィジェットを画像のようにこのライトボックスの中に入れてしまいます。1個だけ残したトリガーは透明に変更しておきます。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvLO6s0Ihx_i4RBEIE2DgOYzyau1GbEm6qV_oDAWmyntLs6vjhOJGG0lX4WGkWjOBaNrkkmLXuFV7SURvRnQ7MsaFSAxQIZ7CYu43km7ieKGBMkUSmHsoiNimlh4tTknSZ1SKMQlIAENNx/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-09-25+0.48.50.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvLO6s0Ihx_i4RBEIE2DgOYzyau1GbEm6qV_oDAWmyntLs6vjhOJGG0lX4WGkWjOBaNrkkmLXuFV7SURvRnQ7MsaFSAxQIZ7CYu43km7ieKGBMkUSmHsoiNimlh4tTknSZ1SKMQlIAENNx/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-09-25+0.48.50.png" width="400" /></a></div>
<br />
使用したいビデオのIDを入れて、お好みの設定に変更し「自動再生」にチェックを入れます。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQGf4hXiOKA6mdakuwaBUsbz5sRPEv0zE6jXfA94tug89jq05j9JzIEOIaqb2qwxrdlRPvOAXJD4AK2Zp18mSRGgu-16Taa_JpyVnoBzLYWg7xGTwd5ycH4qtxENqZUxHV-iTcSv_D6b_z/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-09-25+0.57.34.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="245" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQGf4hXiOKA6mdakuwaBUsbz5sRPEv0zE6jXfA94tug89jq05j9JzIEOIaqb2qwxrdlRPvOAXJD4AK2Zp18mSRGgu-16Taa_JpyVnoBzLYWg7xGTwd5ycH4qtxENqZUxHV-iTcSv_D6b_z/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-09-25+0.57.34.png" width="400" /></a></div>
<br />
背景の色を変えて、閉じるボタンもお好みで色やサイズを変えましょう。<br />
以上で設定は完了です!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgExZEXx1rowvav9fWr4EassDo1eukzAOj75cfS87qzV8yqpQjDLwQ-6TPVJHM-78pHTi3Jw6-L857As637hzru7ScgnZRziR28-HKWUHr7aF6pNDwMKcLri5VuEMpi7m0_omK18nauAuNg/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-09-25+0.58.44.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgExZEXx1rowvav9fWr4EassDo1eukzAOj75cfS87qzV8yqpQjDLwQ-6TPVJHM-78pHTi3Jw6-L857As637hzru7ScgnZRziR28-HKWUHr7aF6pNDwMKcLri5VuEMpi7m0_omK18nauAuNg/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-09-25+0.58.44.png" width="400" /></a></div>
<br />
サイトを開くとあら不思議!<br />
まるで映画の公式サイトのようにいきなりビデオが流れ始めました!<br />
<br />
今回は動画でご紹介しましたが使い道は様々です。<br />
「プッシュしたいキャンペーンのバナー」を表示させても良いと思いますし、「メルマガの登録フォーム」を表示させて会員登録促進の手段として使うもの良いと思います!<br />
やれることが増えると色々夢が広がりますね!!<br />
<br />
是非ご活用いただければ幸いです。<br />
<br />
私が運営しているサイト「Made with Muse」にはAdobe MuseのTIPSを掲載しています。<br />
是非ご覧いただければ幸いです!<br />
<br />
<b><span style="font-size: large;"><a href="http://www.madewithmuse.net/" target="_blank">Made with Muse</a></span></b><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comtag:blogger.com,1999:blog-1401068395530447664.post-24633949746734227102015-09-16T23:36:00.001+09:002015-09-16T23:36:48.830+09:00無料!本をめくるようなエフェクトのAdobe Museギャラリーウィジェット<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />
こんにちは!<br />
<br />
本日も海の向こうで見つけたお得な情報をお届けします!<br />
<br />
おそらくヨーロッパあたりのサイトだと思うのですが、Adobe Museの素材を販売しているようで最近オープンしたみたいです。<br />
<br />
コンテンツの充実度はまだまだみたいですが、無料で配布されているギャラリーウィジェットが面白かったのでご紹介させていただきます。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrGXq_AOZMnmBzb0QdmR6PwXISSxtsiqaxX9khkkeYf6NKAoM8VIZKONkdr0BXVuHhDKN7KrdQYvTyNi-m-YUdrmr0XzlKs8gpBIB-VjMmaiGZfSYvo4gMWIxxfRRL0WujXDFfWwRd8IqI/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-09-16+23.21.18.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="253" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrGXq_AOZMnmBzb0QdmR6PwXISSxtsiqaxX9khkkeYf6NKAoM8VIZKONkdr0BXVuHhDKN7KrdQYvTyNi-m-YUdrmr0XzlKs8gpBIB-VjMmaiGZfSYvo4gMWIxxfRRL0WujXDFfWwRd8IqI/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-09-16+23.21.18.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
サイト名は「Widgets for Muse」という直球ズバリなネーミング!</div>
<div class="separator" style="clear: both; text-align: left;">
こちらの無料コーナーで配布されているウィジェットに今回は注目です。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-0OBIYEwHyvM89Wal-Y-Rn61HPUcXROxXhm7pQ1uLUwMNI8xID3p1GW5U9LsEcNPJuJNdzb_hdN6gKxOP0EdB5KBQGhOvGXvX9PowVLo1WyRrOASGZIXEReuQq-dLnIF5NreJyTJh9UjM/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-09-16+23.28.29.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="267" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-0OBIYEwHyvM89Wal-Y-Rn61HPUcXROxXhm7pQ1uLUwMNI8xID3p1GW5U9LsEcNPJuJNdzb_hdN6gKxOP0EdB5KBQGhOvGXvX9PowVLo1WyRrOASGZIXEReuQq-dLnIF5NreJyTJh9UjM/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-09-16+23.28.29.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
PageFlipという名前のウィジェットでして、ボタンを押すとページをめくるようなエフェクトで画像をスライドさせることが可能な優れもの。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrZk-LFFMCJjrfWkobjqQLtxR7u2MoK3-bjYJlWpJTc9P-uQgvhV0d7dw6sHILzkgyHPu8_X20Zjte9kcvHGQC1Xm2jv4FDpLtGDjARdIfG1abp9U3r1om39k8V7GlEfpOWHSwNHSg2XVE/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-09-16+23.31.13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrZk-LFFMCJjrfWkobjqQLtxR7u2MoK3-bjYJlWpJTc9P-uQgvhV0d7dw6sHILzkgyHPu8_X20Zjte9kcvHGQC1Xm2jv4FDpLtGDjARdIfG1abp9U3r1om39k8V7GlEfpOWHSwNHSg2XVE/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-09-16+23.31.13.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
こちらはSkill Barというウィジェット。</div>
<div class="separator" style="clear: both; text-align: left;">
ポートフォリオサイトなのでよく見かける自分のスキルバーをアニメーションで作成できる優れもの。フォントやバーの色は変更できますので自分のサイトの雰囲気に合わせてカスタマイズ可能です。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
まだ出来たばかりのサイトのようですが、Museユーザーには今後要注目なサイトとなりそうです。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
↓今回ご紹介したサイトはこちらからご覧ください。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: large;"><a href="http://www.widgetsformuse.com/widgets.html#!/FREEBIES/c/14192095/inview=product54680041&offset=0&sort=normal" target="_blank">Widget for Muse</a></span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
私が運営しているサイト「Made with Muse」にはAdobe MuseのTIPSを掲載しています。<br />
是非ご覧いただければ幸いです!<br />
<br />
<b><span style="font-size: large;"><a href="http://www.madewithmuse.net/" target="_blank">Made with Muse</a></span></b><br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comtag:blogger.com,1999:blog-1401068395530447664.post-81044454649628788812015-09-16T00:45:00.002+09:002015-09-16T00:45:55.974+09:00Adobe Museでスマホサイトのヘッダーを固定する方法<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />
こんにちは!<br />
<div>
<br /></div>
<div>
今日は珍しく役に立つ記事を書いてみたいと思います!</div>
<div>
<br /></div>
<div>
最近質問されることが多いのですが、「サイトのヘッダーを動かないように固定したい!」と困っている方が多い様です。</div>
<div>
<br /></div>
<div>
PCサイトであれば「上の方に固定ボタンがあるよー」とお伝えして終わりなんですが、スマホサイトに関してはなぜかこの固定ボタンではヘッダーが固定されません。。。。</div>
<div>
<br /></div>
<div>
なので今回ご紹介するのは、「スマホサイトのヘッダーを固定する方法!」です。</div>
<div>
<br />
やり方はいたって簡単<br />
<br />
①ヘッダーを全選択します。固定させたい部分を残らず選択しましょう。<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8OJpAzq4RZ9R3GC8EBOdf21OsvMdukxQhvCXbtEqtRbeAFFyLpRaDj2wNOryjCOp6-glP10X7NXbotj8GXVYEncpy0iJ0GvQ9eAO92GPFnyIAoPNZ1nszQcMu50BbO2VXVYI8NcHjIDqD/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-09-16+0.17.55.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="183" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8OJpAzq4RZ9R3GC8EBOdf21OsvMdukxQhvCXbtEqtRbeAFFyLpRaDj2wNOryjCOp6-glP10X7NXbotj8GXVYEncpy0iJ0GvQ9eAO92GPFnyIAoPNZ1nszQcMu50BbO2VXVYI8NcHjIDqD/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-09-16+0.17.55.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
こんな感じですね。</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
②選択したら右側の「スクロール効果」をクリックします</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin2r9EJaxN_NJowLQ4VssuGm2dWzvUCss3uebq0JvcvUB1OkhKJiPPxGBJ5yDWJ0G_0zeDGTuj38gW1_B-37pRl-3XzykudPfmPO91jAH2eWcyJZkxOnJExpnocyDegVAeday0x-aHX_PI/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-09-16+0.33.15.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin2r9EJaxN_NJowLQ4VssuGm2dWzvUCss3uebq0JvcvUB1OkhKJiPPxGBJ5yDWJ0G_0zeDGTuj38gW1_B-37pRl-3XzykudPfmPO91jAH2eWcyJZkxOnJExpnocyDegVAeday0x-aHX_PI/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-09-16+0.33.15.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
「モーション」にチェックを入れて、「初期モーション」の値を0、下の凸凹マークみたいのも0、「最終モーション」の値も0に設定します。</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
すると、あら不思議!<br />
スマホサイトでもヘッダーがばっちり固定されています!<br />
<br /></div>
<div>
縦長なスマホサイトだからこそいちいち上に戻るのは面倒なこと。</div>
<div>
固定ヘッダーを活用してユーザービリティアップを目指しましょう!<br />
<br />
私が運営しているサイト「Made with Muse」にはAdobe MuseのTIPSを掲載しています。<br />
是非ご覧いただければ幸いです!<br />
<br />
<b><span style="font-size: large;"><a href="http://www.madewithmuse.net/" target="_blank">Made with Muse</a></span></b></div>
<br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comtag:blogger.com,1999:blog-1401068395530447664.post-9342325087171681542015-08-02T21:30:00.001+09:002016-03-29T00:42:06.792+09:00Adobe Museで使えるウィジェットやテンプレートの宝庫「Muse-Themes」をご紹介<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />
久しぶりの更新になります!<br />
今回ご紹介したいのは、私がMuseを始めたばかりの時にお世話になったアメリカのサイト「MUSE-THEMES」さん。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFTFBZcMwvCk89B0Cp2YvcVSzV78lAaN7rG-PSW2xfSmJ6iFGedR1wibLFSAn49GSMCQQ-qnfEw50Di5i0yRwlEQGGzMlnZrzGpLpq6RwyHyfm_wz8RiWB1o4vcBUr2uJGiGtKHACgemyo/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-08-02+21.09.51.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFTFBZcMwvCk89B0Cp2YvcVSzV78lAaN7rG-PSW2xfSmJ6iFGedR1wibLFSAn49GSMCQQ-qnfEw50Di5i0yRwlEQGGzMlnZrzGpLpq6RwyHyfm_wz8RiWB1o4vcBUr2uJGiGtKHACgemyo/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-08-02+21.09.51.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
こちらのサイトでは無料・有料のウィジェットやテンプレートがたくさん掲載されておりまして、私がMuseを使い始めた2年くらい前には大変お世話になりました。<br />
<br />
日本語の情報もほとんどなかったもんですから、このサイトで掲載されているテンプレートをダウンロードして勉強したり、ブログを読んでやり方を覚えたりと、とにかく役に立ったのです。<br />
<br />
一番利用頻度が高かったのはウィジェットで、掲載数も一番多いかと思います。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR_KErIE6DsqIoiPAFiL5tiS7uJ2tjNl-ZjRu9vPJA1onmxVPr6Lo5Q8tgJJ9fgEFpUg48DgHK_yuSKQ3MObr7BIaDxkwxfdoIyiBFutFY27eC1lTxGriwB-sHUqelw8LwRs71rWeR5OYW/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-08-02+21.05.27.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR_KErIE6DsqIoiPAFiL5tiS7uJ2tjNl-ZjRu9vPJA1onmxVPr6Lo5Q8tgJJ9fgEFpUg48DgHK_yuSKQ3MObr7BIaDxkwxfdoIyiBFutFY27eC1lTxGriwB-sHUqelw8LwRs71rWeR5OYW/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-08-02+21.05.27.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
↑背景をビデオにするウィジェット</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAHCJt79cqJkS48UySYNMJ1thKI-wVAquSpAfIOD5Fbm6mnVtAjUcUy2oLwCRoEBkFb6rS6V2FkLplnFNjlpTBFgcOFdK-z-lvXJen7MSnsSSLC_S_4K6HyHyK_7SFp7zIrcSNEvGq6a9V/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-08-02+21.05.59.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAHCJt79cqJkS48UySYNMJ1thKI-wVAquSpAfIOD5Fbm6mnVtAjUcUy2oLwCRoEBkFb6rS6V2FkLplnFNjlpTBFgcOFdK-z-lvXJen7MSnsSSLC_S_4K6HyHyK_7SFp7zIrcSNEvGq6a9V/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-08-02+21.05.59.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
↑こちらはサイドバーにメニューを置けるウィジェト。</div>
<div class="separator" style="clear: both; text-align: center;">
選択されていない時はもちろん表示されないです。</div>
<div class="separator" style="clear: both; text-align: center;">
メニューを選択すると横からスッと出てきます。</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6CY-AVqii9E_svBzmQZhGb3s2FPxHrAULuUyvIEevYw5LesdeSps6E0b4IEVhilSdDJ07Hrz2nz9mN0zp5KOT_Zu4HNrkEF8kOkNNCRoRv0Dz3s1kfzlv5y729eKWkrUM8pLbrNEUDEv7/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-08-02+21.08.29.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6CY-AVqii9E_svBzmQZhGb3s2FPxHrAULuUyvIEevYw5LesdeSps6E0b4IEVhilSdDJ07Hrz2nz9mN0zp5KOT_Zu4HNrkEF8kOkNNCRoRv0Dz3s1kfzlv5y729eKWkrUM8pLbrNEUDEv7/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-08-02+21.08.29.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
こちらはモバイルサイトを作るには欠かせない</div>
<div class="separator" style="clear: both; text-align: center;">
モバイル用のメニューウィジェット。</div>
<div class="separator" style="clear: both; text-align: center;">
モバイルは画面が狭いですから、こういうスタイリッシュな</div>
<div class="separator" style="clear: both; text-align: center;">
ウィジェットを使ってスッキリしたサイトを作りたいですね。</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
サイト自体は無料のコンテンツもありますが、会員登録することにより有料のテンプレートやウィジェットがダウンロードし放題になります!<br />
<br />
お値段も年間で$75だったかな?毎月600円程度の金額で、このクオリティのコンテンツを使えるのですから、安い買い物でしょう。<br />
<br />
自分で一から作るよりも、ウィジェットを活用することにより遥かに早く、かっこいいサイトを制作することができますので、お急ぎの方や、早急にサイトのレベルアップを図りたい方は検討してみていはいかがでしょうか?<br />
<br />
サイトは↓のリンクから<br />
<br />
<b><span style="font-size: large;"><a href="http://www.muse-themes.com/#_l_22" target="_blank">Muse-Themes</a></span></b><br />
<b><br />
</b> <b><br />
</b> <br />
<br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />
<br />MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comtag:blogger.com,1999:blog-1401068395530447664.post-18920136046749334492015-03-15T17:39:00.002+09:002015-03-15T17:41:25.547+09:00Adobe Museで作ったサイトにAddThisを使ってSNSシェアボタンを埋め込みアクセスアップ!<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />
こんにちは!<br />
<br />
今日はサイトを制作した後に、どうやって自分のサイトの存在を世の中にアピールして行くか?という疑問を解決する便利なツールをご紹介します!<br />
<br />
その方法は「SNSでユーザーに自分のサイトを広めてもらう」です。<br />
<br />
ユーザーさんがこの記事をシェアしたい!と思わせるような魅力的な記事を書くことも大事なんですが、シェアし易いようなサイト構成を作っておくことも大事であります。<br />
<br />
でもツイッターとかフェイスブックのボタンをいちいち埋め込むのって結構面倒ですし、よくわからないですよね!<br />
<br />
ここでご紹介したいのがこのツール<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO51M2cep8Y_O3jyim5JQJ9QKdx4j3D5SsIMl6czqL6qgLpRb6D1XBB5lEHMNrOMCPAcrNJhrqBI5dBmPFniaX5ynaBNaHzSqUDv7yF9keABcCyPZLPs6o1ejpcndcJJDMjVSmYqZ3FnHr/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2015-03-15+17.22.41.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO51M2cep8Y_O3jyim5JQJ9QKdx4j3D5SsIMl6czqL6qgLpRb6D1XBB5lEHMNrOMCPAcrNJhrqBI5dBmPFniaX5ynaBNaHzSqUDv7yF9keABcCyPZLPs6o1ejpcndcJJDMjVSmYqZ3FnHr/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2015-03-15+17.22.41.png" height="236" width="400" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"></div><br />
AddThisというツールであります!<br />
こちらは無料と有料がありますが、無料で充分すぎる機能を持っています。<br />
<br />
こちらは登録してコードを埋め込んでしまえば、自動的に世界中のSNSのシェアボタンを表示してくれる優れものです。<br />
<br />
ツイッターやフェイスブックなどのメジャーなものはもちろん、「はてな」や「LinkedIn」などちょっとマイナーなものまで取り揃えています。<br />
ユーザーが普段使っているSNSのシェアボタンを自動的に分析して表示されるので、更新の手間もかかりません。<br />
<br />
このブログの左についている、<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji6Qvg-q87mRELzaLhGvSepBZSnESZFBS3HS6JTg3Fn7BGeXkHHYllay0w3n3rBSoegc9klDQhxv7atES5jAgvgNn_xUZHBp3FE3o1MyhOHKVxEf0W2F0lrmcuRDi1p7HUpFTVDJaJNa1Y/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2015-03-15+17.24.07.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji6Qvg-q87mRELzaLhGvSepBZSnESZFBS3HS6JTg3Fn7BGeXkHHYllay0w3n3rBSoegc9klDQhxv7atES5jAgvgNn_xUZHBp3FE3o1MyhOHKVxEf0W2F0lrmcuRDi1p7HUpFTVDJaJNa1Y/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2015-03-15+17.24.07.png" height="320" width="71" /></a></div><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as -->こういうボタンや<br />
<br />
私のサイト「<a href="http://www.madewithmuse.net/templates.html" target="_blank">Made with Muse</a>」で使っている<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV-Fnpp8Dq-4gfvPWDPfmooK_S3sbEY2w-H30Dj_9Wx2s9uHznY3SvIblvlDHXwz0Rc6pcG9s14YY7MMWQ2W17Iy973S8o7G6vi-2ITpYSaHHjLqZ72Sfrssfxs-5VGnN3AGuvlfoHrQLW/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2015-03-15+17.24.46.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV-Fnpp8Dq-4gfvPWDPfmooK_S3sbEY2w-H30Dj_9Wx2s9uHznY3SvIblvlDHXwz0Rc6pcG9s14YY7MMWQ2W17Iy973S8o7G6vi-2ITpYSaHHjLqZ72Sfrssfxs-5VGnN3AGuvlfoHrQLW/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2015-03-15+17.24.46.png" height="173" width="400" /></a></div><br />
<div><br />
自動的に記事をレコメンドしてくれる機能など、たくさんのパターンが用意されています。</div><div><br />
</div><div>私のサイトのアクセス流入元の15%はすでに何らかのSNS経由となっており、馬鹿にできない量になっておりますので、皆様も是非SNS対策を強化していただいて、アクセスアップを狙ってみてください!</div><div><br />
</div><div>よろしくお願いいたします。</div><div><br />
</div>AddThisのサイトはこちらから<div><u><a href="http://www.addthis.com/" target="_blank">http://www.addthis.com/</a></u><div><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />
<br />
<br />
</div></div>MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comtag:blogger.com,1999:blog-1401068395530447664.post-85694622449397386192015-01-28T21:54:00.001+09:002015-01-28T21:57:30.308+09:00Adobe MuseでPhotoshopを使わずにアイコンの色を変えてみる時短テクニック<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />
こんにちは!<br />
<br />
本日は画像の色を簡単に変更できるショートカット的な小技をご紹介します。<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinPy6-27xjP1f4THkDvkU76saYmbqOG32t5b8CmJ2Xwnz1f3Do5mE_SN035cwU81mhEiLPwt96eSu8rU0i0ClSXEkp8twEXPNbIgkI7eJIhfp3zqNaS746CN1rpw26brXQJ4SLKMbKJziE/s1600/aperture2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinPy6-27xjP1f4THkDvkU76saYmbqOG32t5b8CmJ2Xwnz1f3Do5mE_SN035cwU81mhEiLPwt96eSu8rU0i0ClSXEkp8twEXPNbIgkI7eJIhfp3zqNaS746CN1rpw26brXQJ4SLKMbKJziE/s1600/aperture2.png" height="200" width="200" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
たとえば上のような画像があったとします。(カメラのシャッターのアイコンです)</div>
<div class="separator" style="clear: both; text-align: left;">
これをサイトで使用しようと思った時、黒いままでは何か違う、青とか赤の方が自分のサイトに合うなと思った時、色を変えねばなりません。</div>
<div class="separator" style="clear: both; text-align: left;">
でもアイコン一個の色を変えるためにわざわざphotoshop開くのも面倒だな…</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
という時に役に立つのが今回ご紹介する技でございます。</div>
<div class="separator" style="clear: both; text-align: left;">
Museの機能だけで簡単に色を変更しちゃいましょう。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Yb-Tzz9HswqeHXFuBXqOYS9m4K8L-0J7AMUdwDpQEUrQ0mY92vI47804Sc1DgJs667M_0FLO80E-BXCcvaqIWYUOYo6348IMzzYQq4mQ3T2Km__yNukhH6QWzFdNEKx8gcEiFlJU45CN/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2015-01-28+21.44.55.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Yb-Tzz9HswqeHXFuBXqOYS9m4K8L-0J7AMUdwDpQEUrQ0mY92vI47804Sc1DgJs667M_0FLO80E-BXCcvaqIWYUOYo6348IMzzYQq4mQ3T2Km__yNukhH6QWzFdNEKx8gcEiFlJU45CN/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2015-01-28+21.44.55.png" height="400" width="287" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
1. Museのページに画像を置いて選択しましたら、上部の「効果」をクリックします。</div>
2. 3つある四角の一番右側の「光彩」を選択します。<br />
3. 「光彩」と「光彩(内側)」のチェックボックスをオンにします。<br />
4. 「不透明度」は100%に、ぼかしは大きい数字(今回は100)に設定します。<br />
5. 最後にカラーを好きな色に変更します。<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq28u2pWDsD4XrlWDuIJsf585nwGqRu08gtGA7yA6pnmOb3ZnzRUZyhhdBljgx62LVTe3MJiHSmNoQoxBhFciMlfEUl3nYbKent9CZOC_EHTF_ET9kBALDyZX4UCLzN1F6BFF0oez7oHD1/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2015-01-28+21.45.07.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq28u2pWDsD4XrlWDuIJsf585nwGqRu08gtGA7yA6pnmOb3ZnzRUZyhhdBljgx62LVTe3MJiHSmNoQoxBhFciMlfEUl3nYbKent9CZOC_EHTF_ET9kBALDyZX4UCLzN1F6BFF0oez7oHD1/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2015-01-28+21.45.07.png" height="400" width="288" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
すると、あら不思議!</div>
<div class="separator" style="clear: both; text-align: left;">
アイコンの色が青に変更になりました!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
この技を活用することで、わざわざphotoshopを開いて色を変えて書き出して、みたいな作業をカットすることができ、スムーズにサイト制作を進められて便利です!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
ぜひ使ってみてください。</div>
<div class="separator" style="clear: both; text-align: left;">
よろしくお願いします。</div>
<br />
<div class="separator" style="clear: both;">
また、私が運営しているAdobe Muse情報サイト「Made with Muse」も宜しくお願いいたします。</div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<div class="separator" style="clear: both;">
<span style="font-size: x-large;"><a href="http://madewithmuse.net/" target="_blank">Made with Muse</a></span></div>
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comtag:blogger.com,1999:blog-1401068395530447664.post-10066037442034981452015-01-25T23:18:00.000+09:002015-01-25T23:19:57.656+09:00Adobe Museの無料ロールオーバーウィジェットでボタンにオシャレなエフェクトをつける<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />
こんにちは!<br />
<br />
今日は無料で手に入る便利なウィジェットをご紹介します。<br />
<br />
今回ご紹介するには、ボタンにカーソルを合わせた時にフワッとエフェクトがついて、<br />
オシャレにボタンの色を変化させたりできる便利なウィジェットです!<br />
<br />
言葉で説明しても上手く言えませんので、まずは自分が作成してみたサンプルをご覧ください。<br />
<br />
サンプルページ<br />
<a href="http://www.madewithmuse.net/rollover-widget.html" target="_blank">http://www.madewithmuse.net/rollover-widget.html</a><br />
<br />
サンプルページのボタンにカーソルを合わせて頂くとわかるのですが、従来のステートボタンは一瞬で色が切り替わりますが、今回のウィジェットを使うことで、フワッと変化するように変更できています。<br />
<br />
なんだか今風で嬉しいですよね!<br />
<br />
やり方はめちゃくちゃ簡単でして、ダウンロードしたウィジェットをエフェクトさせたい箇所があるページに置くだけ。<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><br />
</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTVS_9yUFz4O9-Ot2yZAPG-lDYr9fFzVPBIP9sd5UEq5qLj0LFdagj3DWDHY7hlfyfagwGgnyzEKXKzBOqF8GCfd0Bntw_TJEvgXs8RagPQj8qHj3eTwE50w1Qpn2NAv397FQQ-FnowQ6Q/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2015-01-22+23.14.52.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTVS_9yUFz4O9-Ot2yZAPG-lDYr9fFzVPBIP9sd5UEq5qLj0LFdagj3DWDHY7hlfyfagwGgnyzEKXKzBOqF8GCfd0Bntw_TJEvgXs8RagPQj8qHj3eTwE50w1Qpn2NAv397FQQ-FnowQ6Q/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2015-01-22+23.14.52.png" height="311" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: left;">このようにウィジェットを設置するだけです。</div><div class="separator" style="clear: both; text-align: left;">変化する速度と、4種類のエフェクトスタイルが選べます!</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">一点だけ注意ですが、このウィジェットを置いてしまうと、置いたページにあるステートボタンの全てにエフェクトがかかってしまうようです。</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">詳しい使い方などは、ダウンロード先のMuseResourceさんに動画がありますので、見てみてください!</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">ダウンロード</div><div class="separator" style="clear: both; text-align: left;"><a href="http://museresources.com/rollover-transitioner.html" target="_blank">MuseResource.com</a></div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">こういうちょっとしたボタンの変化にもこだわりを持っているサイトって素敵ですよね!</div><div class="separator" style="clear: both; text-align: left;">ぜひ使いこなしてみてください。</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">よろしくお願いします。</div><br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comtag:blogger.com,1999:blog-1401068395530447664.post-83037288789326674122014-11-10T23:03:00.000+09:002014-11-10T23:03:29.476+09:00Adobe Museで使える、フラットデザインによく合うオシャレな無料コンタクトフォーム<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />
こんにちは!<br />
<br />
今日は自分がMuseの中で最も気に入っているといってもいいウィジェットである「コンタクトフォーム」についてです。<br />
<br />
やはりサイトを制作したとしても、見てくれている人からの反応が欲しいもの。<br />
通常のサイトであればPHPを書いて設置する必要がありますが、Museは最初からウィジェットが入っていおりますので、ドラッグ&ドロップで簡単に設置できます。<br />
<br />
コンタクトフォームももちろん色々デザインを変更することが可能です。<br />
今回はフォームのデザインの際に参考になりそうなオシャレなコンタクトフォームを集めているサイトをご紹介します。<br />
<br />
<br />
<h2><span style="font-size: large;">フラットなデザインに合うコンタクトフォーム</span></h2><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6JOtKBai6vgWEXsglhjn9NQcJAcQBOHynu6MP8D22xpCqjptY3MYzuxNjwSrGle34YVjl4fF0GtBW2FhNpoq6zrYkv8Ek6N-QCqJrB7WmuyKJNl-M5aB0A9vpFU6DmBBV8NTMXa9ifp4m/s1600/form.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6JOtKBai6vgWEXsglhjn9NQcJAcQBOHynu6MP8D22xpCqjptY3MYzuxNjwSrGle34YVjl4fF0GtBW2FhNpoq6zrYkv8Ek6N-QCqJrB7WmuyKJNl-M5aB0A9vpFU6DmBBV8NTMXa9ifp4m/s1600/form.png" height="201" width="400" /></a></div><div style="text-align: center;">このようにフラットなデザインがとてもオシャレなテンプレートがダウンロードできるんです。</div><div style="text-align: center;"><br />
</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMBD4RuyHifiudHK_drdUoUktQPWgX1zLCmphH0mAI2WVN45yEGATWRgl7s9ctFqW2qWUIwvmKL4MvQ1rEzRRaV_AOlxJUzog2qMG_FBHiQhJ7E9RD58g4opZdGjvdQmZHtZsMfbAfxKHB/s1600/form2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMBD4RuyHifiudHK_drdUoUktQPWgX1zLCmphH0mAI2WVN45yEGATWRgl7s9ctFqW2qWUIwvmKL4MvQ1rEzRRaV_AOlxJUzog2qMG_FBHiQhJ7E9RD58g4opZdGjvdQmZHtZsMfbAfxKHB/s1600/form2.png" height="236" width="400" /></a></div><div style="text-align: center;">こちらはソーシャルボタンがついていて、とても格好良くまとまっています。</div><div style="text-align: center;">用事がなくても思わずお問い合わせしてしまうかも?? </div><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpngm76epB-4NIceKKn8eoYYZZf6j7CNjvsdJ6U_3sZQ_NVBEHoQ59C9lncaEmlONsbM1RIFWAie3O7Fd9nLxa9VwHohwvrdFR5XYN-8dWhB0f0-y6aJPoVl50Ma95_COyyJY8dwSYsY6_/s1600/form3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpngm76epB-4NIceKKn8eoYYZZf6j7CNjvsdJ6U_3sZQ_NVBEHoQ59C9lncaEmlONsbM1RIFWAie3O7Fd9nLxa9VwHohwvrdFR5XYN-8dWhB0f0-y6aJPoVl50Ma95_COyyJY8dwSYsY6_/s1600/form3.png" height="298" width="400" /></a></div><div style="text-align: center;"> 黄色、黒、白がとても綺麗にまとまったフォームです。</div><div style="text-align: center;">パララックス系のサイトで一番下にこれがあったら思わずお問い合わせしてしまうかも??</div><div style="text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyCc__kcvWGxa9gkOsmDpjQf1aXGK0F2QDEVzWSg4fT3dNdNaYLpR0TkX6B7dXXAYUtQzSglO2dI-uUWJIrQxR6W7Ou6KgbpH_9bO9751XDdg9FIEzPfL3Uh_oA-DyOcTz0Jae26jkTnTB/s1600/form4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyCc__kcvWGxa9gkOsmDpjQf1aXGK0F2QDEVzWSg4fT3dNdNaYLpR0TkX6B7dXXAYUtQzSglO2dI-uUWJIrQxR6W7Ou6KgbpH_9bO9751XDdg9FIEzPfL3Uh_oA-DyOcTz0Jae26jkTnTB/s1600/form4.png" height="292" width="400" /></a></div><br />
<div style="text-align: center;">こちらはシンプルなようで趣の深いデザイン。黒板のようですね。</div><div style="text-align: center;">少年少女時代を懐かしんで、思わずお問い合わせしてしまうかもしれません。</div><div style="text-align: center;"><br />
</div><div style="text-align: left;">このようにお問い合わせフォームと言っても、ただ置いておくだけではなくて、デザインに一手間加えるだけで見違えるように変化しますね。</div><div style="text-align: left;">お客様に「なんかいいな、ここに問い合わせてみようかな?」と思わせるためにも、ちょっとオシャレなデザインのフォームを置いてみてはいかがでしょうか?</div><div style="text-align: left;"><br />
</div><div style="text-align: left;">今回ご紹介したデザインは全て以下のページより無料でダウンロードできます。</div><div style="text-align: left;"><br />
</div><div style="text-align: left;"><span style="font-size: large;">MuseFree.com</span></div><div style="text-align: left;"><a href="http://musefree.com/forms/" target="_blank">http://musefree.com/forms/</a></div><div style="text-align: left;"><br />
</div><div style="text-align: left;"><br />
</div><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comtag:blogger.com,1999:blog-1401068395530447664.post-55256229306318217602014-09-28T20:46:00.000+09:002014-09-28T20:46:14.920+09:00Adobe Museで作ったサイトで自分のブログの更新情報を自動で表示させる方法<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />
こんにちは<br />
<br />
最近自分のホームページのTOPをリニューアルしまして、なかなか好評を頂き嬉しい限りです!<br />
<br />
<span style="font-size: large;"><a href="http://www.madewithmuse.net/" target="_blank">Made with Muse</a></span><br />
ホームページはこちら<br />
<br />
TOPページに自分の更新情報や他の方のMUSEに関するツイートなども自動で表示できるように変更しまして、大分更新が楽になりました!<br />
今まではブログを更新するたびにMUSEのファイルを更新していたものですから…<br />
<br />
また、「これっていったいどうやってるの??」という質問もいくつか頂戴しましたので、今回はこのやり方をご説明したいと思います。<br />
ワードプレスみたいにブログの更新情報を自動で表示させる方法を探している方は多いみたいですね。<br />
<br />
<h2>
<span style="font-size: x-large;">1、Rebel Mouseに登録しましょう</span></h2>
<div>
まずこの方法では「Rebel Mouse」というサービスを使用しております。</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOoTZ3N_VAioi2f_Pl9f5gvDZhBWQ174srXyjwrmmzJG0Pe8uuofTGV9VxXOYAGgEcq2bzvAeWQf-wFKhyphenhyphen8zxSN9WjSKtbFzA1keZeBhRPWAMlknqU4hDDNZy2YIvE6DWFjDLB6dQnM3pl/s1600/RebelMouse-Logo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOoTZ3N_VAioi2f_Pl9f5gvDZhBWQ174srXyjwrmmzJG0Pe8uuofTGV9VxXOYAGgEcq2bzvAeWQf-wFKhyphenhyphen8zxSN9WjSKtbFzA1keZeBhRPWAMlknqU4hDDNZy2YIvE6DWFjDLB6dQnM3pl/s1600/RebelMouse-Logo.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
この可愛いネズミのロゴが目印です!</div>
<div class="separator" style="clear: both; text-align: left;">
可愛い外見とは裏腹に、これがなかなか使えるサービスでして、ネット上のコンテンツを自動で収集して、日本で言う「まとめサイト」とか「キュレーションサービス」を作れる優れものなんです。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVpbiQrTyZtMsJ0s9q-595ms4cyFwQ0Lq7TOgtmvSZAeN3E55lB7lvCmWyUgpxGb5Q-TNaaq9MKxDvh_PYzMxcbYQpoys6oXMQOo-rFIDT2p1VjVA5zOZlTqE8jO6V1VOtURAzEpbzzkVg/s1600/rebelmouse1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVpbiQrTyZtMsJ0s9q-595ms4cyFwQ0Lq7TOgtmvSZAeN3E55lB7lvCmWyUgpxGb5Q-TNaaq9MKxDvh_PYzMxcbYQpoys6oXMQOo-rFIDT2p1VjVA5zOZlTqE8jO6V1VOtURAzEpbzzkVg/s1600/rebelmouse1.png" height="180" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
こちらがログイン画面になりますので、ここから新規登録をしてください。</div>
<div class="separator" style="clear: both; text-align: left;">
有料プランもありますが、今の所無料プランで充分です。</div>
<div class="separator" style="clear: both; text-align: left;">
全部英語なんですが、登録は簡単なんでご自身のプロフィールやサイト情報を入力してください。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h2 style="clear: both; text-align: left;">
<span style="font-size: x-large;">2、自分のブログを登録しよう</span></h2>
<div>
登録が終了すると、ご自身のRebelMouseページが作成されます。</div>
<div>
左側にメニューボタンがありますので、こちらをクリックしてください。</div>
<div>
メニューが表示されますので、「Content Sources」を選択してください。</div>
<div>
ここではご自身のRebelMouseページに表示させる「コンテンツの元ネタ」を登録します。</div>
<div>
<br /></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLGsmEl7F4R71gRulC4D2WdYIRXSyh8Csmnj3MVPtg056OchsDI884pWgCDDD21MF4qZvsnoCEbbPSP35PEAsItxBeFjSW8LWsfin6o16t8SzQaVEOmx67I-k5auQ1RR7tJofRAvj5a-Za/s1600/rebelmouse2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLGsmEl7F4R71gRulC4D2WdYIRXSyh8Csmnj3MVPtg056OchsDI884pWgCDDD21MF4qZvsnoCEbbPSP35PEAsItxBeFjSW8LWsfin6o16t8SzQaVEOmx67I-k5auQ1RR7tJofRAvj5a-Za/s1600/rebelmouse2.png" height="142" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
このようにブログの欄で自分のブログのRSS情報を入力します。</div>
<div class="separator" style="clear: both; text-align: left;">
RSSが分かれば他人のブログでも大丈夫です。</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDfduzXlMs08BcFXquBHPpoyvoCP5mrUrSGIrQ-v4UEjRfxt2kMNeIewHLDkkMUW5OjOnlbvsOdJ_6N4jm77cD0uHDus7o_LqYtpbG7f7njUyvs-hvJI56BJBP0VdoHC3KHashqEbmgrct/s1600/rebelmouse3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDfduzXlMs08BcFXquBHPpoyvoCP5mrUrSGIrQ-v4UEjRfxt2kMNeIewHLDkkMUW5OjOnlbvsOdJ_6N4jm77cD0uHDus7o_LqYtpbG7f7njUyvs-hvJI56BJBP0VdoHC3KHashqEbmgrct/s1600/rebelmouse3.png" height="126" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
他にツイッターも登録できます。表示させるユーザーを登録しましょう。</div>
<div class="separator" style="clear: both; text-align: left;">
検索ワードでもOKです。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi73TOb-_Tfc5Q7zJlpd-Vsz_SvpUHNdyY11yM9bYOiz7O36patD0vkch87wkYg70w32ib-Y2l7KchbO0a1Nvg8r-hz1RBKp_UUbM4ee85wTbv5qYBea5oMilLpw21z6XcBs86yAWwmKak4/s1600/rebelmouse4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi73TOb-_Tfc5Q7zJlpd-Vsz_SvpUHNdyY11yM9bYOiz7O36patD0vkch87wkYg70w32ib-Y2l7KchbO0a1Nvg8r-hz1RBKp_UUbM4ee85wTbv5qYBea5oMilLpw21z6XcBs86yAWwmKak4/s1600/rebelmouse4.png" height="202" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
FacebookやInstagram、Linkedinなんかも登録できます。</div>
<div class="separator" style="clear: both; text-align: left;">
画像にはありませんがYoutubeとかもあります。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
「Publish On」という項目では表示方法を選ぶ事ができます。</div>
<div class="separator" style="clear: both; text-align: left;">
「Post」を選択すると、自動で勝手に表示されます。私は自分のブログ更新情報はPostにしております。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
「Save to Draft」に設定すると、関連するコンテンツは自動でドラフトページという所に一旦格納されます。格納されただけではまだ本番表示はされず、ドラフトページでこのコンテンツの表示を許可する事で始めて本番表示されます。</div>
<div class="separator" style="clear: both; text-align: left;">
自分のサイトに掲載したくない関係ないツイートやブログ投稿などは自動表示されたくないと思いますので、一旦ドラフトに格納したほうがオススメです。</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h2 style="clear: both; text-align: left;">
<span style="font-size: x-large;">3、デザインを選ぼう</span></h2>
<div>
ブログの登録などが終わりましたら、次はデザインを選びます。</div>
<div>
<br /></div>
<div>
メニューの「Design」に移動して、</div>
<div>
<br /></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDtcdENwIsQ43NBgGSn15kBcPeQebjyzmh_HNp1w64oa0nDbepTvj5NeYrPqy2xVRitcu_trgub5bbUUwxLE0VbtPlkv3rY5mUAryBEQkDiZKRPrp83b30vmlEyQCxDrihwsEJ7N-8UVhW/s1600/rebelmouse7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDtcdENwIsQ43NBgGSn15kBcPeQebjyzmh_HNp1w64oa0nDbepTvj5NeYrPqy2xVRitcu_trgub5bbUUwxLE0VbtPlkv3rY5mUAryBEQkDiZKRPrp83b30vmlEyQCxDrihwsEJ7N-8UVhW/s1600/rebelmouse7.png" height="221" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
色々なデザインのレイアウトがありますので、気に入ったデザインを選択しましょう。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFuDOIxdqIpEvu-lvixNw029exgowty4DThq31isRIMjBL5MBZUjQGokYPKUu0c50jcLL7oMec3E_iFzWmwngDZCKYLPWI9cgmBFLPYeuZwAi5xYDuJmkOgN4mR-sJa4aiORYl7c3m_QHa/s1600/rebelmouse8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFuDOIxdqIpEvu-lvixNw029exgowty4DThq31isRIMjBL5MBZUjQGokYPKUu0c50jcLL7oMec3E_iFzWmwngDZCKYLPWI9cgmBFLPYeuZwAi5xYDuJmkOgN4mR-sJa4aiORYl7c3m_QHa/s1600/rebelmouse8.png" height="207" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
ちなみに私のデザインはこんな感じです。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h2 style="clear: both; text-align: left;">
<span style="font-size: x-large;">4、Museのサイトに埋め込もう!!</span></h2>
<div>
ここまで出来上がりましたらほぼ完成です。</div>
<div>
メニュー画面から「Embed」を選択します。</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjriVLSBTiQLueLxjNfscXXegUavib6OHYo6Tusth7_mSiFTQbMtPw3njXmlBGwKoNNioyuiVu6JrF56aM1o67V8T8NFPr-b9hRSxaJIg1FBYWJifCWW_4WjFbw4xkv2Hbahg5KYy_99mGv/s1600/rebelmouse5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjriVLSBTiQLueLxjNfscXXegUavib6OHYo6Tusth7_mSiFTQbMtPw3njXmlBGwKoNNioyuiVu6JrF56aM1o67V8T8NFPr-b9hRSxaJIg1FBYWJifCWW_4WjFbw4xkv2Hbahg5KYy_99mGv/s1600/rebelmouse5.png" height="201" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
このページで埋め込み方を選択します。</div>
<div class="separator" style="clear: both; text-align: left;">
いくつか項目がありますんもで、お好きなものを選択してください。</div>
<div class="separator" style="clear: both; text-align: left;">
終わりましたら「Generate」をクリックします。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCtgu1TDJ7Zq6eJvvIM-lisNWEcyqvyb4u27RC4yTUDwPELhxrKpNrqvIteky75CstaZCXy2KuxnbQeaYJ3Nhkzuzmepse9Y13IxKoB1cebyIkmd0TgLUl6_MZMuq_t5BWEjY4cT6t2Fpq/s1600/rebelmouse6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCtgu1TDJ7Zq6eJvvIM-lisNWEcyqvyb4u27RC4yTUDwPELhxrKpNrqvIteky75CstaZCXy2KuxnbQeaYJ3Nhkzuzmepse9Y13IxKoB1cebyIkmd0TgLUl6_MZMuq_t5BWEjY4cT6t2Fpq/s1600/rebelmouse6.png" height="50" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
このようにHTMLコードが生成されますので、こちらをコピペします。</div>
<div class="separator" style="clear: both; text-align: left;">
後はMuseのファイルを開いて、表示したい場所にこのHTMLコードを「オブジェクト」→「HTMLを挿入」から埋めこんでください。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
このサービスが優れているのはレスポンシヴに対応しておりますので、お好きな大きさで表示するこができます。スマホのページにも埋め込むことができますよ!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
ブログはRSSを取得したら表示されますので、投稿してから表示されるまでに多少時間がかかる事もありますが、とても便利なサービスですので、是非ご活用頂ければと思います。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
今回ご紹介した「Rebel Mouse」は下記のURLから登録可能です。</div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: large;"><a href="http://www.rebelmouse.com/" target="_blank">http://www.rebelmouse.com/</a></span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
また、私が運営しているAdobe Muse情報サイト「Made with Muse」も宜しくお願いいたします。</div>
<div class="separator" style="clear: both;">
<span style="font-size: x-large;"><a href="http://madewithmuse.net/" target="_blank">Made with Muse</a></span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div>
それでは、またお会いしましょう。</div>
<br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comtag:blogger.com,1999:blog-1401068395530447664.post-5192903502112537242014-09-21T22:16:00.000+09:002014-09-21T22:16:15.153+09:00無料のオリジナルAdobe Museテンプレート配信しております!<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />
<br />
こんにちは!<br />
<br />
先日からなんですが、「Made with Muse」オリジナルのAdobe Museテンプレート「PHOTOGRAPHER」を配信しております!<br />
<br />
一応カメラマン向けに作成しましたが、色々な業種でお使い頂けると思います。<br />
是非ともみなさまダウンロードしてみてくださいね。<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC4r5EtJqVp0Lj_6y5fOIAr3-e5XwSztOHqEfEuPHmTZuThrWCGrOKcaXR0IPQwUJv9PQQ58ed6tWULT7VH-5Hb_we9lQxRrq2XXq1V4JAeDxd49f1JzPM3YY3FXJl5O0xBAEgydMmAuox/s1600/photographer1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC4r5EtJqVp0Lj_6y5fOIAr3-e5XwSztOHqEfEuPHmTZuThrWCGrOKcaXR0IPQwUJv9PQQ58ed6tWULT7VH-5Hb_we9lQxRrq2XXq1V4JAeDxd49f1JzPM3YY3FXJl5O0xBAEgydMmAuox/s400/photographer1.png" height="206" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
見た目はこんな感じです。</div>
<div class="separator" style="clear: both; text-align: center;">
トップは写真が目立つようにフルスクリーンのスライドショーを設置。</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcvM_wNuF1wCePM9tYFiXk5o-ySAua8_BnmhGCg3OUoqSdey9XE-RixQenXWHSq0uBUrMXw7s5vDNmjIlYU27mJ9bOI8Av0-9xS0IYi97DJAYCqlmRCSSmSnMj7Pl8ES7rZaLhgQVM-yrR/s1600/photographer2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcvM_wNuF1wCePM9tYFiXk5o-ySAua8_BnmhGCg3OUoqSdey9XE-RixQenXWHSq0uBUrMXw7s5vDNmjIlYU27mJ9bOI8Av0-9xS0IYi97DJAYCqlmRCSSmSnMj7Pl8ES7rZaLhgQVM-yrR/s400/photographer2.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
こちらは作品を展示する「ギャラリー」コーナーです。</div>
<div class="separator" style="clear: both; text-align: center;">
ジャンルを変更する際にページをいちいち移動するのは面倒なので、</div>
<div class="separator" style="clear: both; text-align: center;">
スライドショーで移動できるようにしました。</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGpTe5EnFSAsl2YAY0MQFpTViJbTI9I4qavA4_N2RpGnNN8nyuNY2iPtO8H_IahZkKoyuHp4Xs_EdpozBCkKxR1fDf9YrCErc0SQjGN62LvgFDuKHS6Dw1-HdJp2ASbdp6xgHM8JDOhZFV/s1600/photographer3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGpTe5EnFSAsl2YAY0MQFpTViJbTI9I4qavA4_N2RpGnNN8nyuNY2iPtO8H_IahZkKoyuHp4Xs_EdpozBCkKxR1fDf9YrCErc0SQjGN62LvgFDuKHS6Dw1-HdJp2ASbdp6xgHM8JDOhZFV/s400/photographer3.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
こちらは作品の詳細ページです。</div>
<div class="separator" style="clear: both; text-align: center;">
スライドショーで画像が切り替わります。</div>
<div class="separator" style="clear: both; text-align: center;">
作品が目立つようにシンプルに作成しました。</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMWGE7Yt0kpkfF26HBKAuMENxFNUqwx_d7F37yDoydqDs7EY824gg7aV0dQo-GKGAp31L5V-hYpGKs5M50LkcMETZGr4KAR4a77LoOV059zRC8apHIgILDVCnWDxFWf1yoCaMP6j61RwEU/s1600/photographer4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMWGE7Yt0kpkfF26HBKAuMENxFNUqwx_d7F37yDoydqDs7EY824gg7aV0dQo-GKGAp31L5V-hYpGKs5M50LkcMETZGr4KAR4a77LoOV059zRC8apHIgILDVCnWDxFWf1yoCaMP6j61RwEU/s400/photographer4.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
お問い合わせフォームも設置してあります。</div>
<div class="separator" style="clear: both; text-align: center;">
これもいちいちお問い合わせページまでリンクするのも面倒ですので、</div>
<div class="separator" style="clear: both; text-align: center;">
「contact」をクリックするとライトボックス風に画面に表示されます。</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbLGIPWKfswkPByve76Ch3WmkcdbGfKPtcZxPd2_Y1crtueleq7OraOS34z47Zwj8IJOrPDEy2Sthi6YhvgkrZm7K181d4_MTjwT-LLe9SrwAkmiW5sXtU6160FgIa458s_7KkSd4Cnug8/s1600/photographer5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbLGIPWKfswkPByve76Ch3WmkcdbGfKPtcZxPd2_Y1crtueleq7OraOS34z47Zwj8IJOrPDEy2Sthi6YhvgkrZm7K181d4_MTjwT-LLe9SrwAkmiW5sXtU6160FgIa458s_7KkSd4Cnug8/s400/photographer5.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
こちらはプロフィールを入れるページです。</div>
<div class="separator" style="clear: both; text-align: center;">
ご自身の写真を入れるのがベストかと思います。</div>
<div class="separator" style="clear: both; text-align: center;">
私は恥ずかしいので、鳥の写真です笑</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
いかがでしたでしょうか?</div>
<div class="separator" style="clear: both; text-align: left;">
是非ともダウンロードして頂き、Museサイト作成の練習にお使いくださいませ。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
こちらの無料テンプレートは下記サイトにて配信しております。</div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://www.madewithmuse.net/freetemplate1.html" target="_blank">http://www.madewithmuse.net/freetemplate1.html</a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
また、私が運営しているAdobe Muse情報サイト「Made with Muse」も宜しくお願いいたします。</div>
<div class="separator" style="clear: both;">
<span style="font-size: x-large;"><a href="http://madewithmuse.net/" target="_blank">Made with Muse</a></span></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
それでは、またお会いしましょう。</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comtag:blogger.com,1999:blog-1401068395530447664.post-88544160324748060372014-09-17T22:13:00.000+09:002014-09-17T22:13:02.330+09:00Adobe Museで使えるオシャレで無料のプリローダーウィジェット8種類!!<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />
こんにちは<div><br />
</div><div>本日は、配信開始されたばかりだと噂の「プリローダーウィジェット」をご紹介します!</div><div><br />
</div><div>プリローダーとは、Webサイトを読み込んでいる間に画面の真ん中らへんでクルクル回っているアレです、アレ!!</div><div><br />
</div><div>最近のWebサイトは動画だのRETINAディスプレー対応画像だのどんどん高機能になっていますが、重いデーターが増えるにつれサイトの読み込みも重くなってしまいますよね。</div><div><br />
</div><div>そんな時に便利なのが、重いデーターを読み込んでいる最中に表示できるプリローダー。</div><div>凝ったデザインのプリローダーは見ているだけで飽きないですよね。</div><div><br />
</div><div>そんな、プリローダーが簡単にMuseで作ったサイトに表示できるようになるのが今回ご紹介する「プリローダーウィジェット」です。</div><div><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWpewNNbXuc5-Oez-FbilfNoqR4zS3Ad91L0dc3UNkEqYxCXOFy7HoyjZJx3gnSo9tklbfXO5DjhcQT9R6Db57Y3czQWeN8TxRtpOqZimE_f1QMNt8hzDVDhbbCrg5aQjTPjf5bLBzTAo1/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-09-17+21.54.17.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWpewNNbXuc5-Oez-FbilfNoqR4zS3Ad91L0dc3UNkEqYxCXOFy7HoyjZJx3gnSo9tklbfXO5DjhcQT9R6Db57Y3czQWeN8TxRtpOqZimE_f1QMNt8hzDVDhbbCrg5aQjTPjf5bLBzTAo1/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-09-17+21.54.17.png" height="141" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: center;">こちらがご紹介するプリローダーです。</div><div class="separator" style="clear: both; text-align: center;">画像には4つしかありませんが、他にもあります。</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXZ_UIfH6g1Hma-N9AmdJ4pqSCSTGrxRYJzk1YESqU3v35Iuiid-JN0C8S8WVhO5z-7QcrTW5X3ubejiS0f3YZvUw_E8xpKLc9PdVMLns8cBFDGs7olgPttKY0wzfrCDweogiIkNQqkGcg/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-09-17+21.54.28.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXZ_UIfH6g1Hma-N9AmdJ4pqSCSTGrxRYJzk1YESqU3v35Iuiid-JN0C8S8WVhO5z-7QcrTW5X3ubejiS0f3YZvUw_E8xpKLc9PdVMLns8cBFDGs7olgPttKY0wzfrCDweogiIkNQqkGcg/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-09-17+21.54.28.png" height="379" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: center;">こんなのとか</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ipeE3y2VJBii0SFYr329Uh7W7eMzyJj7WeQf7GdDxWHchoik2yA6f7TuF8SDlenpZWqpcLXVUJSGEqn25gvd351hBeBSaI6k7wQoLQXoJ2G3W5pzBV5T9owdUJ0IrLQjHboHbfAZgi9z/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-09-17+21.54.31.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ipeE3y2VJBii0SFYr329Uh7W7eMzyJj7WeQf7GdDxWHchoik2yA6f7TuF8SDlenpZWqpcLXVUJSGEqn25gvd351hBeBSaI6k7wQoLQXoJ2G3W5pzBV5T9owdUJ0IrLQjHboHbfAZgi9z/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-09-17+21.54.31.png" height="337" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: center;">オシャレな円形とか</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP1Jj9v-2nivt6Ys_U0ycXgD4lbYgk1wir3cZg6I52jyBPwJmacuEw5PrdslVLxb9CN26r6x4_c_aNA14IkaMLkYqc0bzQqxa1N_cNsbPCzrSTVy4UFi5ojawHgoDcTSy3PL1sfg8YWZqB/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-09-17+21.54.35.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP1Jj9v-2nivt6Ys_U0ycXgD4lbYgk1wir3cZg6I52jyBPwJmacuEw5PrdslVLxb9CN26r6x4_c_aNA14IkaMLkYqc0bzQqxa1N_cNsbPCzrSTVy4UFi5ojawHgoDcTSy3PL1sfg8YWZqB/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-09-17+21.54.35.png" height="329" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: center;">水玉的なデザイン?</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoVpyLgSRmctD-ZEaVKAOqoVed8U9YTaeysI9C49MNk2Yzrx8naS6ZNLe1fwWmUxmzd6tTAR3dTnETs-11zBypbNhrB14YsDCwba5PpLmaINu4T2nzjUrqeSyYIC3xsgUGzv2LrImdYRqH/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-09-17+21.54.38.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoVpyLgSRmctD-ZEaVKAOqoVed8U9YTaeysI9C49MNk2Yzrx8naS6ZNLe1fwWmUxmzd6tTAR3dTnETs-11zBypbNhrB14YsDCwba5PpLmaINu4T2nzjUrqeSyYIC3xsgUGzv2LrImdYRqH/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-09-17+21.54.38.png" height="304" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: center;">これは定番のクルクル系</div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: left;">しかも、このウィジェットはサイズはもちろん、色や背景色、動作スピードなど細かい設定も行えてしまうんです!!</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">これで無料なんですから、たいしたもの。</div><div class="separator" style="clear: both; text-align: left;">是が非でもダウンロードして頂いて、この秋他のサイトに差をつけてみませんか?</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">今回ご紹介したウィジェットは下記のサイトからダウンロード可能です。</div><div class="separator" style="clear: both; text-align: left;"><a href="http://widgets-musethemes.businesscatalyst.com/tb036.html#sthash.devGmIrB.dpbs" target="_blank">http://widgets-musethemes.businesscatalyst.com/tb036.html#sthash.devGmIrB.dpbs</a></div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both;">また、私が運営しているAdobe Muse情報サイト「Made with Muse」も宜しくお願いいたします。</div><div class="separator" style="clear: both;"><span style="font-size: x-large;"><a href="http://madewithmuse.net/" target="_blank">Made with Muse</a></span></div><div class="separator" style="clear: both;"><br />
</div><div class="separator" style="clear: both;">それでは、またお会いしましょう。</div><div class="separator" style="clear: both;"><br />
</div><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comtag:blogger.com,1999:blog-1401068395530447664.post-50296613500738866112014-09-13T22:56:00.000+09:002014-09-13T22:56:37.579+09:00Adobe Museで作ったサイトにinstagramの写真を埋め込める無料ウィジェット<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />
こんにちは<br />
<div>
<br /></div>
<div>
Adobe MuseにはTwitter、Facebook、Youtubeなど様々なソーシャルメディアと連携できるウィジェットが用意されております。</div>
<div>
<br /></div>
<div>
有名どころはもちろん、VimeoやPinterest、Paypalなんて日本ではちょっとマイナーな物まで用意されており充実していますよね。</div>
<div>
<br /></div>
<h2>
<b><span style="font-size: x-large;">しかし、なぜか「Instagram」だけは用意されておりません!</span></b></h2>
<div>
<b><span style="font-size: x-large;"><br /></span></b></div>
<div>
「Instagram」と言えば若者に大人気の写真共有サイトですし、簡単にオシャレな写真が撮影できるので若者を中心にたくさんのユーザーを抱える巨大プラットフォーム。</div>
<div>
<br /></div>
<div>
なぜだかMuseには「Instagram」の機能はついておりませんが、有名なMuseの素材配信サイト「QooQee」にて、ばっちり「Instagram」ウィジェットが配信されておりましたのでご紹介いたします。</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijaJGWAxwrX2KZTkR03mUlQP-widYmR1jMOvgEgoXFodQO43mCiKrtk9tq35wFM6oup_uQ1ZHs69FmnLyAin1lkiK9K-uLpSWy3DmjXzdv6bamyQqg-wRxD1YJgAdqJZVB_APTIBKXGkeq/s1600/Insta-750x750.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijaJGWAxwrX2KZTkR03mUlQP-widYmR1jMOvgEgoXFodQO43mCiKrtk9tq35wFM6oup_uQ1ZHs69FmnLyAin1lkiK9K-uLpSWy3DmjXzdv6bamyQqg-wRxD1YJgAdqJZVB_APTIBKXGkeq/s1600/Insta-750x750.jpg" height="400" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
こんな感じです。</div>
<div class="separator" style="clear: both; text-align: left;">
こちらのサイト、とにかくオシャレです。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
いつもデザインの参考にさせて頂こうと思い、見ているのですが、オシャレすぎて自分のセンスの無さが恥ずかしくなり、そっとパソコンを閉じます。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj50Eba3MiRijc4K4zPuuRCHoC7fhGjTV72RCaFaNzG84jpvtHg7-lMvojmdaCVjGooqXT6kV2XikjsnupUJirFyDpvcK5rAz53_xCZrAjfMjY5PUNhPpUwhyphenhyphenlzRLuaFV6ug-UAUgNzRYR5/s1600/instagramposter-main-840x840.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj50Eba3MiRijc4K4zPuuRCHoC7fhGjTV72RCaFaNzG84jpvtHg7-lMvojmdaCVjGooqXT6kV2XikjsnupUJirFyDpvcK5rAz53_xCZrAjfMjY5PUNhPpUwhyphenhyphenlzRLuaFV6ug-UAUgNzRYR5/s1600/instagramposter-main-840x840.jpg" height="400" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
こちら結構細かくカスタマイズが可能です。</div>
<div class="separator" style="clear: both; text-align: left;">
縦横の行数、表示される写真の最大数、もちろん写真自体のサイズなど</div>
<div class="separator" style="clear: both; text-align: left;">
色々細かく設定できます。</div>
<div>
<br /></div>
<div>
このブログを書いている間に気がついたのですが、Web版のInstagramでも写真の埋め込み機能がありました!</div>
<div>
<br /></div>
<div>
写真の横に埋め込み用の「Embed」ボタンがあり、クリックすると表示されるHTMLをサイトに埋め込めるようです。</div>
<div>
<br /></div>
<div>
しかしこのやり方では写真を一枚一枚個別に埋め込んでいく必要がありますので、まとめてたくさん表示したい方は上記のウィジェットを使用する事をオススメいたします。</div>
<div>
<br /></div>
<div>
Instagramの写真はオシャレな雰囲気がありますので、サイトに埋め込んでおけば一気にオシャレなサイトが出来上がりそうですね!</div>
<div>
<br /></div>
<div>
こちらは下記のリンクよりダウンロード可能です。</div>
<div>
<a href="http://www.qooqee.com/adobe-muse-instagram-widget" target="_blank">http://www.qooqee.com/adobe-muse-instagram-widget</a></div>
<div>
<br /></div>
<div>
<div class="separator" style="clear: both;">
また、私が運営しているAdobe Muse情報サイト「Made with Muse」も宜しくお願いいたします。</div>
<div class="separator" style="clear: both;">
<span style="font-size: x-large;"><a href="http://madewithmuse.net/" target="_blank">Made with Muse</a></span></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
それでは、またお会いしましょう。</div>
</div>
<br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comtag:blogger.com,1999:blog-1401068395530447664.post-48921221267087401452014-09-03T22:54:00.000+09:002014-09-03T22:56:15.638+09:00Adobe Museで簡単にパスワード保護されたページを作る方法<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />
こんにちは<br />
<br />
<h2>
<span style="font-size: large;">本日はTwitterでご質問頂いた「パスワード保護されたページを作る方法」について書きたいと思います。</span></h2>
<div>
<span style="font-size: large;"><br />
</span></div>
やり方としてはjavascriptを埋め込むだけなんですが、色々な方法があります。<br />
<br />
Web初心者の方には分かりにくい内容だったり、ソースコードを見ればパスが分かってしまうようなやり方もありましたので、悩んだ末に一番シンプルな方法をご紹介させて頂きます。<br />
<br />
<span style="font-size: large;">1、まず「パスワードを入力するページ」と「正確なパスワードを入力すると表示されるページ」の2つを作成します。</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT7xbJdparO22FC8wASb89khK5TmOts6gCp9VpTx9o3-CJXDoNHzt-szHBocRKjNXO3J12NT_kfT3dBW5tIKX1cQRH3LNUahEiCbi_lfmtzEO8ADIMVCNINBsnMJNZee6N2NOPT1QZPUUH/s1600/pass4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT7xbJdparO22FC8wASb89khK5TmOts6gCp9VpTx9o3-CJXDoNHzt-szHBocRKjNXO3J12NT_kfT3dBW5tIKX1cQRH3LNUahEiCbi_lfmtzEO8ADIMVCNINBsnMJNZee6N2NOPT1QZPUUH/s1600/pass4.png" height="222" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
図のように2ページ作りましょう。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
「passwordprotected」というページが「パスワードを入力するページ」</div>
<div class="separator" style="clear: both; text-align: left;">
「tokyo」と書いているのが「正確なパスワードを入力すると表示されるページ」</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
です。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
ページ名は任意ですので、お好きな名前を付けてください。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
ここで注意なのですが、</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: large;">「正確なパスワードを入力すると表示されるページ」の名前(この場合はtokyo)は入力するパスワードと同じにしてください。</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: large;"><br />
</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: large;">2、javascriptを挿入する</span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
「パスワードを入力するページ」を開きます。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMBj4ElY1h0AlbGJvc_ZTzRUDaEntPcB30mib35fEWVgJdCpyRfNJsMDzXccShlS6d22DO7cQrDrF7Sm9-vEhOf74yzaRFX3rk76eQY5NCbMwVkmcEWWgLJoqzwwIVJ-J2fy1gpF-V1Gr2/s1600/pass2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMBj4ElY1h0AlbGJvc_ZTzRUDaEntPcB30mib35fEWVgJdCpyRfNJsMDzXccShlS6d22DO7cQrDrF7Sm9-vEhOf74yzaRFX3rk76eQY5NCbMwVkmcEWWgLJoqzwwIVJ-J2fy1gpF-V1Gr2/s1600/pass2.png" height="215" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
このようにお好きにデザインしてください。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
次に「オブジェクト」から「HTMLを挿入する」を選び、</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwsGSVKZF1EZHYvXq6_bzlcqd7V7HMvSjycFGdkoM3VoVHprnlRGLGwUwXX4sZkMsKNGpPvJvQDIOrQ5LAQLZBtdLNQqAQUfasODMo0X8FbWuteP7Eqx5rrfBqN2QgGNhNtzfO4IO2GsQk/s1600/pass1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwsGSVKZF1EZHYvXq6_bzlcqd7V7HMvSjycFGdkoM3VoVHprnlRGLGwUwXX4sZkMsKNGpPvJvQDIOrQ5LAQLZBtdLNQqAQUfasODMo0X8FbWuteP7Eqx5rrfBqN2QgGNhNtzfO4IO2GsQk/s1600/pass1.png" height="223" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
下記のコードをコピペして貼付けてください。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
<!-- start GateKeeper code --></div>
<div class="separator" style="clear: both;">
<!-- http://www.HTMLisEasy.com/keeper/ --></div>
<div class="separator" style="clear: both;">
<form name="keeper" action="javascript:location.href =</div>
<div class="separator" style="clear: both;">
window.document.keeper.page.value + '.html'" style="margin:0;"></div>
<div class="separator" style="clear: both;">
<div style="display:inline;"></div>
<div class="separator" style="clear: both;">
<input type="text" name="page"></div>
<div class="separator" style="clear: both;">
<!-- <input type="submit" value="Go"> --></div>
<div class="separator" style="clear: both;">
<noscript><div style="display:inline;color:#ff0000;</div>
<div class="separator" style="clear: both;">
background-color:#ffff66; font:normal 11px tahoma,sans-serif;"></div>
<div class="separator" style="clear: both;">
<br>Javascript is required to access this<br>area. Yours seems</div>
<div class="separator" style="clear: both;">
to be disabled.</div></noscript></div></form></div>
<div class="separator" style="clear: both;">
<!-- end GateKeeper code --></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
すると下記のように白いボックスが表示されますのでお好きな場所に配置してください。</div>
<div class="separator" style="clear: both; text-align: left;">
これがパスワード入力ボックスになります。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe4zU7CjkFmdlSIKXbYLGkST6-pM50RO6iAZkwrbTmJxdSzzXvEdeOtsFvSTH2jrmrhcQMvmF-mQBPKXTr6AqLCj7hOTfGFs1fpwlutjQ2QGLivwBzY5hZzKmoIJEuiTh_1RjsGejlE_Oc/s1600/pass3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe4zU7CjkFmdlSIKXbYLGkST6-pM50RO6iAZkwrbTmJxdSzzXvEdeOtsFvSTH2jrmrhcQMvmF-mQBPKXTr6AqLCj7hOTfGFs1fpwlutjQ2QGLivwBzY5hZzKmoIJEuiTh_1RjsGejlE_Oc/s1600/pass3.png" height="215" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
これで完成です。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: large;">3、秘密のページをサイトマップ、メニューから外す</span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
次にプラン画面に戻ります。</div>
<div class="separator" style="clear: both; text-align: left;">
秘密のページ(この場合はtokyoというページ)を右クリックし、ページプロパティを開きます。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi2aglDR9BXjn5rGaCRF6igH3I-Bo-h_Qq6yQszq4sGjixg36yNZ2qCvMY5pQwHJWFNtHvYwE66dvA5EGXaxZuGAdmrpmqAP49libKPq-8ur6Lsabh-z02KCgWI9W-SspVHrPr4Abwp3pI/s1600/pass5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi2aglDR9BXjn5rGaCRF6igH3I-Bo-h_Qq6yQszq4sGjixg36yNZ2qCvMY5pQwHJWFNtHvYwE66dvA5EGXaxZuGAdmrpmqAP49libKPq-8ur6Lsabh-z02KCgWI9W-SspVHrPr4Abwp3pI/s1600/pass5.png" height="325" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
「ページをsitemap.xmlに含める」のチェックを外します。</div>
<div class="separator" style="clear: both; text-align: left;">
「メニューオプション」は「ページをメニューに含まない」に設定します。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
これはgoogleなどの検索結果に秘密のページが表示されないように隠すために行います。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
以上でパブリッシュして本番環境に移してみましょう。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://www.madewithmuse.net/passwordprotected.html" target="_blank">http://www.madewithmuse.net/passwordprotected.html</a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
上記のページを表示して、パスワードを入力してみてください。</div>
<div class="separator" style="clear: both; text-align: left;">
(パスワードは「tokyo」です)</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
上手く行きましたでしょうか?</div>
<div class="separator" style="clear: both; text-align: left;">
是非使ってみてくださいね。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
パスワードを変更したい時は一緒にページの名前も変更してくださいね。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
※注意</div>
<div class="separator" style="clear: both; text-align: left;">
このやり方はセキュリティ的には高いとは言えませんので、大事なデーターや機密情報などが絡む場合は使用しないでください!これが原因で何か問題が起きても当方は責任は取れませんのでご了承くださいませ。自己責任でお使いくださいませ。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
今回はこちらのサイトで紹介されているjavascriptを参考にさせて頂きました。</div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://www.htmliseasy.com/keeper/" target="_blank">http://www.htmliseasy.com/keeper/</a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
また、私が運営しているAdobe Muse情報サイト「Made with Muse」も宜しくお願いいたします。</div>
<div class="separator" style="clear: both;">
<span style="font-size: x-large;"><a href="http://madewithmuse.net/" target="_blank">Made with Muse</a></span></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
それでは、またお会いしましょう。</div>
<br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comtag:blogger.com,1999:blog-1401068395530447664.post-59143153274349497302014-09-02T23:37:00.000+09:002014-09-02T23:37:30.284+09:00Adobe Museの「回り込み」機能で画像の周りに文章を回り込ませる方法<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />
こんにちは!<br />
<br />
本日はAdobe Museの「回り込み」機能の使い方をご説明したいと思います。<br />
<br />
「回り込み」機能とは、読んで字の如く画像の周りに文章を回り込ませる機能です。<br />
この機能を使えば長い文章があっても、効率的にスペースを使えるようになります。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWbQQ5lgn9QOXqJBQtsYlpkfwnhGkRnCIt1iVyswN7YH5P0pBW0ve-UgsRN88JT6h7oS4CUSkMpYVhsv1uetThuVeq33lo7xk6WnYR22ep0kwx7SwzvMOX5hPgW4fVdLYupmRC2c8oEQ04/s1600/image+wrap.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWbQQ5lgn9QOXqJBQtsYlpkfwnhGkRnCIt1iVyswN7YH5P0pBW0ve-UgsRN88JT6h7oS4CUSkMpYVhsv1uetThuVeq33lo7xk6WnYR22ep0kwx7SwzvMOX5hPgW4fVdLYupmRC2c8oEQ04/s1600/image+wrap.png" height="225" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
まずは文章と画像を用意しましょう。</div>
<div class="separator" style="clear: both; text-align: left;">
このままでもデザイン的に問題は無いのですが、画像の下に余白が出来てしまいちょっと寂しい感じがしますね。。。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3zBAUxUNw-eMcObQ0Q42TB5Cca6YaU2RewBmOp3HtrqWmfy1SG6_Z-lcdGv-vVS3dYX9yMiELJ_Vkdo_KmRARQNUIVC9tuE0tjvByqIXb-eFvnxIGyJkLZuaBfinLGlOvU3OIQgq2NmSl/s1600/imagewrap2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3zBAUxUNw-eMcObQ0Q42TB5Cca6YaU2RewBmOp3HtrqWmfy1SG6_Z-lcdGv-vVS3dYX9yMiELJ_Vkdo_KmRARQNUIVC9tuE0tjvByqIXb-eFvnxIGyJkLZuaBfinLGlOvU3OIQgq2NmSl/s1600/imagewrap2.png" height="248" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
回り込みのやり方ですが</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
1、まず画像を選択して、コピーまたはカットをします。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
2、次にテキストボックスをダブルクリックして編集状態にし、画像を入れたい部分にカーソルを置いてください。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
3、先ほどコピーした画像をコピーして貼付けてください。これで完了です。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqMmZtpy7iHVMeTsU-o0cCaBRtU8WhwWVezySWeK01od8gJc2kxRC9nK2JYVNzvix1YjpjssJ4o_wmUbSVj1iIGl_Yii_Kklj5M9n9bAvyi7BDe-0FaMAY-azQ2ygRTQE4mtOwL7I6wW2A/s1600/iamgewrap3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqMmZtpy7iHVMeTsU-o0cCaBRtU8WhwWVezySWeK01od8gJc2kxRC9nK2JYVNzvix1YjpjssJ4o_wmUbSVj1iIGl_Yii_Kklj5M9n9bAvyi7BDe-0FaMAY-azQ2ygRTQE4mtOwL7I6wW2A/s1600/iamgewrap3.png" height="193" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
このように画像回り込みが完成した状態になるはずです。</div>
<div class="separator" style="clear: both; text-align: left;">
画像を選択し、サイズを変える事も出来ますしとても便利です。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYUahFrFFqoalJ9yr79QJZpE1pGVEVx4rQDg0HJWXFCwhIQGIQ-0UtyoOY2_-_Ag06Tfz-Nt9WZrp5QR3BOWzcLbuoPVYvHq2BdHhUlut6YJET9wO9KARWgn67DF8bk8UYpRoCMS8yof9p/s1600/imagewrap5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYUahFrFFqoalJ9yr79QJZpE1pGVEVx4rQDg0HJWXFCwhIQGIQ-0UtyoOY2_-_Ag06Tfz-Nt9WZrp5QR3BOWzcLbuoPVYvHq2BdHhUlut6YJET9wO9KARWgn67DF8bk8UYpRoCMS8yof9p/s1600/imagewrap5.png" height="210" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
回り込み機能を選択すれば、このように編集する画面が開きます。</div>
<div class="separator" style="clear: both; text-align: left;">
上の3つのボタンで画像の位置を決める事が出来ます。(真ん中、左寄せ、右寄せ)</div>
<div class="separator" style="clear: both; text-align: left;">
下の数値で画像を文章の間のスペース幅を上下左右決める事ができます。</div>
<div class="separator" style="clear: both; text-align: left;">
初期設定では「0」になっておりますので、窮屈な感じです。</div>
<div class="separator" style="clear: both; text-align: left;">
数値を増やして、余白を増やしておきましょう。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
今回ご紹介したのは、いつもより細かい機能でしたが、覚えておくと便利です。</div>
<div class="separator" style="clear: both; text-align: left;">
まだまだご紹介仕切れない程の機能がMuseにはありますので、がんばってコツコツご紹介して行きたいと思います。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
また、私が運営しているAdobe Muse情報サイト「Made with Muse」も宜しくお願いいたします。</div>
<div class="separator" style="clear: both;">
<span style="font-size: x-large;"><a href="http://madewithmuse.net/" target="_blank">Made with Muse</a></span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
それでは、またお会いしましょう。</div>
<br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comtag:blogger.com,1999:blog-1401068395530447664.post-77204651196154710332014-08-26T23:43:00.000+09:002014-08-27T01:01:47.641+09:00Adobe Museで作ったWebサイトに無料でスマホ対応掲示板・フォーラムを作る方法<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />
こんにちは!<br />
<br />
連日の更新でノリにノっている管理人です!<br />
<br />
毎日更新してよくネタが尽きないね?と言われますが、まだまだMuseの魅力を伝えきれておりません!<br />
がんばって更新して参ります!<br />
<br />
さて、今回は表題の通りMuseで作ったサイトに「掲示板・フォーラム」を設置する方法をご紹介いたします。<br />
<br />
今までこういった質問はたくさん頂いておりましたが、やっと簡単かつお金のかからない方法を見つけましたので、この場を借りてシェアさせて頂きます。<br />
<br />
それでは、早速ご紹介いたします。<br />
<br />
<h3>
<span style="font-size: large;">1、無料の掲示板・フォーラム作成サービス「Muut」に登録しましょう。</span></h3>
<div>
<span style="font-size: large;"><br />
</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNm0cR6TT9nDIsJ3IufDR95uBiUGJXOrC12GlOO7wfSLwm7c-uVDfLhR7Cx01wvoCY3zRUw6fxbTCeg1quXHBTyBqulX-O_VJLelNLIlQlqGCX_JRl62NnPCGor9rL3-2C-nXgGPf9ztCU/s1600/muut.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNm0cR6TT9nDIsJ3IufDR95uBiUGJXOrC12GlOO7wfSLwm7c-uVDfLhR7Cx01wvoCY3zRUw6fxbTCeg1quXHBTyBqulX-O_VJLelNLIlQlqGCX_JRl62NnPCGor9rL3-2C-nXgGPf9ztCU/s1600/muut.png" height="230" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
「Muut」は海外のサービスなのですが、世界中の言語に対応しておりますので日本語での掲示板作成が可能です。</div>
<div class="separator" style="clear: both; text-align: left;">
こちらに登録してください。「無料プラン」で大丈夫です。</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipXyjKNISMVAbb_5Mb3lNQLex2iFjEhLavnL1VYt9Aet02epQQT-dpJaKRnDx_gGrLP9KDYlzUl-wK8wB3DPxw-X6ABEZ4LlBacS5BNdaSuUPvdTZouPFMH8iz5NV8y6ULZD5pgtHGVg32/s1600/muut2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipXyjKNISMVAbb_5Mb3lNQLex2iFjEhLavnL1VYt9Aet02epQQT-dpJaKRnDx_gGrLP9KDYlzUl-wK8wB3DPxw-X6ABEZ4LlBacS5BNdaSuUPvdTZouPFMH8iz5NV8y6ULZD5pgtHGVg32/s1600/muut2.png" height="235" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
掲示板のURLを記入していざ登録完了!!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h3 style="clear: both; text-align: left;">
<span style="font-size: large;">2、掲示板を作成しよう</span></h3>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIh8GbaY2LwO91u1CW_uSCDzteK_6i70E5k9e0S9iyKOdF0YmM8tn8ZVu4LAmZBghho3Kk7wtjGYc7w7w0x5Wa0v6jjvjEdemCLtRLRLejJSmuO0b7AKHqkzssafcon49m50NYdLnK04oL/s1600/muut4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIh8GbaY2LwO91u1CW_uSCDzteK_6i70E5k9e0S9iyKOdF0YmM8tn8ZVu4LAmZBghho3Kk7wtjGYc7w7w0x5Wa0v6jjvjEdemCLtRLRLejJSmuO0b7AKHqkzssafcon49m50NYdLnK04oL/s1600/muut4.png" height="196" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
このような管理画面に行き着いたら、まずは最初は英語表記になっておりますので右の「setting」をクリックし言語を日本語に設定しましょう。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7w8UWcimWx3J6BZiCJ4-mTXHzM_j4-Nl55MFqjKa673VZhjFvWhyphenhyphencEy6fCyRBm2DUUE410pJWLwTTkFt4q9hyphenhyphenjtl0mCNK_LNb5aGxV2M58fMYq6cfDjI34ZjahFqDTQfXzclW5Z8U7sq_/s1600/muut3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7w8UWcimWx3J6BZiCJ4-mTXHzM_j4-Nl55MFqjKa673VZhjFvWhyphenhyphencEy6fCyRBm2DUUE410pJWLwTTkFt4q9hyphenhyphenjtl0mCNK_LNb5aGxV2M58fMYq6cfDjI34ZjahFqDTQfXzclW5Z8U7sq_/s1600/muut3.png" height="222" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
「Language」の所から日本語を選択してください。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIh8GbaY2LwO91u1CW_uSCDzteK_6i70E5k9e0S9iyKOdF0YmM8tn8ZVu4LAmZBghho3Kk7wtjGYc7w7w0x5Wa0v6jjvjEdemCLtRLRLejJSmuO0b7AKHqkzssafcon49m50NYdLnK04oL/s1600/muut4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIh8GbaY2LwO91u1CW_uSCDzteK_6i70E5k9e0S9iyKOdF0YmM8tn8ZVu4LAmZBghho3Kk7wtjGYc7w7w0x5Wa0v6jjvjEdemCLtRLRLejJSmuO0b7AKHqkzssafcon49m50NYdLnK04oL/s1600/muut4.png" height="196" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
すると日本語でちゃんと掲示板が作成されました!!!</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyMb3cNjTdIieZbuV7gjnyGJloOorJ1WdudRqvCTyADWAlNN9uOJXG1UkUrtwe_z2Mzt7HG92L_Ni0UD_Zb6gmsM1XdHGyHpHTZTElIEBRLvn7nO1XYYSBGnDYvLcg0dfcEM538SnaE2ML/s1600/muut5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyMb3cNjTdIieZbuV7gjnyGJloOorJ1WdudRqvCTyADWAlNN9uOJXG1UkUrtwe_z2Mzt7HG92L_Ni0UD_Zb6gmsM1XdHGyHpHTZTElIEBRLvn7nO1XYYSBGnDYvLcg0dfcEM538SnaE2ML/s1600/muut5.png" height="196" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
ちょと自分で書き込んでみましょう!</div>
<div class="separator" style="clear: both; text-align: center;">
適当に書いています(笑)</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDg560B08xhTGwSN2AN5CzCZUZcLhTeHlXjnmfo8NzIDSj4IThiZObIJZygwOiEHXIqMaNEIvNI2AOxUaHzk2_JAvvcxhlWpvG-lCoQYZ__GdJp33z70SqwPN38ZyR5wTPZYTZ8PCJdiNI/s1600/muut6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDg560B08xhTGwSN2AN5CzCZUZcLhTeHlXjnmfo8NzIDSj4IThiZObIJZygwOiEHXIqMaNEIvNI2AOxUaHzk2_JAvvcxhlWpvG-lCoQYZ__GdJp33z70SqwPN38ZyR5wTPZYTZ8PCJdiNI/s1600/muut6.png" height="276" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
はい!Enterを押して投稿完了です!</div>
<div class="separator" style="clear: both; text-align: center;">
めちゃくちゃ簡単ですね!</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
これで元となる掲示板は完成しました。</div>
<div class="separator" style="clear: both; text-align: left;">
次はこの掲示板を使ってMuseで作成したサイト内にフォーラムを作ります。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h4 style="clear: both; text-align: left;">
<span style="font-size: large;">3、Museのサイトに掲示板を埋め込もう!</span></h4>
<div>
<span style="font-size: large;"><br />
</span></div>
<div>
いよいよMuseのサイトに掲示板を作る段階になりました。</div>
<div>
まずはMuseでフォーラム用のページを作ってください。</div>
<div>
私はシンプルに「forum」というページを作成しました。</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1mzdEkftdEm5mV2rk7mTtMdYUcJK3sg37nnyqfVtV_00UbciZDm0hFzq-0-dmF__iYDudIUFRoIdZIEMb3FIqZ9jrdEHcjS7fxlrVYkzaqvB6C8O_wSWovc_RmFIxfUVDxyN6LnF9qSWX/s1600/muut7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1mzdEkftdEm5mV2rk7mTtMdYUcJK3sg37nnyqfVtV_00UbciZDm0hFzq-0-dmF__iYDudIUFRoIdZIEMb3FIqZ9jrdEHcjS7fxlrVYkzaqvB6C8O_wSWovc_RmFIxfUVDxyN6LnF9qSWX/s1600/muut7.png" height="349" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
先ほどの「Muut」の管理画面に行くと、右側に「Embed on your site」というリンクがございます。こちらをクリックしてください。</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUchCyCQGkf5YqjY7bHVTv0Eu86OnV5X5ncp9kJjeD2efUYpVCrf8QJYVdc-Y60Alz1wsqZ_w6vaRH73aDqdVdeRjlLTmeqsK3ARRjruyXxmUm6F4NPXf5Giku0he1cGQIWiJDys17GadW/s1600/muut8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUchCyCQGkf5YqjY7bHVTv0Eu86OnV5X5ncp9kJjeD2efUYpVCrf8QJYVdc-Y60Alz1wsqZ_w6vaRH73aDqdVdeRjlLTmeqsK3ARRjruyXxmUm6F4NPXf5Giku0he1cGQIWiJDys17GadW/s1600/muut8.png" height="160" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
すると掲示板を埋め込むためのhtmlが表示されます。</div>
<div class="separator" style="clear: both; text-align: center;">
こちらをコピペしましょう。</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO_BV5nqVyXAIOwv9MbBaEUiiqTTNlRmjeo33qW1KS0abY7Ow2dbjPbgNxyqssu8MptHVVV9O_2h9D3zj0Sp89vIw3YXufmOtsa7m6YlF3vGx8M1sQ4X7riNaBfykqNsS1ae4RsdPzAA9z/s1600/muut9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO_BV5nqVyXAIOwv9MbBaEUiiqTTNlRmjeo33qW1KS0abY7Ow2dbjPbgNxyqssu8MptHVVV9O_2h9D3zj0Sp89vIw3YXufmOtsa7m6YlF3vGx8M1sQ4X7riNaBfykqNsS1ae4RsdPzAA9z/s1600/muut9.png" height="198" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Museのフォーラムのページに戻って、</div>
<div class="separator" style="clear: both; text-align: center;">
「オブジェクト」>「HTMLを挿入」をクリックしてコード挿入画面に先ほコピペしたhtmlを貼付けましょう。</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
ここで注意しなければならない事がございます。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
コードをコピペした際は、</div>
<pre class="m-syntax m-html" style="background-color: white; border-left-color: rgba(0, 0, 0, 0.2); border-left-style: solid; border-left-width: 0.2em; box-sizing: border-box; font-family: consolas, 'droid sans mono', monaco, 'andale mono', 'courier new'; line-height: 1.5; margin-bottom: 1em; margin-top: 1.4em; overflow: auto; padding-left: 0.6em; white-space: pre-wrap;"><span class="m-bracket" style="box-sizing: border-box; color: #1fadc5;"><</span><span class="m-accent1" style="box-sizing: border-box; color: #ff57a8;">script</span> <span class="m-accent2" style="box-sizing: border-box; color: #0099ff;">src</span><span class="m-operator" style="box-sizing: border-box; color: rgba(0, 0, 0, 0.4);">=</span><span class="m-string" style="box-sizing: border-box; color: #be0000;">"//cdn.muut.com/1/moot.min.js"</span><span class="m-bracket" style="box-sizing: border-box; color: #1fadc5;">></span><span class="m-bracket" style="box-sizing: border-box; color: #1fadc5;"></</span><span class="m-accent1" style="box-sizing: border-box; color: #ff57a8;">script</span><span class="m-bracket" style="box-sizing: border-box; color: #1fadc5;">></span></pre>
<div class="separator" style="clear: both; text-align: left;">
となっておりますが、Museに挿入する際は、</div>
<pre class="m-syntax m-html" style="background-color: white; border-left-color: rgba(0, 0, 0, 0.2); border-left-style: solid; border-left-width: 0.2em; box-sizing: border-box; font-family: consolas, 'droid sans mono', monaco, 'andale mono', 'courier new'; line-height: 1.5; margin-bottom: 1em; margin-top: 1.4em; overflow: auto; padding-left: 0.6em; white-space: pre-wrap;"><span class="m-bracket" style="box-sizing: border-box; color: #1fadc5;"><</span><span class="m-accent1" style="box-sizing: border-box; color: #ff57a8;">script</span> <span class="m-accent2" style="box-sizing: border-box; color: #0099ff;">src</span><span class="m-operator" style="box-sizing: border-box; color: rgba(0, 0, 0, 0.4);">=</span><span class="m-string" style="box-sizing: border-box; color: #be0000;">"//cdn.muut.com/1/moot.ja.min.js"</span><span class="m-bracket" style="box-sizing: border-box; color: #1fadc5;">></span><span class="m-bracket" style="box-sizing: border-box; color: #1fadc5;"></</span><span class="m-accent1" style="box-sizing: border-box; color: #ff57a8;">script</span><span class="m-bracket" style="box-sizing: border-box; color: #1fadc5;">></span></pre>
<div class="separator" style="clear: both; text-align: left;">
として、「ja」を追記してください。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
この「ja」とは日本語表記するために必要で、これが無いまま埋め込んでしまいますと英語の掲示板になってしまい、我々日本人には解読不能な掲示板が出来上がってしまいますので、ユーザー様のためにも日本語へ変換するようお願いいたします。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYbW5O4NB7lvvV9n9vnacJSqpa858vXOQcevdSWmaFqUoRcMybtPrNKWaDhPGrierhe86DuZiJLNLMqVya-Ba37ku2y1CdGsxRtLfrzpwzz03ga93Vf1Kc4arqEQRMmRVBkZFaxISx0Vu5/s1600/muut11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYbW5O4NB7lvvV9n9vnacJSqpa858vXOQcevdSWmaFqUoRcMybtPrNKWaDhPGrierhe86DuZiJLNLMqVya-Ba37ku2y1CdGsxRtLfrzpwzz03ga93Vf1Kc4arqEQRMmRVBkZFaxISx0Vu5/s1600/muut11.png" height="262" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
htmlを無事挿入したら、ボックスを任意の横幅まで広げましょう。</div>
<div class="separator" style="clear: both; text-align: center;">
私は両端いっぱいまで広げてみました。</div>
<div class="separator" style="clear: both; text-align: center;">
こちら横幅をモバイルに合わせればモバイル用の掲示板が自動で表示されます。</div>
<div class="separator" style="clear: both; text-align: center;">
便利!!!スマホページで是非ご活用ください。</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
準備は出来ましたか?</div>
<div class="separator" style="clear: both; text-align: center;">
これで完了です。</div>
<div class="separator" style="clear: both; text-align: center;">
サーバーにアップロード!!!</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h2 style="clear: both; text-align: center;">
<span style="font-size: x-large;"><a href="http://www.madewithmuse.net/forum.html" target="_blank">Made with Museユーザーフォーラム</a></span></h2>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
このようなフォーラムが完成しました!</div>
<div class="separator" style="clear: both; text-align: left;">
上のリンクからご覧ください!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
私のサイトもついに掲示板が出来上がりまして、貧相だったコンテンツも一気に充実したような気分になりますね!</div>
<div class="separator" style="clear: both; text-align: left;">
みなさま是非ともお気軽に書き込んでくださいね!</div>
<div class="separator" style="clear: both; text-align: left;">
メルアド登録以外にもfacebookかGoogle+でも登録可能です!</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
そして今回ご紹介させて頂いて掲示板作成サービスは下記のリンクからご覧ください。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b><span style="font-size: large;"><a href="http://muut.com/" target="_blank">Muut</a></span></b></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: large;"><b>http://muut.com/</b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
一点注意が必要なのが、こちらのサービスが終了してしまった場合掲示板も閉鎖される恐れがございますので、こちらは自己責任でお願いします。</div>
<div class="separator" style="clear: both; text-align: left;">
割と有名なサービスのようですので、当分は終わらないと思いますが。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
また、私が運営しているAdobe Muse情報サイト「Made with Muse」も宜しくお願いいたします。</div>
<div class="separator" style="clear: both;">
<span style="font-size: x-large;"><a href="http://madewithmuse.net/" target="_blank">Made with Muse</a></span></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
何かと不便だと言われるMuseですが、外部サービスを応用すればとても便利に使う事ができますね。上手く使いこなせばデザイナーの強い味方となるはずです。</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
ではまたお会いしましょう。</div>
MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comtag:blogger.com,1999:blog-1401068395530447664.post-48596374713459225472014-08-26T00:01:00.003+09:002021-10-08T15:49:17.515+09:00必ずダウンロードしておきたい Adobe Museの便利ウィジェット8セット!<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!--adobe-muse-blog_main_Blog1_300x250_as--><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="7858704350" style="display: inline-block; height: 250px; width: 300px;"><a href="https://tateyomi.fun/" target="_blank">おすすめマンガをご紹介!</a></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />
こんにちは!<br />
<br />
なんと今回で2日連続更新になります!<br />
<br />
何でこんなにペースが早いのかと申しますと、ちょっと良い感じのMuseウィジェットを見つけてしまったからなんです!!<br />
<br />
あの知る人ぞ知るMuse素材サイト大手「MuseGrid」さんご提供の、Museユーザーならマストハブな便利ウィジェット8個セットでございます!<br />
<br />
それでは早速ご紹介させて頂きます。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjom1ux04VPg6CFti5XQaQ13lfrZSC08SVto8rb38yog_8jHPoVzq1_1_sD98M7RB5MkDxUUPNlJtd7QhRzBLhVns34qkw08JMvbIW9qsMqNL8sQopk94MbqsBp7YLAZd84vBBnpZ0fRVRw/s1600/8widget.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjom1ux04VPg6CFti5XQaQ13lfrZSC08SVto8rb38yog_8jHPoVzq1_1_sD98M7RB5MkDxUUPNlJtd7QhRzBLhVns34qkw08JMvbIW9qsMqNL8sQopk94MbqsBp7YLAZd84vBBnpZ0fRVRw/s1600/8widget.png" width="400" /></a></div>
<br />
<h4>
<span style="font-size: large;">1、Google Analytics Installer</span></h4>
<div>
<br /></div>
これはサイトを運営している方にはおなじみのGoogle Analyticsを簡単に導入できるウィジェットです。<br />
やり方は簡単。AnalyticsのプロパティIDを貼付けて、マスターページにウィジェットを置けば終了です。とっても簡単ですね!<br />
<br />
<h4>
<span style="font-size: large;">2、Image Placeholder </span></h4>
<div>
<br /></div>
<div>
サイトを作ってる時に、「写真を置きたい場所があるんだけど、良い写真は無い…。探すのも面倒だなー」という時はございませんでしょうか?</div>
<div>
このウィジェットにはよくある感じの画像が10枚セットされておりまして、良い写真が見つかるまでこの10枚の中から適当な写真を選んで置いておけば、それなりに良い見た目が保てるという、プロトタイプ制作用の便利ウィジェットでございます。<br />
<span style="font-size: large;"><br /></span>
<br />
<h4>
<span style="font-size: large;">3、Font Awesome </span></h4>
</div>
<div>
<br />
これは以前ご紹介した<a href="http://madewithmuse.blogspot.jp/2014/07/adobe-musefont-awesome.html" target="_blank">Font Awesomeウィジェット</a>と同じ内容なんですが、私はこちらの方が使いやすいかなー、と思います。</div>
<h4>
<span style="font-size: large;"><br /></span></h4>
<h4>
<span style="font-size: large;">4、Ion Icons</span></h4>
<div>
<span style="font-size: large;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJrhgAUL_e3SSTGlfHqmbiQ6IMnE2q3G4BaB-uu4A8Uu2EtQoKpLBHmkDAjSvLm6b9Rp2NZjpMriw6Bmjs8na4FaZvij8-jkTkgGiiuUn2mYHZe9GfCbmhXV4n1aF8MNIK2xWC8pSqSSeY/s1600/ion.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="390" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJrhgAUL_e3SSTGlfHqmbiQ6IMnE2q3G4BaB-uu4A8Uu2EtQoKpLBHmkDAjSvLm6b9Rp2NZjpMriw6Bmjs8na4FaZvij8-jkTkgGiiuUn2mYHZe9GfCbmhXV4n1aF8MNIK2xWC8pSqSSeY/s1600/ion.png" width="400" /></a></div>
<div>
<br /></div>
<div>
こちらは私は知らなかったのですが、<a href="http://ionicons.com/" target="_blank">Ion Icons</a>というFont Awesomeみたいなアイコンがございまして、そちらがセットになっている便利なアイコン集でございます。</div>
<div>
個人的には今回はこれが一番良かったです。<br />
<br /></div>
<h4>
<span style="font-size: large;">5、Ion Icons Animated</span></h4>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
こちらは上でご紹介したIon Iconsの中で、アニメーションするアイコンが数個あるのですが、こちらがセットになっているアイコン集でございます。</div>
<div>
動きを出したいときに便利なセットでございます。<br />
<br /></div>
<h4>
<span style="font-size: large;">6、Social Media Meta </span></h4>
<div>
<span style="font-size: large;"><br /></span></div>
これはソーシャルメディアでサイトがシェアされた時に表示されるサイトのメタデータを設定できるウィジェットになります。<br />
これを使うとfacebookでシェアされた時に、タイムライン上で変な画像と意味不明な説明文が出てくる事を防げます。<br />
<br />
<h4>
<span style="font-size: large;">7、Library Installer</span></h4>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
これはヘッダーとフッターの中に好きなhtmlを埋め込めるウィジェットになります。</div>
<div>
「俺のこだわりのコードを入れさせろ!」という意識の高いユーザー様にオススメでございます。bootstrapにも対応しているそうでございます。<br />
<br /></div>
<h4>
<span style="font-size: large;">8、Mobile/Tablet Helper </span></h4>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
こちらはですね、スマホやタブレットのホーム画面に表示される四角いアイコンを設定できる便利なウィジェットです。お気に入りされた時に変なアイコン出てきたら嫌ですもんね。</div>
<div>
細かい所ですが、変なアイコンがホームに出てきたら即削除の可能性大ですので、しっかりこだわっておきたいですね。</div>
<div>
<br /></div>
<div>
いかがでしたでしょうか?</div>
<div>
細かい設定も、ウィジェットで簡単に設定できてしまうのがMuseの魅力ですね。</div>
<div>
是非ともダウンロードして頂いて、サイト作成のお役に立ててくださいね。</div>
<div>
<br /></div>
<div>
ご紹介したウィジェットはこちらからダウンロード可能です。(ダウンロードにはメールアドレスの登録が必要です)</div>
<div>
<b><span style="font-size: large;"><a href="http://www.musegrid.com/spring/" target="_blank">MuseGrid</a></span></b></div>
<div>
<br /></div>
<div>
<div class="separator" style="clear: both;">
また、私が運営しているAdobe Muse情報サイト「Made with Muse」も宜しくお願いいたします。</div>
<div class="separator" style="clear: both;">
<span style="font-size: x-large;"><a href="http://madewithmuse.net/" target="_blank">Made with Muse</a></span></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
ではまたお会いしましょう。</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
2015.12.02 新記事書きました!!</div>
<div class="separator" style="clear: both; text-align: left;">
<img border="0" height="111" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLWFteDVUdsTP-Lb7M0UvOfH5D7HUnxGpYPyrQM1AezAZ5QgPh7ebCO_S6Y2DyvcwBn5Hk1S9XazWVSFi8wTiuuQmSOhOzAmRHhP3x9ilObz9l21limP1DvuzxsOUFJaKSXvIhxswvRaSM/s200/kebu.png" width="200" /></div>
<a href="http://madewithmuse.blogspot.jp/2015/12/adobe-muse.html" target="_blank">【使い方様々】レストラン、バンド、ビジネスなどに使えるAdobe MUSEテンプレート</a></div>
MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comtag:blogger.com,1999:blog-1401068395530447664.post-79570735260969158462014-08-24T22:27:00.001+09:002021-10-08T15:48:53.316+09:00Adobe Museのオシャレでセンスの良い無料テンプレート&ウィジェットが揃うサイト「MuseFree.com」<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!--adobe-muse-blog_main_Blog1_300x250_as--><br /><u><a href="https://tateyomi.fun/" target="_blank">おすすめマンガをご紹介!</a></u><div><u><br /></u>
こんにちは!<br />
<br />
最近はカメラの話題ばかりで、Museの情報をあまり更新しておらず大変反省しております!<br />
先ほど良い感じの無料Museサイトを見つけましたので、皆様とシェアさせて頂きたいと思い、ブログを書かせて頂きます。<br />
<br />
<h2 style="text-align: center;">
無料テンプレート&ウィジェットサイト</h2>
<h2 style="text-align: center;">
<b>MuseFree.com</b></h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTy68AXWcfzWXCNM4MS39W-pk0mN7696RDcTmzPee63A_dApS-pM_NeT3WwATDdrDdZrX_m0Bc4IsVzQyTUhg8DsKqDhehfg52KadY_blEd3fYw98xFGIbUW51nsXYOS_pGP9X-viIFx2/s1600/musefree.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTy68AXWcfzWXCNM4MS39W-pk0mN7696RDcTmzPee63A_dApS-pM_NeT3WwATDdrDdZrX_m0Bc4IsVzQyTUhg8DsKqDhehfg52KadY_blEd3fYw98xFGIbUW51nsXYOS_pGP9X-viIFx2/s1600/musefree.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
こちらのサイトを始めて見た時、衝撃が走りました。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
「ついに、Museの無料素材もここまで来たか…」</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
日本にいると実感しませんが、海の向こうでは着実にユーザーを増やしており、それに伴い無料素材のクオリティもどんどんアップしているようでございます。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
しかも、テンプレートだけでなく、便利なウィジェットやサイト制作でかなり使えそうな素材も全部無料!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
これは利用しない手は無いのではないでしょうか??</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
それでは数ある素材の中で、私が気に入った物を少しだけご紹介させて頂きます。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAx4npEnTZ79OwLpTRcvmhJDzylroGqxIe-nG5nmhT1zaQ9CtIxI417WxY0-eGb-K38P4bwfNOqlPh5_2j6KFzzkf7wL0jmYk043Skby1cJ_M0bC00G8glmvGPP27cq-V_D05Xy6Q1PLWU/s1600/onepagetemplate.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAx4npEnTZ79OwLpTRcvmhJDzylroGqxIe-nG5nmhT1zaQ9CtIxI417WxY0-eGb-K38P4bwfNOqlPh5_2j6KFzzkf7wL0jmYk043Skby1cJ_M0bC00G8glmvGPP27cq-V_D05Xy6Q1PLWU/s1600/onepagetemplate.png" width="365" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
まずは、こちらは「One Page Muse Template」。</div>
<div class="separator" style="clear: both; text-align: left;">
読んで字の如く、最近流行りのシングルページタイプのテンプレートです。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
このデザインセンスの高さは素晴らしく、きっと制作された方はかなりWebデザインに背通していると思われます。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
すぐにでも使えるかと思いますので、ランディングページの作成にいかがでしょうか??</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnrF3oMW_PVlZ_SX8Gngc7ZBXhWvXSoSYffYzrTOyLg3AGfi0kaEkeRvdYbpZnxMK5zxh0qstnejsPDTUkNS1AoMSgzGu4badKBIc_B0NLcNSSvpVk7XmL91hdJEEOP0UGpCRz_fABGjj_/s1600/tabgallery.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="277" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnrF3oMW_PVlZ_SX8Gngc7ZBXhWvXSoSYffYzrTOyLg3AGfi0kaEkeRvdYbpZnxMK5zxh0qstnejsPDTUkNS1AoMSgzGu4badKBIc_B0NLcNSSvpVk7XmL91hdJEEOP0UGpCRz_fABGjj_/s1600/tabgallery.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
こちらはタブ作成のウィジェットですね。</div>
<div class="separator" style="clear: both; text-align: left;">
タブって便利なんですけど、なかなかデザイン的に格好良くならないので私はあまり使わないのですが、これはオシャレ!</div>
<div class="separator" style="clear: both; text-align: left;">
是非使ってみたいと思います。他にも複数のデザインあり。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNZutbPecoBFFRzxKr1sWFWM045wn5GcKWEMM_6SB1T1DMuNp1XbiJEurDttE2OVJzqOHLUp2r3vVjUcmmdUcDu0P6p77-xkdMNzlrFz-tSayx4SWvLi7HArDMhEzzwle0DlWNFJnyTL3_/s1600/servicetav.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNZutbPecoBFFRzxKr1sWFWM045wn5GcKWEMM_6SB1T1DMuNp1XbiJEurDttE2OVJzqOHLUp2r3vVjUcmmdUcDu0P6p77-xkdMNzlrFz-tSayx4SWvLi7HArDMhEzzwle0DlWNFJnyTL3_/s1600/servicetav.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
こちらもオシャレなウィジェットですね。</div>
<div class="separator" style="clear: both; text-align: left;">
周りの丸をクリックすると、真ん中の説明文が変わります。</div>
<div class="separator" style="clear: both; text-align: left;">
サービスのメリットを紹介する際等に使えるのではないかと思います。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKYdptGV-07QLV40FOxXN-rPR8WB7EjQdFtZB23uQM5qEOToZEATuEaWE9HZsTHWcfkbjOtfvRWpTEWZoClSaCopI8jZZuNWQJAsfj49TYeZ_LEG1ohbEDVLH72XDhyGOx9q81N_MgQ6He/s1600/contactforms.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="277" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKYdptGV-07QLV40FOxXN-rPR8WB7EjQdFtZB23uQM5qEOToZEATuEaWE9HZsTHWcfkbjOtfvRWpTEWZoClSaCopI8jZZuNWQJAsfj49TYeZ_LEG1ohbEDVLH72XDhyGOx9q81N_MgQ6He/s1600/contactforms.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
はい、来ました!</div>
<div class="separator" style="clear: both; text-align: left;">
オシャレなデザインのコンタクトフォーム!</div>
<div class="separator" style="clear: both; text-align: left;">
何とも言えないオシャレな感じが、「ちょっと問い合わせてみようかな?」と感じさせてくれますね。これは参った!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizYNUbs8IFv8Lq6p9i0adi9ufQmb6CSb2gg3R7W7oGKD8RjrqndYUjntdxeVf9HStBGEcMmLUnFHHcJK1AiZmItrxJpMnSTI0J5OcX1l5pwqZLav5ILnu-lCxU5vcOGshroilf700H9a4h/s1600/gallery.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="287" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizYNUbs8IFv8Lq6p9i0adi9ufQmb6CSb2gg3R7W7oGKD8RjrqndYUjntdxeVf9HStBGEcMmLUnFHHcJK1AiZmItrxJpMnSTI0J5OcX1l5pwqZLav5ILnu-lCxU5vcOGshroilf700H9a4h/s1600/gallery.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
こちらは両脇にサムネイルを配置したオシャレなギャラリーでございます。</div>
<div class="separator" style="clear: both; text-align: left;">
ちょっと人とは違ったデザインを求めているそこのあなた?</div>
<div class="separator" style="clear: both; text-align: left;">
こちらの活用をオススメいたします。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
いかがでしたでしょうか?</div>
<div class="separator" style="clear: both; text-align: left;">
今回ご紹介できたのはほんの一部でして、他にも使えそうな素材はたくさんございます!</div>
<div class="separator" style="clear: both; text-align: left;">
是非一度チェックしてみてくださいね。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
サイトはこちらのリンクからご覧ください。</div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: large;"><a href="http://musefree.com/" target="_blank">MuseFree.com</a></span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
また、私が運営しているAdobe Muse情報サイト「Made with Muse」も宜しくお願いいたします。</div>
<div class="separator" style="clear: both;">
<span style="font-size: x-large;"><a href="http://madewithmuse.net/" target="_blank">Made with Muse</a></span></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
ではまたお会いしましょう。</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
2015.12.02 新記事書きました!!</div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://madewithmuse.blogspot.jp/2015/12/adobe-muse.html" target="_blank"><img border="0" height="111" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLWFteDVUdsTP-Lb7M0UvOfH5D7HUnxGpYPyrQM1AezAZ5QgPh7ebCO_S6Y2DyvcwBn5Hk1S9XazWVSFi8wTiuuQmSOhOzAmRHhP3x9ilObz9l21limP1DvuzxsOUFJaKSXvIhxswvRaSM/s200/kebu.png" width="200" /></a></div>
<a href="http://madewithmuse.blogspot.jp/2015/12/adobe-muse.html" target="_blank">【使い方様々】レストラン、バンド、ビジネスなどに使えるAdobe MUSEテンプレート</a><br />
<div class="separator" style="clear: both;">
<br /></div>
<div>
<b><br />
</b></div>
</div>MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comtag:blogger.com,1999:blog-1401068395530447664.post-76782887951081569662014-08-17T00:30:00.001+09:002014-08-17T00:56:45.636+09:002014年8月 Adobe Muse 2014.1のアップデート内容まとめ<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- adobe-muse-blog_main_Blog1_300x250_as --><br />
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-9369570756861982"
data-ad-slot="7858704350"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />
こんばんは!<br />
<br />
みなさま素敵なお盆休みをお過ごしでしょうか?<br />
私がお盆休みでだらだらしている間に、Adobe Museがアップデートされておりました!<br />
<br />
Museファンの皆様はもちろんチェック済みかと思いますが、私同様お盆休みでうっかり見落としている方もいらっしゃるかと思いまして、改めてアップデート内容をまとめさせていただきますね!<br />
<br />
<h2><span style="font-size: x-large;">1、ブレット、数列リスト表示に対応</span></h2><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicNNoah40EQeU8wdU8c6m1D19359k3xG-qebpwlxaUo8jFv8pP2w9Z7niOV8rGXC4GASDLFpLpbiQ_k75-2yvPx5usMGBxkeUZ31ehpDQbg5ztv60-qtWUxSNobyaI6YMGFUKrr-E9STnr/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-08-16+23.50.48.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicNNoah40EQeU8wdU8c6m1D19359k3xG-qebpwlxaUo8jFv8pP2w9Z7niOV8rGXC4GASDLFpLpbiQ_k75-2yvPx5usMGBxkeUZ31ehpDQbg5ztv60-qtWUxSNobyaI6YMGFUKrr-E9STnr/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-08-16+23.50.48.png" height="232" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><br />
これは地味に嬉しいですね!<br />
○とか数字を文の頭に置いて、リストを作る事が簡単にできるようになりました。<br />
画像には移っていませんが、様々なリストスタイルを選ぶ事が出来たので、とても重宝しそうです。<br />
<br />
<h2><span style="font-size: x-large;">2、お問い合わせフォームが「reCAPTCHA」に対応!ビジネスカタリスト以外のサーバーを使ってもより一層SPAM対応が可能に。</span></h2><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdT5Qiv_2RCZZZnzV3fGWsA1MpNsbryg70ff3mFJDjFDCiRsv9g_S1tSWoj-SJyOtqWY0-GI_bdxLP3cgsvo8aYpdVuWGiOFEzxZ9ylSeWBcT6UKA-bDApr1nPV19OPNrFIUVkH6hDWu3C/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-08-16+23.51.35.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdT5Qiv_2RCZZZnzV3fGWsA1MpNsbryg70ff3mFJDjFDCiRsv9g_S1tSWoj-SJyOtqWY0-GI_bdxLP3cgsvo8aYpdVuWGiOFEzxZ9ylSeWBcT6UKA-bDApr1nPV19OPNrFIUVkH6hDWu3C/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-08-16+23.51.35.png" height="226" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: left;">個人的に今回こちらが一番嬉しかったです。</div><div class="separator" style="clear: both; text-align: left;">以前のコンタクトフォームがビジネスカタリストのサーバーを使っていなければSPAM対策が出来ませんでした。。。</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">私のサーバーはビジネスカタリストでは無かったので、Museで作ったお問い合わせフォームでは、SPAMがどんどん送られてきてしまい、正直使い物にならなかったのです。</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">今回こちらの「reCAPTCHA」が使えるようになったので、ビジネスカタリストを使用していなくてもSPAM対策が可能になりました!</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">サンキュー!アドビ!</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">ちなみになんですが、「reCAPTCHA」はグーグルが開発したSPAM対策のサービスです。</div><div class="separator" style="clear: both; text-align: left;">ですので使用するためにはご自身のサイトを「reCAPTCHA」に登録する必要がございますのでご注意くださいませ。</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;"><a href="https://www.google.com/recaptcha/intro/index.html" target="_blank">登録はこちらから可能です。</a></div><div class="separator" style="clear: both; text-align: left;"><br />
</div><h2 style="clear: both; text-align: left;"><span style="font-size: x-large;">3、お問い合わせフォームにチェックボックス!</span></h2><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsoBt_uMc3enqlmlmxSZWonKmMoDhTin46hWjIHCAv90HUyS-TUE0fqIxl1B5JpAzNi9TPIHdQA43KJQvo8_Bfqm6C-WMsDcFxOl3-Qr4KrWwNZNQZOiu29wlOYcyifB_8uoQnttg1yuXq/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-08-16+23.52.55.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsoBt_uMc3enqlmlmxSZWonKmMoDhTin46hWjIHCAv90HUyS-TUE0fqIxl1B5JpAzNi9TPIHdQA43KJQvo8_Bfqm6C-WMsDcFxOl3-Qr4KrWwNZNQZOiu29wlOYcyifB_8uoQnttg1yuXq/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-08-16+23.52.55.png" height="192" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: left;">またまたフォームについてのアップデートです!</div><div class="separator" style="clear: both; text-align: left;">お問い合わせフォームでチェックボックスを選択できるようになりました!</div><div class="separator" style="clear: both; text-align: left;">後はファイルを添付できるようになれば、Museのお問い合わせフームって完璧になるんじゃないでしょうか?</div><div class="separator" style="clear: both; text-align: left;">アドビさん!お願いいたします!</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">あとチェックボックスもスタイルを6種類設定する必要があるようですね。</div><div class="separator" style="clear: both; text-align: left;">ステートからどうぞ!</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><h2 style="clear: both; text-align: left;"><span style="font-size: x-large;">4、自分が保有するWEBフォントが使用可能!</span></h2><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">ご自身が保有するフォントをサイトに埋め込めるようになりました!</div><div class="separator" style="clear: both; text-align: left;">これは嬉しいですね。</div><div class="separator" style="clear: both; text-align: left;">正直な話アドビってあんまり日本語フォント無いですよね。</div><div class="separator" style="clear: both; text-align: left;">Typekitもほとんど英語のフォントですし、日本語でサイトを作るにはちょっと弱いかな?</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">でも今回のこちらのアップデートでは、ご自身が保有するフォントをサイトで使用できるようになりました!</div><div class="separator" style="clear: both; text-align: left;">どんどん使っていきたいですね!</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;"><span style="font-size: large;">WOFF , EOT, SVG</span></div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">こちらの3つの型式に対応しているとの事でございます。</div><div class="separator" style="clear: both; text-align: left;">注意した事は、ちゃんとご自身がサイトで利用して良いというライセンスを保有しているかどうか確認しなければいけないと思います。</div><div class="separator" style="clear: both; text-align: left;">Webフォントはライセンス外!みたいな例もあると思いますので。</div><div class="separator" style="clear: both; text-align: left;">ご利用になる前に確認されると良いでしょう。</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><h2 style="clear: both; text-align: left;"><span style="font-size: x-large;">5、字形が使用可能になりました。</span></h2><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">これはオマケみたいなものでしょうか??</div><div class="separator" style="clear: both; text-align: left;">字形と言われても良くわからないかと思いますが、コピーライトの©の時とか、トレードマークの™みたいな字の事です。</div><div class="separator" style="clear: both; text-align: left;">こちらを使用する際に選択できるようになり、文字化けを防げるようになったみたいです。</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">いかがでしたでしょうか??</div><div class="separator" style="clear: both; text-align: left;">今回のアップデートは痒い所に手が届く、素敵なアップデートでしたね。</div><div class="separator" style="clear: both; text-align: left;">この間アップでデートしたばかりなのに、この短い間隔でパワーアップされるとは、アドビのMuseに対しての力の入れ方を感じました!</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">どんどんMuseを使っていきましょう!</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both;">また、私が運営しているAdobe Muse情報サイト「Made with Muse」も宜しくお願いいたします。</div><div class="separator" style="clear: both;"><span style="font-size: x-large;"><a href="http://madewithmuse.net/" target="_blank">Made with Muse</a></span></div><div class="separator" style="clear: both;"><br />
</div>MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comtag:blogger.com,1999:blog-1401068395530447664.post-81398278156173900062014-08-06T23:54:00.001+09:002015-12-02T22:57:23.016+09:00Adobe Museで簡単にhtmlテーブルを作成する方法こんにちは!<br />
<br />
今日は珍しく(笑)役に立ちそうなトピックをご紹介いたします!<br />
<br />
Adobe Museは直感的にイラストを制作するように簡単にWEBサイトを制作できるとても便利なツールですが、コーディングを必要としない反面、様々な障害に直面する事もございます。<br />
<br />
私がMuseを使い始めてまず困ったことは、<br />
<span style="font-size: x-large;"><b>テーブルが作れない!!</b></span><br />
ということでございました。<br />
<br />
長方形を作って、その上にテキストを置いて、それをコピーして、また色を変えて…<br />
みたいな形でテーブルっぽいデザインを作成する事は可能なのですが、いかんせん面倒臭い。<br />
ここはさくっとhtmlで編集しやすく作ってしまいたいですよね!?<br />
<br />
そんなお悩みを解決するちょっと便利な小技を本日はご紹介いたします。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm-B20gIkz8R1UuRTMFhhCR11AmeGfBHSgpBlbRL9BPmvjslXyVhvWnmkwcRVBP7QSdPIiANJt_Yg-WtSG41I_1ANmAV37rZDj2bzMr8ykLF7PvWGQGszyeXLvkLw16MV8FFzLcWttRLAT/s1600/table1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm-B20gIkz8R1UuRTMFhhCR11AmeGfBHSgpBlbRL9BPmvjslXyVhvWnmkwcRVBP7QSdPIiANJt_Yg-WtSG41I_1ANmAV37rZDj2bzMr8ykLF7PvWGQGszyeXLvkLw16MV8FFzLcWttRLAT/s1600/table1.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
はい、こちらのサイトにご注目ください。</div>
<div class="separator" style="clear: both; text-align: left;">
「Table Generator」というサイトでして、こちらブラウザでテーブルを自分で編集し、作ったテーブルのHTMLを生成してくれるとっても便利なサービスなんです。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
勘の良いMuseユーザーの方々はもうお気付きかもしれませんが、このサービスを使ってhtmlを生成し、そのままMuseに埋め込んじゃいましょう!といいうのが今回の小技でございます。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg40yuANx_jVH4Iwokh88E9TkteBCmfYB5tSiHu73KwqEVy7sPT9jhzLGr3ZSP05ZbwAKrzYM_nMzvRGVVokcYeoN1zz-NRd9Gdj7I7tDXCvmAfibvZoOs6lm9drx41O2XwZC9_63YmUefM/s1600/table2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg40yuANx_jVH4Iwokh88E9TkteBCmfYB5tSiHu73KwqEVy7sPT9jhzLGr3ZSP05ZbwAKrzYM_nMzvRGVVokcYeoN1zz-NRd9Gdj7I7tDXCvmAfibvZoOs6lm9drx41O2XwZC9_63YmUefM/s1600/table2.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
テーブルの作り方はとても簡単ですので省略しますが、作りたいセルの数を選んだらその中に入れたいテキストを入力するだけで完了です。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
既に作ってあるエクセルやcsvファイルをアップロードすればそのまま読み込んでくれたりするそうで、とってもユーザーフレンドリー!</div>
<div class="separator" style="clear: both; text-align: left;">
作った方は神であると思います。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
好みのテーブルが出来上がりましたら、下の「Generate」ボタンを押すと自動的にhtmlが表示されます。「copy to clipboard」をクリックし、簡単コピーしちゃいましょう。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTidcKZrwk7-4Gz6tIPTdsw_w1E2aTioX7RjLGzt1mI8puWNd-SzB1fDviy9icpUwrptdyQ6X0v51ajSWbmRxQ-y5wxbcFlh67modXcABme5FYhYrM_oXqzeK_bhaIU6_EtsziOgLydi8D/s1600/table3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="262" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTidcKZrwk7-4Gz6tIPTdsw_w1E2aTioX7RjLGzt1mI8puWNd-SzB1fDviy9icpUwrptdyQ6X0v51ajSWbmRxQ-y5wxbcFlh67modXcABme5FYhYrM_oXqzeK_bhaIU6_EtsziOgLydi8D/s1600/table3.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Museに戻って頂き、「htmlを挿入」をクリックして編集画面を開きます。</div>
<div class="separator" style="clear: both; text-align: left;">
こちらに先ほどコピーしたhtmlを貼付けて、OKボタンを押します。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrZstfNDWhc-MV6rlPEWhve0h0v5ck9xgglNCQyqE8WaBl4XMbq1vAZFXBF6TSOv9A9nJMDR-GDzc-Wc0TDnh2YH64_Z1FBntL6C7NiQukoAY2rYJyMjP8CSdknWyncHModTdubFDhr6IK/s1600/table4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrZstfNDWhc-MV6rlPEWhve0h0v5ck9xgglNCQyqE8WaBl4XMbq1vAZFXBF6TSOv9A9nJMDR-GDzc-Wc0TDnh2YH64_Z1FBntL6C7NiQukoAY2rYJyMjP8CSdknWyncHModTdubFDhr6IK/s1600/table4.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
すると、あら不思議!?</div>
<div class="separator" style="clear: both; text-align: left;">
先ほど制作したテーブルが見事表示されました!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3hW0R_ypOLOKJpGpkxkmI0uV_MBEBzvPUmO2IOa724n7o_PQnavNMPvbJIs5lFSBZTDHuPwa0P5RR2iBrcXcegzafMduQs_nZHsjj0siRnwKNaEIjRAfsV2dTzgQAeNKIGx8vrBM37nS7/s1600/table5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3hW0R_ypOLOKJpGpkxkmI0uV_MBEBzvPUmO2IOa724n7o_PQnavNMPvbJIs5lFSBZTDHuPwa0P5RR2iBrcXcegzafMduQs_nZHsjj0siRnwKNaEIjRAfsV2dTzgQAeNKIGx8vrBM37nS7/s1600/table5.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
本番環境にアップしブラウザで先ほどページを表示します。</div>
<div class="separator" style="clear: both; text-align: left;">
はい、見事に綺麗なテーブルの出来上がりです!!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
いかがでしたでしょうか?</div>
<div class="separator" style="clear: both; text-align: left;">
出来ない事も多いMuseではありますが、ちょっとした工夫をする事で課題解決が可能でしたね。</div>
<div class="separator" style="clear: both; text-align: left;">
課題を見つけたら色々解決法を自分なりに考えてみるのも楽しいかも?</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
それでは、またお会いしましょう。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
本日ご紹介したサイト</div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://www.tablesgenerator.com/html_tables" target="_blank">HTML Table generator</a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
また、私が運営しているAdobe Muse情報サイト「Made with Muse」も宜しくお願いいたします。</div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-large;"><a href="http://madewithmuse.net/" target="_blank">Made with Muse</a></span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
2015.12.02 新記事書きました!!</div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://madewithmuse.blogspot.jp/2015/12/adobe-muse.html" target="_blank"><img border="0" height="111" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLWFteDVUdsTP-Lb7M0UvOfH5D7HUnxGpYPyrQM1AezAZ5QgPh7ebCO_S6Y2DyvcwBn5Hk1S9XazWVSFi8wTiuuQmSOhOzAmRHhP3x9ilObz9l21limP1DvuzxsOUFJaKSXvIhxswvRaSM/s200/kebu.png" width="200" /></a></div>
<a href="http://madewithmuse.blogspot.jp/2015/12/adobe-muse.html" target="_blank">【使い方様々】レストラン、バンド、ビジネスなどに使えるAdobe MUSEテンプレート</a><br />
<br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- museblogrectangle --><br />
<ins class="adsbygoogle" data-ad-client="ca-pub-9369570756861982" data-ad-slot="2466239153" style="display: inline-block; height: 280px; width: 336px;"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comtag:blogger.com,1999:blog-1401068395530447664.post-20816809446921821392014-07-30T21:44:00.000+09:002014-07-30T21:44:01.729+09:00Adobe Museでアニメーションするテキストを作れる無料ウィジェット Text Message Tickerこんばんは!<div>
<br /></div>
<div>
今日は持っているとちょっと便利な無料Adobe Museのウィジェットをご紹介いたします。</div>
<div>
無料ですので税是非ダウンロードしてくださいね。</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2T5PWEHBWRFhzfPvu4xw6R6eEp3rtupPUovqcs76LaOBE-wR18rMAjWft_MrnkUuZogoeDwUvE6RaMKi18Ackg1G86tGAsJl7fNU0QqBBtMH3LAb4pH5JABPyaknLToxfmtwvoxItW2km/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-07-29+22.59.00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2T5PWEHBWRFhzfPvu4xw6R6eEp3rtupPUovqcs76LaOBE-wR18rMAjWft_MrnkUuZogoeDwUvE6RaMKi18Ackg1G86tGAsJl7fNU0QqBBtMH3LAb4pH5JABPyaknLToxfmtwvoxItW2km/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-07-29+22.59.00.png" height="312" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
真ん中の青い文字の部分がご覧頂けますでしょうか?</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
実はこれ、文字がアニメーションしているんです!</div>
<div class="separator" style="clear: both; text-align: left;">
強調した文章や、キャッチコピーなんかに最適ですね!</div>
<div class="separator" style="clear: both; text-align: left;">
設定はMuseをお使いの方はご存知かと思いますが、他のウィジェット同様とっても簡単です。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
ちょっとしたデザインのアクセントにぴったりです。</div>
<div class="separator" style="clear: both; text-align: left;">
こちらから無料でダウンロード可能です。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
是非サイトのデザインにお使いくださいませ。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f8f8f8; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; line-height: 17px;">Text Message Ticker</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f8f8f8; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; line-height: 17px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://widgets-musethemes.businesscatalyst.com/tb028.html#sthash.fQTtgXxR.dpbs">http://widgets-musethemes.businesscatalyst.com/tb028.html#sthash.fQTtgXxR.dpbs</a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://madewithmuse.net/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheTJ7qO4uYQ_IIumAgshv7xfCUVzkKMxIvzrzcifB-dsaUcbLjUbRDWg2E1Y_-JQ_t7ol5GJrvPRO4XtFKkh8pwAV_OLu9QAWRhVJUtzEQfF8fH8KEAZz_EgSzGgW2XRsIWlWelgAjIrWd/s1600/musebanner.png" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div>
<br /></div>
MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comtag:blogger.com,1999:blog-1401068395530447664.post-54996950542197154242014-07-21T22:34:00.000+09:002014-07-21T22:34:13.369+09:00Pentax K-3で写真撮ってきました!@新宿御苑<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3305AeKhiKt_-x3XKYYdzQr-KscZ5IciHiYp41Wm6bTbhhzXLTTsjBR_TTzqL07gwE_4bTUEyHyjE2q7keuE9H4NR3GqTkdfFsmj_mPX1pCn0h4SCLRL5duYV_b1kmkDtFi8XESF2VRmx/s1600/IMGP0016.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3305AeKhiKt_-x3XKYYdzQr-KscZ5IciHiYp41Wm6bTbhhzXLTTsjBR_TTzqL07gwE_4bTUEyHyjE2q7keuE9H4NR3GqTkdfFsmj_mPX1pCn0h4SCLRL5duYV_b1kmkDtFi8XESF2VRmx/s1600/IMGP0016.jpg" height="265" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIOooUXmOwZoAGkXl9FNyIRXqriw3x3o8fwvjf6z2LXNAgoTcEWiI16o7WhPWRuUsOo7xDLR_6UlFsK3y0SaCuKUNJQJEnXCbM15lXcFKH8QNHcJFbhker3XjndtfF96Ab515UP0sedmOi/s1600/IMGP0059.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIOooUXmOwZoAGkXl9FNyIRXqriw3x3o8fwvjf6z2LXNAgoTcEWiI16o7WhPWRuUsOo7xDLR_6UlFsK3y0SaCuKUNJQJEnXCbM15lXcFKH8QNHcJFbhker3XjndtfF96Ab515UP0sedmOi/s1600/IMGP0059.jpg" height="265" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijI1lSkBAGrVpglB5gmz7ZlZ4Dr50B07L_EJeDHcWtCIlJ30EX9toi40ifmTInZ2-9xmq4v7lrM8XuSWjZ3WtS-lKwCmKnQNNtSiyMZpduHWvVQ-fvEAb-gwsTpGeuW8H8_NrpneiyHuo4/s1600/IMGP0032.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijI1lSkBAGrVpglB5gmz7ZlZ4Dr50B07L_EJeDHcWtCIlJ30EX9toi40ifmTInZ2-9xmq4v7lrM8XuSWjZ3WtS-lKwCmKnQNNtSiyMZpduHWvVQ-fvEAb-gwsTpGeuW8H8_NrpneiyHuo4/s1600/IMGP0032.jpg" height="265" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
使用カメラ : PENTAX K-3</div>
<div class="separator" style="clear: both; text-align: center;">
使用レンズ : DA50mm FA1.8</div>
<div class="separator" style="clear: both; text-align: center;">
撮影場所 : 新宿御苑</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
まだまだ上手くない!</div>
<div class="separator" style="clear: both; text-align: left;">
もっと頑張らねば!</div>
<div class="separator" style="clear: both; text-align: left;">
正直K-3が良いカメラだから、そこそこの物は撮れてるように見えるけど。。。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
構図とか全然駄目!</div>
<div class="separator" style="clear: both; text-align: left;">
その場で何が起きてるかイメージできないんだよなあ、この写真からは。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
あと御苑みたいな広い場所だとやっぱり広角レンズは必要かも。</div>
<div class="separator" style="clear: both; text-align: left;">
ポートレート用に買った50mm単焦点ではちょっと辛かった。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
もっと上手くならねば。</div>
<div class="separator" style="clear: both; text-align: left;">
次回頑張ります!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.comtag:blogger.com,1999:blog-1401068395530447664.post-77247972350863343712014-07-16T23:35:00.000+09:002014-07-16T23:36:15.644+09:00Adobe Museユーザー必携の無料アイコンライブラリ!Font Awesomeウィジェット<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ5MahuCyAcK2a2Ol9M-Y6bKySb3IXyXn2B3zoaycV1v122jbAT8j8w8i_V-k0Zg5ZHGje3bbhLp5OlGSXBTJYxFAluYETPEOqbF2NbsWER15bTy7Zoye6EhjI72Fbp6lTSCytCwpK6WS0/s1600/font-awsome-01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ5MahuCyAcK2a2Ol9M-Y6bKySb3IXyXn2B3zoaycV1v122jbAT8j8w8i_V-k0Zg5ZHGje3bbhLp5OlGSXBTJYxFAluYETPEOqbF2NbsWER15bTy7Zoye6EhjI72Fbp6lTSCytCwpK6WS0/s1600/font-awsome-01.png" height="210" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
本日も便利なウィジェットをご紹介します。</div>
<div class="separator" style="clear: both; text-align: left;">
今回はTwitterのフォロワーさんもオススメしている、正真正銘の便利ウィジェット!</div>
<div class="separator" style="clear: both; text-align: left;">
その名も</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h2 style="clear: both; text-align: left;">
<span style="font-size: x-large;">FontAwesomeウィジェット!!</span></h2>
<div>
<span style="font-size: large;">Font AwesomeとはWebサイトで使われているデザインアイコンをWebフォントにしてしまい、画像ではなくフォントとして利用できるため、サイズや色などすべてCSSで調整する事が可能です。</span><br />
<span style="font-size: large;"><br />こちらをMuse上で動作するウィジェットとしてしまったので今回ご紹介するもの。なんと361種類のアイコンが収録されています!正直これさえあればアイコンは他にいらないってくらいたくさんの種類があるんです!</span></div>
<div>
<span style="color: #2c3e50; font-family: sans-serif;"><span style="background-color: white; line-height: 27.200000762939453px;"><br />
</span></span></div>
<div>
<span style="color: #2c3e50; font-family: sans-serif;"><span style="background-color: white; line-height: 27.200000762939453px;"><br />
</span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4v8zse5HFj_UxN-tKy13aVgVwOwM3lFpCYDO2O35ufcX8xVbg6ygs-Qpc9xXIbFO6rrWdI42FFH_sN2C2LQiXHodAVNtKERjfVeXJo4ufSVVUsGwyKy3vmCSHY74VivrUP4tmzeEjWdan/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-07-16+23.00.33.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4v8zse5HFj_UxN-tKy13aVgVwOwM3lFpCYDO2O35ufcX8xVbg6ygs-Qpc9xXIbFO6rrWdI42FFH_sN2C2LQiXHodAVNtKERjfVeXJo4ufSVVUsGwyKy3vmCSHY74VivrUP4tmzeEjWdan/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-07-16+23.00.33.png" height="166" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
このようにこちらはハートのアイコンを置いてみました。</div>
<div class="separator" style="clear: both; text-align: center;">
アイコンのプルダウンをクリックすると様々な種類のアイコンが表示されます。</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAsNIvQ1YqbmdzSbPdyRlL9CETR9BBIvxKFn_dTPJ1gSwq6fQsKf3elepTllFBt5WKk2yZKNwUkGnG1bDjFfoTDAf5r2jvJBZp-oVetbCldm4eaHT0_MAU6T0Ny8_IN9cXUGfP5BGKTw5q/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-07-16+23.01.01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAsNIvQ1YqbmdzSbPdyRlL9CETR9BBIvxKFn_dTPJ1gSwq6fQsKf3elepTllFBt5WKk2yZKNwUkGnG1bDjFfoTDAf5r2jvJBZp-oVetbCldm4eaHT0_MAU6T0Ny8_IN9cXUGfP5BGKTw5q/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-07-16+23.01.01.png" height="301" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
とてもたくさんの種類のアイコンがありますね!</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSTfgmyBsCNAU8ILjCQVT30AIf92_S8v_nFtDSg4wEboOBQ2RDW2396-4msIehHsgiUDCNHv8-dPac5e13j4H1GsvD2xFiRjLZmwn9OOxyCXwkY4rKUxWU3V6mN3sXcviIsMGbFP5aPXbu/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-07-16+23.02.14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSTfgmyBsCNAU8ILjCQVT30AIf92_S8v_nFtDSg4wEboOBQ2RDW2396-4msIehHsgiUDCNHv8-dPac5e13j4H1GsvD2xFiRjLZmwn9OOxyCXwkY4rKUxWU3V6mN3sXcviIsMGbFP5aPXbu/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-07-16+23.02.14.png" height="236" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
色を変えたいときもこのように、文字色を変えるのと同じように</div>
<div class="separator" style="clear: both; text-align: center;">
簡単に変更することができます。</div>
<div class="separator" style="clear: both; text-align: center;">
やっぱりハートはピンクですよね!</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
まだこちらお持ちでない方は悪い事は言いませんので、今すぐダウンロードするべきだと思います。</div>
<div class="separator" style="clear: both; text-align: left;">
アイコンをデザインのワンポイントとすることで、サイトがオシャレになります!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
是非ご活用くださいませ。</div>
<div class="separator" style="clear: both; text-align: left;">
ではまたお会いしましょう。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
ダウンロード</div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://muse.adobe.com/exchange-library/font-awesome" target="_blank">Font Awesomeウィジェット</a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.madewithmuse.net/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6dnK8WgJdRba8R4UUviTHRtmbO-4ZtqKQA7QkncxZfc6Y_c4wBhH76DtlHDbxZ7iHlguhOlhZ5zMCQ0Nv4_kOPItraZRtfVkSpafKrHjxzm2SouK-o72l7gIREjaZGYWWWRRfu4J6RTRn/s1600/musebanner.png" /></a></div>
<br />MMhttp://www.blogger.com/profile/05596536817501130506noreply@blogger.com