クイックタグ編集

コーディングしていて、文章中の強調したい単語に、強調タグ<strong></strong>を入れたい、と思ったら、単語をドラッグしてctrl+bは常識です。
文章をパラグラフ化<p></p>したい時、ドラッグしてctrl+shift+pも基本中の基本ですが。

じゃぁ、<span></span>はどうやって入れてますか?色を変えたい、強調じゃないけど装飾として太字にしたい、部分的に文字の大きさを変えたい、そういうとき、<span></span>でくくって、クラス指定しますよね。でも、spanって、ショートカットキー、ないですよね?(もしかして、ある??ガーン)

今は話の流れ的に、ないとします。(知ってたら教えてくださいまし。)

ショートカットのないタグを打つときは、タグ編集を使うか、手打ちになります。ほぼ、手打ちだと思います。私も手打ち派です。

»続きを読む

「続きを読む」をカスタマイズ

Serene Bachで、追記を書くとトップページでは「続きを読む>>」という文言でリンクされ、クリックすると、個別記事ページへ移ります。

別ページへ遷移するのがいやだという、トップページ上で開いたり折りたたんだりできるという
Read MoreプラグインVer. 0.11は有名ですが、そうじゃなくて、個別ページへ遷移したっていいから、ただ「続きを読む>>」この言葉を変えたい、カスタマイズしたい、そういう人もいると思います。(少なくとも私)

ブログなら続きは…でいいけど、たとえば実績集だとか、アフィリエイトサイトとか、ブログっぽくない、サイトのページ的に見せたいときは、「詳細はこちら」的な言葉にしたいですよね。

»続きを読む

フォルダにお好みアイコン

Photoshopコーダーというと、ラフのスライスですよね。
Fireworksとか、Photoshopでデザイナーが仕上げたラフデザインをスライスして、gifやjpgでパーツを保存して、コーディングします。
今日の話題は、そのスライスを保存するときのことです。

保存先にするフォルダの場所って、人によって様々だと思いますが、私はコーディングを速く進める、工夫のしどころでもある部分だと思っているので、少し熱く語ってみます。

»続きを読む

Firefoxの魅力

Get Firefox一般ネットユーザーたちの愛用しているブラウザは、InternetExploperなのでしょうけれど、今をゆく世間のブロガーさまたちが愛用しているブラウザは、おそらく大方Firefoxのようです。

私もすっかり仲間入りし(?)最近ではIEとFx、50%50%くらいになってきています。

今までずっとIEユーザーだったので、ネットサーフィンするとき、今まで保存してきたIEのお気に入りも活用してはいるのですが、もはやお気に入りというローカルのものより、今はBloglinesはてなアンテナといった、オンラインブックマークツールの方が、更新も分かり、新着順に閲覧していけるので、こっちの方が便利なんです。なので、IEでないと…という気持ちは、結構薄れてきています。

メリット1:タブ式

調べ物をするときは特に、同時に色々なサイトを閲覧していたいので、IE7ならばともかくも、タブ式になっていないブラウザは不便でなりません。 リンクを見たら、とりあえず右クリック+Ctrl+T(リンクを新しいタブで開く)がクセになっています。 ブログを書くときは、絶対Fxでないと、どれが管理画面のwindowか分からなくなるので、100%Fxで記事を書くようになりました。

»続きを読む

コーダーのさが

ドラッグしているイメージホームページを閲覧していて、ついついやってしまうこと。ページをドラッグしてしまうこと。

職業柄出てしまう癖です。

Web業界に携わっていたり、制作をやってる人は、身に覚えがあるのでは?
同業者じゃない人と一緒にネットしてると、つい癖が出てしまうので「何やってるの?」とよく聞かれます。確かに。変ですよね。

ここ、画像かな?とか、これFlashかな?とか思って、ついついドラッグして反転具合から確認しちゃうんですよね。ドラッグからちょと進むと、右クリックしちゃいます。そのグラフィックが何で出来ているのか、画像なのか、リスト背景なのか、Flashなのかは右クリックして現れるメニューによって一目瞭然ですからね。

»続きを読む

CSSハックを使いたいケース

前の記事「CSS ハック」を使ってやってみたいこと。
IEにだけ入れたいものとして例をあげるなら、

<li>に入れたリスト用背景が、始めの数行出なかったり、ドラッグしたら現れたりするバグ

ハック技とか使わず真っ向から取り合おうとすると、そのliに関わるulに対して幅を指定するか、liに文字高くらいのheight:14px;を入れるかするなどがあります。

しかし、これらには色々厄介な面があります。

»続きを読む

CSS ハック

Opera9がリリースされ、Internet Explorer 7もBeta3がそろそろ出そうなのかな?ここでもIE 7 Beta 2をDLしてみて、という記事を以前に書いたことがありますが、色々な性格のモダンブラウザが登場してくると、私たちコーダーは必死に追いかけるしかないのです。

「完璧にくんでいるのに!」と崩れたプレビュー画面に向かって悔しがっているメンバーをよく見かけますが、完璧なんてないから面白いんですよね。いかに、どのブラウザの特性も理解して、考慮して組めるかどうか...。
新しく渡されたラフを見ながら、ソースを思い浮かべるときが、一番楽しいときなんですから。

»続きを読む

スパムメール対策

Webサイトで、お問い合わせページは、ほとんどのサイトで見受けられます。しかし、フォームからだけでなく、「下記のアドレスに…」という文言で、メールアドレスをそのままソースとして打ち込んで公開しているサイトをたくさん見かけます。げんに、インクローバーで制作しているサイトでも、お客様からの原稿どおり記述していることがほとんどです。

しかし、公開してしまえば最後。スパムメールの餌食です。
お問い合わせ用に使っているmailto:info@domain.com…系のアドレスは、会社内でまず、受信したくないものですよね…

サイト内にEメールアドレスを記述する場合のスパム対策として挙げられているものを、いくつかご紹介。

ハンドメール

http://handmail.org/ ハンドメールは、ホームページに含める連絡アドレスを、テキストではなく画像にする無料サービスです
フォントサイズ、色、背景色、フォントスタイルも選べるので、自分のサイトに合った画像化アドレスを手っ取り早く、カンタンに作ることができて便利です。

ただし、アドレスリンクを貼っていないと、ユーザビリティ的にはNGかもしれません。ユーザーにいちいち画像をみて、アドレスを手打ちしてもらう手間は、やはりかけさせたくないものです。

そこで次に、アドレスリンクを残しつつ、できる対策のご紹介。

アドレスのHTMLエンティティ化

たとえば
mailto:info@domain.com
このように見せたいとき。
<a href="mailto:info@domain.com">info@domain.com</a>
このようにそのまま記述するのではなく、
<a href="mailto:m&#97;&#105;&#108;to&#58;i&#110;&#102;o &#64;d&#111;m&#97;&#105;&#110;.&#99;&#111;m">m &#97;&#105;&#108;to&#58;i&#110;&#102;o&#64;d&#111;m &#97;&#105;&#110;.&#99;&#111;m</a>
このように、エンティティコードに置き換えて記述することで、ブラウザで見ているユーザーには支障なく見れて、且つ自動収集プログラムなどから見つかり難くなります。

その変換をさくっとやってくれるエンティティ生成ツールもvector窓の杜などにもあります。

参照元:アドレスのHTMLエンティティ化

»続きを読む

前の10件 21  22  23  24  25  26  27  28  29  30  31