ピコプレイヤーピコ 単語

ピコプレイヤーピコ

9.9千文字の記事
これはリビジョン 3028156 の記事です。
内容が古い・もしくは誤っている可能性があります。
最新版をみる
8561
7465
概要

ピコプレイヤーピコとはピコカキコプレイヤーから再生ボタンを取り出したアイコンプレイヤー群の総称である。
音量調整や再生時間などの機能すら投げ捨て、再生さえできればいい、そんな場面で活躍する。

用途としては文中に埋め込む、大量にリスト表示するなど、少しでも小さく表示したい場合に使用する。
「pikopod」や「MPP(kari)」がプレイヤーを大きくすることで多くの情報を詰め込むコンセプトとは真逆である。

名称末尾のピコはピコカキコのピコ(piko)ではなく、nanoより小さい単位のpicoからきている。
「MPP(kari)」が「ミニ・ピコ・プレイヤー（仮）」なので、ピコプレイヤーピコの略称はPPPとなる。(たぶん)

1917
応用と注意点

ピコカキコプレイヤーを作成する際のパーツとしても活用できる。
CSSと組み合わせることにより、「ピコジュークボックス」のようなものも作成できる。
ピコジュークボックスを作成する際に=ω=)ノ(のみりん)氏の行った基礎研究がピコプレイヤーピコに該当する。

13458
遅延読み込み

改造するときの注意点として、ピコカキコプレイヤーは画像のため、遅延読み込みの影響を受けてしまう。そのため、画像の上部や左部をある程度表示範囲外にすると読み込まれなくなる場合がある。
ALT(代替文字兼ピコカキコ番号指定)を設定している場合、画像が表示されないケースが増加する。
より小さなサイズのものほど仕様変更の影響を受けやすいため、リスクを理解しておかなければならない。

1958
IMG画像のCSS仕様

IMGタグに書かれたCSSはクリック時にピコカキコプレイヤーに置き換えられて消えてしまうため、改造する際には工夫が必要になる。
スマホ版ではma-widthが100%と設定されているため、設定を上書きするためにmax-widthの設定は必須である。

12577
 設定を上書きしなかった場合（max-width:100%)を再現。
2664
 クリックをした際に画像IMGタグのCSSが消えることの確認。
1230
導入方法

デザインやサイズ、ソースコード量、リスクを考慮し複数用意している。

文中で使用するものは、ソースコード量が増えるため、必要なときのみの使用し【左側】【右側】部分を書き換えると良い。

【ピコカキコ番号】部分にピコカキコ番号を指定することで動作する。指定しない場合はアイコンとして使用できる。
【ピコカキコタイトル】部分にはカーソルを合わせた時に表示するピコカキコの情報を記載できる。省略しても動作するため、記事中で説明する場合にはtitleの項目ごと削除しても良い。

音量調節については、ALT（代替文字兼ピコカキコ番号指定）をしないことでピコカキコの音量調節のみに使用できる。記事中に1つ設定しておくと安心できる。

赤字箇所は元になったモデルとの主な変更点。

12577
18 × 18
ピコプレイヤーピコ（ライト）
ボタンを小さくしソースコードもシンプルにしたいとき用
背景が白ならこれで十分。		 
<div style="overflow: hidden; width: 18px; height: 18px; ">
  <img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" />
</div>
左
11925
右
18 × 18
ピコプレイヤーピコ（ライト）
ボタンを小さくしソースコードもシンプルにしたいとき用（文中）
背景が白ならこれで十分。		 
<div>
  <div style="float: left;">【左側】</div>
  <div style="overflow: hidden; width: 18px; height: 18px; float: left;">
    <img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" />
  </div>
  <div>【右側】</div>
</div>
2118
16 × 16
ピコプレイヤーピコ（スタンダード）
ボタンの枠線まで小さくしたいとき用		 
<div style="overflow: hidden; width: 16px; height: 16px; border-radius: 3px;">
  <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
</div>
左
1634
右
16 × 16
ピコプレイヤーピコ（スタンダード）
ボタンの枠線まで小さくしたいとき用（文中）		 
<div>
  <div style="float: left;">【左側】</div>
  <div style="overflow: hidden; width: 16px; height: 16px; border-radius: 3px; float: left;">
    <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
  </div>
  <div>【右側】</div>
</div>
17685
14 × 14
ピコプレイヤーピコ（ピコ）
ボタンの枠線すら消したいとき用		 
<div style="overflow: hidden; width: 14px; height: 14px; border-radius: 3px;">
  <div style="margin-top:-2px; margin-left: -2px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
</div>
左
13207
右
14 × 14
ピコプレイヤーピコ（ピコ）
ボタンの枠線すら消したいとき用（文中）		 
<div>
  <div style="float: left;">【左側】</div>
  <div style="overflow: hidden; width: 14px; height: 14px; border-radius: 3px; float: left;">
    <div style="margin-top:-2px; margin-left: -2px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
  </div>
  <div>【右側】</div>
</div>
13458
↑
16 × 16
ピコプレイヤーピコ（NINJA）
クリックしたときのみ現れるギミック用（スタンダードベース）
スタンダードとの違いは赤字の透明設定部分(opacity)		 
<div style="overflow: hidden; width: 16px; height: 16px; border-radius: 3px;">
  <div style="margin-top:-1px; margin-left: -1px;"><img style="opacity: 0; max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
</div>
182
↑
16 × 16
ピコプレイヤーピコ（インビジブル）
クリックしたときでも透明なギミック用（スタンダードベース）
スタンダードとの違いは赤字の透明設定部分(opacity)		 
<div style="opacity: 0; overflow: hidden; width: 16px; height: 16px; border-radius: 3px;">
  <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
</div>
9002
18 × 18
ピコプレイヤーピコ（おちゃめ機能付き）
クリックしたときのみ現れるギミック用（ライトベース）
NINJAとペルソナの中間、NINJAとの違いはピコカキコプレイヤーが伸びること。
使いこなすのは難易度高め。		 
<div style="background: url(【背景用画像URL】) no-repeat ; max-width: 86px; height: 18px;">
  <img style="opacity: 0; height: 18px; width: 18px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" />
</div>
12577
16 × 16
ピコプレイヤーピコ（ペルソナ）
インビジブルモデルに背景画像を設定したモデル。
インビジブルとの違いは赤字の背景画像設定部分。		 
<div style="background: url(【背景用画像URL】) no-repeat; ">
  <div style="opacity: 0; overflow: hidden; width: 16px; height: 16px;">
    <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
  </div>
</div>
9002
12856
345
3804
17685
13468
7688
2664
5937
1655
832
1
19358
9728
409
150
16 × 16
ピコプレイヤーピコ（シャッフル）
ボタン１つに何曲も内蔵したいとき用
ペルソナモデル内部のピコカキコプレイヤーを小さくし並べている。
widthを調整することで内蔵曲数を減らすことも可能。内蔵曲数を増やす場合はheightを小さくし追加すれば理論上は16曲×16曲(256曲)まで収録できる（そのためのfloat）。widthとheightを調整することで、格子状などにも簡単に対応できる。title部分を記入しないことで内容を不明にする事も可能。		 
<div style="background: url(https://dic.nicovideo.jp/img/pikoplayer.png) -1px -1px no-repeat; width: 16px; height: 16px;">
    <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;">
        <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
    </div>
    <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;">
        <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
    </div>
    <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;">
        <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
    </div>
    <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;">
        <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
    </div>

    <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;">
        <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
    </div>
    <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;">
        <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
    </div>
    <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;">
        <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
    </div>
    <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;">
        <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
    </div>

    <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;">
        <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
    </div>
    <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;">
        <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
    </div>
    <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;">
        <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
    </div>
    <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;">
        <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
    </div>

    <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;">
        <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
    </div>
    <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;">
        <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
    </div>
    <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;">
        <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
    </div>
    <div style="opacity: 0; overflow: hidden; width: 1px; height: 16px; float: left;">
        <div style="margin-top:-1px; margin-left: -1px;"><img style="max-width:86px;" alt="【ピコカキコ番号】" title="【ピコカキコタイトル】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
    </div>
</div>
50 × 18
音量調整
ALTを設定すると、画像の遅延読み込みの影響で表示されない場合がある。		 
<div style="overflow: hidden; width: 50px; height: 18px;">
  <div style="margin-left: -36px;"><img style="max-width:86px" title="ボリューム調整" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
</div>
左
右
50 × 18
音量調整（文中）
ALTを設定すると、画像の遅延読み込みの影響で表示されない場合がある。		 
<div>
  <div style="float: left;">【左側】</div>
  <div style="overflow: hidden; width: 50px; height: 18px; float: left;">
    <div style="margin-left: -36px;"><img style="max-width:86px;" title="【ボリューム調整】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
  </div>
  <div>【右側】</div>
</div>
50 × 9
音量調整ピコ
ALTを設定すると、画像の遅延読み込みの影響で表示されない場合がある。		 
<div style="overflow: hidden; width: 50px; height: 9px; border-radius: 6px;">
  <div style="margin-top:-8px; margin-left: -36px;"><img style="max-width:86px;" title="ボリューム調整" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
</div>
左
右
50 × 9
音量調整ピコ（文中）
ALTを設定すると、画像の遅延読み込みの影響で表示されない場合がある。		 
<div>
  <div style="float: left;">【左側】</div>
  <div style="overflow: hidden; width: 50px; height: 9px; border-radius: 6px; float: left;">
    <div style="margin-top:-8px; margin-left: -36px;"><img style="max-width:86px;" title="【ボリューム調整】" src="https://dic.nicovideo.jp/img/pikoplayer.png" /></div>
  </div>
  <div>【右側】</div>
</div>
記事内にピコプレイヤーピコの応用例がいくつ実装されているか数えてみてね！
302
関連項目
13726
ピコカキコ
653
ピコカキコプレイヤー
667
ピコジュークボックス (=ω=)ノ(のみりん)氏作)
1655
ピコカキコ関連記事の一覧
150
ニコニコ大百科:HTMLテンプレート集
きみだけのピコカキコプレイヤーを作ってみよう！
関連記事

親記事

子記事

  • なし

兄弟記事

おすすめトレンド

ニコニ広告で宣伝された記事

記事と一緒に動画もおすすめ！
初音ミク[単語]

提供: ゲスト

1837万pt
もっと見る

急上昇ワード改

最終更新：2025/12/12(金) 13:00

一覧をみる

ほめられた記事

最終更新：2025/12/12(金) 13:00

一覧をみる

ウォッチリストに追加しました！

すでにウォッチリストに
入っています。

OK

追加に失敗しました。

OK

追加にはログインが必要です。

キャンセル

ログイン

           

ほめた！

すでにほめています。

ほめるを取消す

 

 

OK

すでにほめています。

ほめるを取消す

 

 

OK

ほめるを取消しました。

OK

ほめるに失敗しました。

OK

ほめるの取消しに失敗しました。

OK

ほめるにはログインが必要です。

キャンセル

ログイン

タグ編集にはログインが必要です。

キャンセル

ログイン

タグ編集には利用規約の同意が必要です。

キャンセル

利用規約を読む

TOP

運営元:ドワンゴ
新しく記事を作る
PC版