検索エンジンからにせよ、ソーシャルメディアからにせよ、訪問のきっかけとなるのはそのページのタイトルなので、魅力的なタイトルを付けることでアクセスアップにもつながります。 それは分かっているけど、いざ付けるとなるとなかなかいいタイトルが思い浮かばないという方も多いのではないでしょうか？ 私もそんな１人です。 「どうせセンスがないし。。」なんて言って飽きらめてしまうと前に進まないので、しっかり勉強したいと思います。 幸いその手の記事はたくさんあるので、勉強になる記事を読んでみて、自分なりにまとめてみます。 努力は報われるはず。 形式的なことについて タイトルの内容の前に、まずは文字数など守っておきたい形式的なポイントについて考えます。 文字数について GoogleやYahooなどの検索エンジンでも、はてなブックマークでも表示されるタイトルの文字数は決まっています。 いいタイトルを考えても伝えた

選択したテキストにスタイルを適用しているサイトを最近ちょくちょく見かけるので、このブログでもやってみました。ということでその方法を簡単に説明してみます。 「::selection」というセレクタを使うことで選択したテキストにスタイルを適用することができます。 以前は現在策定中のCSS3セレクタの1つとして載せられていましたが、いつの間にか仕様から外れました。ですがIE以外でしたらちゃんと使えます。 基本的な使い方は以下のとおりです。 ::selection { background:#ff0000; color:#ffffff; } ::-moz-selection { background:#ff0000; color:#ffffff; } Firefox用に「-moz」のベンダープレフィックスをつけたものも必要となります。セレクタにベンダープレフィックスというのも珍しいですね。 あとフ

CSS3を使って作ったメニュー、ボタン、スライドショーなど、「CSS3でこんなことができるのか」と感心したサイトを集めてみました。 jQueryと組み合わせたものもよく見かけますが、今回はCSSのみで実装しているものを集めています。 目次 メニューいろいろ　（12個） テキストに関すること　（5個） CSSだけで作ったボタン　（8個） 画像に関すること　（7個） あのロゴやあのキャラクター　（10個） メニューいろいろ 普通のメニュー、ドロップダウンメニュー、アコーディオンメニューなど色々あります。 Creative CSS3 Animation Menus | Codrops マウスを乗せたときの動きがダイナミックなメニューです。 Animated Navigation Menu with CSS3 | Web Designers Desk マウスを乗せると文字が一周まわります。jQue

背景、ロゴ、favicon、Ajaxローディングなどの画像をオンラインで作成できるサイトを集めました。まだまだありますが、多すぎるとかえって不便だと思うので各ジャンルごとで3個または5個で厳選しています。 背景関連 1. Stripe Generator ストライプの模様を作るならここ。ストライプの幅はもちろん、影や柄なども自由自在です。グラデーションもつけることもできます。 2. bgMaker 背景パターン作成サイトです。サイズは自由に変更できて、リアルタイムで背景に提要されて確認できるので便利です。 3. BgPatterns ― Background Patterns Maker こちらも画像の背景パターン作成サイトです。背景画像の組み合わせからサイズや色まで詳細にカスタマイズすることができます。 4. Dotted Background Generator 水玉模様の背景画像が作

Chrome ウェブストア日本版の開設を記念？して便利そうな拡張機能を紹介します。拡張機能の紹介は結構ありふれていますし、挙げだすときりがないのでウェブサイト作成に役立ちそうなもの限定で紹介ということで。 スクリーンショット スクリーンショットを撮る拡張機能です。切り取りがかなり便利です。 Awesome Screenshot: キャプチャーと注釈 スクリーンショットを撮って、それを切り取ったりテキストを挿入したりできます。その他にも、ぼかしや矢印、楕円なども挿入できます。切り取る際にサイズが表示されて使いやすいです。ページ全体のスクリーンショットも撮れます。あとは画像を縮小できれば文句なしですね。 webページショット - Webpage Screenshot 内容的には先ほどのものとほぼ同じでテキスト、矢印、楕円などを挿入できます。テキストに陰がつくなど若干の違いがあります。 サイトの

CSS3はIEが対応できていないこともあって、今まであまり紹介してませんでしたが、使いこなせると面白そうなのでまとめてみました。 CSS3リファレンス 有名なサイトですね。CSS3に限らず、HTMLやJavaScriptなど膨大な情報量です。 CSS-EBLOG 各ブラウザで先行実装しているCSSプロパティがまとめられています。 CSS3 Files 【2010.4.25 追加】海外サイトですが非常に見やすいです。各ブラウザの対応状況の載っていて重宝します。 次にブラウザごとの対応状況を確認するサイトを紹介。 HTML5 & CSS3 READINESS HTML5とCSS3のブラウザごとの適応状況を視覚的に見ることができます。2008年からの年別でも見ることができます。 HTML5 & CSS3 Support こちらもブラウザごとの対応状況がまとめられています。CSS3はプロパティ、セ

実は先日からできるだけ画像をたくさん使おうと心がけているわけですが、そんな時に役立ちそうな国内外のフリーフォト、無料写真素材サイトをたくさん集めてみました。 煩わしい登録がいらないお手軽なものを集めてみました。 写真素材 足成 私が最初にお世話になったサイトです。 プロ・フォト プロのカメラマンが撮影した写真だそうです。枚数は載っていませんがかなり多いと思います。 BEIZ Graphics Web 数はそんなに多くなさそうですが、写真のクオリティは高いと思います。サイズも3種類から選べて使いやすいです。 ソザイング 写真だけでなくアイコンやボタンなんかもあります。 2000ピクセル以上のフリー写真素材集 その名のとおり高解像度な画像が集められています。 フリー写真素材 Futta.NET こちらもかなり解像度は高めです。 Free Photos Bank こちらは英語のサイトになります。

※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

htmlに直接書き込んでいる以下の部分についても若干説明。 <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ auto: true, continuous: false, numeric: true }); }); </script> autoは自動的に次の画像に移動するかどうか、continuousは自動的に次の画像に移動して最後までいった場合、最初に戻るかどうかです。 たいした説明ではないですが、サンプルもあるので問題ないと思います。

<a name="top" href="#footer">下に移動</a> [コンテンツ] <a href="#footer">下に移動</a> [コンテンツ] <a name="footer" href="#top">上に移動</a> リンク先を#footerに設定すると「name="footer"」と書かれたリンクまで移動するという感じになります。 この例の場合、上2つのリンクは一番下のリンクまで、一番下のリンクは一番上のリンクまで移動します。 難点といえば、リンクがあるところにしか移動できない点でしょうか。 ページの量が多くなったときの目次など様々な場面でに使えそうです。 name属性はweb標準ではない ところで、リンクでのname属性はweb標準ではありません。ただ、このままでも問題なく動きます。 将来的なことも考えてweb標準に則りたいという場合は、nameの代わりにidを使い

では、設置方法を説明してみます。 固定されたスライドメニューの作成 まず、head内でjQueryを読み込みます。もちろんjQueryは自分のサーバーにアップしてもかまいません。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> メニュー自体は簡単なリストメニューで構成されています。#のところはそれぞれリンク先のアドレスに変更してください。 <ul id="navi"> <li class="home"><a href="#"></a></li> <li class="rss"><a href="#"></a></li> <li class="facebook"><a href="#"></a></li> <li cla

よく見かけるタイプのjQueryを使ったスクロールしても上に固定されているメニューを紹介します。最近FC2ブログの上部に現れた検索バー（このブログは非表示にしてます）みたいな感じです。 <script type="text/javascript"> $(function() { $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); if(scrollTop != 0) $('#nav').stop().animate({'opacity':'0.5'},400); //スクロール時 else $('#nav').stop().animate({'opacity':'1'},400); //一番上にあるとき }); $('#nav').hover( function (e) { var scrollTop =

ページを下に進むと現れて、クリックするとページ上部までスクロールするスクリプトを紹介します。結構ありがちですが、さりげなくCSS3を使っているところや、現れるタイミングやスクロールの早さなどカスタマイズしやすそうなところがおすすめポイントです。 Animated Scroll to Top - web designer wall ソースもダウンロードできるようになっているので、カスタマイズできそうなところを簡単に説明していきます。 次にjavascriptのところを。jQueryをGoogleから読み込んで、以下の部分を記述しています。 <script> $(document).ready(function(){ // hide #back-top first $("#back-top").hide(); // fade in #back-top $(function () { $(win

boxの中身にrssフィードを読み込ますことができます。ボックスを動かすのはJavaScriptですがフィードを読み込むためにMagpieRSSを使っているのでphpが使えるサーバーでないと作動しません。

先日、仕事で画像を編集したいと思ったのですが、うちの会社のパソコンはセキュリティの関係でソフトのインストールができず、オンラインで画像を編集できるサイトがないか探したところ結構あったので紹介してみます。 Pixlr 日本語化されていて使いやすいです。「Open photo editor」でエディターが開きます。

CSS3のジェネレータを紹介します。海外サイトがほとんどですが簡単に使えると思います。それぞれ特徴があって面白いので、試しに色々作ってみればCSS3プロパティの勉強にもなります。 CSS3プロパティ全般 ボックスやテキストなど広範囲にわたって設定可能なジェネレータです。比較的有名なものが多いです。 CSS3.0 Maker テキストまわりから、角丸やシャドウ、回転など色々作れます。指定できる要素は以下のとおりです。 CSS Transform Box Shadow Text Shadow Text Rotation RGBA @Font Face Outline Offset Transition CSS Gradient CSS3 Generator これも指定できる要素はかなり多いです。レイアウトがシンプルで見やすいです。 Border Radius Box Shadow Text S

ユーザビリティの改善や検索エンジン対策としてウェブページの読み込みスピードの高速化は非常に重要です。ということで、ページの読み込みスピード向上のために役立つサイトをまとめてみます。 ページ読込速度の重要性 次の事例にあるように、ユーザーは表示速度に敏感です。 Googleによるとページの読み込みが0.5秒遅くなると、検索数が20%減少する Amazonによるとページの読み込みが0.1秒遅くなると、売り上げが1%減少する そして、Googleのアルゴリズムにウェブページの読み込み速度が追加されて以降、サイトの高速化への注目度は高まっています。 Google、ウェブページの読み込み速度をアルゴリズムに取り入れたことを発表 | 海外SEO情報ブログ Googleがついに順位決定に表示速度を使い始めた（公式発表） | Web担当者Forum Google、検索順位にページ読込速度の考慮を開始 [詳

ウェブサイトを作成する際に個人的に使っているWebサービスを紹介します。幅広く35個紹介しますので、新しい発見があれば幸いです。 フォント関係 wordmark.it パソコンに入っているフォントを一覧で見ることができます。フォントサイズも調整できます。 日本語フォント252種類を表示確認できます！フォントを探すならfonthack.jp。 日本語フォントの表示が確認できます。現在252種類あります。 PXtoEM.com: PX to EM conversion made simple. ベースのサイズ（px）を決めると、em, pt, %の値が表示されます。 カラー関連 ウェブ配色ツール Ver2.0 配色ツールは色々ありますが、日本語ですし、あまり考えなくても感覚的に使えるので楽しいです。 Color Scheme Designer 3 カラーパレットジェネレーターです。海外サイトで