addthis

2014年8月26日火曜日

Adobe Museで作ったWebサイトに無料でスマホ対応掲示板・フォーラムを作る方法






こんにちは!

連日の更新でノリにノっている管理人です!

毎日更新してよくネタが尽きないね?と言われますが、まだまだMuseの魅力を伝えきれておりません!
がんばって更新して参ります!

さて、今回は表題の通りMuseで作ったサイトに「掲示板・フォーラム」を設置する方法をご紹介いたします。

今までこういった質問はたくさん頂いておりましたが、やっと簡単かつお金のかからない方法を見つけましたので、この場を借りてシェアさせて頂きます。

それでは、早速ご紹介いたします。

1、無料の掲示板・フォーラム作成サービス「Muut」に登録しましょう。



「Muut」は海外のサービスなのですが、世界中の言語に対応しておりますので日本語での掲示板作成が可能です。
こちらに登録してください。「無料プラン」で大丈夫です。



掲示板のURLを記入していざ登録完了!!


2、掲示板を作成しよう





このような管理画面に行き着いたら、まずは最初は英語表記になっておりますので右の「setting」をクリックし言語を日本語に設定しましょう。



「Language」の所から日本語を選択してください。




すると日本語でちゃんと掲示板が作成されました!!!



ちょと自分で書き込んでみましょう!
適当に書いています(笑)



はい!Enterを押して投稿完了です!
めちゃくちゃ簡単ですね!

これで元となる掲示板は完成しました。
次はこの掲示板を使ってMuseで作成したサイト内にフォーラムを作ります。

3、Museのサイトに掲示板を埋め込もう!


いよいよMuseのサイトに掲示板を作る段階になりました。
まずはMuseでフォーラム用のページを作ってください。
私はシンプルに「forum」というページを作成しました。


先ほどの「Muut」の管理画面に行くと、右側に「Embed on your site」というリンクがございます。こちらをクリックしてください。



すると掲示板を埋め込むためのhtmlが表示されます。
こちらをコピペしましょう。



Museのフォーラムのページに戻って、
「オブジェクト」>「HTMLを挿入」をクリックしてコード挿入画面に先ほコピペしたhtmlを貼付けましょう。

ここで注意しなければならない事がございます。

コードをコピペした際は、
<script src="//cdn.muut.com/1/moot.min.js"></script>
となっておりますが、Museに挿入する際は、
<script src="//cdn.muut.com/1/moot.ja.min.js"></script>
として、「ja」を追記してください。

この「ja」とは日本語表記するために必要で、これが無いまま埋め込んでしまいますと英語の掲示板になってしまい、我々日本人には解読不能な掲示板が出来上がってしまいますので、ユーザー様のためにも日本語へ変換するようお願いいたします。


htmlを無事挿入したら、ボックスを任意の横幅まで広げましょう。
私は両端いっぱいまで広げてみました。
こちら横幅をモバイルに合わせればモバイル用の掲示板が自動で表示されます。
便利!!!スマホページで是非ご活用ください。

準備は出来ましたか?
これで完了です。
サーバーにアップロード!!!

Made with Museユーザーフォーラム


このようなフォーラムが完成しました!
上のリンクからご覧ください!

私のサイトもついに掲示板が出来上がりまして、貧相だったコンテンツも一気に充実したような気分になりますね!
みなさま是非ともお気軽に書き込んでくださいね!
メルアド登録以外にもfacebookかGoogle+でも登録可能です!

そして今回ご紹介させて頂いて掲示板作成サービスは下記のリンクからご覧ください。

http://muut.com/

一点注意が必要なのが、こちらのサービスが終了してしまった場合掲示板も閉鎖される恐れがございますので、こちらは自己責任でお願いします。
割と有名なサービスのようですので、当分は終わらないと思いますが。

また、私が運営しているAdobe Muse情報サイト「Made with Muse」も宜しくお願いいたします。

何かと不便だと言われるMuseですが、外部サービスを応用すればとても便利に使う事ができますね。上手く使いこなせばデザイナーの強い味方となるはずです。

ではまたお会いしましょう。

必ずダウンロードしておきたい Adobe Museの便利ウィジェット8セット!



おすすめマンガをご紹介!


こんにちは!

なんと今回で2日連続更新になります!

何でこんなにペースが早いのかと申しますと、ちょっと良い感じのMuseウィジェットを見つけてしまったからなんです!!

あの知る人ぞ知るMuse素材サイト大手「MuseGrid」さんご提供の、Museユーザーならマストハブな便利ウィジェット8個セットでございます!

それでは早速ご紹介させて頂きます。


1、Google Analytics Installer


これはサイトを運営している方にはおなじみのGoogle Analyticsを簡単に導入できるウィジェットです。
やり方は簡単。AnalyticsのプロパティIDを貼付けて、マスターページにウィジェットを置けば終了です。とっても簡単ですね!

2、Image Placeholder 


サイトを作ってる時に、「写真を置きたい場所があるんだけど、良い写真は無い…。探すのも面倒だなー」という時はございませんでしょうか?
このウィジェットにはよくある感じの画像が10枚セットされておりまして、良い写真が見つかるまでこの10枚の中から適当な写真を選んで置いておけば、それなりに良い見た目が保てるという、プロトタイプ制作用の便利ウィジェットでございます。


3、Font Awesome 


これは以前ご紹介したFont Awesomeウィジェットと同じ内容なんですが、私はこちらの方が使いやすいかなー、と思います。


4、Ion Icons



こちらは私は知らなかったのですが、Ion IconsというFont Awesomeみたいなアイコンがございまして、そちらがセットになっている便利なアイコン集でございます。
個人的には今回はこれが一番良かったです。

5、Ion Icons Animated


こちらは上でご紹介したIon Iconsの中で、アニメーションするアイコンが数個あるのですが、こちらがセットになっているアイコン集でございます。
動きを出したいときに便利なセットでございます。

6、Social Media Meta 


これはソーシャルメディアでサイトがシェアされた時に表示されるサイトのメタデータを設定できるウィジェットになります。
これを使うとfacebookでシェアされた時に、タイムライン上で変な画像と意味不明な説明文が出てくる事を防げます。

7、Library Installer


これはヘッダーとフッターの中に好きなhtmlを埋め込めるウィジェットになります。
「俺のこだわりのコードを入れさせろ!」という意識の高いユーザー様にオススメでございます。bootstrapにも対応しているそうでございます。

8、Mobile/Tablet Helper 


こちらはですね、スマホやタブレットのホーム画面に表示される四角いアイコンを設定できる便利なウィジェットです。お気に入りされた時に変なアイコン出てきたら嫌ですもんね。
細かい所ですが、変なアイコンがホームに出てきたら即削除の可能性大ですので、しっかりこだわっておきたいですね。

いかがでしたでしょうか?
細かい設定も、ウィジェットで簡単に設定できてしまうのがMuseの魅力ですね。
是非ともダウンロードして頂いて、サイト作成のお役に立ててくださいね。

ご紹介したウィジェットはこちらからダウンロード可能です。(ダウンロードにはメールアドレスの登録が必要です)

また、私が運営しているAdobe Muse情報サイト「Made with Muse」も宜しくお願いいたします。

ではまたお会いしましょう。

2015.12.02 新記事書きました!!
【使い方様々】レストラン、バンド、ビジネスなどに使えるAdobe MUSEテンプレート

2014年8月24日日曜日

Adobe Museのオシャレでセンスの良い無料テンプレート&ウィジェットが揃うサイト「MuseFree.com」



おすすめマンガをご紹介!

こんにちは!

最近はカメラの話題ばかりで、Museの情報をあまり更新しておらず大変反省しております!
先ほど良い感じの無料Museサイトを見つけましたので、皆様とシェアさせて頂きたいと思い、ブログを書かせて頂きます。

無料テンプレート&ウィジェットサイト

MuseFree.com


こちらのサイトを始めて見た時、衝撃が走りました。

「ついに、Museの無料素材もここまで来たか…」

日本にいると実感しませんが、海の向こうでは着実にユーザーを増やしており、それに伴い無料素材のクオリティもどんどんアップしているようでございます。

しかも、テンプレートだけでなく、便利なウィジェットやサイト制作でかなり使えそうな素材も全部無料!

これは利用しない手は無いのではないでしょうか??

それでは数ある素材の中で、私が気に入った物を少しだけご紹介させて頂きます。


まずは、こちらは「One Page Muse Template」。
読んで字の如く、最近流行りのシングルページタイプのテンプレートです。

このデザインセンスの高さは素晴らしく、きっと制作された方はかなりWebデザインに背通していると思われます。

すぐにでも使えるかと思いますので、ランディングページの作成にいかがでしょうか??


こちらはタブ作成のウィジェットですね。
タブって便利なんですけど、なかなかデザイン的に格好良くならないので私はあまり使わないのですが、これはオシャレ!
是非使ってみたいと思います。他にも複数のデザインあり。


こちらもオシャレなウィジェットですね。
周りの丸をクリックすると、真ん中の説明文が変わります。
サービスのメリットを紹介する際等に使えるのではないかと思います。


はい、来ました!
オシャレなデザインのコンタクトフォーム!
何とも言えないオシャレな感じが、「ちょっと問い合わせてみようかな?」と感じさせてくれますね。これは参った!


こちらは両脇にサムネイルを配置したオシャレなギャラリーでございます。
ちょっと人とは違ったデザインを求めているそこのあなた?
こちらの活用をオススメいたします。

いかがでしたでしょうか?
今回ご紹介できたのはほんの一部でして、他にも使えそうな素材はたくさんございます!
是非一度チェックしてみてくださいね。

サイトはこちらのリンクからご覧ください。

また、私が運営しているAdobe Muse情報サイト「Made with Muse」も宜しくお願いいたします。

ではまたお会いしましょう。

2015.12.02 新記事書きました!!
【使い方様々】レストラン、バンド、ビジネスなどに使えるAdobe MUSEテンプレート


2014年8月17日日曜日

2014年8月 Adobe Muse 2014.1のアップデート内容まとめ






こんばんは!

みなさま素敵なお盆休みをお過ごしでしょうか?
私がお盆休みでだらだらしている間に、Adobe Museがアップデートされておりました!

Museファンの皆様はもちろんチェック済みかと思いますが、私同様お盆休みでうっかり見落としている方もいらっしゃるかと思いまして、改めてアップデート内容をまとめさせていただきますね!

1、ブレット、数列リスト表示に対応




これは地味に嬉しいですね!
○とか数字を文の頭に置いて、リストを作る事が簡単にできるようになりました。
画像には移っていませんが、様々なリストスタイルを選ぶ事が出来たので、とても重宝しそうです。

2、お問い合わせフォームが「reCAPTCHA」に対応!ビジネスカタリスト以外のサーバーを使ってもより一層SPAM対応が可能に。



個人的に今回こちらが一番嬉しかったです。
以前のコンタクトフォームがビジネスカタリストのサーバーを使っていなければSPAM対策が出来ませんでした。。。

私のサーバーはビジネスカタリストでは無かったので、Museで作ったお問い合わせフォームでは、SPAMがどんどん送られてきてしまい、正直使い物にならなかったのです。

今回こちらの「reCAPTCHA」が使えるようになったので、ビジネスカタリストを使用していなくてもSPAM対策が可能になりました!

サンキュー!アドビ!

ちなみになんですが、「reCAPTCHA」はグーグルが開発したSPAM対策のサービスです。
ですので使用するためにはご自身のサイトを「reCAPTCHA」に登録する必要がございますのでご注意くださいませ。


3、お問い合わせフォームにチェックボックス!



またまたフォームについてのアップデートです!
お問い合わせフォームでチェックボックスを選択できるようになりました!
後はファイルを添付できるようになれば、Museのお問い合わせフームって完璧になるんじゃないでしょうか?
アドビさん!お願いいたします!

あとチェックボックスもスタイルを6種類設定する必要があるようですね。
ステートからどうぞ!

4、自分が保有するWEBフォントが使用可能!


ご自身が保有するフォントをサイトに埋め込めるようになりました!
これは嬉しいですね。
正直な話アドビってあんまり日本語フォント無いですよね。
Typekitもほとんど英語のフォントですし、日本語でサイトを作るにはちょっと弱いかな?

でも今回のこちらのアップデートでは、ご自身が保有するフォントをサイトで使用できるようになりました!
どんどん使っていきたいですね!

WOFF , EOT, SVG

こちらの3つの型式に対応しているとの事でございます。
注意した事は、ちゃんとご自身がサイトで利用して良いというライセンスを保有しているかどうか確認しなければいけないと思います。
Webフォントはライセンス外!みたいな例もあると思いますので。
ご利用になる前に確認されると良いでしょう。

5、字形が使用可能になりました。


これはオマケみたいなものでしょうか??
字形と言われても良くわからないかと思いますが、コピーライトの©の時とか、トレードマークの™みたいな字の事です。
こちらを使用する際に選択できるようになり、文字化けを防げるようになったみたいです。

いかがでしたでしょうか??
今回のアップデートは痒い所に手が届く、素敵なアップデートでしたね。
この間アップでデートしたばかりなのに、この短い間隔でパワーアップされるとは、アドビのMuseに対しての力の入れ方を感じました!

どんどんMuseを使っていきましょう!

また、私が運営しているAdobe Muse情報サイト「Made with Muse」も宜しくお願いいたします。

2014年8月6日水曜日

Adobe Museで簡単にhtmlテーブルを作成する方法

こんにちは!

今日は珍しく(笑)役に立ちそうなトピックをご紹介いたします!

Adobe Museは直感的にイラストを制作するように簡単にWEBサイトを制作できるとても便利なツールですが、コーディングを必要としない反面、様々な障害に直面する事もございます。

私がMuseを使い始めてまず困ったことは、
テーブルが作れない!!
ということでございました。

長方形を作って、その上にテキストを置いて、それをコピーして、また色を変えて…
みたいな形でテーブルっぽいデザインを作成する事は可能なのですが、いかんせん面倒臭い。
ここはさくっとhtmlで編集しやすく作ってしまいたいですよね!?

そんなお悩みを解決するちょっと便利な小技を本日はご紹介いたします。


はい、こちらのサイトにご注目ください。
「Table Generator」というサイトでして、こちらブラウザでテーブルを自分で編集し、作ったテーブルのHTMLを生成してくれるとっても便利なサービスなんです。

勘の良いMuseユーザーの方々はもうお気付きかもしれませんが、このサービスを使ってhtmlを生成し、そのままMuseに埋め込んじゃいましょう!といいうのが今回の小技でございます。


テーブルの作り方はとても簡単ですので省略しますが、作りたいセルの数を選んだらその中に入れたいテキストを入力するだけで完了です。

既に作ってあるエクセルやcsvファイルをアップロードすればそのまま読み込んでくれたりするそうで、とってもユーザーフレンドリー!
作った方は神であると思います。

好みのテーブルが出来上がりましたら、下の「Generate」ボタンを押すと自動的にhtmlが表示されます。「copy to clipboard」をクリックし、簡単コピーしちゃいましょう。


Museに戻って頂き、「htmlを挿入」をクリックして編集画面を開きます。
こちらに先ほどコピーしたhtmlを貼付けて、OKボタンを押します。


すると、あら不思議!?
先ほど制作したテーブルが見事表示されました!


本番環境にアップしブラウザで先ほどページを表示します。
はい、見事に綺麗なテーブルの出来上がりです!!

いかがでしたでしょうか?
出来ない事も多いMuseではありますが、ちょっとした工夫をする事で課題解決が可能でしたね。
課題を見つけたら色々解決法を自分なりに考えてみるのも楽しいかも?

それでは、またお会いしましょう。

本日ご紹介したサイト

また、私が運営しているAdobe Muse情報サイト「Made with Muse」も宜しくお願いいたします。

2015.12.02 新記事書きました!!
【使い方様々】レストラン、バンド、ビジネスなどに使えるAdobe MUSEテンプレート