Meteor Slidesを右寄せにした覚書

仮面ライダーアート展の写真をギャラリーにまとめました。
枚数が多かったので既存のphotogalleryの子ページとして新設しました。前回と同じ作りなので、サムネをクリックするとSlimboxでみょーんと拡大表示されます。
そして今回のあらすじ。

新設ついでにMeteor Slidesも設置してみよう。

今回は右寄せにしてみよう。

作者のページにやり方が書いてあったからそのまま書いてみよう。

今回は失敗しなかったよ!やったね!

失敗はしなかったんですが、設置場所がギャラリーだったためちょっとレイアウトが気に入らなくてcssを弄ったら…面白いことになったので備忘録として書いておきます。

Meteor Slidesの設定に関してはコチラコチラを参照してください。
以下、Metero Slidesがデフォルトの配置で実装されている前提で進みます。
コードなどは[]<>{}が大文字、テーマの都合で’などが違う可能性が高いです。コピペには適していません。

作者のサイトでは
[meteor_slideshow slideshow=”スラッグ” metadata=”align: ‘right'”]
で右寄せに出来るとありましたので、その通りに記述しました。
今回は昭和ライダーのスラッグをm、平成ライダーのスラッグをkにしたので以下の通りで実装できました。
[meteor_slideshow slideshow=”m” metadata=”align: ‘right'”]
[meteor_slideshow slideshow=”k” metadata=”align: ‘right'”]
固定ページ(テキストエディタ

回り込み
するとこの通り右寄せになったんですけど、ギャラリーのサムネまで回り込んでしまってキレイじゃないですよね。
そこでソースを覗いてclear: bothを設定できるclassかIDを探しました。
固定ページMR-galleryのソースはこんな感じ。

<div id=’gallery-1′ class=’gallery galleryid-741 gallery-columns-3 gallery-size-thumbnail’>
 <dl class=’gallery-item’>
  <dt class=’gallery-icon’>
   <画像URLとかaltとか色々>
  </dt>
 </dl>
 <dl class=’gallery-item’>
  <dt class=’gallery-icon’>
以下繰り返し…

使用しているギャラリーはWordpressデフォルトのものです。
すべてのギャラリーで回り込みを解除したいなら.galleryがいいと思うんですが、今回はこの固定ページだけ回り込みを解除できればいいので、固定ページのIDが振られている.galleryid-741を利用しました。
外観>テーマ編集から使用しているテーマのcssの一番下に以下を追加。
.galleryid-741{
clear: both;

これで無事回り込みが解除できました。
回り込み解除
文章と違ってギャラリーは等間隔に並んでいるため、スライドショーが右にはみ出ている感じを受けますよね。
なのでこれもソースを覗いてmarginを指定できるclassかIDを探したところ、スラッグが振られている
div id=”meteor-slideshowm”
が適当かと思って以下のように指定。
#meteor-slideshowm{
margin: 0 40px;

見事にギャラリーのサムネに被りました。上下のマージンが0なんだから当たり前です。
当たり前ですが、やってみないと判らない人間なので間違えるのは大切です。
下マージンが0

という訳で以下のように書き直し。
#meteor-slideshowm{
margin: 0 40px 20px 0;

これでPCからの見た目はキレイになりました。
下マージンを指定
平成ライダーのスライドにもdiv id=”meteor-slideshowk”を利用して同じように設定しました。

ブラウザ幅を狭くしていくとマージンが指定されているため、右マージンの40pxが常に保たれたままレスポンシブなMeteor Slidesがどんどん小さくなっていきます。
ちょっと面白いです。

テーマの都合などでショートコードでmetadataを指定しても右寄せが出来なかった場合は、今回マージンを指定した#meteor-slideshowmに相当する部分にfloat: rightを指定すればできます。
phpに関しては作者のサイトを参考にして下さい。英語が読めなくてもphpが読めれば判ると思います(多分)。
雰囲気的には{ meteor_slideshow(“m”,”align: ‘right'”); }あたりで出来そうですけど、ショートコードで事足りている私には必要ないので試していません。間違っている場合はエラーで表示されなくなりますので、自己責任でお願いします。

phpが判らない人はcssでfloat: rightが一番いいと思います。エラーも出ないし(ここ重要)。
以上Meteor Slidesを右寄せした覚書でした。

スポンサードリンク
Pocket
LINEで送る

Bookmark the permalink.

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • スポンサードリンク