タグ

2015年3月8日のブックマーク (3件)

  • JavaScriptで構築している箇所もHTMLと同等にGoogleにインデックスされつつある - F.Ko-Jiの「一秒後は未来」

    久しぶりに Google のウェブマスターツールにある「コンテンツ キーワード」でこのブログのキーワードを確認していたら、なぜか2位に「users」というキーワードがあるのを見つけました。 試しに Google でサイト内検索してみると、サイドバーに表示している「はてブ数順 人気エントリー」の部分が検索結果のスニペットに表示されていました。 ↑ この「471 users」などの記述は、 ↑ サイドバーのこの部分にだけあるもの。 「ページに表示してるんだからスニペットに表示されて当然なのでは?」と思われるかもしれませんが、この部分は JavaScript を使って動的に構築している部分なのですよね。具体的には、懐かしの Yahoo! Pipes で出力した JSON データを読み込んで jQuery を使用して動的にリストを構築しています。 http://blog.fkoji.com/onl

    JavaScriptで構築している箇所もHTMLと同等にGoogleにインデックスされつつある - F.Ko-Jiの「一秒後は未来」
    tororo_z
    tororo_z 2015/03/08
  • highlight.js - 100種類の以上の言語に対応したコードハイライター MOONGIFT

    ブログやWebサイトでプログラミングコードを載せる際に必要になるのがハイライト処理です。単純にコードをそのまま載せても可読性はとても低いです。ハイライトライブラリを使って、見やすくすべきです。 個人的にはGoogleが作っているgoogle-code-prettifyをよく使っていたのですが、highlight.jsも使いやすそうです。 highlight.jsの使い方 左側のコードが表示例。テーマも用意されています。 Apacheの設定ファイルも対応しています。 CoffeeScriptにももちろん対応。 Diff。 HTTPヘッダー、iniファイルにも使えます。 Apacheがあればnginxももちろんあります。 highlight.jsは112言語、49のテーマが用意されています。HTML/JavaScript/スタイルシートのようにマルチ言語に対応したハイライトが行えます。言語も自

    highlight.js - 100種類の以上の言語に対応したコードハイライター MOONGIFT
    tororo_z
    tororo_z 2015/03/08
  • CSSで括弧を表現したサンプル - NxWorld

    丸括弧() 頭から微妙な見栄えですが、**丸括弧()**を表現してみたものです。 HTMLCSSはそれぞれ下記のようになっており、擬似要素を使って生成したものにborder-radiusを指定します。 <div class="parenthesis"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... </p> </div> .parenthesis { position: relative; width: 500px; padding: 15px 30px; -webkit-box-sizing: border-box; box-sizing: border-box; } .parenthesis::before, .parenthesis::after { position: absolute; top:

    CSSで括弧を表現したサンプル - NxWorld
    tororo_z
    tororo_z 2015/03/08