【WordPress】横幅いっぱいに表示でき、iPhone 等からも簡単に投稿できるスライドショー表示サービス「Mesh」

横幅いっぱいに表示でき、また、専用アプリで iPhone 等からも簡単に投稿することができる Automattic 社純正の「Mesh」というスライドショー表示サービスについての覚え書きです。

WordPress にはもともと以下のようなスライドショーを表示する機能がありますが、標準仕様ではご覧のように黒枠がついており、 1 投稿記事内での画像との識別にはなりますが、例えば、ウェブサイトの表紙等に使うにはあまり向いていません。

スライドショーには JavaScript が必要です。

しかしながら、「Mesh」というサービスを使うと、テーマの種類にもよりますが、概ね、以下のような感じ(一番下のもの)で、記事の横幅いっぱいにスライドショーを表示することができるようです。

スライドショー _t demo

「Mesh」へのサインイン

まず、「Mesh」というサービスに

WordPress.com のアカウント等を使って、サインインします。

2015-08-13 at 11.35

「Approve」ボタンをクリック。

2015-08-13 at 11.36

しばらく、こんな画面が表示された後、

2015-08-13 at 11.36

以下のような画面になります。ここに画像をドラッグ&ドロップするなどして、画像をアップロードしていけばいいようです。

2015-08-13 at 11.42

パソコン等からのスライドショーの貼り付け

パソコン上から Mesh へ画像をアップロードするには、画像をドロップ&ドロップで OK でした。なお、私が試してみた環境は mac の Safari です。

2015-08-13 at 11.43

アップロード中はセピア色になり、アップロードが完了すると写真本来の色で表示されます。

2015-08-13 at 11.45

comemoarrow

2015-08-13 at 11.50

WordPress に貼り付けるには、右上にある以下のボタンをクリック。

2015-08-13 at 11.52

URL をコピーし、

2015-08-13 at 11.51

記事に貼り付けたら、

2015-08-13 at 20.14

以下のような感じでスライドショーが表示されました。

2015-08-13 at 20.15

ドラッグ&ドロップ操作で画像の順番を入れ替えることができました。

2015-08-13 at 11.50

comemoarrow

2015-08-13 at 12.03

 

レンタルサーバ等にインストールして使うタイプの WordPress でも「Mesh」のスライドショーを貼れる

レンタルサーバ等にインストールして使うタイプの WordPress でも Mesh を貼ったり、iPhone 用の専用アプリから投稿できる 2 ことを確認済みです。

2015-08-13 at 13.10

「Mesh」のカスタマイズ

記事内に以下のような感じのものを貼り付けると、

以下のような感じでスライドショーを右寄せにしたりすることができます。

2015-08-13 at 20.02

参考

 


  1. このブログでは、スライドショー内の画像にもグレーの枠がついていますが、これは CSS の追加により表示させているもので、標準仕様では、このようなグレーの枠はありません。 
  2. Mesh の iPhone 用アプリからインストール型 WordPress へ投稿するためには、プラグイン「JetPack by WordPress.com 」を使って、あらかじめ、WordPress.com と連携させておく必要がある、との認識です。 

1件のコメント

  1. […] 例によって、写真をクリックすると拡大されます。松戸駅方面に花火が見えます。 左が三郷、右が流山、手前の町明かりは、松戸駅周辺 最近できたAutomattic社のスライドショー表示サービスにもアップロードしました。comemoさんの解説記事をご覧ください。 […]

    いいね

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。