廃未線まとめ

サイトのデザインを一部変更しましたのでお知らせします。変更内容はトップ画面への画像スライダの追加です。 導入経緯 以前からGoogle Bloggerで作ったこのサイトをブログではなく独自サイトのようにしたいと考えていました。トップページにテキストを表示させることで少しは近づきましたがまだまだ足りません。そこで以前から導入したかった画像スライダーを入れました。これは画像がの上に右ボタンと左ボタンが表示されて流れるように複数画像を切り替えられるというものです。各画像にリンクを設定することでそのページにジャンプさせられます。 テキストと画像スライダーを左右に並べることも考えましたが、後述するhtml/JavaScriptガジェットにはCSSを記述できないためカラムを設定できませんでした。テーブルを使った方法も試しましたが、スマホで縦並びに切り替わらず文字も画像も小さくなって見づらいので諦めました。 JQuery導入 簡単な命令でJavaScriptを実行できる「JQuery」を導入しました。導入方法は以下のサイトを参考にしました。 https://indoor-days.blogspot.com/2019/07/JQuery.html bxSlider導入 レイアウトタブから「ページの本文」にhtml/JavaScriptガジェットを追加してbxSliderを導入しました。導入方法は以下のサイトを参考にしました。 https://indoor-days.blogspot.com/2021/06/bxSlider.html なお、僕が使用している純製テーマの「Contempo」では「ページの本文」のところにガジェット追加ボタンはないので以前テキストを追加した時と同じ方法で一度サイドバーに追加してからドラックして本文に移動させました。 以前の記事はこちら↓ https://haimisen.blogspot.com/2023/09/top-humburger.html なお、Bloggerのhtmlでは終了タグが自動で入力されるため、先程のサイトのサンプルコードをガジェットにコピーして完了すると「<画像ファイル>」の後に「</画像ファイル>」が追加されてしまいます。画像を打ち込むときは忘れずに削除しましょう。先程のサイトのデモに所のコードを貼り付けて...

サイトのデザインを一部変更しましたのでお知らせします。変更内容は下記の２つです。 サイトのトップ画面にテキストを表示 記事や固定ページ画面でハンバーガーメニューを表示 トップ画面にテキストを表示 本サイトが使用しているGoogle Bloggerのトップ画面は通常は記事一覧のみが表示されます。しかし本サイトはブログではなく独自サイトのような雰囲気にしたいと思っているため、トップ画面にテキストを表示したいと考えていました。しかし僕が今使っているテーマのContempoではBloggerのレイアウト画面では「ブログの本文」(他のテンプレートでは「メイン」)のところにガジェットを追加するボタンがありません。非公式を含め他のテンプレートも探しましたがメインにガジェットを追加できるものはほぼなく諦めていました。 しかし、レイアウト画面をいじっていたら、一旦サイドバーにガジェットを追加してからマウス操作でブログの本文にドラックすると移動できることに気がつきました。とても簡単なことでした。もっと早く気付いていれば良かったです。 但し、そのままメインにテキストガジェットを追加すると上部のヘッダー画像の上にテキストが表示されて視認性が最悪なので、HTMLで背景色を白に設定しました。また文字色もデフォルトで灰色となっていたため黒に設定しました。また、それだけだと文字の下にしか背景色がなく見栄えが悪いので白い枠線を設定しました。 追記① : 上記のようにしてテキストを追加した結果、記事や固定ページの画面にも表示されてしまいました。追加したガジェットをトップページにだけ表示するためにはもう一つ手順が必要だったようです。下記のサイトを参考にテーマを編集しました。 https://dendensoken.hankeidou.jp/2021/04/blogger-tp.html 追記② : 見栄えが悪かったため文字色を黒から記事本文と同じ灰色(#757575)に戻し、さらに下部の記事一覧に文字位置を合わせるためインデント(字下げ)を2文字分だけ入れました。字下げはhtmlにmargin-left: 2remを記述して指定しました。また、上部に見出しがあった方が座りが良いので入れました。 追記③ : 追加したテキストの見出しと下部の記事一覧の見出しが全く同じ見た目でわかりにくかったので、テキス...