つくりてのざれごと

投稿

ラベル（web font）が付いた投稿を表示しています

WIKIの見た目変更とwebフォントの微調整

投稿日 2013/02/28 更新日 2013/03/01

本日はワタクシの管理している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」マークを表示したい箇所のタグに works と、title属性にて指定すると、未対応のIEでは現れないようになる。詳細は、 Ligature Symbols ページ下部の例示をご覧あれ。

拙WEBSITEその他一式マイナーチェンジその4

投稿日 2013/02/26

ホンマに性懲りも無く本日も拙サイトその他一式のマイナーチェンジを行なう。トップページのメインに掲載するものを最大2つに絞り込む。その時々の旬な自分の仕事やプロジェクトをピックアップするようにした。大見出しの文字サイズを大幅に大きくし、大見出しのみの書体も変更。薄い文字色とリンクhover時の文字色の変更。上記に伴って、CSSにてレイアウトの微調整。 NEWS・MOJIRU・LETTER-PRESSの各ブログ及びLINE MUSEUM・MOJI SHOPは、拙サイトの変更に合わせた。チョット珍しい本を紹介するページ（RARE）を新設（といっても2冊のみだが）。昨日までのレイアウトが… こんな感じにスッキリ。たぶんこれで落ち着いた、と思う。。。

bloggerのフッタのちょっとしたカスタマイズ（非推奨）

投稿日 2013/02/24 更新日 2020/08/31

このNEWSブログは先日から弄っているが、本日もcssにてレイアウトの微調整を施した。そんな中、どうしても気になるのがフッタ部分。拙website のフッタと同じ形式にするため、ちょっとしたカスタマイズを仕掛けた。以下、自己責任にてお願いする次第である。オリジナルのものにするために、既成のフッタ部分  <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やら追加しているが省略）完成。既成のフッタカスタマイズ後

Calluna SansのWeb Font太いの追加。

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

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

Web Fontでアイコン表示

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

拙サイトの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. アイコンのみ表示 twitter <a href="URL">URL</a> 2. アイコン＋テキスト表示 twitter <a href="URL">URL</a> 今回拙サイトで使用する際、画像上「A」のアイコンは、専ら見出しの装飾として使用し音声ブラウザなどでは無視してもらいたいので、コード「2」の タグで囲まれたテキスト「twitter」を削除することで無理やり対応させる。画像上「C」のアイコンは、ブラウザ上ではアイコンのみ表示でウェブ・ユーザビリティ的に代替テキストを用意したいがため「1」を使用。つまり、画像上「A」アイコンのコード <a href="URL"...

WEBSITE改装3回目

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

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

投稿