addthis

2014年9月28日日曜日

Adobe Museで作ったサイトで自分のブログの更新情報を自動で表示させる方法






こんにちは

最近自分のホームページのTOPをリニューアルしまして、なかなか好評を頂き嬉しい限りです!

Made with Muse
ホームページはこちら

TOPページに自分の更新情報や他の方のMUSEに関するツイートなども自動で表示できるように変更しまして、大分更新が楽になりました!
今まではブログを更新するたびにMUSEのファイルを更新していたものですから…

また、「これっていったいどうやってるの??」という質問もいくつか頂戴しましたので、今回はこのやり方をご説明したいと思います。
ワードプレスみたいにブログの更新情報を自動で表示させる方法を探している方は多いみたいですね。

1、Rebel Mouseに登録しましょう

まずこの方法では「Rebel Mouse」というサービスを使用しております。


この可愛いネズミのロゴが目印です!
可愛い外見とは裏腹に、これがなかなか使えるサービスでして、ネット上のコンテンツを自動で収集して、日本で言う「まとめサイト」とか「キュレーションサービス」を作れる優れものなんです。



こちらがログイン画面になりますので、ここから新規登録をしてください。
有料プランもありますが、今の所無料プランで充分です。
全部英語なんですが、登録は簡単なんでご自身のプロフィールやサイト情報を入力してください。

2、自分のブログを登録しよう

登録が終了すると、ご自身のRebelMouseページが作成されます。
左側にメニューボタンがありますので、こちらをクリックしてください。
メニューが表示されますので、「Content Sources」を選択してください。
ここではご自身のRebelMouseページに表示させる「コンテンツの元ネタ」を登録します。




このようにブログの欄で自分のブログのRSS情報を入力します。
RSSが分かれば他人のブログでも大丈夫です。



他にツイッターも登録できます。表示させるユーザーを登録しましょう。
検索ワードでもOKです。




FacebookやInstagram、Linkedinなんかも登録できます。
画像にはありませんがYoutubeとかもあります。

「Publish On」という項目では表示方法を選ぶ事ができます。
「Post」を選択すると、自動で勝手に表示されます。私は自分のブログ更新情報はPostにしております。

「Save to Draft」に設定すると、関連するコンテンツは自動でドラフトページという所に一旦格納されます。格納されただけではまだ本番表示はされず、ドラフトページでこのコンテンツの表示を許可する事で始めて本番表示されます。
自分のサイトに掲載したくない関係ないツイートやブログ投稿などは自動表示されたくないと思いますので、一旦ドラフトに格納したほうがオススメです。

3、デザインを選ぼう

ブログの登録などが終わりましたら、次はデザインを選びます。

メニューの「Design」に移動して、




色々なデザインのレイアウトがありますので、気に入ったデザインを選択しましょう。


ちなみに私のデザインはこんな感じです。

4、Museのサイトに埋め込もう!!

ここまで出来上がりましたらほぼ完成です。
メニュー画面から「Embed」を選択します。



このページで埋め込み方を選択します。
いくつか項目がありますんもで、お好きなものを選択してください。
終わりましたら「Generate」をクリックします。



このようにHTMLコードが生成されますので、こちらをコピペします。
後はMuseのファイルを開いて、表示したい場所にこのHTMLコードを「オブジェクト」→「HTMLを挿入」から埋めこんでください。

このサービスが優れているのはレスポンシヴに対応しておりますので、お好きな大きさで表示するこができます。スマホのページにも埋め込むことができますよ!

ブログはRSSを取得したら表示されますので、投稿してから表示されるまでに多少時間がかかる事もありますが、とても便利なサービスですので、是非ご活用頂ければと思います。

今回ご紹介した「Rebel Mouse」は下記のURLから登録可能です。

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

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






2014年9月21日日曜日

無料のオリジナルAdobe Museテンプレート配信しております!







こんにちは!

先日からなんですが、「Made with Muse」オリジナルのAdobe Museテンプレート「PHOTOGRAPHER」を配信しております!

一応カメラマン向けに作成しましたが、色々な業種でお使い頂けると思います。
是非ともみなさまダウンロードしてみてくださいね。



見た目はこんな感じです。
トップは写真が目立つようにフルスクリーンのスライドショーを設置。


こちらは作品を展示する「ギャラリー」コーナーです。
ジャンルを変更する際にページをいちいち移動するのは面倒なので、
スライドショーで移動できるようにしました。



こちらは作品の詳細ページです。
スライドショーで画像が切り替わります。
作品が目立つようにシンプルに作成しました。



お問い合わせフォームも設置してあります。
これもいちいちお問い合わせページまでリンクするのも面倒ですので、
「contact」をクリックするとライトボックス風に画面に表示されます。



こちらはプロフィールを入れるページです。
ご自身の写真を入れるのがベストかと思います。
私は恥ずかしいので、鳥の写真です笑


いかがでしたでしょうか?
是非ともダウンロードして頂き、Museサイト作成の練習にお使いくださいませ。

こちらの無料テンプレートは下記サイトにて配信しております。

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

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






2014年9月17日水曜日

Adobe Museで使えるオシャレで無料のプリローダーウィジェット8種類!!






こんにちは

本日は、配信開始されたばかりだと噂の「プリローダーウィジェット」をご紹介します!

プリローダーとは、Webサイトを読み込んでいる間に画面の真ん中らへんでクルクル回っているアレです、アレ!!

最近のWebサイトは動画だのRETINAディスプレー対応画像だのどんどん高機能になっていますが、重いデーターが増えるにつれサイトの読み込みも重くなってしまいますよね。

そんな時に便利なのが、重いデーターを読み込んでいる最中に表示できるプリローダー。
凝ったデザインのプリローダーは見ているだけで飽きないですよね。

そんな、プリローダーが簡単にMuseで作ったサイトに表示できるようになるのが今回ご紹介する「プリローダーウィジェット」です。


こちらがご紹介するプリローダーです。
画像には4つしかありませんが、他にもあります。


こんなのとか


オシャレな円形とか


水玉的なデザイン?


これは定番のクルクル系

しかも、このウィジェットはサイズはもちろん、色や背景色、動作スピードなど細かい設定も行えてしまうんです!!

これで無料なんですから、たいしたもの。
是が非でもダウンロードして頂いて、この秋他のサイトに差をつけてみませんか?

今回ご紹介したウィジェットは下記のサイトからダウンロード可能です。

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

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




2014年9月13日土曜日

Adobe Museで作ったサイトにinstagramの写真を埋め込める無料ウィジェット






こんにちは

Adobe MuseにはTwitter、Facebook、Youtubeなど様々なソーシャルメディアと連携できるウィジェットが用意されております。

有名どころはもちろん、VimeoやPinterest、Paypalなんて日本ではちょっとマイナーな物まで用意されており充実していますよね。

しかし、なぜか「Instagram」だけは用意されておりません!


「Instagram」と言えば若者に大人気の写真共有サイトですし、簡単にオシャレな写真が撮影できるので若者を中心にたくさんのユーザーを抱える巨大プラットフォーム。

なぜだかMuseには「Instagram」の機能はついておりませんが、有名なMuseの素材配信サイト「QooQee」にて、ばっちり「Instagram」ウィジェットが配信されておりましたのでご紹介いたします。


こんな感じです。
こちらのサイト、とにかくオシャレです。

いつもデザインの参考にさせて頂こうと思い、見ているのですが、オシャレすぎて自分のセンスの無さが恥ずかしくなり、そっとパソコンを閉じます。



こちら結構細かくカスタマイズが可能です。
縦横の行数、表示される写真の最大数、もちろん写真自体のサイズなど
色々細かく設定できます。

このブログを書いている間に気がついたのですが、Web版のInstagramでも写真の埋め込み機能がありました!

写真の横に埋め込み用の「Embed」ボタンがあり、クリックすると表示されるHTMLをサイトに埋め込めるようです。

しかしこのやり方では写真を一枚一枚個別に埋め込んでいく必要がありますので、まとめてたくさん表示したい方は上記のウィジェットを使用する事をオススメいたします。

Instagramの写真はオシャレな雰囲気がありますので、サイトに埋め込んでおけば一気にオシャレなサイトが出来上がりそうですね!

こちらは下記のリンクよりダウンロード可能です。

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

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





2014年9月3日水曜日

Adobe Museで簡単にパスワード保護されたページを作る方法






こんにちは

本日はTwitterでご質問頂いた「パスワード保護されたページを作る方法」について書きたいと思います。


やり方としてはjavascriptを埋め込むだけなんですが、色々な方法があります。

Web初心者の方には分かりにくい内容だったり、ソースコードを見ればパスが分かってしまうようなやり方もありましたので、悩んだ末に一番シンプルな方法をご紹介させて頂きます。

1、まず「パスワードを入力するページ」と「正確なパスワードを入力すると表示されるページ」の2つを作成します。


図のように2ページ作りましょう。

「passwordprotected」というページが「パスワードを入力するページ」
「tokyo」と書いているのが「正確なパスワードを入力すると表示されるページ」

です。

ページ名は任意ですので、お好きな名前を付けてください。

ここで注意なのですが、

「正確なパスワードを入力すると表示されるページ」の名前(この場合はtokyo)は入力するパスワードと同じにしてください。

2、javascriptを挿入する

「パスワードを入力するページ」を開きます。


このようにお好きにデザインしてください。

次に「オブジェクト」から「HTMLを挿入する」を選び、


下記のコードをコピペして貼付けてください。

<!-- start GateKeeper code -->
<!-- http://www.HTMLisEasy.com/keeper/ -->
<form name="keeper" action="javascript:location.href =
window.document.keeper.page.value + '.html'" style="margin:0;">
<div style="display:inline;">
<input type="text" name="page">
<!-- <input type="submit" value="Go"> -->
<noscript><div style="display:inline;color:#ff0000;
background-color:#ffff66; font:normal 11px tahoma,sans-serif;">
<br>Javascript is required to access this<br>area. Yours seems
to be disabled.</div></noscript></div></form>
<!-- end GateKeeper code -->

すると下記のように白いボックスが表示されますのでお好きな場所に配置してください。
これがパスワード入力ボックスになります。


これで完成です。

3、秘密のページをサイトマップ、メニューから外す

次にプラン画面に戻ります。
秘密のページ(この場合はtokyoというページ)を右クリックし、ページプロパティを開きます。


「ページをsitemap.xmlに含める」のチェックを外します。
「メニューオプション」は「ページをメニューに含まない」に設定します。

これはgoogleなどの検索結果に秘密のページが表示されないように隠すために行います。

以上でパブリッシュして本番環境に移してみましょう。


上記のページを表示して、パスワードを入力してみてください。
(パスワードは「tokyo」です)

上手く行きましたでしょうか?
是非使ってみてくださいね。

パスワードを変更したい時は一緒にページの名前も変更してくださいね。

※注意
このやり方はセキュリティ的には高いとは言えませんので、大事なデーターや機密情報などが絡む場合は使用しないでください!これが原因で何か問題が起きても当方は責任は取れませんのでご了承くださいませ。自己責任でお使いくださいませ。

今回はこちらのサイトで紹介されているjavascriptを参考にさせて頂きました。

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

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




2014年9月2日火曜日

Adobe Museの「回り込み」機能で画像の周りに文章を回り込ませる方法






こんにちは!

本日はAdobe Museの「回り込み」機能の使い方をご説明したいと思います。

「回り込み」機能とは、読んで字の如く画像の周りに文章を回り込ませる機能です。
この機能を使えば長い文章があっても、効率的にスペースを使えるようになります。


まずは文章と画像を用意しましょう。
このままでもデザイン的に問題は無いのですが、画像の下に余白が出来てしまいちょっと寂しい感じがしますね。。。


回り込みのやり方ですが

1、まず画像を選択して、コピーまたはカットをします。

2、次にテキストボックスをダブルクリックして編集状態にし、画像を入れたい部分にカーソルを置いてください。

3、先ほどコピーした画像をコピーして貼付けてください。これで完了です。


このように画像回り込みが完成した状態になるはずです。
画像を選択し、サイズを変える事も出来ますしとても便利です。



回り込み機能を選択すれば、このように編集する画面が開きます。
上の3つのボタンで画像の位置を決める事が出来ます。(真ん中、左寄せ、右寄せ)
下の数値で画像を文章の間のスペース幅を上下左右決める事ができます。
初期設定では「0」になっておりますので、窮屈な感じです。
数値を増やして、余白を増やしておきましょう。

今回ご紹介したのは、いつもより細かい機能でしたが、覚えておくと便利です。
まだまだご紹介仕切れない程の機能がMuseにはありますので、がんばってコツコツご紹介して行きたいと思います。

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

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