はてなブックマーク

リンクをブロックレベル要素で設定する方法 その２ 「JavaScriptで表現する」 ２つ目の方法として、JavaScriptプラグイン 「jquery.biggerlink」 を使うことで 直接ブロックレベル要素に対してリンクを貼ることができます。 インライン要素をブロック要素に変更することなく直感的に導入できます。 jQuery系になるので、使用の際はprototype系の他プラグインと併用すると エラーが起きるので注意が必要です。 →サンプル 用意するJSプラグインは２つ。

何かとトラブルのあるCSSのフロートにまつわるネタを集めてみました。 このエントリは以下の内容になっています。 ・floatした際にマージンを２倍確保するIE6のバグ対策をする IEの有名なバグの対策方法です。 ・ボックスの高さを揃える方法 (2ページ目) 内容によって高さの変動するボックスを揃えます。 ・複数のボックスをfloatして段組みする時の方法 (3ページ目) floatしたボックスを扱う上でとても便利な方法です。 フロート解除についてはこちらのエントリをご覧ください。 floatした際にマージンを２倍確保するIE6のバグ対策をする IE6では、floatしたボックスに対しmarginを適応すると マージンが２倍になってしまうバグがあります。 モダンブラウザの正しい解釈では「margin-left:20px」であれば、左余白が20px。 それに対し、IE6では40pxの余白を確保

MovableType5について 2009年11月26日にMovableType5が公開されます。 利用者にとっては待望のMT5となりますが、 それと同時にいろいろな不安もあります。 ここではMT4とMT5を比較してまとめてみました。 ■ インストール MovableType4ではインストールにあたり、 DBの必要環境が となっていましたが、 MovableType5のDB環境が と変更されています。 借りているレンタルサーバーによってはMySQLが使えず、 SQLiteのみのところもあります。 これが理由でMovableType4から5に移行するのを 躊躇っている方もいると思いますが、実際にはSQLiteでも動作確認ができました。※ (※さくらインターネット　ライトプラン　月額125円にて) またMovableType4から5で、大幅に仕様が変更されています。 ■ レイアウトの変更 MT

(※FireFox5 においてソース部分が表示エラーとなるようです。お手数ですが他ブラウザでご覧ください。) 写真をWebサイト上に公開するのに 魅せ方の一つとしてイメージギャラリーがあります。 また一重にイメージギャラリーといっても表現方法も様々で 魅力的なギャラリーのライブラリもたくさん提供されています。 ここではその代表的なギャラリーの 「Lightbox」「Thickbox」などをご紹介します。 以下の画像3枚を使って実際に適用してみることにします。 実用的に各サイトに反映するには更にワンステップ必要になると 思いますが、ここでは導入の方法を掲載してみます。 尚それぞれのギャラリーには 公式サイトへのリンク、サンプル表示、ダウンロードができるようにしてあります。 ライセンス形態は各サイトでご確認ください。 ■ 1.Lightbox prototype.jsを利用した定番のイメージギ

WordPressのデザインをカスタマイズする 目次 ■ オリジナルサイト構築の流れ ■ 必要なスキル ■ カスタマイズのための下準備 １．ローカルで動作する通常の静的なWebサイトを作る ２．ベースとなるWordPressのテーマを選ぶ ３．WordPressカスタマイズのための準備をする ■ WordPressをカスタマイズする ■ 実際にWordPressで構築されたサイト ■ オリジナルサイトを構築する流れ コーポレートサイトなど、テーマを変更しただけでは作ることのできないサイトは 以下の手順で構築を行います。 １．ローカルのみで動作する通常の静的なWebサイトを構築します。 WordPressの機能が必要になる場所は、仮のテキストなどを入れ、 CSSでレイアウト調節を行っておきます。 ２．完成したWebサイトをWordPressに組み込みます。 必要に応じて、Divタグごと各テン

WordPressの主な用途は ・オリジナルのブログを作成する ・CMSサイトを作成する ことが挙げられます。 またWordPressの機能を使い、一部をテンプレート化し、 通常のWebサイトを構築することもできます。 導入するメリットは ・ページ内リンクが自動で生成される (ページが増えてもリンク切れを防げる) ・HTMLの知識がない人でも記事の投稿ができる (CMSとしての機能) ・これに加えて、SEOには弱いといわれるWordPressですが、 通常の静的HTMLサイトよりSEO効果が見込めます。(+後述のプラグインでSEO強化) ■ WordPressが効果を発揮する分野 WordPressを始め、CMS(コンテンツ管理システム)には効果を発揮する分野があります。 WordPressが得意な分野 ○　通常のWebサイト ○　ブログサイト WordPressが不向きな分野 ×　Wik

一つのリンクにテキストや画像を内包する方法を２種類ご紹介します。 一つ目はCSSのみで実現する方法、 ２つ目はjQuery系プラグインを使い実現する方法です。 リンクをブロックレベル要素で設定する方法 その１ 「CSSのみで表現する」 リンク設定を行うアンカータグ「a」はインライン要素になります。 インライン要素とは高さをもたない為、heightで囲んだ範囲にリンクをすることはできません。 そのため、インライン要素を高さを確保できるブロックレベル要素へと変換します。 CSSのみで表現するにはaタグをブロックレベル要素にした後、 <a href="#"></a>の中にインライン要素を内包します。 今回はインライン要素の <span>タグ　－　意味は持たないものの、ひとかたまりの範囲として定義。 を用います。 以下のようなものを作成します　(→サンプル) アンカータグ内に入れるのは３つの要素。

フォントの魅力 世界で最も愛用されているとされるHelveticaフォントは誕生50周年。 「ヘルベチカ 〜世界を魅了する書体〜」として映画やDVDにもなり、 原宿のラフォーレにおいて企画展も催されました。 それに伴い特設サイト「Helvetica project」もあります。 フォントのドラマを考えると、フォント一つでも感慨深いものに感じてきます。 海外のプロデザイナーが多用する21種のフォント フォントの色や大きさでももちろんイメージが大きく変わりますが、 それ以前にセリフ体、サンセリフ体、スクリプト体などの書体、 更に分解すると、フォントそのものの質も問われるわけです。 国内で知名度の低いフォントもいくつかあるようですので、押さえておくと為になるかも。 海外で行われたアンケート実施からみえたWebデザイナーが最も多用する 21種のフォントを簡単な説明を交えて掲載してみます。(元記事)

ロールオーバーで変化をするボタンを作る方法 ロールオーバーのボタンを作るのに、無数の作り方があると思いますが、 ここでは再度確認を含めて５つのパターンを掲載してみます。 ロールオーバーはCSSで表現、またはJavaScriptで切替を行ってみます。 ■　タイプ１　CSSで作り、画像を2枚を差し替えて表現をする方法 テキスト これが最もベーシックな作り方でしょうか。 aタグを「display: block;」でブロック要素にしてリンクの範囲を広げます。 画像は1枚目を「a」で指定、2枚目を「a:hover」で指定することで切替を行っています。 －CSS－ #nav li { list-style-type: none; } #nav li a { display: block; height: 19px; width: 125px; text-decoration: none; font-s

フロートによる回り込みを解除する フロートを利用してボックスを配置すると、意図しない要素が回り込みしてしまうことがあります。 フロートとは、『フロートを適応した指定された要素を通常の流れから取り除き、左または右に寄せて配置するをさせる機能』のことです。 また通常の流れから取り除くということは、親要素が高さを持っていない場合、 子の高さ(height)によって高さを維持していた親の高さ(height)は失われます。 つまり子に対してフロートを適応すると親の高さが０になり、 よく問題として挙げられる『背景がなくなる』といったことが起こるわけです。 その為、フロートを適応したら、解除の設定をする必要があります。 ここでは３タイプの解除の方法を載せてみます。 ■ 元の状態 floatを適用する前の状態です。 - XHTML - ■ contentsにfloatを適応する div id="conte

OpenPNE公式サイト OpenPNEはオープンソース形式で開発されてきたSNSエンジンです。 導入すると、自分だけのSNSがいとも簡単に構築できてしまうわけです。 OpenPNEのレイアウトはmixiの旧レイアウトに酷使しているので、 mixi利用したことのある方は慣れ親しんだレイアウトになると思います。 また独自の機能として「小窓」と呼ばれる機能があり、YouTubeやFlickerなど URLを貼り付けるだけで日記に設置することもできるといった特徴もあります。 ライセンス形式にはGPLを採用しています。 利用するには ・通常ダウンロード　－　自分でセットアップをする。無償利用。通常はこちら。 ・ホスティング　－　開発元の寺島屋が運用代行。月額費用がかかる。 の２タイプが用意されており、通常は自分でセットアップをする為、 利用における費用は一切かかりません。 １．OpenPNEを設置