画像のキャプション表示

figureタグを使う話の続き

figureタグのなかにfigcaptionを書いておけば、画像の下にfigcaptionで書いた内容が表示されることは前回書いた。それを画像の中に書いてやることもできるのは容易に想像できる。positionプロパティを使ってレイヤにしてやればいい。positionは親要素にも書いてやらないとz-indexが効かない。cssは以下。

スクリーンショット 2015-12-17 9.00.00次に表題と説明を上下に分けてみる。ついでに文字色を白に文字も中央揃えにしてみた。
cssは以下

スクリーンショット 2015-12-17 9.14.31更にマスクを掛けてみる。cssは以下

backgroundで透過色を指定しているだけだが、ブラウザが持っているh3やpのプロパティを初期化していないので、ここで指定し、下の部分はbottom指定も変えている。

スクリーンショット 2015-12-17 9.37.36

最後にこれをマウスオーバー時にキャプションが現れる形にしてみる。ここではopacityを0、すなわち完全透過で非表示にし、:hoverでopacityを1にして、透過なしにする。その際若干の時間差をつけてやるといい。それはtransitionを使う。その部分のcssは以下。

これについてはデモをご覧ください。
なお、もっと上手なエフェクトについては
http://www.nxworld.net/tips/css-only-caption-effect.html
をご覧ください。とても参考になります。

 

画像のタイトル表示再び

前に画像のタイトルを画像の下に表示することについて書いた。
目的はimgタグの属性であるtitleに書いた内容をそのまま使いたいという点だった。
しかしこれをcssだけで行うのは無理なようだった。やはりjavascriptを使わなければならない。
それについてはいかに有力な情報があるので参考にしてほしい。
http://park5.wakwak.com/~tito/archives/2005/11/javascript.html

figureタグでキャプション表示

ここはimgタグのtitle属性を取得するのではなく、captionを別に書いておいて様々な形で表示する方法をやってみる。これにはhtml5から加わったfigureタグを使う。

html

css

こうすると以下のような表示となる。

スクリーンショット 2015-12-16 11.18.22そのままの記述でfigcaptionタグに指定した文字列が表示される。

となれば、今度はcssに手を加えて、このcaptionを画像に重ねるだとか、マウスオーバー時に現れるだとか、様々な場所に、様々な形で表すことができるのは当然ということになる。これについてはまた別稿で。

今やパッケージアプリはいらないね。

実は画像処理ソフトのことで相談を受けていた。これまで慣れ親しんでいたアプリがWin10にしたら使えないというのだ。新しい物を入れればいいとか、フリーの対応するアプリだってあるよ、といったアドバイスが浮かぶが、そんな必要はありません。そうwebアプリを使えばいいんです。しかもこんなにも進化しています。ほとんどPhotoShop並みな機能を持っていて登録も必要ないアプリがあるんです。色々と紹介するサイトもありますから、そこから自分に適したものを使ってみるといいですが、本格的な物を一つ紹介します。

PIXLR EDITORは使える

スクリーンショット 2015-12-15 10.25.03
http://pixlr.com/editor/ にアクセスしたところ。メニューも日本語対応、レイヤー操作もできるしほとんどPhotoShop並みです。ところが右側の巨大広告がいけません。Macを使っていますがブラウザはChomeです。(ちなみにFlashを使っている様でSafariでは使えない様です。)これは嫌ですね。広告を非表示にするボタンはありません。

スクリーンショット 2015-12-15 10.25.19そこでChomeの表示を拡大します。そうすると広告は消えますよ。これで次からはこの表示で使える様になります。
勿論ある程度は画像処理処理に慣れていないと使いこなせんませんが、これまで使っていたアプリが動かず、あらたにアプリを入れようかと思っている方は十分使えると思います。

なお、初心者向きのアプリもあるようですし、このアプリにも初心者向きもあるようです。

ほんと「今やパッケージアプリはいらないね。」

 

成島柳北「柳北奇文」を読む6

権兵衞ノ小言(明治9年8月27日)

いわゆる「秩禄処分」を問題にする。
明治になって幕藩体制は崩壊する。それにともなって藩から禄をもらっていた大量の士族たちの収入は実質的に無に帰す。しかし、一気にそうなるのは相当な社会的混乱を生じてしまう。そこで明治政府がそれを一時的に肩代わりしていた。だがそれもこの明治9年に至って、金禄公債を一時に支払うことによって廃止することとなった。
それを柳北一流の問答形式で喝破する。

権兵衞すなわち百姓と軍太衛門、兵太九郎という士族の問答だ。(ネーミングも面白い)

士族が言う。「百姓の種は鴉に食われたとしても、何粒かは残るだろう。しかし、自分たちの飯の種は遠からず政府に引き上げられて一粒もなくなってしまう」と。つまり「秩禄処分」について不満を言う。それに対し権兵衞が目を皿にして士族を睨んで言う。

「公等ハ元来国家ト人民トノ事ヲ少シモ思ハズ唯我ガ利ノミヲ是レ視ル所謂我利我利亡者ナルノミ往昔圧政ノ病毒天下ニ流行シタルニ因リ遂ニ幕府モ各藩モ其ノ毒ノ為ニ斃レタリ然ルニ其怨霊ガ今日迄残リ留マリ廃藩置県以来数年ノ間華士族ノ家禄ヲ我々ノ膏血ヨリ出スハ則チ公等ノ如キ我利我利亡者ノ為ニ七代祟ラレタルモ同様ナリ実ニ此ノ六七年ハ道理ニモ何モ当ラヌ物ヲ年々取ラレタルニ非ズヤ然ル故ニ今度政府ガ禄券ノ制ヲ立テラレシハ実ニ神通力アル修験者ガ怨霊ノ祟リヲ祓ヒ除ケント一般ニテ我々ハ天ニ仰ギ地ニ附シテ歓喜スル所ロナリ」と。

これまでも自分たちは我利我利亡者の士族に血税を絞り取られてきた。その後もその祟りで相変わらず政府に士族の為の金を搾り取られている。まさに祟りであると。しかし、今回の「秩禄処分」はその祟りを祓い除くためだから良しとすると言っている。
もちろんその額は相当な物となるから、これからだって血税をとられてしまう。しかしこれは「縁切り金」と思えば仕方がないとしている。

以下の権兵衞の言はふるっている。

「我々ハ未ダ十分満足セザレドモ政府が仁心深クシテ幽霊ガ安楽ニ成仏スル様ニト定メラレタル法度ノコトナレバ七代モ八代モ祟ル亡者ト遠カラズ縁切リニナルヲ楽ミニ有難ク畏ツテ罷リ居ルナリ」

これは決して政府の政策を手放しで賛同していないことを表しているが、柳北は明らかに士族の側にはいない。柳北は元幕臣であったが、隠居を機に平民になっている。賢明な選択であった。もはや士族の時代ではない。しかし平民百姓は相変わらず形を変えて負担を強いられていることも見逃してはいない。いわば政府に釘をさす言と言える。

末尾にこの権兵衞の小言に怒った士族が鬢端を打ち切ろうとするが、

「刀ヲ獲(さ)ガセド腰ニハ何ンニモ無カリケリ」という次第である。

:after:beforeは便利だけど

cssを書いていて、あまり使わなかった擬似クラスのafter,beforeは便利であることを今さら知らされたが、落し穴が。きっかけは画像のキャプションを画像の直後に表示すると言う要求から。

画像の下に説明をつける場合はかなりあると思う。実はこれまでそれぞれの画像と文字列をdivで囲んで、そのdivをdisplayプロパティでinline-blockを指定していたりした。
しかし、after擬似クラスを使えば簡単だろうと考えた。

そもそもbefore,after擬似クラスとは

ようするに要素の直前や直後に内容を挿入できるもの。挿入内容はcontentプロパティで指定してやればいい。
例えばh2タグがあって、それにはいつも★マークをつけたい場合

h2:before {content:”★”;}と書いてやればいい。

さて、画像の場合imgタグの属性でtitleを書くだろう。これをafter擬似クラスで書いてやれば画像の下にtitle属性で書いた文字列が現れるはずだと思った。

imgタグにbefore,after擬似クラスは効かない

その場合はこう書けばいいということになる。実はネット上の質問の答えとしてあったのだが。

しかし、これは効かないのだ。要するにimgタグにはこの擬似クラスが効かない。
理由はこの擬似クラスがタグの中に挿入するという働きでその機能を実現していて、したがって閉じタグのないimgタグのなかに書くわけにはいかないからだ。やってみればわかることだ。

時々生半可な答えがあるんで注意しましょう。

 

MacBookAirでの旧漢字入力

ここのところブログをMacBookで書いているんだけど、その内容が江戸末期から明治初期の文章についてなんで引用文の入力に苦労します。まずはその文章が所謂漢文崩しなんで送り仮名が基本的にカタカナです。さらには使われている漢字が現在の制限漢字と違ったものが多く使われている。そこでその方法をメモ。Mac使いの人には当たり前のことだろうけど。

カタカナ入力

これはMacを長く使っている人ならとっくに知っていることだろうが、control+kでカタカナ変換ができる。これは結構便利でした。キーボード操作でそのままできるので。特にcontrolキーの位置がいい。左手の小指で触れるので。

旧漢字入力

これについては以下。

先ずは日本語入力バーが右上部に表示されていることが前提。もしなければ、システム環境設定のキーボードの設定から出すようにする。

スクリーンショット 2015-12-11 8.33.27ここから下段の日本語環境設定を開くをクリック。

スクリーンショット 2015-12-11 8.35.10下段の「メニューバーとキーボードビューアと文字ビューアを表示」にチェック。

スクリーンショット 2015-12-11 8.35.54「文字ビューアを表示」をクリック

スクリーンショット 2015-12-11 8.36.12左メニューから「漢字」を選び、部首の画数から部首を選んで、旁の画数で目的の漢字を選択する。その漢字をダブルタップすれば、入力できる。
スクリーンショット 2015-12-11 8.37.04

 

成島柳北「柳北奇文」を読む5

二船問答(明治9年8月25日)

実に面白い文章。「芥舩ト屋舩ト二洲橋下ニ闘フ」という形で問答が展開する。
芥舩はゴミを運ぶ船、屋舩は遊びのための屋形船だが、芥舩が屋舩に「景気はどうだ」と聞く。屋舩はここのところ全く客がいないと嘆く。芥舩は「文明開化」の証拠だという。屋舩は「不景気」の証拠であり、「何が文明開化だ」と非難する。

「足下未ダ芥臭ヲ脱シ去ラザルヤ所謂文明開化ナルモノハ斯ノ様ナル卑陋世界ヲ謂フニ非ズ試ニ看ヨ英ト云ヒ仏ト云ヒ米ト云フ文明開化ノ本家本店タル諸都会ノ如キハ尽ク卑陋斯クノ如キ者ト思ヘル乎決シテ然ラザルナリト陸ニハ車馬有リテ水ニハ舟舫有リ日曜ハ論ナク平日モ晩食終レバ士女競ツテ遊ビ老幼争ツテ狂ス錦衣玉食嬌歌妙舞夏ハ涼ヲ清水嘉樹ノ間ニ追ヒ冬ニハ暖ヲ晶楼綺閣ノ中ニ領ス千金一擲萬銭一抛豪華互ニ誇ル何ゾ斯クノ如ク冷策憔悴(サミシキ)シタル僻邑荒村一般ノ都会ト同一ナル有ンヤ」と。

すなわち、「文明化開化の本家本元の欧米では日曜のみならず平日でも夜ともなれば老弱男女きそって遊んでいるではないか。これが文明開化じゃないのか。今の東京はまるでさびいしい鄙びた村と一緒だ。」と。

それに対して芥舩は「近事官吏ガ謹慎ナルガ」ゆえに屋形船が繁盛しないのだと言う。しかし、「とんでもない。官員が謹慎なのは当然で、全都の人民が遊べないのが問題なのだ。」と切り返す。

芥舩=薩長藩閥、屋舩=江戸町人という図式である。勿論柳北の意は屋舩にある。

柳北は旧幕時代、なによりも大川での船遊びが好きであった。ここに懐旧の情を読み取ってもいいのだが、例に江戸を引いていない。むしろ文明開化の本家である欧米を引いて、本来の文明開化はむしろ「町人が船遊びをできる世のことではないのか」と言っている。

さて、文末にこの二船の問答に糞舩が登場する。曰く

「兄等ハ何ヲ數無ク語(ホエ)ルンダ止メサツセイ己ラガ村方ア今年モドエライ豊作ダニ依テ嬶(カカ)アドノノ褌ヲ一貫三百デ新ラシク買ヒ村中揃テ豊年踊リヲブツ始メルコンダガ兄等モ来テ見ナサレ仲間喧嘩ナザアブチ止メテ」と。

ここで田舎者が登場し、二船を仲間としているところがおかしい。つまりは芥舟も屋形船も糞船からみれば仲間だということ。ここには田舎と都会という図式が現れる。田舎は結構いいよと言っている。田舎に来なよと。

だがしかし柳北は結句

「屋船ハ小声デ噫ヨクヨク銭ノ無イ国民ダナア」

と嘆く。

この図式はこの後の日本の近代の歩みを見てみればよくわかりますなあ。今だってそうなる可能性は十分にあるんじゃないかな。政府は田舎では農業(糞を運ぶ糞船)、都会では産業(ゴミを運ぶ芥船)に重きを置いて、町人の遊びが後回しになるってことがね。クワバラクワバラ。

成島柳北「柳北奇文」を読む4

狂症の説教(明治9年8月18日)

この表題が何を意味するのか詳らかにしないが、趣旨は以下の文にある。

「一郡ヲ治ムルモ一郷ヲ官スルモ同一ノ理ニテ其ノ事務ヲ総括スル先生ハ日夜勉励シテ世話ヲ焼クハ当然ノコトナレド餘リ細密ニ注意シ過ギルト往々ニ苛察ニ流レテ却テ保護ガ妨害ト化ケテ仕舞マス」

ようするに保護と言って手を出しすぎるとかえって成長を妨害することになる。人間も社会もそして植物もという訳だ。

この文の末尾に「津田先生ノ媒助法」というのが取り上げられている。これがいかなるものか、わからないので少し調べてみた。(グーグル先生に聞いた)

まず、津田先生というのは津田仙という人物。元幕府側にいた人物で戊辰戦争では幕府側に加わっている。また、福沢諭吉と渡米経験があり、帰国後農業の近代化に尽くした人物。
「農業三事」という著作があり、そのなかで「媒助法」を説いている。これはようするに「人口受粉」で、これによって農産物の生産性を高める方法。現代ではいわば当たり前の方法だが、当時は多くの反対にあったようだ。かなりの論争にもなったらしい。
また、津田は農園を作って多くの西洋野菜を栽培したことでもその名を止めている。また、キリスト教信者で青山学院の創始者でもあり、後に足尾鉱毒の反対運動にも加わっている。次女梅子は津田塾の創始者。内村鑑三もいわばその弟子筋に当たる。
(以上 小林富士雄氏「西洋農学の導入をめぐって」pdf版による)

それにしても旧幕府側の人間に優秀な人物が多かったとまた思わされる。

さて、この津田の「媒助法」論争に柳北はこう言っている。

「有益ナルコト権兵衞ニモ烏ニモ分カルコト」としながら、これが日常化すると「草デモ木デモ苦イ顔ヲシテ嗚呼ウルサイ蝿ダト小言ヲ云フニ相違無ク又何ノ益ニモ立チマスマイ」と。

津田の考えは近代が産んだものだが、とすると柳北は反近代という事になるのか。いやそうではあるまい。この文の趣旨は冒頭で言っている事にある。

世話をしすぎると人間も社会も植物もいわば「息苦しく」なるんだ。今の日本の状況を見てもそれは大いに言えると思う。親も教師も社会も手を出しすぎた結果(ああだこうだとほんと五月蝿(ウルサ)い)、ロクな大人が育っていないのもそう思える。

この文も柳北の

「水清ケレバ魚育タズ」

という人間観に基づいている。

成島柳北「柳北奇文」を読む3

東隅ノ土百姓ヲ戒ム(明治9年8月12日)

こうした逆説的な文章を書かせたら天下一品ですね。
旧幕時代の御用道中に比するに「官員様ノ派出巡行」を問題にする。
旧幕時代はもうタダでやりたい放題、今の官員様は金を払っているのだから失礼のなきようにというわけだ。しかも多額の金を使っているんだから。

曰く
「試ニ退イテ算セヨ大臣参議一人一日ノ旅費ハ汝等ガ幾日ノ且活計ヲ立ツルニ足ルカ斯ル天淵月鼈(月とすっぽん・ゲツベツ)ノ相違アル貴キ官員様ヲ粗略ニ心得テハ仮令開明ノ世界別ニ御叱リテハ之ナキモ決シテ汝等の礼節ヲ尽セル者トハ謂フ可ラザルナリ」と。
ようするに官員等が巡行と称して莫大な金を使って旅行をしていることへの批判なんだが、それを百姓に向かって
「官員様の一日の旅費は君たちの生活費の何日分にもあたるように、官員様は君たちとは月とすっぽんの違いがあるんだから決して失礼があってはいけないよ。」と言っているのだ。

何時だったか、ある政治家が日本は世界平和に人を出さないで、金だけ出しているのはいかんといった発言をしたことがある。PKOの話だったと思う。それに対して今は亡くなった女性の料理研究家がいいことを言っていた。「その金は誰のものと思っていて発言しているんだ。庶民が働いて収めた税金だ。金を出すということは庶民の生活を提供していると同じなんだ。」と言った趣旨だったと思う。
この話も同じだろう。官員様の旅費は実は百姓が払っているんだけどね。
これを読むと本当に新時代とはわかりにくい時代ということになる。結局は金を搾り取られていることに変わりはありゃしねえんだ。なんか近代というのはようするに同じことをわかりにくにしただけかなって気がしてきます。
それを柳北は面白く書いている。流石です。

成島柳北「柳北奇文」を読む2

華謡新聞題言(明治9年8月2日)

「華謡新聞」は明治9年8月1日に風香月影社と言う所から発行された。(早稲田大学図書館のDBによればその4号が現存している。宮本千万樹 編輯とある。)
「今ヤ我社友中扼腕切歯シテ慷慨悲歌シタル諸子ガ。往日ノ失策ヲ懺悔シ。幡然(ヒラリ)ト旧套ヲ脱シテ。はな謡新聞ノ一社ヲ開ク。豈之ヲ奇〃妙〃ト称賛セザルヲ得ンヤ。」
とあるようにこの新聞は「朝野新聞」によって発行されたもので、その内容はまさに政治とは無縁に見える「はな謡」を採録したもののようだ。

やはりこの文にも柳北の真骨頂が伺える。
古詩を引いて「花ニ声無シ」というものの、古歌を引いて「曙に花の雫の音をきく」とし、ましてや花街の花たるものの声(これを「はな謡」という)を聴けば、「誰カ垂涎三尺ナラザルヲ得ンヤ」ということになるはずだとする。

しかしそれに対し「仮道学先生(ニセガクシャ)」は「頑〃タル鑼声(ドラゴエ)ヲ発シ余ガ此ノ説ヲ破毀シテ」言う。鄭の国の音楽をあげそれを「淫」とし、麗人は「危」いとし、「淫褻俗ヲ乱ルハ固ヨリ君子ノ悪ム所ロナラズヤ」とする。

(いつの時代もいますね、こう言う輩。道徳を説く人です。ほんと「銅鑼声」がうるさいのだ。)
もちろん柳北はこんなことは言いません。まず自分もこうした道徳説教を家業としていたとして、(何たって柳北は幕末期の奥儒者です。「ゑへん」と言ったりしていて、これがまたいい。)

「宣尼(コウシ)ハ何故ニ詩経(別字だが)ヲ剛正スルニ当テ。しんい桑中ノ如キはな謡を尽クかわノ流レニ擲棄シ去ラザリシヤ。蓋シ之ヲ存スルハ亦為メニスル所ロ有レバナリ。」とし、

孔子だって、鄭の国の音楽をすべて捨ててはいないし、それはそこに意義を認めているからなんだという。
しかし、「はな謡」を採録するのは難しい。いっそ「寝言」を集めてみたらと提案する。
「若シ寝タ時ニ寝言ヲ採リ。覚ムル時ニはなうたヲ録セバ。」これは無尽蔵で本社の繁盛間違いなしだと言っている。

ふざけているようにように聞こえて、決してそんなことはない。「扼腕切歯」して「慷慨悲歌」するより「はな謡」や「寝言」にこそ人間の真実があるんだ。もっと言えばこっちにこそ「痛み」があるんだと聞こえる。

やはり柳北はいい。