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"><i class="fas fa-arrow-alt-circle-up fa-3x"></i></a>
</div>

<script>
$(window).scroll(function(){
var now = $(window).scrollTop();
if(now > 500){
$("#page-top").fadeIn("slow");
}else{
$("#page-top").fadeOut("slow");
}
});

$("#move-page-top").click(function(){
$("html,body").animate({scrollTop:0},"slow");
return false;
});

$(function(){
$('a[href^="#"]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
</script>

 

--- css
/*上に戻るボタン関係*/#page-top {display:none;position:fixed;bottom:20px;right:10px;margin: 0;padding: 0;cursor:pointer;z-index: 10;}#move-page-top {display:block;color:rgba(0,0,0,0.4);cursor:pointer;}#move-page-top:hover {color:rgba(0,0,0,0.7);}
@media only screen and (max-width: 780px) {  body{ text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; font-size:14px;   }  th,td{font-size:12px;  }  a{display:inline-block;word-break: break-all;  }}

エスペラント入門

エスペラント入門的なページを作ってみた。もっともまだ作成途中だが。

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

少しかじってみたい程度で本と辞書を買うのは足踏みするのではないだろうか?本といっても近くの本屋にエスペラントの本はそうそう置いてあるものでもないし、通販で買うと言っても、パラパラめくって見てもいないのにどんな本が届くか分からない。そこそこ買いたいものを見つけても、本と辞書を揃えれば少なくとも5千円はするだろう。制作にきわめて多大な労力を費やす辞書ならともかく、中学英語に相当するレベルの学習書なら、無料で読めるものを公開してもバチは当たらないと思うが、結構値が張るものもある。

自分はほぼ独習だし、レベルも高くないが、ひととおりは勉強したのできっかけになってもらえるぐらいで良いのではないかと思っている。少なくとも代用表記で書かれたページよりはましではないかと思っている。あれは見にくくてとても読めたものではない。なぜ普及を謳っているのにちゃんとした字上符号付きの文字に更新しないのだろう。

辞書は無料でダウンロードできるものもあるが、例文が載っていないので、扱いにくいだろう。少なくとも機能語(前置詞、本来副詞、接続詞)ぐらいは例文つきのものがないと役に立たないと思って、これも自分なりのまとめを作ってみることにした。一応接続詞を除いて用意出来た。

自分のサイトは閑古鳥が巣を作っているが、目に留まる人がいてエスペラントに触れる人がいてくださると嬉しいなと思う。

http://qitailang.small.jp/eo/memo/eniro.html

Fundamento de Esperanto : Antaŭparolo

f:id:idqtl:20170726102013p:plain

"Fundamento de Esperantoエスペラントの基礎" は、ザメンホフの初期の基本著作である "La 16-regula gramatiko 16条の文法"、"Ekzerccaro 練習文集"、"Universala Vortaro 汎用辞書" に、"Antaŭparolo 前言" を加えて合本したものであり、第1回世界エスペラント大会のブローニュ宣言第4条によって、誰も変更を加えることの出来ない「エスペラントの唯一の基礎」に採択された。"Antaŭparolo" は "Fundamento de Esperanto" の役割りについて述べられたものであり、非常に重要な内容を含んでいる。ザメンホフは「"Fundamento de Esperanto" は常備の指導的ドキュメントとしてすべてのエスペランチストの手中にあるべきです」と述べており、たとえ初学者であろうとその内容を知っておくべきものである。にもかかわらずネット上には無料で誰でも日本語で読むことのできるドキュメントとして見つからない。稚拙で誤りもあるかと思うが、大筋で主旨を汲み取れるだけでもないよりはましかと考え日本語に訳して上網してみた。

http://qitailang.small.jp/eo/antauparolo.html

Fundamento de Esperanto : Fundamenta Gramatiko

f:id:idqtl:20170726083414p:plain

"Fundamenta Gramatiko de Esperanto"(エスペラント基本文法) は "Fundamento de Esperanto" の第2部に相当するものである。本来、フランス語、英語、ドイツ語、ロシア語、ポーランド語の5カ国語で説明されており "Fundamento de Esperanto" での総括タイトルは、"Fundamenta Gramatiko de la Lingvo Esperanto en Kvin Lingvoj" となっている。それぞれの言語によって説明、例文、註記などが若干異なるようだ。和訳された学習ページもあるが、かなり意訳されていたり、何語版を訳したのかはっきりしない場合もある。そこで稚拙かもしれないができるだけ意訳を避けて日本語に訳してみた。なお、資料はPlena Manlibro de Esperanta Gramatiko (PMEG) に付属資料として記載されているエスペラントのみで書かれた資料を使を使った。これは正確には上記の5カ国版と同等の権威を有するものではない。

http://qitailang.small.jp/eo/gramatiko.html

Fundamento de Esperanto : Ekzercaro

f:id:idqtl:20170726082246p:plain

"Ekzercaro"(練習文集)は"Fundamento de esperanto エスペラントの基礎" の 第3部に相当するものである。第2部がアルファベートと基本文法「いわゆる16条の文法」で、文法の大原則が掲げられているが、詳細に解説されているわけではなく、この"Ekzercaro"がその説明を補う形式になっている。後年体系的で詳細なエスペラントの文法書が編纂されてはいるが、基本的にはこの "Ekzercaro" やその他のザメンホフの原著・訳書中の文を整理したものだと考えられる。したがってエスペラント学習者は1度は、この例文集に直接触れておくべきと考え、決して正確とは言えないかもしれないが、拙訳を添えて上網してみた。

http://qitailang.small.jp/eo/ekzercaro.html

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

f:id:idqtl:20170211215245p:plain

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

うまくいくと、必要なファイルをアップロードして、設置したいHTMLに、

<link rel="stylesheet" href="/commentform/commentform.css" type="text/css">
<div id="commentBox"></div>
<script type="text/javascript" src="/commentform/commentform.js"></script>

というコードを加える。たったこれだけで作れてしまう。しかし、utf8版をダウンロードして設置してみたら、う〜っ、いきなり文字化け。自分はphpはほとんど分からないので、あきらめかけていたのだが「感」でなんとか解消できた (^^;

このツールのもう一つ残念なところは、せっかく多くのページにコメントを投稿してもらえるのに、投稿があったことを知らせるメール通知機能がない点だ。このままではコメントがあっても気づかなかったり、質問に対する回答のタイミングを失してしまう可能性がある。これもなんとか機能を追加することができた。その他にも少々気になるところがあったので改造した。

sample

フッター要素をページ下部に固定できるjavascriptr のライブラリfooterFixed.jsはフッターにid="footer"を付けるだけだけでOKなので、とっても便利です。

http://blog.webcreativepark.net/2007/11/16-012253.html

ただ、隣接する上の要素(例えばdiv id=main)に枠線や背景色があると、今度はmainとfooterの間に隙間ができて見栄えがわるくなるというのがちょっと残念。

そこで素人が感だけでそこれあたりを修正してみました。bodyにマージンがあってもwindowの下縁にへばりつくのも解消できたと......思います。

http://qitailang.small.jp/webtech/fixed_footer2/

f:id:idqtl:20161214124301p:plain