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

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」を入力してください。

まとめ

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

企業向けHP/個人向けブログ|無料制作サービス6月30日まで

ホームページ・ブログ制作依頼に高額料金を払っていませんか?

フリーランス・個人事業主だからこそ無料でできるサービス。もちろん、無料だからといって質の心配無用。多数の企業様とのご依頼経験を積んだプロによるサービス。

今回は指定のサーバーに契約していただ人のみ限定のサービスとなります。たったこれだけの条件でHPやブログを運営可能。

・おしゃれなHPで集客したい・お店の商品をネットで販売したいなど

・学生・主婦が隙間時間にブログで稼ぐのは当たり前の時代!コソッとバレずに副収入を稼ぐノウハウもご一緒にプレゼント!

今回の企画は6月30日までの期間限定となりますので、お早めのご依頼お待ちしております

※現在、多数のご依頼をいただいております。

依頼をご希望の方に関してはお問い合わせよりご連絡ください。基本即日対応させていただきますが、納期につきましては多少前後することがありますのでご了承ください。

※初めてホームページを依頼するという方も安心してご相談くださいませ。

初めてで分からないのはお客様皆様ご一緒です。まずはお気軽にお問い合わせくださいませ。

おすすめの記事