【コピペOK!】楽天のスマホ版にCSSやiframeを読み込む方法

【コピペOK!】楽天のスマホ版にCSSやiframeを読み込む方法

最近、コンビニの栄養ドリンクを舐め回すようにして試している社員Aです。

ちなみに、キューピーコーワαドリンクが一番甘いです。

さて、今回は楽天店舗のスマートフォンページにCSSやiframeを読み込む方法をご紹介します。

楽天でショップ運営をされている方ならお馴染みの楽天RMS。私的には、FacebookやInstagram開く回数よりも断然多いです。

店舗ページのスマホ版を柔軟にデザイン

「スマホ版にもiframeやcssを適用させたいけど、エラーが出る!」「スマホ版は使えないタグが多い…」

こういった相談を受けることがあるのですが、「ある裏技」を使えば、スマホ版でもifameやcssを読み込むことができます。

やり方はとっても簡単で、エラーが出るタグ自体に13個の空白をつけるだけなんです。

と言っても分かりにくいと思いますので、実例でご紹介します。

●iframeを読み込む方法
<iframe src="http://www.rakuten.ne.jp/gold/xxxxx/" width="100%" height="200"             ></iframe             >
●CSSを読み込む方法
<link rel="stylesheet" href="xxxx"             >

こんな感じできっちりと13個空白を入れることで、エラーなく反映できます。

なぜ13個なのかは謎ですが、私は毎回このやり方でCSSやiframeを読み込んでいます。

 

上記タグの活用方法

スマホ版にiframeやcssを読み込めると、様々な方法で活用できます。

私がよく使うのは、「フローティングバナー」です。

こんな感じで、スクロールをしても常に追跡するバナーですね。

楽天goldで追跡をするCSSの記述を書いて、先程の方法でスマホ版に読み込めばフローティングも簡単にできてしまいます!

期間限定で発行しているクーポンを取得させたり、大型イベント(マラソン、スーパーセール)時にイベントページに誘導したりと転換率を上げるための戦略として活用できます。

こちらのやり方はまた後日紹介させていただきますねm(__)m

スマホ版のデザインにCSSやiframeを活用してもっとデザインの幅を広げてみましょう!

「13個の空白」と覚えておけばいつでも活用できます。

 

広告
Event Organiserで日付表示を変える方法

Event Organiserで日付表示を変える方法

WordPressのプラグイン「Event Organiser」のカスタマイズでちょこちょこ引っかかっているので、備忘録にまとめていきます。

今回は日付表示を変える方法を記録しておこうと思います。

今回はこの部分のカスタマイズだ!

Event Organiserをインストールし、いざサイトにカレンダーを!となった時に邪魔するアイツ。

スクリーンショット 2017-01-27 22.02.54.png

上部を「2017年1月」と表示したいのに、「1月 2017」と表示されている。

厄介だなあと思いつつも英表記だとこの表記がデフォルトなんですよね。日本人には見慣れないのでさっと書き換えてしまいましょう!

STEP1 プラグインのファイルを漁る→ダウンロード

このEvent Organiserというプラグインに必要なファイルは下記ディレクトリに含まれています。

/wp-content/plugins/event-organiser/

他の部分をカスタマイズする際も上記ディレクトリ内のファイルをいじることになります。

まずは、下記のディレクトリの順でファイルをエディタで開いて下さい。

/wp-content/plugins/event-organiser/includes/event-organiser-event-functions.php

 

STEP2 1370行目を書き換える

さきほどのファイルを開いたら、1370行目あたりにあります「’titleformatmonth’ => ‘F Y’」となっている部分を「Y年 F」で書き換えます。

スクリーンショット 2017-01-27 22.22.32.png

これで下記のように日本語表記で表示することが出来ます。

スクリーンショット 2017-01-27 22.23.15.png < できた〜!

この部分をカスタマイズすれば「◯月」や「◯月のカレンダー」など自由に書き換えができますね。

 

まとめ

Event organiserは公式のマニュアルがあるのですが、本当にカスタマイズ性が高すぎて、始めて見ると「ナンダコレ」になります。謎すぎてページを閉じたくなります。

私もわからないときはひたすらググるんですが、日本語ではあまり情報がないのが実情です。

迫りくる納期と戦うWebデザイナーにとって「調べる時間」というのは掛ければ掛けるほど首を締めるようなものなので、一生同じことをググらなくて良いようにここに記録したところです。

Event organiserには他の所でも詰まりまくっているので、解決したものはこうやって記録に残していく予定です☺