日本語「ぢ」と「じ」の謎

「日本語 ぢとじの謎」

『日本語 ぢとじの謎』土屋秀宇
光文社知恵の森文庫

NHK Eテレの番組『にほんごであそぼ』で「恋そめし」という歌が時々放映されます。
一番と三番のコーラス終わりあたりに

今をとめ 元をとめ 元々をとめ
という歌詞があります。これを

今を止め・・・「時間よ止まれ」よりは文語的だなぁ
  元を止め・・・過去も止めたいのかよ!
   元々を止め・・・輪廻転生かな

と聴いてました、
歌ってるのが「ちーむ・をとめ座」ということを知るまで、結構しばらくの間、をとめ=乙女ってことに気がつかんかったですね。
歌詞を見ずに聴くか、多少とも旧かなに通じてれば、そんな勘違いもないだろっていう恥ずかしい話ですが、ここは「明治までの人は普通に“をとめ”は乙女、国策で仮名遣いを変えてしまった文科省─いや旧文部省─に責任転嫁」しておきませう(^^;

で、表題の本です。

  • 「鼻血」は「はなぢ」なのに、どうして「地面」は「じめん」なのか?
  • 「差し詰め」は「さしずめ」、「大詰め」は「おおづめ」
  • 「世界中」は「せかいじゅう」が本則、但し「せかいぢゅう」も可
  • 火によってとけるから「熔岩」なのになぜ「溶岩」と書くのか?
  • 気持ちがたかぶる(昂る)から「昂奮」〜略〜「昂奮」で代用
なぜこんなにも不可思議な表記になってしまったのか。当用漢字から常用漢字がもたらす弊害。さらには学年別配当漢字や人名漢字の迷走。
これら現代の日本語の矛盾や混乱を漢字廃止・制限派と漢字擁護派とのせめぎ合いの歴史から読み解いていく。
そして「第10章 国語再生の鍵を求めて」「エピローグ 国語が変われば、日本は変わる」では、あるべき日本語教育の提言と日本語が本来持つ優れた表現力、可能性が提起される。
・・・続く

文字の読み書きが出来るだけで大したもんだった時代──世界的にみれば今でもそうだが──おまけに欧米列強に追いつくことが至上命題だった時代、国民があまねく日本語を習得して世界に羽ばたく人材を育てるには日本語をどう改革したもんか、明治以降それは真剣に議論されてきたのでしょう。(公用語を英語やフランス語にすべしといった主張もあったみたいだからベクトルがどこに向いていたのかは怪しいものだが)

そんなお国の努力に関係なく、パソコンやスマフォで難漢字の変換は楽ちんになったものの「この変換辞書アホかいな」と同音異義語を間違え、ペンと紙しかない状況だと「漢字は読めても書けんよなぁ〜」と嘆く日々です。
とはいえ漢字制限政策の反動か、旧漢字(正字というべきか)での記載を求められることはよくあります。
じゃなく」とか「辺は旧字が何十字もあるけどしんにょうの点が二つで作りの下が方じゃなく合みたいなやつ」とか。他にもワープロ普及期に字画の多い字はプリントできないからと作られた略字(「森鷗外さんは鴎外で我慢してね」みたいな字)や中国の簡体字も含めると同じ字のはずなのに形が異なる異体字がわんさかあって、文字に関わる仕事をしている人は結構苦労してるわけです。

さて、この本のタイトル「ぢ」と「じ」で一番に連想したのは「痔」と「字」でした。たまたま友人から痔の闘病話を聞いた直後だったからですが・・・
わ行の「ゐ(wi)」「ゑ(we)」「を(wo)」は「い」「え」「お」と元々は発音が違ってただろうと想像できますが、「ぢ」と「じ」も古来は音が違っていて、今でも地方によっては音を使い分けているとか。どんな発音かわかりませんが、それなら「地震(ぢしん)※」と「自信」も英語の "Vest" と "Best" くらいの違いでしゃべり分けと聞き分けができそうです。
(※お布令では「じしん」)

「痛い痔」じゃなくて「異体字」ってのは印刷業界では割と知られた同音異義語です。どんな状況だったら聞き間違えるかなかなか想像できんけど、「字画」「切れ字」なんかは普段から結構使ってますからねぇ。誤解を生まないように正しい発音を磨くべきでしょう(かな?)
といふことで「脱稿」します(^^;)

文字の読み書きが出来るだけで大したもんだった時代──世界的にみれば今でもそうだが──おまけに欧米列強に追いつくことが至上命題だった時代、国民があまねく日本語を習得して世界に羽ばたく人材を育てるには日本語をどう改革したもんか、明治以降それは真剣に議論されてきたのでしょう。(公用語を英語やフランス語にすべしといった主張もあったみたいだからベクトルがどこに向いていたのかは怪しいものだが)

そんなお国の努力に関係なく、パソコンやスマフォで難漢字の変換は楽ちんになったものの「この変換辞書アホかいな」と同音異義語を間違え、ペンと紙しかない状況だと「漢字は読めても書けんよなぁ〜」と嘆く日々です。
とはいえ漢字制限政策の反動か、旧漢字(正字というべきか)での記載を求められることはよくあります。
じゃなく」とか「辺は旧字が何十字もあるけどしんにょうの点が二つで作りの下が方じゃなく合みたいなやつ」とか。他にもワープロ普及期に字画の多い字はプリントできないからと作られた略字(「森鷗外さんは鴎外で我慢してね」みたいな字)や中国の簡体字も含めると同じ字のはずなのに形が異なる異体字がわんさかあって、文字に関わる仕事をしている人は結構苦労してるわけです。

さて、この本のタイトル「ぢ」と「じ」で一番に連想したのは「痔」と「字」でした。たまたま友人から痔の闘病話を聞いた直後だったからですが・・・
わ行の「ゐ(wi)」「ゑ(we)」「を(wo)」は「い」「え」「お」と元々は発音が違ってただろうと想像できますが、「ぢ」と「じ」も古来は音が違っていて、今でも地方によっては音を使い分けているとか。どんな発音かわかりませんが、それなら「地震(ぢしん)※」と「自信」も英語の "Vest" と "Best" くらいの違いでしゃべり分けと聞き分けができそうです。
(※お布令では「じしん」)

「痛い痔」じゃなくて「異体字」ってのは印刷業界では割と知られた同音異義語です。どんな状況だったら聞き間違えるかなかなか想像できんけど、「字画」「切れ字」なんかは普段から結構使ってますからねぇ。誤解を生まないように正しい発音を磨くべきでしょう(かな?)
といふことで「脱稿」します(^^;)

追記を閉じる

2015.09.08 | Comments(0)

サクラの音がきこえる

「サクラの音がきこえる」

『サクラの音がきこえる』浅葉なつ
メディアワークス文庫

『神様の御用人』が面白かったのでブリで読んだ本

指導教師から「あなたのピアノは確かに上手よ。でも、魂が見えない。心がこもっていない音なの。」と指摘され、雨宮奏恵は、音楽で感動したことがないことに気づく。
卓越した絶対音感の持ち主である彼女は、どんな音楽も(日常の音も)音符として認識され「感じる」ことができない。
・・・続く

『ピアノの森』の雨宮修平を彷彿させます、同じ雨宮姓なのは作者の洒落でしょうか。
雨宮奏恵も雨宮修平もやがて孵化するように「音が化ける」ときを迎えますが、その道のりはただならぬものです。

絶対音感なんて持ってないのでどんな音の世界かわかりませんが、例えばアマチュアバンドで練習曲を決めたとします。人によりけりでしょうけど、その曲はどうしても分析的に聴いてしまい素直には楽しめなかった覚えがあります。
その昔は楽譜も映像付き音源もないのが当たり前だったので、耳コピーに頼るしかなく、悶絶状態が続いてました。今なら音源→音符コンバータみたいなアプリもあったりしないかしら。
それでもメンバーの中には楽器が手元になくても、曲を聴くだけである程度の譜面を書ける人もいてすごいなぁと思ったもんです。

印刷の勉強を始めた頃、講師の先生から「君たちには気の毒な事だが、今後一生、印刷物を見ても素直に楽しめなくなる」と言われました。
本を読んだり、パンフやWebページを見るたびに「うーみゅ、このフォントは何だろ?この紙は?この写真のライティングはどうやってんの?スタイルシートは?」な〜んて悩んでいるわけじゃないので、精進が足りないのでしょう。

『ピアノの森』の雨宮修平を彷彿させます、同じ雨宮姓なのは作者の洒落でしょうか。
雨宮奏恵も雨宮修平もやがて孵化するように「音が化ける」ときを迎えますが、その道のりはただならぬものです。

絶対音感なんて持ってないのでどんな音の世界かわかりませんが、例えばアマチュアバンドで練習曲を決めたとします。人によりけりでしょうけど、その曲はどうしても分析的に聴いてしまい素直には楽しめなかった覚えがあります。
その昔は楽譜も映像付き音源もないのが当たり前だったので、耳コピーに頼るしかなく、悶絶状態が続いてました。今なら音源→音符コンバータみたいなアプリもあったりしないかしら。
それでもメンバーの中には楽器が手元になくても、曲を聴くだけである程度の譜面を書ける人もいてすごいなぁと思ったもんです。

印刷の勉強を始めた頃、講師の先生から「君たちには気の毒な事だが、今後一生、印刷物を見ても素直に楽しめなくなる」と言われました。
本を読んだり、パンフやWebページを見るたびに「うーみゅ、このフォントは何だろ?この紙は?この写真のライティングはどうやってんの?スタイルシートは?」な〜んて悩んでいるわけじゃないので、精進が足りないのでしょう。

追記を閉じる

2015.09.02 | Comments(0)

この胸いっぱいの愛を

「この胸いっぱいの愛を」

『この胸いっぱいの愛を』梶尾真治
小学館文庫

「胸いっぱいの愛」は当然 Whole Lotta Love (Led Zeppelin 2nd)のことだろとタイトルだけで衝動買いした本。
もちろんツェペリンや "You need cooling" で始まる懐かしの名曲の話ではなく、20年前の門司、飛行機事故のさなか過去に戻ってしまった登場人物が20年後に引き戻されようとするたびにどこからともなく響く曲として描かれる。

・・・続く
墜落事故に巻き込まれた乗客のうち、20年前(1986年)に強い執着を残していた6人だけが、過去にとばされる。それぞれの過去に決着をつけることができた段階で再び20年後に引き戻されてしまう。 時間は可変であることが前提となっていて、歴史を変えることを妨げる力がはたらいたり、タイムトラベラーパトロールのような存在も出現しない。 そして1986年の彼らが20年経ったとき、再び墜落事故の犠牲者としてアナウンスされる3人と、大きく人生が変わってしまった3人に大別されている。

歴史を変えた側の6人がどこに行ってしまったのかという疑問は残るのですが・・・

それはさておき、1986でなく今から20年前の1995年。 Windows95のお祭り騒ぎも今は昔、Macは漢字Talk7.5。個人的には PowerPC第一世代のMac7100とか8100av(何故かG1Macとは呼ばれんねぇ)で仕事をしていて、アドビの Illustrator とアルダスからマクロメディアに変わったFreeHand とどっちがいいかな?と試していた頃。

というのはどうでもよくて、やはり1月17日の阪神・淡路大震災。災害時のIT活用が注目され、実際さまざまなネットの活用が試みられ日本のインターネット元年と呼ばれるようになったそうです。 うら覚えながら、当時はまだパソコン通信で遊んでいた記憶しかないにしても、翌96年には、ホームページビルダーやアドビ PageMill 日本語販が発売されていますから、ちらほらホームページ作りも広がっていった頃だったのでしょう。

その頃(に限らず過去)こうしおけばよかったなんてのは当然多々あるわけです。
学生時代、先生から「今のうちに勉強しとかんと絶対後悔するぞ」と言われて「後悔も人生の糧だからかまわない」な〜んて応えてた学友がいました。そこまで開き直る気がおきないのは、まぁ恵まれたということにしませう。

しいて後悔するならば、温故知新したくても記憶が霞んでしまってるので、デジタル化以降「記憶にありません、記録にあります」状態にしておけばよかったぁ!でしょうか。それよりも過去の時点で10年後、20年後の社会や自分が全く読めてなかったこと思い知らされる昨今。

墜落事故に巻き込まれた乗客のうち、20年前(1986年)に強い執着を残していた6人だけが、過去にとばされる。それぞれの過去に決着をつけることができた段階で再び20年後に引き戻されてしまう。 時間は可変であることが前提となっていて、歴史を変えることを妨げる力がはたらいたり、タイムトラベラーパトロールのような存在も出現しない。 そして1986年の彼らが20年経ったとき、再び墜落事故の犠牲者としてアナウンスされる3人と、大きく人生が変わってしまった3人に大別されている。

歴史を変えた側の6人がどこに行ってしまったのかという疑問は残るのですが・・・

それはさておき、1986でなく今から20年前の1995年。 Windows95のお祭り騒ぎも今は昔、Macは漢字Talk7.5。個人的には PowerPC第一世代のMac7100とか8100av(何故かG1Macとは呼ばれんねぇ)で仕事をしていて、アドビの Illustrator とアルダスからマクロメディアに変わったFreeHand とどっちがいいかな?と試していた頃。

というのはどうでもよくて、やはり1月17日の阪神・淡路大震災。災害時のIT活用が注目され、実際さまざまなネットの活用が試みられ日本のインターネット元年と呼ばれるようになったそうです。 うら覚えながら、当時はまだパソコン通信で遊んでいた記憶しかないにしても、翌96年には、ホームページビルダーやアドビ PageMill 日本語販が発売されていますから、ちらほらホームページ作りも広がっていった頃だったのでしょう。

その頃(に限らず過去)こうしおけばよかったなんてのは当然多々あるわけです。
学生時代、先生から「今のうちに勉強しとかんと絶対後悔するぞ」と言われて「後悔も人生の糧だからかまわない」な〜んて応えてた学友がいました。そこまで開き直る気がおきないのは、まぁ恵まれたということにしませう。

しいて後悔するならば、温故知新したくても記憶が霞んでしまってるので、デジタル化以降「記憶にありません、記録にあります」状態にしておけばよかったぁ!でしょうか。それよりも過去の時点で10年後、20年後の社会や自分が全く読めてなかったこと思い知らされる昨今。

追記を閉じる

2015.08.24 | Comments(0)

iMac_2007Mid メモリ増設

2007Midというのだから7年前に購入したiMac20inch

iMac2007Mid

OSは当時多分 Mac OS X_10.4 Tiger
すぐ無償バージョンアップで  Leopard(10.5)にして、以来

  • Snow Leopard (10.6)
  • Lion (10.7)
  • Mountain Lion (10.8)
  • Marvericks(10.9)
  • Yosemite (10.10)

と7世代のOSで動き続けたというのが驚き(それ以前にハードディスクがよくもってるなぁ)です。

・・・続く

メモリーは当初1GB---それでもついにメモリもMBからギガの世界になったんだと喜んだものですが---に2GB足して3GB。
さすがに最近は、MAMP のサーバとテキスト編集、メールと iTunes くらいしか使っていなかったものを、最後に FileMakerPro のインスタントWeb公開も試してみたくなり、6GBに増設してみました。(2GB+4GB)
秋葉館.com で在庫限りとなってますから、最後の機会だったのかもしれません。

メールでのテキスト入力やブラウザでの検索ですらモタつきがちだったのがかなり解消された気がします。
FileMaker がちゃんと動いてくれることを期待しましょう。

もう一つ課題は、ファイルメーカーとエクセルはセットみたいなものなので、Office 365 SoloOffice 365 BuisinessからMac販Excelもインストールする予定。

これで苦しければ、あとは起動HDDを SSDにでも換えるしかないかな。


メモリーは当初1GB---それでもついにメモリもMBからギガの世界になったんだと喜んだものですが---に2GB足して3GB。
さすがに最近は、MAMP のサーバとテキスト編集、メールと iTunes くらいしか使っていなかったものを、最後に FileMakerPro のインスタントWeb公開も試してみたくなり、6GBに増設してみました。(2GB+4GB)
秋葉館.com で在庫限りとなってますから、最後の機会だったのかもしれません。

メールでのテキスト入力やブラウザでの検索ですらモタつきがちだったのがかなり解消された気がします。
FileMaker がちゃんと動いてくれることを期待しましょう。

もう一つ課題は、ファイルメーカーとエクセルはセットみたいなものなので、Office 365 SoloOffice 365 BuisinessからMac販Excelもインストールする予定。

これで苦しければ、あとは起動HDDを SSDにでも換えるしかないかな。

追記を閉じる

2014.11.17 | Comments(0)

Photosページ04 ・・・tumblr

tumblr テーマ Reblographix 2

写真のページ(tumblr)にReblographix 2 テーマを使ってみました。
グラフィッックデザイナー 佐野章核さん作です。
他にも日記用、ポートフォリオ用とさまざまなテーマを作られてます。
tumblr も国産のテーマが増えてありがたいことです。

ついでにメニュー名を「Photos」から「Scene」に変更しました。

・・・続く

ヘッダーとナビ部分だけ付け加えて、テンプレートは、ほぼそのまま。
最初から "TinyBox"というスクリプトが組み込まれているので、lightbox 風に記事がポップアップ表示されます。
前のテーマで使っていた Colorbox も平行して読み込んでみました。何か不具合あるかと思いましたが、今のところ Tinybox で表示された記事の枠内で画像をもう少し拡大表示してくれています。

Reblographix2 ポップアップ表示

Reblographix 2 でポップアップ表示

Cargo グリッド表示100px

Colorboxでもうちょい拡大

ヘッダーとナビ部分だけ付け加えて、テンプレートは、ほぼそのまま。
最初から "TinyBox"というスクリプトが組み込まれているので、lightbox 風に記事がポップアップ表示されます。
前のテーマで使っていた Colorbox も平行して読み込んでみました。何か不具合あるかと思いましたが、今のところ Tinybox で表示された記事の枠内で画像をもう少し拡大表示してくれています。

Reblographix2 ポップアップ表示

Reblographix 2 でポップアップ表示

Cargo グリッド表示100px

Colorboxでもうちょい拡大

追記を閉じる

2013.10.11 | Comments(0)

地獄小僧

佐平次捕物帳「地獄小僧」

三人佐平次捕物帳 第1巻『地獄小僧』小杉健治
角川書店ハルキ文庫連載中

何年か前、3人で勉強会をやっていました。 情報交換を通じて、仕事の幅を広げたいあわよくばビジネス化できればってことですね、 イベントプランナ、広告代理業、デザイン関係者と業界的に近しいといえば近いが、目的も方向性もバラバラなので、基本路線をどうしようかってことでおすすめした本です。

・・・続く

登場人物

  • 末弟 佐助
    • 女装して美人局の女役をしていた。 二人の兄とは血のつながりはないが、自称泣き虫、弱虫で気が弱く、兄たちがいないと何もできないと思っている。
  • 長兄 平助
    • 頭脳明晰、何をさせてもひとかどの成功を収めるだろうという才覚の持ち主。 顔がいかつく、強面。
  • 次兄 次助
    • 元相撲取りの力持ちだが、考える事は苦手。 乱暴そうだが、根はやさしい。
幼くして母を亡くした平助、次助の家に新しい母が佐助を連れ子に嫁いできた。 ほどなく、父親も死に、佐助の母は、女手一人で三人の子供を育てる。 やがてその母も亡くなるが、実の子でないのにわけへだてなく育ててくれた母に大恩を感じる平助、次助は弱虫の佐助を守って三人で力を合わせて生きていく事を誓う。

佐平次親分誕生までのあらすじ

長兄平助が美人局を立案。金持ちの男に目を付け、女装した佐助がその美貌で男を虜にする。 事におよぼうとする時に、平助、次助が現れ、男を脅し金を巻き上げるという手口。 荒稼ぎを重ねていくが、ついに同心 伊原伊十郎に捕まる。 かねてより、岡っ引きの素行の悪さ──乱暴、弱みにつけこんでのゆすり・たかり──に江戸の町では、岡っ引きへの評判はすこぶる悪く、このままでは岡っ引き禁止令が出されるかもしれないと危惧していた伊原同心は、三兄弟の犯行に目をつむるかわり岡っ引きになるよう取引する。 佐助に親分として佐平次を名乗らせ、推理や捜査方針はほとんど平助に頼り、荒事は次助に助けてもらう。佐平次(佐助)1人では本当は何もできないのだが、世間向きには佐平次親分の采配のもと平助、次助が子分として支える姿を演じる。さらに、伊原同心からは、理想の岡っ引きとして一切の金品の受取を禁止される。 その結果、役者顔負けの美男子ながら、知恵も腕も立ち、お礼の金品も一切受け取ろうしない稀にみる理想の岡っ引きとして、難事件を次々と解決してゆく佐平次親分の評価は高まる一方であるが、それをよく思わない連中も現れ、物語は進行していく。

勉強会へのまとめ

1+1+1=3ではなく、5にも6にもなるとはよく言われること。とはいえ足元を見れば、まずは三人で一人前くらいのアプローチが現実的と思われます。しかしながら、それが並の一人前ではない実績をめざしたい。そういった好例として一読をおすすめします。

結局だれも『佐平次捕物帳』読んでくれなかったので、勉強会はあっさり解体してしまいました。
まったくこじつけではありますが(^^;・・・

登場人物

  • 末弟 佐助
    • 女装して美人局の女役をしていた。 二人の兄とは血のつながりはないが、自称泣き虫、弱虫で気が弱く、兄たちがいないと何もできないと思っている。
  • 長兄 平助
    • 頭脳明晰、何をさせてもひとかどの成功を収めるだろうという才覚の持ち主。 顔がいかつく、強面。
  • 次兄 次助
    • 元相撲取りの力持ちだが、考える事は苦手。 乱暴そうだが、根はやさしい。
幼くして母を亡くした平助、次助の家に新しい母が佐助を連れ子に嫁いできた。 ほどなく、父親も死に、佐助の母は、女手一人で三人の子供を育てる。 やがてその母も亡くなるが、実の子でないのにわけへだてなく育ててくれた母に大恩を感じる平助、次助は弱虫の佐助を守って三人で力を合わせて生きていく事を誓う。

佐平次親分誕生までのあらすじ

長兄平助が美人局を立案。金持ちの男に目を付け、女装した佐助がその美貌で男を虜にする。 事におよぼうとする時に、平助、次助が現れ、男を脅し金を巻き上げるという手口。 荒稼ぎを重ねていくが、ついに同心 伊原伊十郎に捕まる。 かねてより、岡っ引きの素行の悪さ──乱暴、弱みにつけこんでのゆすり・たかり──に江戸の町では、岡っ引きへの評判はすこぶる悪く、このままでは岡っ引き禁止令が出されるかもしれないと危惧していた伊原同心は、三兄弟の犯行に目をつむるかわり岡っ引きになるよう取引する。 佐助に親分として佐平次を名乗らせ、推理や捜査方針はほとんど平助に頼り、荒事は次助に助けてもらう。佐平次(佐助)1人では本当は何もできないのだが、世間向きには佐平次親分の采配のもと平助、次助が子分として支える姿を演じる。さらに、伊原同心からは、理想の岡っ引きとして一切の金品の受取を禁止される。 その結果、役者顔負けの美男子ながら、知恵も腕も立ち、お礼の金品も一切受け取ろうしない稀にみる理想の岡っ引きとして、難事件を次々と解決してゆく佐平次親分の評価は高まる一方であるが、それをよく思わない連中も現れ、物語は進行していく。

勉強会へのまとめ

1+1+1=3ではなく、5にも6にもなるとはよく言われること。とはいえ足元を見れば、まずは三人で一人前くらいのアプローチが現実的と思われます。しかしながら、それが並の一人前ではない実績をめざしたい。そういった好例として一読をおすすめします。

結局だれも『佐平次捕物帳』読んでくれなかったので、勉強会はあっさり解体してしまいました。
まったくこじつけではありますが(^^;・・・

追記を閉じる

2013.09.29 | Comments(0)

Photosページ03 ・・・tumblr

─ColorBox─

LightBox化(といってもColorBox)

グリッド表示で拡大した画像もライン表示の画像も 500ピクセル幅のものが表示されますが、これをクリックするとさらに大きい画像が別ページに表示されます。

これもページ移動なく表示させたいので jquery のプラグイン ColorBoxを設置してみました。

jQuery や ColorBox 、LightBox が解説されているサイトはたくさんあるのですが、Tumblr への設置ということで以下のページを参考にさせていただきました。

mogewo's blogさん
Tumblrで jQuery lightBox

full of universeさん
画像を Lightbox 表示!(しかも何も導入せずに)

ColorBox ポップアップ状態
グリッド表示

グリッド表示

Cargo ColoBox表示

ColoBox表示

リスト表示レイアウトでも同様です。
リスト表示

リスト表示

Cargo ColoBox表示

ColoBox表示

・・・続く

テンプレートHTMLの修正

<head>
 ---略---
<link rel="stylesheet" type="text/css"  href="xxxxx/css/colorbox.css" />
<script type="text/javascript" src="xxxxx/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="xxxxx/js/jquery.colorbox-min.js"></script>

<script>
$(document).ready(function(){
//クラス名"cb-img"が付けられた a 要素の画像クリックでポップアップ表示
	$("a.cb-img").colorbox({
//その他オプションは好みで
		transition:"fade",
		speed:400,
		opacity:0.9,
		maxWidth:"80%",
		maxHeight:"90%"
	});
});
</script>
</head>
<!-- クリックでポップアップ拡大させる画像 -->
<!-- Cargo Theme 95行目あたり -->
<div class="photo">
	{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" class="the_photo" />{LinkCloseTag}
		<!--上記の記述を ↓ 下のように変更-->
	<a class="cb-img"  href="{PhotoURL-HighRes}"
		{block:Tags} rel="{Tag}" {/block:Tags} <!-- 記事のタグでグループ化 -->
		title="Tag:&nbsp;{block:Tags} {Tag} {/block:Tags}"> 
		<img src="{PhotoURL-500}" alt="{PhotoAlt}" class="the_photo" />
	</a>
---略---
</div>

/*colorbox.css*/
/* #cboxOverlay{background:#ffffff;} オーバーレイ背景色:白をグレーに変更*/
#cboxOverlay{background:#aaa;} 

参考→Tumblr カスタムテーマの作り方(日本語訳)【写真の投稿】

  • {PhotoURL-500}・・・記事の写真のURL、最大幅:500px
  • {PhotoURL-HighRes}・・・高解像度写真のURL、最大幅:1280px
  • {Tag}・・・記事につけられたタグ、ブログのカテゴリーに近いが Twitter のハッシュタグのように Tumblr 全体でのキーワードになる。
  • rel="book(例)”・・・ColorBox の中で rel="book" が付けられた画像がグループ化される
  • title="”・・・拡大時表示されるタイトル、写真記事にはタイトルがないので上記タグを表示

記事の写真クリックでポップアップ拡大させて、同じグループ(rel="xxx" が同じ物)をポップアップのまま続けて表示できるようにしたかったわけです。

リスト表示レイアウトの時は、指定の大きさで拡大してくれますが、グリッドレイアウトの時は、元の画像サイズ(最大幅1280px)になってしまいます。
これは、サムネール(100px)+ 記事写真(500px)のセットになっているためか、今のところ原因がわかりませんが、そのままもう一度クリックすると指定サイズに戻るのでこのまま使ってます。

<rel="{Tag}">日本語のタグが有効かどうか、複数のタグの場合はどうなるのかは疑問でした。書き出されたソースは
rel="本” rel="音” rel="旅” などと列記されます。
ただし、ColorBox で有効なのは先頭のrelだけのようなので、タグ付けの順番に気をつける必要がありそうです。

サイズが大きい画像
グリッド表示でサイズが大きい画像をクリックすると幅1280pxで表示されてしまう

グリッド表示でサイズが大きい画像をクリックすると幅1280pxで表示されてしまう

もう一度クリックで指定(横:80%)に戻る

もう一度クリックで指定(横:80%)に戻る

relによるグループ化
共通のグループ画像(この場合 rel=

共通のグループ画像(この場合 rel="mac")があるので上に矢印が表示される

グループ内の次画像を表示

グループ内の次画像を表示

テンプレートHTMLの修正

<head>
 ---略---
<link rel="stylesheet" type="text/css"  href="xxxxx/css/colorbox.css" />
<script type="text/javascript" src="xxxxx/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="xxxxx/js/jquery.colorbox-min.js"></script>

<script>
$(document).ready(function(){
//クラス名"cb-img"が付けられた a 要素の画像クリックでポップアップ表示
	$("a.cb-img").colorbox({
//その他オプションは好みで
		transition:"fade",
		speed:400,
		opacity:0.9,
		maxWidth:"80%",
		maxHeight:"90%"
	});
});
</script>
</head>
<!-- クリックでポップアップ拡大させる画像 -->
<!-- Cargo Theme 95行目あたり -->
<div class="photo">
	{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" class="the_photo" />{LinkCloseTag}
		<!--上記の記述を ↓ 下のように変更-->
	<a class="cb-img"  href="{PhotoURL-HighRes}"
		{block:Tags} rel="{Tag}" {/block:Tags} <!-- 記事のタグでグループ化 -->
		title="Tag:&nbsp;{block:Tags} {Tag} {/block:Tags}"> 
		<img src="{PhotoURL-500}" alt="{PhotoAlt}" class="the_photo" />
	</a>
---略---
</div>

/*colorbox.css*/
/* #cboxOverlay{background:#ffffff;} オーバーレイ背景色:白をグレーに変更*/
#cboxOverlay{background:#aaa;} 

参考→Tumblr カスタムテーマの作り方(日本語訳)【写真の投稿】

  • {PhotoURL-500}・・・記事の写真のURL、最大幅:500px
  • {PhotoURL-HighRes}・・・高解像度写真のURL、最大幅:1280px
  • {Tag}・・・記事につけられたタグ、ブログのカテゴリーに近いが Twitter のハッシュタグのように Tumblr 全体でのキーワードになる。
  • rel="book(例)”・・・ColorBox の中で rel="book" が付けられた画像がグループ化される
  • title="”・・・拡大時表示されるタイトル、写真記事にはタイトルがないので上記タグを表示

記事の写真クリックでポップアップ拡大させて、同じグループ(rel="xxx" が同じ物)をポップアップのまま続けて表示できるようにしたかったわけです。

リスト表示レイアウトの時は、指定の大きさで拡大してくれますが、グリッドレイアウトの時は、元の画像サイズ(最大幅1280px)になってしまいます。
これは、サムネール(100px)+ 記事写真(500px)のセットになっているためか、今のところ原因がわかりませんが、そのままもう一度クリックすると指定サイズに戻るのでこのまま使ってます。

<rel="{Tag}">日本語のタグが有効かどうか、複数のタグの場合はどうなるのかは疑問でした。書き出されたソースは
rel="本” rel="音” rel="旅” などと列記されます。
ただし、ColorBox で有効なのは先頭のrelだけのようなので、タグ付けの順番に気をつける必要がありそうです。

サイズが大きい画像
グリッド表示でサイズが大きい画像をクリックすると幅1280pxで表示されてしまう

グリッド表示でサイズが大きい画像をクリックすると幅1280pxで表示されてしまう

もう一度クリックで指定(横:80%)に戻る

もう一度クリックで指定(横:80%)に戻る

relによるグループ化
共通のグループ画像(この場合 rel=

共通のグループ画像(この場合 rel="mac")があるので上に矢印が表示される

グループ内の次画像を表示

グループ内の次画像を表示

追記を閉じる

2013.09.24 | Comments(0)

Photosページ02 ・・・tumblr.

tumblr テーマ Cargo Theme グリッド表示

サムネール大きさ

Open時のレイアウトは初期設定のままグリッド表示にするとして、
ダッシュボードのカスタマイズメニューでグリッド表示時のサムネール画像数を1〜16コマまで指定できるのですが、3行くらいに収めるとしてもサムネール画像が大きいので小さくしてみました。

Cargo グリッド表示200px

グリッドサムネール200px

Cargo グリッド表示100px

グリッドサムネール100px

・・・続く

参考→Tumblr カスタムテーマの作り方(日本語訳)

グリッドレイアウトでサムネール画像を表示している変数 {PhotoURL-250} を幅100ピクセルサイズを表示する {PhotoURL-100} に変更します。サムネール間の間隔も30→6ピクセルにしてみました。

Cargoテーマ テンプレートソース360行目あたり
   {block:Photo}
   <div class="post_thumb" id="thumb_{PostID}">
    <div class="image photo rounded">
    <!-- PhotoURL-250 をPhotoURL-100に変更
     <div class="bg rounded" style="background-image:url('{PhotoURL-250}')"></div>
     -->
     <div class="bg rounded" style="background-image:url('{PhotoURL-100}')"></div>
     <div class="icon"></div>
    </div>
   </div>
   {/block:Photo}

CSS
.post_thumb{
	float:left;
/* original
	margin-right:30px;
	margin-bottom:30px;
	width:200px;
	height:200px;
*/ 
/* 幅・高さとサムネール間隔を狭く */
	margin-right:6px;
	margin-bottom:6px;
	width:100px;
	height:100px;
	position:relative;
}

他にも

.post_thumb 内の要素で大きさ指定があったもの

  • .post_thumb .image
  • .post_thumb .regular
  • .post_thumb .link
  • .post_thumb .loading
  • .post_thumb .photoset
  • .post_thumb .photoset .thumbs .thumb
  • .post_thumb .photoset .thumbs .thumb img
  • .post_thumb .info

.grid 内の要素

  • .grid .video .bg
  • .grid .image .bg
  • .grid .image .icon
  • .grid .photoset .icon

これらの中で幅・高さ指定がある箇所を
width:200px;→width:96px;
height:200px;→height:96px;に変更
他にもサムネール内でキャプション等の位置が指定してあったりするので、後で文字が隠れたりする箇所があれば修正が必要になりそうです。

サムネールクリックで拡大

サムネール画像が小さくなったとはいえ、クリックして拡大画像(左右500px)を表示させると、その拡大画像と説明文の高さだけグリッド部分が下がってしまいます。

モニターの大きさにもよりますが、縦長の画像や説明文が長いとサムネールが全部隠れてしまい、スクロールを繰り返さないといけないはめになってしまいます。

グリッド表示-拡大1

拡大するとグリッドサムネール画像が下に移動してしまう

グリッド表示-拡大2

縦長画像だとサムネールが隠れてしまう

tumblr Cargo Theme グリッド部分移動

グリッドサムネールのエリアが拡大表示エリアの下になっているので、これを右側に移動します。
幅100px+アキ6pxに変更したサムネールコマが3列入るように 320pxにしました。

そして#entry(多分500pxの写真を表示させるエリア)と.grid(グリッドエリア)をそれぞれ左右にフロートさせます。

CSS
/*メインコラム */
#main_column{
	margin:0px auto;
	width:900px;
	position:relative;
}
/* グリッドエリア */
#main_column .grid{
/*	width:780px; ---original*/
	width:320px; 
	float:right;	
}
/* グリッド内サムネール */
.post_thumb{
	width:100px;
	height:100px;
	margin-right:6px;
	margin-bottom:6px;
	position:relative;
}
/* 拡大写真エリア */
/* original
#entry,
.list{
	width:660px; 
}
    ↓   */
#entry {
	width:520px;
	float:left;
}
.list{
	width:640px;
}

これで一応、画像ビューア風のレイアウトになりましたが、tumblr.の変数タグがあまりよくわかっていないので何かおかしなところが出てくる可能性はありそうです。

グリッドレイアウトで開いた時の状態

グリッドレイアウトで開いた時の状態

サムネールクリックで拡大画像を表示

サムネールクリックで拡大画像を表示

参考→Tumblr カスタムテーマの作り方(日本語訳)

グリッドレイアウトでサムネール画像を表示している変数 {PhotoURL-250} を幅100ピクセルサイズを表示する {PhotoURL-100} に変更します。サムネール間の間隔も30→6ピクセルにしてみました。

Cargoテーマ テンプレートソース360行目あたり
   {block:Photo}
   <div class="post_thumb" id="thumb_{PostID}">
    <div class="image photo rounded">
    <!-- PhotoURL-250 をPhotoURL-100に変更
     <div class="bg rounded" style="background-image:url('{PhotoURL-250}')"></div>
     -->
     <div class="bg rounded" style="background-image:url('{PhotoURL-100}')"></div>
     <div class="icon"></div>
    </div>
   </div>
   {/block:Photo}

CSS
.post_thumb{
	float:left;
/* original
	margin-right:30px;
	margin-bottom:30px;
	width:200px;
	height:200px;
*/ 
/* 幅・高さとサムネール間隔を狭く */
	margin-right:6px;
	margin-bottom:6px;
	width:100px;
	height:100px;
	position:relative;
}

他にも

.post_thumb 内の要素で大きさ指定があったもの

  • .post_thumb .image
  • .post_thumb .regular
  • .post_thumb .link
  • .post_thumb .loading
  • .post_thumb .photoset
  • .post_thumb .photoset .thumbs .thumb
  • .post_thumb .photoset .thumbs .thumb img
  • .post_thumb .info

.grid 内の要素

  • .grid .video .bg
  • .grid .image .bg
  • .grid .image .icon
  • .grid .photoset .icon

これらの中で幅・高さ指定がある箇所を
width:200px;→width:96px;
height:200px;→height:96px;に変更
他にもサムネール内でキャプション等の位置が指定してあったりするので、後で文字が隠れたりする箇所があれば修正が必要になりそうです。

サムネールクリックで拡大

サムネール画像が小さくなったとはいえ、クリックして拡大画像(左右500px)を表示させると、その拡大画像と説明文の高さだけグリッド部分が下がってしまいます。

モニターの大きさにもよりますが、縦長の画像や説明文が長いとサムネールが全部隠れてしまい、スクロールを繰り返さないといけないはめになってしまいます。

グリッド表示-拡大1

拡大するとグリッドサムネール画像が下に移動してしまう

グリッド表示-拡大2

縦長画像だとサムネールが隠れてしまう

tumblr Cargo Theme グリッド部分移動

グリッドサムネールのエリアが拡大表示エリアの下になっているので、これを右側に移動します。
幅100px+アキ6pxに変更したサムネールコマが3列入るように 320pxにしました。

そして#entry(多分500pxの写真を表示させるエリア)と.grid(グリッドエリア)をそれぞれ左右にフロートさせます。

CSS
/*メインコラム */
#main_column{
	margin:0px auto;
	width:900px;
	position:relative;
}
/* グリッドエリア */
#main_column .grid{
/*	width:780px; ---original*/
	width:320px; 
	float:right;	
}
/* グリッド内サムネール */
.post_thumb{
	width:100px;
	height:100px;
	margin-right:6px;
	margin-bottom:6px;
	position:relative;
}
/* 拡大写真エリア */
/* original
#entry,
.list{
	width:660px; 
}
    ↓   */
#entry {
	width:520px;
	float:left;
}
.list{
	width:640px;
}

これで一応、画像ビューア風のレイアウトになりましたが、tumblr.の変数タグがあまりよくわかっていないので何かおかしなところが出てくる可能性はありそうです。

グリッドレイアウトで開いた時の状態

グリッドレイアウトで開いた時の状態

サムネールクリックで拡大画像を表示

サムネールクリックで拡大画像を表示

追記を閉じる

2013.09.21 | Comments(0)

Photosページ01 ・・・tumblr.

「Photos」ページにはtumblr(タンブラー)ページから写真一覧を埋込み表示させていたのですが、そのサムネールをクリックすると結局 タンブラーのページに移動してしまうので、タンブラーページをそのまま使うことにしました。

tumblr テーマ Cargo Theme を設定

写真向きのtumblr テーマはたくさんありそうですが、シンプルそうなCargo Themeを選びテーマに設定します。

Cargo テーマ グリッド表示

Cargoテーマ グリッド表示

Cargo テーマ リスト表示

Cargoテーマ リスト表示

とても使いやすいテーマだと思うのですが、他のページとイメージを合わせたいので少しアレンジしてみます。

・・・続く
ヘッダーとナビメニュー

テーマのHTMLと合わせてスタイルシートを編集したいので、元のテーマで読み込まれているスタイルシートを拝借し、適当な名前でサーバーにアップして、cssファイルの読み込み記述を変更します。

<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/xhpdxdi/sr4ljv5mk/style.css" />
                       ↓
<link rel="stylesheet" type="text/css" href="http://skizze.jp/paramy/css/photo.css" />

body タグの直後に他ページで使っているヘッダー/ナビゲーションの記述を挿入し、さっき作ったphoto.cssに背景画像、ヘッダー/ナビのスタイルを追加します。

body{
	background: url(http://skizze.jp/paramy/img/bg16.gif) left top #fffffa;
	margin:0;
	padding:0;
}
/* head-bar */
#head-bar {
	width:100%;
	height:160px;
	background: url(http://skizze.jp/paramy/img/menu-bar.jpg) repeat-x left 84px;
}
/* ヘッダー */
#header {
	width:900px;
	margin: 0 auto 16px auto;
	position:relative;
	height:84px;
}

 略
メインカラム位置

ヘッダー/ナビ部分ととメインカラムが重なり合ってます。
テーマテンプレートhtml と photo.css スタイルシートからそれらしい所を手探りでさがします。

ヘッダーとメインカラムが重なってしまう

<div id="main_column">が絶対位置指定になっている

#main_column 位置指定修正後<br />罫線はカラムの領域を表すために表示

#main_columnの位置を変更

 

#main_column{
/* オリジナル
	position:absolute;
	left:30px;
	top:30px;
	width:800px;
*/ 修正
	width:900px;
	margin:20px auto;
	position:relative;
	border:solid 1px; /*main_column の範囲を見るために罫線指定
}
ヘッダーとナビメニュー

テーマのHTMLと合わせてスタイルシートを編集したいので、元のテーマで読み込まれているスタイルシートを拝借し、適当な名前でサーバーにアップして、cssファイルの読み込み記述を変更します。

<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/xhpdxdi/sr4ljv5mk/style.css" />
                       ↓
<link rel="stylesheet" type="text/css" href="http://skizze.jp/paramy/css/photo.css" />

body タグの直後に他ページで使っているヘッダー/ナビゲーションの記述を挿入し、さっき作ったphoto.cssに背景画像、ヘッダー/ナビのスタイルを追加します。

body{
	background: url(http://skizze.jp/paramy/img/bg16.gif) left top #fffffa;
	margin:0;
	padding:0;
}
/* head-bar */
#head-bar {
	width:100%;
	height:160px;
	background: url(http://skizze.jp/paramy/img/menu-bar.jpg) repeat-x left 84px;
}
/* ヘッダー */
#header {
	width:900px;
	margin: 0 auto 16px auto;
	position:relative;
	height:84px;
}

 略
メインカラム位置

ヘッダー/ナビ部分ととメインカラムが重なり合ってます。
テーマテンプレートhtml と photo.css スタイルシートからそれらしい所を手探りでさがします。

ヘッダーとメインカラムが重なってしまう

<div id="main_column">が絶対位置指定になっている

#main_column 位置指定修正後<br />罫線はカラムの領域を表すために表示

#main_columnの位置を変更

 

#main_column{
/* オリジナル
	position:absolute;
	left:30px;
	top:30px;
	width:800px;
*/ 修正
	width:900px;
	margin:20px auto;
	position:relative;
	border:solid 1px; /*main_column の範囲を見るために罫線指定
}

追記を閉じる

2013.09.21 | Comments(0)

SoyCMSブログアレンジ07 ・・・ReadMore続き

追記文章下「追記を閉じる」の課題点

  1. 「続きを読む」の文字スタイルが開いた時のままになってしまう。
    最初に「続きを読む」クリックした時に付いたdtのクラス名 open がそのままになっているため。
  2. 「追記を閉じる」クリックで閉じると追記文の長さのまま下の位置で閉じられてしまう。

実はもう一つ問題点がありました。

  1. 追記文があってもなくても「続きを読む」が表示されてしまう。

(SoyCMS初期テンプレートで使われている cms:id="more_link" は追記があるときだけ自動的に現れてくれます)

今回はテンプレートに dlタグを直書きしているので、当然ながら自動表示・非表示というわけにいかず、なにか「続きを読む」をON・OFF設定する必要があります。

<!-- 今回のテンプレートhtml -->
<dl class"read_more">
	<dt>続きを読む</dt>
	<dd class="more_content">
		<!-- cms:id="more" -->続きがここに表示されます
		(cms:id="more" はSoyMCSで使用するブロックコード:追記文を出力)
		<!-- /cms:id="more" -->
		<p class="close">追記を閉じる</p> <!--追加部分 -->
	</dd>
</dl>

 

・・・続く
1. 「続きを読む」の文字スタイルを戻す

これは、JavaScript部分に一行追加することで解決しました。

$(function(){ 
//-----dl.read_more の子要素 dt(続きを読む)をクリックすると次の要素 dd が開閉
	$("dl.read_more dt").on("click",function(){ 
		$(this).next().slideToggle(750);
//-----dt にクラス名 openを付与
		$(this).toggleClass("open");
	});
//----------p.close「追記を閉じる」をクリックで、親要素 dd を開閉
	$("dd.more_content p.close").click(function(){
		$(this).parent().slideToggle(750);
//追加部分 -----dt に付けられたクラス名を削除------
		$("dl.read_more dt").toggleClass();
	});
});

これで「追記を閉じる」の方をクリックしても dtのクラス名 open がなくなり、「続きを読む」も元のスタイルに戻ります。

2. 「追記を閉じる」クリック後の戻り位置
3. 「続きを読む」を表示/非表示できるように

スクロール量を計算して巻き戻すようなスクリプトがあるのかもしれませんが、JavaScript は全く詳しくないので、記事の先頭にジャンプする方法で考えてみます。
元の位置といえば、「続きを読む」ですが、ここより記事タイトルにジャンプした方が自然な感じなので 次のような html を想定してみます。

<!-- 記事部分-->
<div class="entry">
	<!-- 記事カテゴリー表示(テンプレートではcms:id="category_link"とcms:id="category_name" を使う)
	<ul class="posted-cat">	
		<li><a href="category_link">category_name</a></li>
	</ul>
	<!-- 記事タイトルにIDを付けて「追記を閉じる」クリックからの戻り先に指定する -->
	<h2 id="post108" class="title">タイトル(テンプレートではcms:id="title" を使う)
		<span>・・・タイトル後にサブタイトル</span></h2>
	<h2 class="subtitle">タイトル下に副題</h2>
	<p>本文(前文)ここに表示</p>
	<dl class="read_more"><!-- 追記が無い場合 class="no_more” とし表示しないようにする -->
		<dt>続きを読む</dt>
		<dd class="more_content">
			<p>追記部分ここに表示</p>
			<p class="close"><a href="#post108">追記を閉じる</a></p>
		</dd>
	</dl><!-- 追記終わり -->
</div><!-- 記事部分終わり -->

上のhtml で斜体字でカラー背景になっている箇所が、記事ごとに違う内容を記述しないといけない部分です。

「アレンジ03・・・記事タイトル」でも使用したカスタムフィールドを作ります。

フィールドID 属性 フィールド記述例 出力 目的
sub-title-span   <span>・・・温故知新</span> <span>・・・温故知新</span> タイトル後ろにサブタイトル
sub-title-under   ─往年の 名機かも─ ─往年の名機 かも─ タイトル下行に副題
title-id id mac8500 id="mac8500" 記事タイトルに id を付ける
read-more class no_more class="no_more" 「続きを読む」の表示・非表示(クラス指定)を ラジオボタンで選択して
close-more-id href #mac8500 href="#mac8500" 「追記を閉じる」クリックで記事タイトルに移動

 

<!-- b_block:id="entry_list" エントリーの記述-->
<div class="entry">
	<!-- 記事カテゴリー表示-->
	<ul class="posted-cat">	
		<!-- cms:id="category_list" -->
		<li><a cms:id="category_link"><!-- cms:id="category_name" --><!-- /cms:id="category_name" --></a></li>
		<!-- /cms:id="category_list" -->
	</ul>
	<h2 cms:id="title-id" class="title">
		<!-- cms:id="title" -->タイトル<!-- /cms:id="title" -->
		<!--  cms:id="sub-title-span" -->タイトル後サブタイトル<!-- /cms:id="sub-title-span" -->
	</h2>
	<h2 class="subtitle"><!-- cms:id="sub-title-under" -->副題<!-- /cms:id="sub-title-under" --></h2>
	<div cms:id="content">本文</div>
	<dl cms:id="read-more"><!-- class="read_more" か class="no_more" をラジオボタンでチェック -->
		<dt>続きを読む</dt>
			<dd class="more_content">
			<!-- cms:id="more" -->追記部分がここに表示<!-- /cms:id="more" -->
			<p class="close"><a cms:id="close-more-id">h2タイトルに移動して追記を閉じる</a></p>
		</dd>
	</dl><!-- 追記終わり -->
</div><!-- エントリー終わり -->
<!-- /b_block:id="entry_list" エントリーの記述終わり -->

/*CSS追加 追記がない時は「続きを読む」は表示しない */
dl.no_more {display:none;}

カスタムフィールドを設定した記事編集画面

mac8500

カスタムフィールド:title-id は記事タイトルのID名を(xxxxxの部分)を出力

<h2 id="xxxxx" class="title">タイトル</h2>

カスタムフィールド:close-more-id は「追記を閉じる」クリック時の移動先(#xxxxxの部分)を出力します。

<p class="close"><a href="#xxxxx">追記を閉じる</a></p>

カスタムフィールド:read-more はラジオボタンチェックで dl(「続きを読む」以下追記部分を包含)にクラス名を出力します。

<dl class="read_more"> または <dl class="no_more">
1. 「続きを読む」の文字スタイルを戻す

これは、JavaScript部分に一行追加することで解決しました。

$(function(){ 
//-----dl.read_more の子要素 dt(続きを読む)をクリックすると次の要素 dd が開閉
	$("dl.read_more dt").on("click",function(){ 
		$(this).next().slideToggle(750);
//-----dt にクラス名 openを付与
		$(this).toggleClass("open");
	});
//----------p.close「追記を閉じる」をクリックで、親要素 dd を開閉
	$("dd.more_content p.close").click(function(){
		$(this).parent().slideToggle(750);
//追加部分 -----dt に付けられたクラス名を削除------
		$("dl.read_more dt").toggleClass();
	});
});

これで「追記を閉じる」の方をクリックしても dtのクラス名 open がなくなり、「続きを読む」も元のスタイルに戻ります。

2. 「追記を閉じる」クリック後の戻り位置
3. 「続きを読む」を表示/非表示できるように

スクロール量を計算して巻き戻すようなスクリプトがあるのかもしれませんが、JavaScript は全く詳しくないので、記事の先頭にジャンプする方法で考えてみます。
元の位置といえば、「続きを読む」ですが、ここより記事タイトルにジャンプした方が自然な感じなので 次のような html を想定してみます。

<!-- 記事部分-->
<div class="entry">
	<!-- 記事カテゴリー表示(テンプレートではcms:id="category_link"とcms:id="category_name" を使う)
	<ul class="posted-cat">	
		<li><a href="category_link">category_name</a></li>
	</ul>
	<!-- 記事タイトルにIDを付けて「追記を閉じる」クリックからの戻り先に指定する -->
	<h2 id="post108" class="title">タイトル(テンプレートではcms:id="title" を使う)
		<span>・・・タイトル後にサブタイトル</span></h2>
	<h2 class="subtitle">タイトル下に副題</h2>
	<p>本文(前文)ここに表示</p>
	<dl class="read_more"><!-- 追記が無い場合 class="no_more” とし表示しないようにする -->
		<dt>続きを読む</dt>
		<dd class="more_content">
			<p>追記部分ここに表示</p>
			<p class="close"><a href="#post108">追記を閉じる</a></p>
		</dd>
	</dl><!-- 追記終わり -->
</div><!-- 記事部分終わり -->

上のhtml で斜体字でカラー背景になっている箇所が、記事ごとに違う内容を記述しないといけない部分です。

「アレンジ03・・・記事タイトル」でも使用したカスタムフィールドを作ります。

フィールドID 属性 フィールド記述例 出力 目的
sub-title-span   <span>・・・温故知新</span> <span>・・・温故知新</span> タイトル後ろにサブタイトル
sub-title-under   ─往年の 名機かも─ ─往年の名機 かも─ タイトル下行に副題
title-id id mac8500 id="mac8500" 記事タイトルに id を付ける
read-more class no_more class="no_more" 「続きを読む」の表示・非表示(クラス指定)を ラジオボタンで選択して
close-more-id href #mac8500 href="#mac8500" 「追記を閉じる」クリックで記事タイトルに移動

 

<!-- b_block:id="entry_list" エントリーの記述-->
<div class="entry">
	<!-- 記事カテゴリー表示-->
	<ul class="posted-cat">	
		<!-- cms:id="category_list" -->
		<li><a cms:id="category_link"><!-- cms:id="category_name" --><!-- /cms:id="category_name" --></a></li>
		<!-- /cms:id="category_list" -->
	</ul>
	<h2 cms:id="title-id" class="title">
		<!-- cms:id="title" -->タイトル<!-- /cms:id="title" -->
		<!--  cms:id="sub-title-span" -->タイトル後サブタイトル<!-- /cms:id="sub-title-span" -->
	</h2>
	<h2 class="subtitle"><!-- cms:id="sub-title-under" -->副題<!-- /cms:id="sub-title-under" --></h2>
	<div cms:id="content">本文</div>
	<dl cms:id="read-more"><!-- class="read_more" か class="no_more" をラジオボタンでチェック -->
		<dt>続きを読む</dt>
			<dd class="more_content">
			<!-- cms:id="more" -->追記部分がここに表示<!-- /cms:id="more" -->
			<p class="close"><a cms:id="close-more-id">h2タイトルに移動して追記を閉じる</a></p>
		</dd>
	</dl><!-- 追記終わり -->
</div><!-- エントリー終わり -->
<!-- /b_block:id="entry_list" エントリーの記述終わり -->

/*CSS追加 追記がない時は「続きを読む」は表示しない */
dl.no_more {display:none;}

カスタムフィールドを設定した記事編集画面

mac8500

カスタムフィールド:title-id は記事タイトルのID名を(xxxxxの部分)を出力

<h2 id="xxxxx" class="title">タイトル</h2>

カスタムフィールド:close-more-id は「追記を閉じる」クリック時の移動先(#xxxxxの部分)を出力します。

<p class="close"><a href="#xxxxx">追記を閉じる</a></p>

カスタムフィールド:read-more はラジオボタンチェックで dl(「続きを読む」以下追記部分を包含)にクラス名を出力します。

<dl class="read_more"> または <dl class="no_more">

追記を閉じる

2013.09.17 | Comments(0)

<< 1 2 >> 2ページ中1ページ目