つくりてのざれごと

投稿

8月, 2012の投稿を表示しています

Calluna SansのWeb Font太いの追加。

投稿日 2012/08/31 更新日 2012/09/15

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

拙サイトの3回目の改装では、見出しの左やTwitter、Facebook、Mailなどのアイコンを、“ Ligature Symbols ”というウェブフォントで表示している。ただ、ワタクシの使い方だとウェブ・ユーザビリティ的にマズい箇所が出てくるので、“Ligature Symbols”の使い方を一部無理やり改変した。 “Ligature Symbols”の使用箇所 “Ligature Symbols”の表示設定は元来2つある。 1. アイコンのみ表示 http://twitter.com/eszett 2. アイコン＋テキスト表示 twitter http://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"

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

投稿日 2012/08/29 更新日 2020/09/01

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属性を挿入 <

fadeTo()で写真を透過

投稿日 2012/08/29 更新日 2020/08/31

さて、拙サイト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/08/29 更新日 2013/02/24

2012年8月28日に拙サイトの3回目の改装を行う。 HOMEページの整理と新たなjQuery（ gridster ）の導入、外部サービス（BloggerやTumblrなど）を直リンクに変更することによるページ数とHTMLの簡略化など。各見出し左側のアイコンは Ligature Symbols というWeb Fontを使用。深謝。

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

投稿日 2012/08/27 更新日 2020/09/01

拙サイトの全ページ共通のフッター部分を、1箇所で集中管理できたら後々楽なので、フッター部分を外部JavaScriptにしてdocument.writeで記述することにした。で、document.writeに複数行を記述する方法をググってみたらさすが、ありましたよ丁寧な解説が。 document.write() 複数行の記述方法いろいろ | tshinobu.com 感謝感激。色々な複数行の記述方法が提示されている中、シンプルなものが最後にありました。各行の改行した箇所に\（バックスラッシュ）を挿入するだけで、改行やインデントをしたままのHTMLもそのままOK。イザという時の修正・変更などもしやすい。というわけで、以下のdocument.writeに document.write('  <div id="scrolltotop"> <span class="scroll-to-top lsf">up</span> </div>   <div id="copyright"> <span>©2012 eſzett design, Osaka Japan</span> </div>  '); 各行の改行した箇所に\（バックスラッシュ）を挿入 document.write(' \  \ <div id="scrolltotop"> \ <span class="scroll-to-top lsf">up</span> \ </div> \  \ \ 　 ←注意！ <!-- c

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

投稿日 2012/08/26 更新日 2013/02/24

昨日（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.

このブログを検索