つくりてのざれごと

現在拙サイト・ブログ等で使用中の「上下に展開・格納する縦型メニューjQuery」はかなり煩雑で、今回整理して簡略化させることに成功。 縦型メニューのHTML <ul> <li> <span id="accordion01" class="accordion" >news</span> （ここに「+」または「−」が挿入される） <ul id="subNavi01" class="subNavi" > <li><a href="#">ESZETT</a></li> <li><a href="#">TYPŒ</a></li> <li><a href="#">LETTER-PRESS</a></li> </ul> </li> <li> <span id="accordion02" class="accordion" >works</span> （ここに「+」または「−」が挿入される） <ul id="subNavi02" class="subNavi" > <li><a href="#">web design</a></li> <li><a href="#">web demo</a></li> <li><a href="#">print</a></li> </ul> </li> <li> <span id="accordion03" ...

今回の 拙サイト 全面改修の際追加したメニュー横の＋−表示が切替るjQueryの詳説をば。 実際どのようなものかは、この拙ブログのサイドメニューも同じ仕様なのでご覧あれ。 メニュー右に「＋」を追加して、メニュー展開時にこれが「−」に変わり、メニュー収納時にまた「＋」になるようなメニュー展開・収納jQuery。この「＋」「−」はいわば飾りなのでHTML上には書きたくない、しかしjQueryの特性上、CSSの疑似要素〔:after〕をセレクターとして呼べないこともあって、「＋」「−」の切替え方に難儀。当初、〔toggle(fn1, fn2, ..., fnN)〕を使用しようと考えたがjQuery 1.9からこれが廃止されたことを知り愕然。（詳細は jQuery Core 1.9 Upgrade Guide | jQuery を参照） 他に手はないかと色々調べた結果、jQueryの〔 after() 〕と〔 replaceWith() 〕が使えそうと判断。〔after()〕は指定したセレクターの後ろにHTML文字列などを挿入するもの、〔replaceWith()〕は指定したセレクターのHTML文字列などを置換するもの。この2つを組み合わせて「＋」「−」の切替えを可能にした。 以下に使用例を。 HTML <ul> <li><span id="accordion02" >works</span> <ul id="subNavi02" > <li><a href="#">web design</a></li> <li><a href="#">web demo</a></li> <li><a href="#">print</a></li> <li><a href="#">letter carving</a></li> </ul> </li> ...

ワタクシがwebデザイン上一番気にするのが見出しのマージン。いつもその時の感覚で決めるが、しっくり来ないことが多々ある。何か巧い方法が無いものかと『 文字の組方ルールブック ヨコ組編 』の「見出しの構造と組方」を眺めていて、自動計算出来るかもと思いjQueryメインに適宜JavaScriptを組み込みスクリプトなるものを書いてみた。 2013.5.14追記 デモページの内部に書き込んでいたこのスクリプトを外部ファイル化。 上下マージン比1:1時と8:5時を ボタンで切り替えられるデモページ を追加。 参照 日本エディタースクール編. 文字の組方ルールブック ヨコ組編 . 本エディタースクール, 2001 JavaScript：文字を数値に変換する方法その２ | THE HAM MEDIA BLOG line-height の値には単位なしが良いとされる理由 - lucky bag Can I use rem units? ほか、色々なサイト・ブログを参照させていただいた。深謝。 注意 なにせjQueryはおろかJavaScript、いやプログラミング全般に素人なので間違ってたりする可能性があるので、使用時は自己責任でお願いする。 実作したweb組版 本文の文字サイズ・1行の字詰・行間（行送り）などを決めると版面が決まる。見出しもその版面に則り「行取り」の方法でその上下のアキを決めていく。具体的には下図をご覧あれ。本文だけでなく見出しも行に綺麗に乗っているのがわかる。 本文サイズ12px、行高22px、行間10px、42字詰。各見出しサイズなどは図の通り。 完成形をブラウザで表示後キャプチャし、イラレで作成した水色の版面上にキャプチャ画像を配置した。 web組版の注意点 行送りの設定方法がDTPと異なる。 webの行送りはline-heightで設定するが、これは厳密には文字通り行の高さを設定するもので、アキの付き方は以下の図の通りになる。 本文上下のグレー網がline-heightで設定されるアキ これを踏まえて版面設計や見出しのマージンを算出する。 見出しマージンの計算式 ということで、計算式を導くために、下図のように必要な部分を設定。 var bFont = body要素（本文）のfont-size var bHe...

最近制作した案件にて採用したHOVER以外のボタンが薄くなる縦型ナビについて解説をば。 今回参考にさせていただいたのは、 webOpixel さんの記事「 jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種 」内の「 8.マウスオーバー以外のボタンを薄くする。 」であります。深謝。 メインナビのみの縦型ナビ HTML <ul id=" mainNavi "> <li><a href="#">works</a></li> <li><a href="#">projects</a></li> <li><a href="#">bibliography</a></li> <li><a href="#">contact</a></li> <li><a href="#">about</a></li> </ul> ※URLは見やすさのために#に置き換えて省略。 CSS #mainNavi { width: 192px; ・・・・1：必須 text-transform: uppercase; ・・・・2：任意 border-bottom: dotted 1px #BAC3C9; ・・・・3：任意 } #mainNavi li {border-top: dotted 1px #BAC3C9;} ・・・・4：任意 #mainNavi li a { display: block; ・・・・5：必須 padding: 0.8em 0.5em 0.5em; ・・・・6：必須 } CSS指定の留意点： width指定をしないとwidth: 100%;に同じとなり可能な限りの幅になる。 今回のナビではラテン文字全てを大文字に指定したので。 今回は...

思うところあって、拙サイトにmetaタグを追加することに。そしてBlogger2つとTumblr2つを独自ドメインに変更した。 拙サイトにmetaタグを追加 追加したのは、 <meta name="format-detection" content="telephone=no" /> <meta name="copyright" content="©2012–2013 eszett design, Osaka Japan" /> <link rel="canonical" href="http://eszett-design.com/" /> の3つ。 1番目は、iPhone上で数字の羅列が勝手に電話番号と解釈されてリンクにならないようにする設定、とのことで、念のために導入（XHTMLに使って良いかはっきり判らないが、 Another HTML-lint 5 でチェックしてもエラーにならなかったので良しとする）。（※参照：「 iPhoneのSafariでこのblogを見たときに数字の列が電話番号扱いされないようにした | コーヒーサーバは香炉である 」深謝！） 2番目は、著作権表記metaタグ。元々フッターに表記しているが、これも念のため。 3番目は、「URL正規化タグ」なるもの。拙サイトの場合、http://www.eszett-design.com/の他にhttp://eszett-design.com/もあって重複しているが、これを指定した方へ統一して、もう一方へアクセスした場合もリダイレクトしてくれる、らしい。（※参照：「 link rel="canonical"（カノニカルタグ）の使い方。URLを正規化させて重複コンテンツの発生を防ぐ方法 | SEOのホワイトハットジャパン 」深謝！） BloggerとTumblrを独自ドメインに変更 Tumblrに独自ドメインを設定するのは簡単で、契約しているレンタルサーバーでサブドメインを設定してそれをTumblrのカスタムドメイン設定に導入すれば良いだけ。 大変だったのはBloggerの方。 これに先立ってこのNE...

本日はワタクシの管理しているWIKIの1つと、拙websiteやblogger、tumblrで使用中のwebフォントの微調整をば。 WIKIの見た目変更 先日拙websiteやblogger、tumblrのマイナーチェンジを施したので、 WIKI の方も同じような見た目にしてみたく。 別段特別なことをしたわけでもなく、単純にWIKIの設定項目の「CSSカスタマイズ」にてCSSを設定したのみ。 デフォルトの見た目 CSS設定後 因みにこのWIKIは、 @WIKI を利用している。 webフォントの微調整 拙websiteやblogger、tumblrでは、 SNS アイコンやページ右下の「scroll to top」ボタンやサイドメニューの「dropdown」マークをwebフォント Ligature Symbols にて表現している。しかしこのLigature Symbols、 IE 未対応（IEがLigature機能に未対応というべきか）ゆえ、IEでは「scroll to top」ボタンや「dropdown」マークがそのまま文字として表示されてしまったので、読込ませ方を変更して、IEでは現れないようにした。 具体的には、 CSS にて .lsf-icon:after { content: 'dropdown' ; （以下略） } と指定していたものを .lsf-icon:after { content: attr(title) ; （以下略） } と変更し、「dropdown」マークを表示したい箇所のタグに <span class="lsf-icon" title="dropdown" >works</span> と、title属性にて指定すると、未対応のIEでは現れないようになる。 詳細は、 Ligature Symbols ページ下部の例示をご覧あれ。

このNEWSブログは先日から弄っているが、本日もcssにてレイアウトの微調整を施した。 そんな中、どうしても気になるのがフッタ部分。 拙website のフッタと同じ形式にするため、ちょっとしたカスタマイズを仕掛けた。 以下、自己責任にてお願いする次第である 。 オリジナルのものにするために、既成のフッタ部分 <!-- outside of the include in order to lock Attribution widget --> <b:section class='foot' id='footer-3' showaddelement='no'> <b:widget id='Attribution1' locked='true' title='' type='Attribution'/> </b:section> を削除する必要があるが、一度削除してしまうと元に戻せないので、コメントアウトで隠す方法を採ることにした。 <!-- outside of the include in order to lock Attribution widget <b:section class='foot' id='footer-3' showaddelement='no'> <b:widget id='Attribution1' locked='true' title='' type='Attribution'/> </b:section> --> 上記の通りにコメントアウトして隠して、あとはレイアウト画面で「HTML/JavaScript」ガジェットを追加してそれに 拙website のフッタと同じHTMLを入れ、テンプレートデザイナーにてCSSを追加して（他にテンプレートのHTML側にもwebfontやらJavaScriptやら追加しているが省略）完成。 既成のフッタ カスタマイズ後