貯びっと日記

低所得・投資初心者のちょびっとした投資雑記ブログ。

ちょっとのお金をどう活用するか…実体験を通して自由に書いていくことを目標にしています。

サイドバーのリンク付き画像をスライダーに変更!ちょびっとカスタマイズ

 サイドバーにリンク付き画像を3~4枚ほど張り付けてみたら、上手くいかなかったため、スライダー化して対応しました。ランキングサイトに登録していますので、クリックしてもらえれば・・・というちょびっとした下心をデザインに反映しました。

f:id:holyknightseiya1234:20190217151343p:plain

登録しているランキングサイト

www.blogmura.com

blog.with2.net 登録しているランキングサイトは上記の2つになります。参加しているランキングにリンク付けすることでランクが上がるようです。

上手くできなかった方法

 没になった方法はサイドバーにリンク付き画像を4つほど並べたことです。

問題点が2つありました。下記のとおりです。

2つは正常になりますが、3つめ、4つめが表示されない問題。

作成した画像付きリンクのサイドバーの下のモジュールとかぶってしまい、その部分をクリックすると表示されない画像のリンク先へ飛んでしまうという現象。

 

①の問題については今やったら、できたみたいです。しかしなぜならなかったのか?その理由は謎です。トラブルの時のスクリーンショットは取っていません。しかし、この方法では画像が並びすぎてブログが長くなりますし、画像しだいでは重くなることも考えられます。

参考にしたブログ紹介

english-apple-diy.hatenablog.com 上記の記事を参考にさせていただきました。デザインCSSは触ることがないため、初心者でも簡単にできる方法です。

スライダー専用画像作成のポイント

画像を選ぶ

 今回使用した画像は7枚です。これをクリックしてもブログランキングサイトへは飛びません。

f:id:holyknightseiya1234:20190211120227j:plain
f:id:holyknightseiya1234:20190211120225j:plain
f:id:holyknightseiya1234:20190211120232j:plain
f:id:holyknightseiya1234:20190217152948p:plain
f:id:holyknightseiya1234:20190217153028p:plain
f:id:holyknightseiya1234:20190217153020p:plain
f:id:holyknightseiya1234:20190217153008p:plain

 画像は著作権フリーなサイトにあったものを使用しています。著作権に関わる話になりますので、他人の写真を勝手に無断転用したりする行為はやめましょう。ちなみに著者が使用したフリーサイトは以下になります。

pixabay.com フリーサイトにあったものにオリジナルでバーナーの画像を作成し、画像の中に入れました。人気ブログランキングのものは人気ブログランキングのマイページ内にあるバナーの作成を利用しました。

 肝心のスライダー専用画像作成のポイントです。スライダーの画像はできればですが、サイトへの負荷を考えて統一することがベストであると判断しました。下記のページで画像のサイズを自由にカスタマイズできます。

www.iloveimg.com 著者が使用している上記7枚の画像はjpgの300×200に統一しました。上記のサイトに飛んで画像をドロップすれば自由に簡単にできます。 

 さらに画像の圧縮を考えた場合、下記のページで画像を軽くすることができます。

compressjpeg.comこれも画像をドロップすれば勝手に圧縮してくれます。誰でも簡単にできます。

出来上がったスライダー

  • 20190211120227
  • 20190211120225
  • 20190211120232

 上記のようなスライダーが完成しました。クリックするとランキングサイトへ飛ぶという仕組みです。

終わりに

 貯びっと日記でのブログデザインで参考にした記事の一覧を作っています。

www.tyobit-diary.work ブログのデザインはいろんなやり方があります。デザインで迷っている方がおりましたら、参考にしていただければと思います。何か一つでも参考できるネタがあるかもしれません。スライダー化のメリットはやはりブログが画像で長くならないことです。スマホでも全然違いますね。

ブログランキング・にほんブログ村へ