Qitailangのブログ

Webデザイン、碁、Esperanto、自然農法的家庭菜園

はてなブログでスムーズ・スクロール

はてなブログでスムーズ・スクロールとページ・トップへの移動ボタンのメモ --- header <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> --- footer <div id="page-top"><a id="move-page-top"></a></div></link>

エスペラント入門

エスペラント入門的なページを作ってみた。もっともまだ作成途中だが。 エスペラントをちょっとかじってみたいと思う人は結構いるはずだが、あまり適当な学習ページがないように思われる。勉強する上でとても参考になるページはあるのだが、ブログ形式だった…

Fundamento de Esperanto : Antaŭparolo

"Fundamento de Esperantoエスペラントの基礎" は、ザメンホフの初期の基本著作である "La 16-regula gramatiko 16条の文法"、"Ekzerccaro 練習文集"、"Universala Vortaro 汎用辞書" に、"Antaŭparolo 前言" を加えて合本したものであり、第1回世界エスペラ…

Fundamento de Esperanto : Fundamenta Gramatiko

"Fundamenta Gramatiko de Esperanto"(エスペラント基本文法) は "Fundamento de Esperanto" の第2部に相当するものである。本来、フランス語、英語、ドイツ語、ロシア語、ポーランド語の5カ国語で説明されており "Fundamento de Esperanto" での総括タ…

Fundamento de Esperanto : Ekzercaro

"Ekzercaro"(練習文集)は"Fundamento de esperanto エスペラントの基礎" の 第3部に相当するものである。第2部がアルファベートと基本文法「いわゆる16条の文法」で、文法の大原則が掲げられているが、詳細に解説されているわけではなく、この"Ekzercaro"…

「全てのページにコメントフォーム」の改造

コチラのサイトで「全てのページにコメントフォーム」を設置できるツールがダウンロードできる。CMSやブログには大抵備わっているお決まりの機能だが、普通のHTMLページに数行コードを書き加えるだけで実現できるのでとても便利そうだ。 うまくいくと、必要…

フッター要素をページ下部に固定できるjavascriptr のライブラリfooterFixed.jsはフッターにid="footer"を付けるだけだけでOKなので、とっても便利です。 http://blog.webcreativepark.net/2007/11/16-012253.html ただ、隣接する上の要素(例えばdiv id=mai…

スマホでも打てるボード碁会所を設置してみました

趣味が囲碁なのですが、ボード碁会所を設置してみました。操作は簡単です。 1. メンバー登録する 2. 掲示板に対局を希望する旨の投稿をする。手合いなどは掲示板を使って相談する 3. 対局相手が決まったら白番・黒番どちらかが対局盤を設定する 4. 対局盤を…

バー、ショットバー向けテンプレートを作ってみました。

Shot Bar、ワインバーなどをイメージしてホームページ・テンプレートをつくってみました。 http://qitailang.small.jp/template/bar/index.html http://qitailang.small.jp/template/ 背景画像をウィンドウ全体に表示してみました。あまりウィンドウ全体がス…

割烹、和食レストラン、居酒屋向けテンプレートを作ってみました

和風な飲食店むけテンプレートです。 画像置換を使ってソースを読みやすくしました。SEO的にも有利じゃないかと... デザインはきわめてシンプルな代わりに、bxSliderでちょと動きのあるページにしてみました。 http://qitailang.small.jp/template/kappou/in…

テンプレートをダウンロードできるようにしてみました

これまで、カスタマイズしたり自作したwebページテンプレートを全部ではないですが、ダウンロードできるようにしてみました。 http://qitailang.small.jp/template

問い合わせ用メールリンクを作る

問い合わせにはフォームを使うのが一般的で、それなりの会社だったらそうするのが普通だろう。 しかし、私の経験ではフォームでは、スパムメールは排除できても、admin@hoge.comみたいな架空メールアドレスからの投函を防ぐのが難しいのではないであろうか?…

和風レストラン、古民家レストラン、寿司店、旅館向けテンプレートを作ってみました(NIkukyu-Punchさんのテンプレートをカスタマイズ)。 http://qitailang.small.jp/template_modified/yado2_blue/ http://qitailang.small.jp/template/

中華料理店向けテンプレート

中華料理店向けテンプレート向けテンプレートを作ってみました。 http://qitailang.small.jp/template

価格表CSS

飲食店などのwebページで価格表を表示するときのCSS http://qitailang.small.jp/webtech/price_line/sample.html <dl class="price"> <dt>フィレステーキ</dt><dd>&yen;2,000</dd> <dt class="description">A5ランクの神戸牛を使っています</dt> <dt>フォアグラのソテー</dt><dd>&yen;2,000</dd> <dt>白身魚のムニエル</dt><dd>&yen;2,000</dd> <dt>伊勢エビのソテー甲殻</dt></dl>…

連続するリスト項目を1〜8列に等間隔カラムで表示する。

sample1sample2(簡易レスポンシブ - 479px以下1カラム表示) ステップ1 リスト構造は下のように単純なものである。これを短いCSSで均等に横並びカラムで表示することにする。 <div id="item-list"> <ul class="cols-3"> <li>商品01</li> <li>商品02</li> <li>商品03</li> <li>商品04</li> <li>商品05</li> <li>商品06</li> </ul> </div> リスト項目を1列から8列表…

軽量かつ固定幅でも可変幅でも使えるグリッドCSS

sample1(固定幅)sample2(可変幅)sample3(簡易レスポンシブ) 固定幅レイアウトにもリキッドレイアウトにも応用できるグリッドCSSを作ってみた。特徴は、 個々のカラム幅をパーセントで指定するので、固定幅レイアウトにもリキッドレイアウトにも応用で…

安全性の高いメール・リンク

メール・リンクのスパム対策だが、どうやらエンティティ化(実体参照文字列化)や単純なJavaScriptによる記述では、怪しいようだ。コチラでメールアドレス収集ロボットの解析結果が確認できる。 結局のところリンクの箇所にマウスを持っていったとき、ステー…

Let's Note(Windows7)の中古を買いました。

Let's Note(Windows7)の中古を買いました。 HTMLを書いた時、IE8でどんな風に見えるか確認するのが主な使い道です。 Let's Noteにしたのはあの丸いTouch Padが便利そうだったからです。iPodみたいにグリグリ周りをこすってスクロールする奴です。Macのノー…

UL画像メニューのマウスオーバー画像を切り替える

シンプルなHTMLでマウスオーバー画像をきりかえられる。

簡易ソース表示jQueryプラグイン

ソース表示だが、説明が加わるときには行番号が役立つかもしれない。私としては文法を分かりやすくするハイライト表示よりも、一部の文字列をカラーで強調したいので、ハイライト表示は不要かと思う。「軽いがいい」し... 行番号はolのリストマークなのでク…

単純でも効果抜群のスパム撃退法

2015/04/30追記 この方法は必ずしも安全ではないように思われてきました。しかし実質的に私はこの方法を講じてから被害を受けていないので、少なくとも何も対処しないよりは次善の策を講じるということでお読み下さい。 JavaScriptでもメールアドレスが破ら…