英語とappleとDIYと

apple製品、英語関連、DIYについて

はてなブログにスライドショーをコピペで設置!初心者向けカスタマイズ

Check!!!▼

スポンサーリンク

f:id:buchibuchi4647:20170425124209j:plain

はてなブログにスライドショーを設置する手順を紹介します。初心者向けに詳しく解説しているつもりです。レスポンシブデザイン、パソコン、スマホデザインそれぞれのコピペコードを紹介していきます。

はてなブログにスライドショーを設置

記事内やサイドバーにスライドショーが設置していると読者の目に留まります。スライドショーは直帰率の効果につながると思います。また、設置することが難しいと思っている人も多いみたいで、利用者もあまり見かけません。実は簡単なコピペで設置可能なので、初心者の方も利用しやすいのでおすすめです。

スライドショーをカスタマイズ設置手順

今回参考にした記事はコチラ

【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳

はてなブログでスライダーを導入するきっかけを与えてくれました。とても感謝しています。

今回は記事内上下とサイドバーに設置する手順を紹介します。レスポンシブデザインとスマホデザインそれぞれコピペコードを紹介しますので、あなたのブログに合わせて、使ってください。

パソコン版またはレスポンシブデザイン向け

以下のコードを埋め込みしたい箇所にコピペしてください。たとえば、記事上なら、「デザイン」→「カスタマイズ」→「記事上」で表示したい場所に貼り付ける。「記事下」の場合も同様です。

URLリンク、画像リンク、タイトルにそれぞれ任意の情報を入力しましょう。

  • URLリンクは記事URLのことです。スライダーで表示したい記事です。
  • 画像リンクはスライダーで表示したい画像アドレスを意味します。
  • タイトルはスライダーの下部で表示される説明文を意味します。

他の設定

21行目の400の値を変更することでスライドショーの大きさを自由に変更できます。25行目で「次へ」、「戻る」のページャーの有無の設定ができます。26行目でタイトルの表示の有無の設定ができます。それぞれ有の場合は「true」、無の場合は「false」を入力してください。

現在はスライドは「2つ」に設定されていますが、増やしたい場合は、「li〜li」までをコピーして貼り付けてもらえると増やして使用可能です。

サイドバーに設置

サイドバーに設置する場合、「デザイン」→「カスタマイズ」→「サイドバー」で「html」を追加してください。「html」が追加できましたら、「編集」をクリックし、以下のコードをクリック。

貼り付けが完了したら、「適用」をクリックし「設定を保存」をクリックしてください。

その他の設定

その他の設定は上記で説明したパソコン•レスポンシブデザインと同様ですので、そちらを参考にしてください。

スマホデザイン向け

スマホデザインを設定されている人は以下のコードを任意の場所にコピーして貼り付けましょう。

URLリンク、画像リンク、タイトルを入力します。

  • URLリンクは記事URLのことです。スライダーで表示したい記事です。
  • 画像リンクはスライダーで表示したい画像アドレスを意味します。
  • タイトルはスライダーの下部で表示される説明文を意味します。

画像アドレスについてよくわからない人は以下

 

english-apple-diy.hatenablog.com

 

記事を参考にしてください。

 

その他の設定

24行目で「次へ」、「戻る」のページャーの有無の設定ができます。25行目でタイトルの表示の有無の設定ができます。それぞれ有の場合は「true」、無の場合は「false」を入力してください。

まとめ

スライドショーを使うことであなたのブログの印象はまったく違ってきます。初心者の人でも簡単にチャレンジしやすいカスタマイズです。この機会に挑戦してみましょう。