Posts

Showing posts from August, 2012

Calluna SansのWeb Font太いの追加。

Calluna SansのWeb Font、SemiboldとBoldを拙サイトに追加設定。これで英語部分の強弱が出せるように。

Web Fontでアイコン表示

Image
拙サイトの3回目の改装では、見出しの左やTwitter、Facebook、Mailなどのアイコンを、“Ligature Symbols”というウェブフォントで表示している。ただ、ワタクシの使い方だとウェブ・ユーザビリティ的にマズい箇所が出てくるので、“Ligature Symbols”の使い方を一部無理やり改変した。


“Ligature Symbols”の表示設定は元来2つある。
1. アイコンのみ表示
http://twitter.com/eszett

2. アイコン+テキスト表示
twitterhttp://twitter.com/eszett「1」はブラウザ上ではアイコンのみ表示でウェブ・ユーザビリティ的に代替テキストが用意してあるという形で使用する場合に用い、「2」はアイコンとテキストの両方とも表示する場合に用いる。そのコードは以下のように指定する。
1. アイコンのみ表示 <span class="lsf">twitter</span><a href="URL">URL</a> 2. アイコン+テキスト表示 <span class="lsf-icon" title="twitter">twitter</span><a href="URL">URL</a> 今回拙サイトで使用する際、
画像上「A」のアイコンは、専ら見出しの装飾として使用し音声ブラウザなどでは無視してもらいたいので、コード「2」の<span>タグで囲まれたテキスト「twitter」を削除することで無理やり対応させる。
画像上「C」のアイコンは、ブラウザ上ではアイコンのみ表示でウェブ・ユーザビリティ的に代替テキストを用意したいがため「1」を使用。つまり、
画像上「A」アイコンのコード <span class="lsf-icon" title="twitter"></span><a href="URL">URL</a> 画像上「C」アイコンのコード (「1」に同じ) その際、デフォルトでは両者…

FullCalendarの導入からカレンダー毎の色指定まで

Image
2012年7月の拙サイト改装2回目時に既に導入している「FullCalendar」について、導入からGoogleカレンダーの複数読込み、カレンダー毎の色指定までをおさらい。基本的な流れはFullCalendarサイトの解説を踏襲。



1. ダウンロードDownloadページから「fullcalendar-1.5.3.zip」をダウンロードして解凍後、自サーバーへアップ。
2. fullcalendarのCSSとJSを読込む<head>タグ内に以下を記述。
<link rel="stylesheet" type="text/css" href="fullcalendar.css" /> <script type="text/javascript" src="fullcalendar.js"></script> <script type="text/javascript" src="fullcalendar.min.js"></script> <script type="text/javascript" src="gcal.js"></script> 赤字部分は各自の階層に合うように適宜変更。
3. FullCalendarにGoogleカレンダーを読込むためのjQueryを<head>タグ内に記述必ず<script>タグで囲むこと。
<script type="text/javascript"> $(document).ready(function() { $('#calendar').fullCalendar({ // あとでここに色々追記 }) }); </script> 4. <body>タグ内のFullCalendarを挿入したい箇所にID属性を挿入<div id='calendar'></div> を追記。


以上、2.〜4.はBasi…

fadeTo()で写真を透過

Image
さて、拙サイト8月リニューアルで新たに、マウスオーバー時にリンクを貼った写真を透過させるjQueryを追加してみた。ただ通常とは逆に、初期状態が40%の透過状態で、マウスオーバー時に100%になるように設定。


初期状態(40%透過)はCSSで設定。
.transparent{ filter:alpha(opacity=40); -moz-opacity: 0.4; opacity: 0.4; } このCSSの設定の詳細は
CSSで透明度/透過度(opacity)の指定をする方法 | BlackFlagなどを参照。透過させるjQueryは
jQueryでマウスオーバー時に画像やテキストを透過させる - fctaleを参照。感謝感激。

元のソース
$(function(){ $(".alpha").hover(function(){ $(this).fadeTo("normal", 0.4); },function(){ $(this).fadeTo("normal", 1.0); }); }); このままだとマウスオーバー時に40%透過になるので、
$(function(){ $(".transparent").hover(function(){ $(this).fadeTo("normal", 1.0); },function(){ $(this).fadeTo("normal", 0.4); }); }); 赤の数字を入れ替え(薄赤部分は自分の設定したクラス名に変更)。











WEBSITE改装3回目

2012年8月28日に拙サイトの3回目の改装を行う。

HOMEページの整理と新たなjQuery(gridster)の導入、外部サービス(BloggerやTumblrなど)を直リンクに変更することによるページ数とHTMLの簡略化など。

各見出し左側のアイコンはLigature SymbolsというWeb Fontを使用。深謝。

document.write() 複数行の記述方法

Image
拙サイトの全ページ共通のフッター部分を、1箇所で集中管理できたら後々楽なので、フッター部分を外部JavaScriptにしてdocument.writeで記述することにした。で、document.writeに複数行を記述する方法をググってみたらさすが、ありましたよ丁寧な解説が。

document.write() 複数行の記述方法いろいろ | tshinobu.com
感謝感激。

色々な複数行の記述方法が提示されている中、シンプルなものが最後にありました。
各行の改行した箇所に\(バックスラッシュ)を挿入するだけで、改行やインデントをしたままのHTMLもそのままOK。イザという時の修正・変更などもしやすい。

というわけで、以下のdocument.writeに
document.write(' <!-- scroll to top BEGIN --> <div id="scrolltotop"> <span class="scroll-to-top lsf">up</span> </div> <!-- scroll to top END --><!-- copyright BEGIN --> <div id="copyright"> <span>©2012 eſzett design, Osaka Japan</span> </div> <!-- copyright END --> '); 各行の改行した箇所に\(バックスラッシュ)を挿入
document.write('\<!-- scroll to top BEGIN -->\ <div id="scrolltotop">\ <span class="scroll-to-top lsf">up</span>\ </div>\<!-- scroll to top END -->\\←注意!<!-- copyright BEGIN -->\ <div id="c…

NEWSページにヘッダ画像を追加

Image
昨日(8月25日)、なに活さんのWSに押掛けて活字組版を体験させてもらった時の完成画像を左右反転させて、NEWSページのヘッダ画像として貼ってみました。また、eszettのfacebookページにはMY組版ステッキ上に組版した状態の画像をカバー写真にしてみました。


書体はFUTURA。ピンぼけはご寛恕。この時の模様の詳細は拙ブログ「活字の小箱」にて報告する予定。

On the header area of this NEWS blog of my eszett website, I put a photo of typesetting that I did by myself with my own composing stick at a Nanikatsu Workshop on Saturday 25 August 2012. Also, on the cover of my eszett facebook page, I put another photo of typesetting.