Friday, 31 August 2012

Calluna SansのWeb Font太いの追加。

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

Thursday, 30 August 2012

Web Fontでアイコン表示

拙サイトの3回目の改装では、見出しの左やTwitter、Facebook、Mailなどのアイコンを、“Ligature Symbols”というウェブフォントで表示している。ただ、ワタクシの使い方だとウェブ・ユーザビリティ的にマズい箇所が出てくるので、“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」に同じ)
その際、デフォルトでは両者の見た目や挙動が微妙に異なるので、「A」を(class="lsf-icon")を「C」(class="lsf")に合わせる変更。
(変更前)
.lsf-icon:before {
  content:attr(title);
  margin-right:0.3em;
  font-size:130%;
  font-family: 'LigatureSymbols';
    (以下略)
}

(変更後)
.lsf-icon:before {
  content:attr(title);
  margin-right:3px;
  font-size:1.4em;
  font-weight:normal; ←「A」は見出しの横に用いるので、太くならないようこれを指定する。
  font-family: 'LigatureSymbols';
    (以下略)
}
表示は
A. アイコンのみ表示
http://twitter.com/eszett

C. アイコンのみ表示+代替テキスト付
twitterhttp://twitter.com/eszett
見た目が同じでよくわからないので、web font設定済と設定の外れた写真を以下に。

web font設定済

web font設定の外れた状態

見出し横のアイコンは消え、twitterなどSNSやメールのアイコンはテキストに置き換わっている。


Wednesday, 29 August 2012

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

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.はBasic Usageページを参照。
次に、FullCalendarにGoogleカレンダーを読込ませる。

5. Googleカレンダーの「設定」より、読込ませるGoogleカレンダーを「一般公開」設定

6. Googleカレンダーの「設定」より、必要分のGoogleカレンダーのアドレスを「XML」ボタンより取得

7. 上記3.の「// あとでここに色々追記」の箇所にGoogleカレンダーのアドレスを記述

<script type="text/javascript">
$(document).ready(function() {
   $('#calendar').fullCalendar({
        eventSources: [
             {
                  url: "your_feed_url1",
                  className: "event1"
             },
             {
                  url: "your_feed_url2",
                  className: "event2"
             }
        ]
    })
});
</script>
複数カレンダーの読込みでは「eventSources」というoptionを使い、その中に複数のEvent Sourceを指定する場合は上記のように括弧とコンマを追加する。コンマはよく追加し忘れるので特に注意。
「className」は今回別段必要ではないが、アドレス識別のため付けた。
(7.はGoogle Calendarページを参照。)


以上で、Googleカレンダーの読込みが完了してFullCalendarに反映される。
しかし、複数のカレンダーを読込んでいるのに色が一緒でみにくい、各々のカレンダー色を変更したい、と調べたらEvent Sourceで色分けできることが判明。

8. 上記7.のコードに「backgroundColor」を追加し各々の色を指定

<script type="text/javascript">
$(document).ready(function() {
   $('#calendar').fullCalendar({
        eventSources: [
             {
                  url: "your_feed_url1",
                  className: "event1",
                  backgroundColor: "#F3F5F7"
             },
             {
                  url: "your_feed_url2",
                  className: "event2",
                  backgroundColor: "#98A4AE"
             }
        ]
    })
});
</script>
コンマを追加し忘れないように。

9. 他に、境界線色用の「borderColor」や文字色用の「textColor」などもあるのでこれらも指定

<script type="text/javascript">
$(document).ready(function() {
   $('#calendar').fullCalendar({
        eventSources: [
             {
                  url: "your_feed_url1",
                  className: "event1",
                  backgroundColor: "#F3F5F7",
                  borderColor: "#BAC2C9",
                  textColor: "#3E4051"
             },
             {
                  url: "your_feed_url2",
                  className: "event2",
                  backgroundColor: "#98A4AE"
             }
        ]
    })
});
</script>
(8.〜9.はEvent Source Objectページを参照。)
以上で複数カレンダーを色分けして表示できた。

最後に

FullCalendarで表示される時刻表記が「12p」や「10:30a」と判りにくいので、これも変更する(なぜにこのフォーマットがデフォルト?!)。FullCalendarの時刻表記のフォーマットはformatDateページで参照し、「時間は24時間制で1桁のとき10の位に0は不要、分は常に2桁」が希望なので、フォーマットは「H:mm」。ということで、時刻表記を「timeFormat」を用いて変更するので、上記9.に追加。
<script type="text/javascript">
$(document).ready(function() {
   $('#calendar').fullCalendar({
        eventSources: [
             {
                  url: "your_feed_url1",
                  className: "event1",
                  backgroundColor: "#F3F5F7",
                  borderColor: "#BAC2C9",
                  textColor: "#3E4051"
             },
             {
                  url: "your_feed_url2",
                  className: "event2",
                  backgroundColor: "#98A4AE"
             }
        ],
        timeFormat: "H:mm"
    })
});
</script>
しつこいけど、ホンマにコンマを追加し忘れるなオレ。
(以上は timeFormatページを参照。)

fadeTo()で写真を透過

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


初期状態(40%透過)はCSSで設定。
.transparent{
 filter:alpha(opacity=40);
 -moz-opacity: 0.4;
 opacity: 0.4;
}
このCSSの設定の詳細は
などを参照。透過させるjQueryは
を参照。感謝感激。

元のソース
$(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を使用。深謝。

Monday, 27 August 2012

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

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


感謝感激。

色々な複数行の記述方法が提示されている中、シンプルなものが最後にありました。
各行の改行した箇所に\(バックスラッシュ)を挿入するだけで、改行やインデントをしたままの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="copyright">\
 <span>©2012 eſzett design, Osaka Japan</span>\
</div>\
<!-- copyright END -->\
');

このとき注意したいのが、上記に「注意」と書いた箇所。HTMLを読みやすいように1行以上空けている場合、この行にも\(バックスラッシュ)を挿入を忘れないこと(この行ももちろん改行してるので)。忘れるとdocument.writeの内容がブラウザに全く反映されない(けっこう焦りましたよ)。

ということで、これでフッターが一元的に管理可能となった。

Sunday, 26 August 2012

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

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

eszettのfacebookページのカバー写真

書体は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.