Re: トップページの画像をJQueryで自動的に入れ替えたい
- kanegonyo > トップページの画像をJQueryで自動的に入れ替えたい @ 2017/2/14 0:10
- 夏輝 > Re: トップページの画像をJQueryで自動的に入れ替えたい @ 2017/2/14 3:01
- kanegonyo > Re: トップページの画像をJQueryで自動的に入れ替えたい @ 2017/2/14 9:54
- » 夏輝 > Re: トップページの画像をJQueryで自動的に入れ替えたい @ 2017/2/16 2:31
夏輝 > Re: トップページの画像をJQueryで自動的に入れ替えたい @ 2017/2/16 2:31 |
---|
kanegonyoさん、こんばんは。
今、他のトラブルも出ているようなのでテーマファイルにスライダーを組み込んで 管理画面で写真やコメントを変えられるようなのは一旦後回しにしたいと思います。 一旦こちらでお知らせする内容は、物凄く簡単にスライダーを組み込む方法です。 もし、テーマファイルを操作して自由にカスタマイズしたい場合は少しお時間を下さい。 では、以下に「簡単スライダー導入方法!」について記載しますので 事前に、スライドさせたい画像を複数枚用意しておいて下さいね。 ※width:940px、height:360px くらいがオススメかと思います。 1. こちらのサイトにアクセスし、「CREATE A SLIDER」をクリックします。 ⇒http://www.sliderui.com/ 2. 「Give the slider a name:」で、適当なスライダー名称を決定します。 3. 左側にある、「Add Slide」を枚数分繰り返しアップロードします。 4. アップロードが完了したら「Add Slide」ボタンの上にある「SETTING」を選びます。 5. サンプルでは「Auto Start」と「Controls Enabled」のみチェックをしています。(お好みで選んで下さい) 6. 選択が終わったら上の「Save Settings」を押します。 7. Saveボタンの上野「Embed Slider」をクリックして「Click here to copy code」を選択 8. ここで、SimpleCorpのテーマ管理画面に移動します。 9. テーマの管理画面から「default.php」の編集ボタンを選択。 10. 以下のソースコードの箇所を見つけてください。
11. メインイメージの表示されている真上の行に、さっきコピーしたEmbed Codeを貼り付けます。 12. 以下のようになっていることを確認してください。 ※ data-slider-id="rqdmwy"は人によって違います。
13. メインイメージの行を削除、またはコメントアウトします。 14. 保存すると、スライダーの該当箇所の下にかなりの余白が出来てしまうので、以下の内容に変更します。
15. ここまで出来たら保存を押して、トップページを確認してみてください。 わずか5分程度でいきなりスライダーを設定することが出来ていると思います! ※ この記事を書いている半分以下の時間で出来てしまいます。笑 ではでは、しっかりカスタマイズ出来るようにスライダーを設定したい場合はお知らせ下さい。 ちなみに、上記オンラインスライダーを設置したサンプルサイトは以下になります。 http://cielo-ds.xsrv.jp/bcsc/ |