はてB!PinterestFeedlyWordpressで記事のスライドもできるSmartSlider3の使い方を解説。画像をスライドさせるプラグインなら他にもたくさんありますが、SmartSlider3を使えばWordpressの投稿記事もスライドで表示可能。トップページに設置して記事一覧をスライド表示すればUX的にもかなりインパクトあるのでオススメ!SmartSlider3を使ったスライドの作り方SmartSlider3ではスライドに入れるコンテンツ(画像や投稿)の設定に加えて、画像の上にテキストやボタンを乗せてLPのヘッダーを作成したりも出来ます。無料版でも十分使えるのがGood。インストールして設定画面を開くインストールはプラグイン追加画面で、「SmartSlider3」を検索してインストールし、有効化してください。Slider」が追加されるのでここから設定画面を開くことができます。Slider」から新しいスライドを作成します。出てきたパネルでは、スライド名とサイズの入力、プリセットタイプ、サンプルスライドの選択ができます。ここではサンプルを入れずにデフォルトのままで「Create」ボタンを押します。スライドの設定で簡単なカスタマイズを行うスライドを作成するとスライドの設定画面に移動します。Slide」を押すと上の画像のようにスライドに挿入するコンテンツを選択できるパネルが表示されます。スライドを追加すると設定パネルが表示され、スライドの詳細な設定が行えるようになります。1段目はスライドの全体的な設定を行うことができます。カスタムCSSやJavascriptの設定2段目ではスライドの細かい部分(矢印など)の設定が可能です。Slide」から「Post」を選択します。すると記事の選択パネルが表示されるのでスライドに表示したい記事を選びましょう。無料版では1スライド内に1記事(全面に表示される)となっており、複数記事を並べて表示することはできないようです。複数表示したい場合はプロ版にアップデートする必要があります。LP向けの高品質なカスタマイズをする方法SmartSlider3では画像を入れるだけでなく、スライドの上にテキストを乗せたり、画像やボタンを追加することができます。この機能を使えば、背景画像の上に商品画像や購入ページへのリンクボタンなどを設置することが可能。カスタマイズをするには、スライドの編集画面から、追加したスライドの編集ボタンを押します。ボタンを押すと、スライドのカスタマイズページに移動し、左側にあるツールバーからテキストやボタンを設置できます。設置した見出しやボタンはさらに詳細なスタイルの編集ができるようになっています。コンテンツを配置するときはスライドの上にあるボタンの「CANVAS」を選んでおくと自由に位置を変更できるようになります。モバイルサイズに最適化したカスタマイズ方法SmartSliderでレスポンシブ最適化を行うには、スライドのカスタマイズページの上部にあるデバイスボタンを押せばOK。ボタンを押すと、PC、タブレット、モバイルのサイズに縮小されるので、テキストの位置やスライドの高さなどを微調整することができます。SmartSlider3で作ったスライドの設置方法SmartSlider3で作ったスライドを設置する方法は、テンプレートに設置する方法と、投稿記事内に設置する方法の2つがあります。テンプレートに設置する方法SmartSlider3をテンプレートに設置するには、作成したスライドの編集画面にあるPHPコードを取得し、テンプレートの好きな位置に設置しましょう。PHPコードはこんな感じになってます。コードをコピペすれば作成したスライドを表示できます。投稿記事内に設置するにはエディタの上部にあるSmartSliderボタンを押します。ボタンを押すと、作成したスライドを選ぶパネルが出てくるので、その中から設置したいものを選択すればOK。まとめSmartSlider3は他のスライダーが有料版でしか対応していない投稿記事の表示にも対応してるので、Wordpressで使えるスライダープラグインの中でもオススメできます。メディアサイトから、LPでも使えて、レスポンシブにも対応してるのでこれ1本あれば他はいらないくらい便利。ちなみにSmartSlider3にはプロ版もありますが、広告が出ることもないので無料版で十分です。WebデザイナーフリーランスWebデザイナー。レスポンシブサイトの作成、Wordpress、EC-CUBEやカラーミー、BASEなどのネットショップのデザイン・構築を担当。EC-CUBE4プラグイン「UICube」開発者。このブログでは初心者がつまずきやすいポイントや、制作で得た知識をわかりやすく解説します。ショートコードの使い方と作り方Web制作のことでお困りですか?・急に案件が増えて手伝ってくれる人を探している・担当していたデザイナーがやめてしまった・新しくホームページを作りたいこのようなことでお困りでしたら、お気軽にご相談ください。デザインからコーディング、WordpressなどのCMSの構築まで対応させていただきます。homupedia.com。