トップページに画像スライダを追加しました
サイトのデザインを一部変更しましたのでお知らせします。変更内容はトップ画面への画像スライダの追加です。
導入経緯
以前からGoogle Bloggerで作ったこのサイトをブログではなく独自サイトのようにしたいと考えていました。トップページにテキストを表示させることで少しは近づきましたがまだまだ足りません。そこで以前から導入したかった画像スライダーを入れました。これは画像がの上に右ボタンと左ボタンが表示されて流れるように複数画像を切り替えられるというものです。各画像にリンクを設定することでそのページにジャンプさせられます。
テキストと画像スライダーを左右に並べることも考えましたが、後述するhtml/JavaScriptガジェットにはCSSを記述できないためカラムを設定できませんでした。テーブルを使った方法も試しましたが、スマホで縦並びに切り替わらず文字も画像も小さくなって見づらいので諦めました。
JQuery導入
簡単な命令でJavaScriptを実行できる「JQuery」を導入しました。導入方法は以下のサイトを参考にしました。
bxSlider導入
レイアウトタブから「ページの本文」にhtml/JavaScriptガジェットを追加してbxSliderを導入しました。導入方法は以下のサイトを参考にしました。
なお、僕が使用している純製テーマの「Contempo」では「ページの本文」のところにガジェット追加ボタンはないので以前テキストを追加した時と同じ方法で一度サイドバーに追加してからドラックして本文に移動させました。以前の記事はこちら↓
なお、Bloggerのhtmlでは終了タグが自動で入力されるため、先程のサイトのサンプルコードをガジェットにコピーして完了すると「<画像ファイル>」の後に「</画像ファイル>」が追加されてしまいます。画像を打ち込むときは忘れずに削除しましょう。先程のサイトのデモに所のコードを貼り付けてaltと画像URLを差し替えた方がわかりやすかったので僕はそうしました。リンクの適用も同じ場所に普通にhtmlコードを追加するだけでできました。僕はまだhtmlコードを覚えられていないので以下のサイトを参考にしました。
なお、企業のサイトなどでよくある自動で流れる機能はない模様です。
トップページ以外に表示されないようにする
このままだと全ての固定ページと記事ページに表示されてしまうのでこちらも以前の記事と同様にして表示されないようにしました。参考サイト↓
表示内容について
今のところとりあえず仮で「お知らせ」、「未成線」、「ガサキ鉄道のホームページ」の画像を表示しています。前2つのリンク先はラベルをクリックした時と同じです。ホームページの方はAmeba Owndで作った僕のホームページに飛びます。廃線と未成線の情報サイトなのであまり僕のサイトを強調しすぎないよう一番最後にしました。
未成線の画像は今福線の「おろち泣き橋」ですがこのサイトに今福線の記事はまだありません。いずれ書きます。ガサキ鉄道のホームページに画像は白い画面に「ガサキ鉄道のホームページ」の文字とサイトアイコンにしています。gasaki12という名前はAmeba OwndやAmebaブログ、noteのURLになっていますが最近はあまり使っていません。しかしこれしか画像がなかったので選びました。もう少しデザイン性を持たせようかとも思いましたが余計なことをするとかえって見辛くなると思いシンプルにしました。なお、画像サイズを揃える機能とかは特にないので同じサイズになるように画像を作らないと見栄えが最悪になります。僕はCanvaで画像を作りました。
また、今後記事が続くにつれて「廃線」を追加する他、ガサキ鉄道チャンネルの動画投稿状況次第ではYouTubeの廃線･未成線関連のシリーズの再生リストなども入入れられたらいいなと思っています。
当サイトは鉄道コムと日本ブログ村のブログランキングに参加しております。本記事が少しでも気に入りましたら是非下のバナーをクリックして下さい。
コメント
コメントを投稿