ぷちゅ的

工業高校生ですが何か?

【ブログパーツ】はてなブログで使える「記事ギャラリー」

【スポンサーリンク】

f:id:ktrw3200:20170725153210j:plain

今回作成したのは「記事ギャラリー」です。もともと僕が作ろうとしていたのは画像ギャラリーなのですが「これちょっといじったら記事ギャラリーにできんじゃね?」ってことで記事ギャラリーにしちゃいました。

また、このパーツはスマホ・タブレットで見た時に最適化するように設定しています。

ぜひ設置してみてください。

応用すれば、Youtubeとかも貼れるかも。

完成図(イメージ)

見てもらうのが早いとおもいます。PCでご覧のかたはサイドバーの最上部、スマホでご覧のかたは、記事の最後に設置しております。

f:id:ktrw3200:20170725152242j:plain

記事ギャラリーのコード

HTML(タイトル下やフッターに貼り付け)

 CSS(デザインCSSに貼り付け)

 jQuery(フッターに貼り付け)

画像とリンク先URL、タイトルの編集

ギャラリーに表示する画像とリンク先のURLを入力して使ってください。

同じものが4つあるので、それぞれに以下のことを設定してください。

  1. <img scr="" ...省略...>""の中に画像のアドレスを入力
  2. <a href="" class...省略...>""の中にリンク先のURLを入力
  3. [タイトルを入力]記事タイトルを入力

 

参考にしたもの

 

編集後記

 急いで作ったものなので不具合とかがあるかもしれません。

なにか気になることがありましたら、ツイッター・コメントで連絡ください。