結城永人 Japan 二十代前半から作家活動を天職として何よりも励んで来ました。当初は小説家を志望していましたが、十年を経て作詩する機会も増すほどに詩人こそ素性だと認めるに至りました。以降、個人的に永遠を歌う生き方として自分の中で最も重要な位置を占めています。ブログについては2015年から『些細な日常』を本格的に運営しています。人生、健康、芸術、学問、娯楽、開発、言語、政治、社会、歴史、生物、自然、等々、どんな話題でも自由気儘に取り上げるつもりです。今までの経験を活かしながら新しい思考や表現を得られれば良いと思ってやっています｜学歴：経済学士。職歴：物流業。資格：はんだ付け。特技：ダイエット。 詳細プロフィールを表示

結城永人 Japan 二十代前半から作家活動を天職として何よりも励んで来ました。当初は小説家を志望していましたが、十年を経て作詩する機会も増すほどに詩人こそ素性だと認めるに至りました。以降、個人的に永遠を歌う生き方として自分の中で最も重要な位置を占めています。ブログについては2015年から『些細な日常』を本格的に運営しています。人生、健康、芸術、学問、娯楽、開発、言語、政治、社会、歴史、生物、自然、等々、どんな話題でも自由気儘に取り上げるつもりです。今までの経験を活かしながら新しい思考や表現を得られれば良いと思ってやっています。 詳細プロフィールを表示

サイトに開閉ボタンでメニューを出した際のエフェクトとして外側を暗くすると見易い。そして開閉ボタンだけではなくて開いたメニューの範囲外、または新しく表示された領域外のクリックでも同じように閉じられると使い易い。どう作成するべきか、JavaScriptで実行するプログラムを考えてみる。 開いたメニューの外側を暗くする プログラムのアイデアとしてHTMLの領域のdiv要素を新たに作成してCSSで暗い背景色を付けて開いたメニューと元のコンテンツの間に挿入する方法が挙げられる。 サンプルのソースコード （開閉ボタン） ※押すとメニューが外側の明暗を変えながら開閉する。 HTML <span class="svg-button"> <svg class="hamburger-menu-1" width="142" height="30" viewBox="0 0 142 30"><rect width

ブログの投稿者: 結城永人タイトル: JavaScriptのonclickとclassListとsetTimeoutを使ったアニメーション付きの開閉ボタンのプログラム投稿のリンク: https://www.nagahitoyuki.com/2019/05/a-program-for-animated-open-close-buttons-with-javascript-onclick-classlist-and-settimeout.html最終更新: 2024年3月30日 コメント

ブログの投稿者: 結城永人タイトル: CSSのpositionのstickyでコンテンツをサイトの一定の範囲内にフローティングする投稿のリンク: https://www.nagahitoyuki.com/2018/09/float-the-content-within-a-certain-range-of-website-by-css-position-sticky.html最終更新: 2024年1月22日 コメント

ブログの投稿者: 結城永人タイトル: Bloggerの画像なしの投稿のスニペットに専用のサムネイル画像を表示する方法投稿のリンク: https://www.nagahitoyuki.com/2019/03/how-to-display-thumbnail-images-dedicated-to-snippets-of-imageless-post-in-blogger.html最終更新: 2024年4月5日 コメント

今までブログに目次のジャンプリンクやフローティングの戻るボタンを設置して来た。HTMLのリンクタグのaを使ってページ内のidを持たせた場所へ移動するように作成しているけど、ところが何もしないままのデザインだと一瞬で、目的地に着いてしまって周りが文字だらけならばそれこそ雰囲気が殆ど変わらないために自分はどこにいるのか、リンクを使ってページ内を本当に移動したのかどうかが分かり兼ねる。 少しでも混乱しないために、または折角と設置したはずの目次のジャンプリンクやフローティングの戻るボタンを気持ち良く使うというサイトのUX（User Experience／利用者の体験）を向上させるべく、ページ内を移動するスクロールイベントにゆっくり遅らせるアニメーションを付けるようにデザインを相応しく変えると良いと思う。 CSSのscroll-behaviorのsmoothの使い方 サイトのスクロールイベントの経過

ブログの投稿者: 結城永人タイトル: BloggerのContempoとSohoとEmporioのテンプレートで記事／追加ページにハンバーガーメニューを出す投稿のリンク: https://www.nagahitoyuki.com/2019/03/add-hamburger-menu-to-article-and-additional-pages-of-blogger-templates-contempo-soho-and-emporio.html最終更新: 2024年4月28日 コメント

2017年の公式テーマのContempoとSohoとEmporioとNotableのカスタマイズで、記事／追加ページの固有タイトルの見出しタグをh3からh1に、そしてブログ名の見出しタグをh1からh2に変更した。何れもHTML構文とSEO対策のためだけれどもさらに他の部分との見出しタグのバランスを考えるとページリスト（先頭）と人気の投稿のガジェットを使っているので、それぞれのh3をh2に変更するべきなんだ。 ページリスト（先頭）はトップやアーカイブなどのインデックスページで表示される。見出しタグがh3だとh1のブログ名に対して大きさが一つ飛んでしまっている。h2にすると順番良く並んだマークアップになる。 人気の投稿は記事／追加ページの本文の下に置かれている場合に見出しタグを変更した固有タイトルのh1に対してh3だとやはり一つ飛んでしまっていてマークアップの流れが損われているからh2に変更し

ブログの投稿者: 結城永人タイトル: Bloggerブログの記事ページに新しい投稿や前の投稿のページネーションを付ける投稿のリンク: https://www.nagahitoyuki.com/2018/07/set-up-pagination-of-newer-posts-and-older-posts-on-blogger-blog-article-page.html最終更新: 2024年6月8日 コメント Hello, I have pagination in my blog but I want the should be under the same label. Is it possible. Please help if you can. 2022年1月26日 21:06 I found the codes. Contempo and Essential / Add in Bl

ブログの投稿者: 結城永人タイトル: Bloggerブログで記事／追加ページのブログ名から見出しタグのh1を外す投稿のリンク: https://www.nagahitoyuki.com/2018/06/remove-heading-tag-h1-from-blog-name-of-article-and-additional-page-in-blogger-blog.html最終更新: 2024年6月8日 コメント

サイト作成でHTMLの番号なしリストのulや番号付きリストのolを使ってCSSの中寄せ：text-alignのcenterを指定した場合に内側のリストタグのliしか移動せず、ulの中黒やolの数字のマーカーが付いて来なくて左端に残ったまま、ずれてしまうのを修正できる方法はないか。 CSSのlist-style-positionのinsideを使う 考えて番号なしリストのulや番号付きリストのolにcssのlist-style-positionのinsideを指定するとリストタグと一緒に中黒や数字のマーカーも位置合わせが可能になると分かった。 同時にCSSのtext-alignのcenterを指定しておくと中寄せになるし、または値をrightに変えれば右寄せでもマーカーがリストタグと揃って移動するから大丈夫なんだ。 CSSのlist-style-positionのinsideを使うとリストタ

サイトのコンテンツが縦に長くなる場合にページの下段から上段へ移動する戻るボタンを設置すると便利だと思う。方法もリンクと考え方が共通だからサイト作成に慣れていれば初歩的なマークアップで済むのが容易い。微妙に違うのはリンク先がサイトアドレスのURLではなくてコンテンツの目次のジャンプリンクの場合と変わらず、同一ページに置かれたどこかのHTMLタグのidでなくてはならない。なので記載するのはリンク元の戻るボタンのaタグに加えてリンク先のidの二ヵ所に増えている。 戻るボタンのサンプル リンク先 <h1 id="header">タイトル</h1> リンク元 <a href="#header">↑</a> ↑（ブログ名へ飛ぶ） リンク先はh1などのコンテンツのHTMLタグにidを付け加えておく。リンク元はリンクのaタグを使ってhrefに半角シャープ（#）とidを指定する。 サイトで戻るボタンと反対に

ブログの投稿者: 結城永人タイトル: Contempoのページリスト（先頭）ガジェットにスマホでもっと見る…を表示する条件投稿のリンク: https://www.nagahitoyuki.com/2018/04/conditions-to-display-show-more-in-page-list-head-gadget-of-contempo-on-smartphone.html最終更新: 2024年6月8日 コメント

ブログの投稿者: 結城永人タイトル: Bloggerブログでフッターやサイドバーなどの文章が太字や斜体に変わる原因を突き止めた投稿のリンク: https://www.nagahitoyuki.com/2018/03/i-found-the-cause-of-blogger-blog-texts-in-footer-sidebar-and-so-on-turn-into-bold-or-italic.html最終更新: 2023年1月21日 コメント

ブログの投稿者: 結城永人タイトル: 幸せの良さはインパクトが物凄く大きいために人々の印象にも残り易いと考える投稿のリンク: https://www.nagahitoyuki.com/2018/03/i-think-that-good-happiness-is-easy-to-remain-an-impression-in-peoples-mind-because-the-impact-is-so-great.html最終更新: 2023年3月24日 コメント

新しいテンプレート表現「ラムダ式」 昨年（2015年）5・6 月に、Blogger テンプレートに新しい表現方法が相次いで登場したのを覚えているでしょうか。 Blogger テンプレートのウィジェットタグに新しい表現方法が登場 Blogger テンプレートにさらに新しいウィジェットタグが登場 Blogger テンプレート上で扱える構文が増えて、随分柔軟になった印象を受けたものですが、今回、さらにラムダ式が使えるようになりました。次のリンクが Blogger 公式のアナウンスです。 Official Blogger Blog: More custom template flexibility 「ラムダ式とはなんぞや？」という人は、このサイトの説明がわかりやすいかと。 第1回　ラムダ式 － ＠IT // 匿名メソッド Calculate(1, 2, delegate(int x, int y)