はてなブログにスライドショーを設置する手順を紹介します。初心者向けに詳しく解説しているつもりです。レスポンシブデザイン、パソコン、スマホデザインそれぞれのコピペコードを紹介していきます。
はてなブログにスライドショーを設置
記事内やサイドバーにスライドショーが設置していると読者の目に留まります。スライドショーは直帰率の効果につながると思います。また、設置することが難しいと思っている人も多いみたいで、利用者もあまり見かけません。実は簡単なコピペで設置可能なので、初心者の方も利用しやすいのでおすすめです。
スライドショーをカスタマイズ設置手順
今回参考にした記事はコチラ
【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 – ひつじの雑記帳
はてなブログでスライダーを導入するきっかけを与えてくれました。とても感謝しています。
今回は記事内上下とサイドバーに設置する手順を紹介します。レスポンシブデザインとスマホデザインそれぞれコピペコードを紹介しますので、あなたのブログに合わせて、使ってください。
パソコン版またはレスポンシブデザイン向け
以下のコードを埋め込みしたい箇所にコピペしてください。たとえば、記事上なら、「デザイン」→「カスタマイズ」→「記事上」で表示したい場所に貼り付ける。「記事下」の場合も同様です。
URLリンク、画像リンク、タイトルにそれぞれ任意の情報を入力しましょう。
- URLリンクは記事URLのことです。スライダーで表示したい記事です。
- 画像リンクはスライダーで表示したい画像アドレスを意味します。
- タイトルはスライダーの下部で表示される説明文を意味します。
他の設定
21行目の400の値を変更することでスライドショーの大きさを自由に変更できます。25行目で「次へ」、「戻る」のページャーの有無の設定ができます。26行目でタイトルの表示の有無の設定ができます。それぞれ有の場合は「true」、無の場合は「false」を入力してください。
現在はスライドは「２つ」に設定されていますが、増やしたい場合は、「li〜li」までをコピーして貼り付けてもらえると増やして使用可能です。
サイドバーに設置
サイドバーに設置する場合、「デザイン」→「カスタマイズ」→「サイドバー」で「html」を追加してください。「html」が追加できましたら、「編集」をクリックし、以下のコードをクリック。
貼り付けが完了したら、「適用」をクリックし「設定を保存」をクリックしてください。
その他の設定
その他の設定は上記で説明したパソコン•レスポンシブデザインと同様ですので、そちらを参考にしてください。
スマホデザイン向け
スマホデザインを設定されている人は以下のコードを任意の場所にコピーして貼り付けましょう。
URLリンク、画像リンク、タイトルを入力します。
- URLリンクは記事URLのことです。スライダーで表示したい記事です。
- 画像リンクはスライダーで表示したい画像アドレスを意味します。
- タイトルはスライダーの下部で表示される説明文を意味します。
画像アドレスについてよくわからない人は以下
記事を参考にしてください。
その他の設定
24行目で「次へ」、「戻る」のページャーの有無の設定ができます。25行目でタイトルの表示の有無の設定ができます。それぞれ有の場合は「true」、無の場合は「false」を入力してください。
まとめ
スライドショーを使うことであなたのブログの印象はまったく違ってきます。初心者の人でも簡単にチャレンジしやすいカスタマイズです。この機会に挑戦してみましょう。
