Article - Category

WEBフロントエンド

  • このエントリーをはてなブックマークに追加

    なにかの要素が追加されたのをトリガーにして処理をしたいときに、 jQuery の on を使えば便利です。
    hulu の Chrome 拡張を作ったときに on を使って要素を監視したので、少しだけまとめます。

    マウスオーバーでサムネイルをポップアップさせない

    僕の場合、↑の記事でも紹介していますが、
    hulu はサムネイルにマウスを乗せると、詳細がポップアップで表示されます。
    これが大変なストレスになったので、いっその事なくしてしまおう、という機能ですね。笑

    サムネイル、つまり動画リストの要素をまずは見つけます。
    vod-mod-tray__content, 或いは vod-mod-series-area__tray っていう class 以下にいるようでした。(これは js で動的に追加されている)
    article タグを div に変更してポップアップ要素を表示しているようでした。

    <div class="vod-mod-tray__content">
    ...
    ...
        <div class="vod-mod-tray__item vod-utl-panel-opener">
            <a><img src=""></a>  <!-- ここにサムネイル画像 -->
            <article>....ここにポップアップ時に表示するHTML</article>
        </div>
    </div>
    

    続きを読む

  • <2017/06/13 09:00>
  • WEBフロントエンド
  • JavaScriptイベントハンドラ要素監視hulujQueryonmouseover
  • このエントリーをはてなブックマークに追加

    wordpress, movable type, concrete 5 とか…いわゆるブログシステムを使ってなくて、
    独自で実装しているサイトにアイキャッチ画像を設定したい場合は自分で設定しなきゃいけません。(当たり前)

    アイキャッチ画像とは

    twitter

    facebook


    鬱陶しいことに、facebook, twitter などサービスの違いによって異なる設定をしなければなりません。
    ぼくは以下のように設定しました。(しています@このサイトで)

    続きを読む

  • <2017/02/07 22:33>
  • WEBフロントエンド
  • アイキャッチeyecatchfacebooktwitterブログ
  • このエントリーをはてなブックマークに追加

    ただの作業メモ

    ・使ったライブラリ
    highlight.js


    162言語、72のスタイルに対応しているようです。

    上記サイトからダウンロードをしますが、ダウンロード前にどの言語を有効にするかを
    選べるようになっているので、自分に必要な物を追加でチェックします。

    ここ

    自分の場合は、Django, YAML, SCSSを追加でチェックしました。

    ZIPがダウンロードされるので、あとはサイトに設置するだけ。
    highlight.pack.jsが本体。
    その他、諸々のスタイルが記述されてるCSSが格納されています。(設置はどれか一つでOK)


    続きを読む

  • <2016/07/16 18:14>
  • WEBフロントエンド
  • WEBフロントエンドsyntaxhighlightシンタックスハイライトjavascriptcsshtml
profile picture

自己紹介的な何か

@wkmettyでついったーやってます。時々。 6年間勤めたゲーム会社を2018年2月に退職しフリーランスのプログラマに。 WordPress Core, WP-CLI コントリビューター。 お仕事募集中です。