pikopod

pikopodとは、ピコカキコプレイヤーをiPod風に見せるhtmlテンプレートの事である。製作者は大百科編集者であるイルカイダー氏。

概要

「pikopodなの!」

グルメレース

右にあるのがpikopodそのものである（例示作品は「ノーマルブラック」のpikopodを使用、お絵カキコ、ピコカキコともにID1の作品を指定している）。

単体ではデザイン的に記事に反映しづらいピコプレイヤーも、これを使うことによって非常に見栄えよく記事に追加しやすい。

またお絵カキコと違いピコプレイヤー単独では投稿された掲示板に飛ぶことが出来ない部分も、タイトルをクリックすればピコカキコが投稿された掲示板に飛べる仕様になっているなど至れり尽くせりな内容になっている。

htmlソースはイルカイダー氏のユーザー記事の過去リビジョンにて公開されており
(イルカイダーさんのページ　09/05/20 22:08版)、この記事にも転記している。

導入方法

「記事編集」にて、HTMLエディタ無効のもと、下のラインナップから任意のpikopodのソースをコピー、「変更してください」とコメントの書かれている箇所の内容を書き換える。

画像は1:1ならそのままで問題ないが、そのほかの比率の場合は適宜marginやサイズなどを調整して見栄えを整えよう。

• 過去リビジョンのソースってどうやってみるの？
  →ユーザー記事最下段にある「編集履歴」をクリック、当該する版を「基に執筆」、htmlエディタを無効にする。
  このリンクから直接飛ぶこともできる。
• 上記のように記事の右側に載せたい。
  →htmlソース最上段にある<div style="width: 156px;">を<div style="width: 156px; float: right;">に変えてみる。
• やや裏技的ではあるが、動画サムネやコミュサムネなどをお絵カキコの代わりに使うことも可能ではある。（ただしサイズの調整が必要になる）

pikopod ラインナップ

ふたりの記憶 ピンク	うっう～ オレンジ	GO MY WAY!! イエロー	あふぅ フレッシュグリーン
TOWN レッド	Colorful Days ホワイト	てってってー ブラック	「i」 REM@STER-A ノーマルグリーン
アドバタイズ クリムゾンレッド	春の日差し パープル	蒼い鳥 ブルー	アドバタイズ ターコイズブルー
私マーメイ♪ ノーマルブラック	おはよう!! メカご飯 pikopod F	コンピュータお姉さん pikopod classic

簡略版

グルメレース

※※※※※　pikopod powered by イルカイダー　※※※※※ グルメレース

従来のpikopodでは、光沢のグラデーションや丸みが一つ一つdivのタグで表現されていた。とてもそれっぽい外観を再現しているが、そのために結構な長さのコードとなっていて、記事の編集がやや煩雑になることがあった。

そのため、ら・びた・ふっじ氏はこれを大きく簡略化した「pikopod nano」を考案している（リンク、当項目右上）。曲線、グラデーションなどの装飾を極力省き、サムネイル表示含む最低限の要素を残している。

また、2018年よりニコニコ大百科ではグラデーションや角丸といった要素が使用可能になり、それら表現を、形状はほぼそのままに記述をコンパクト化することができるようになった。言うなればpikopod miniといったところ。

右部二番目にあるのがそれを実践した簡略版である（簡素化:ぎみっく氏、れね氏）。

外観の細部は異なるものの、コードの大幅な短縮に成功していることから記事のソース上で扱いやすく、グラデーション(linerar-gradient)の色（端の色、中間色、真ん中の色）さえ抑えておけば色調の変更も容易である。

以下に「オレンジ」「ノーマルブラック」のサンプルコードを例示する。右寄せしたい場合は従来版と同様に、一個目の<div style="〜">内にfloat: right;を入れればよい。

書き換えをある程度楽にしてくれるスプレッドシートもGoogleスプレッドシートにて用意されている（ぎみっく氏による）。

オレンジ

<div style="display: none;">※※※※※　pikopod powered by イルカイダー　※※※※※ </div>
<div style="width: 156px; background: linear-gradient(90deg, #66401a, #b3702d 20px, #ffa040 58px, #ffa040 98px, #b3702d 136px, #66401a); padding: 12px 0 32px; border-radius: 78px / 2px;">
<div style="border: #000000 solid; border-width: 6px 7px; border-radius: 2px; margin: 11px 10px 32px; background-color: #333333; text-align: center;">
<div style="color: #0080a0; font-size: 12px; line-height: 14px; padding: 0px 2px 1px;"><a href="【ピコカキコ投稿レスのURL】" title="ピコ師：【ピコ師名】">【ピコカキコタイトル】</a></div>
<div style="height: 120px; overflow: hidden;"><img src="【画像URL】" alt="絵師：【絵師名】" width="120px" height="120px" /></div>
<div style="border-top: 1px #808080 solid; background-color: #fff; height: 18px;"><img src="/img/pikoplayer.png" alt="【ピコカキコ番号】" /></div>
</div>
</div>


ノーマルブラック

<div style="display: none;">※※※※※　pikopod powered by イルカイダー　※※※※※ </div>
<div style="width: 156px; background: linear-gradient(90deg, #211a1a, #433d3d 6px, #080000 46px, #080000 110px, #433d3d 150px, #211a1a); padding: 12px 0 32px; border-radius: 78px / 2px;">
<div style="border: #000 solid; border-width: 6px 7px; border-radius: 2px; margin: 11px 10px 32px; background-color: #333; text-align: center; ">
<div style="color: #0080a0; font-size: 12px; line-height: 14px; padding: 0px 2px 1px;"><a href="【ピコカキコ投稿レスのURL】" title="ピコ師：【ピコ師名】">【ピコカキコタイトル】</a></div>
<div style="height: 120px; overflow: hidden;"><img src="【画像URL】" alt="絵師：【絵師名】" width="120px" height="120px" /></a></div>
<div style="border-top: 1px #808080 solid; background-color: #fff; height: 18px;"><img src="/img/pikoplayer.png" alt="【ピコカキコ番号】" /></div>
</div>
</div>


配色パターン

イルカイダー氏が作成したカラーパターンと対応する、pikopod mini用の配色情報を表で示した。

上記に示した「オレンジ」のテンプレート内、背景色の変わっている箇所と色が対応している行の色に書き換えればよい。

		ベース色(真ん中の色)	グラデーション中間色	両端色(端の色)
ピンク		#ff9090	#b36464	#663939
オレンジ		#ffa040	#b3702d	#66401a
イエロー		#ffd000	#b39200	#665300
フレッシュグリーン		#a0e010	#709d0b	#405a06
レッド		#ff3020	#b32216	#66130d
ホワイト		#f0ffff	#a8b3b3	#606666
ブラック		#606060	#434343	#262626
ノーマルグリーン		#00a030	#007022	#004013
クリムゾンレッド		#b84048	#812d33	#4a1a1d
パープル		#b06090	#7c4365	#46263a
ブルー		#0070ff	#004fb3	#002d66
ターコイズブルー		#00b0c0	#007c87	#00464d

配色パターン生成ツール

上記テンプレートで使用できる配色を生成するためのツール。記事編集から背景色を書き換えて使う。

1. ベース色の背景色(background)に使いたい色を入れる。
2. ブラウザの開発者ツールでそれぞれの表示された色をスポイトで抽出する。

中央の色(ベース色)

中間色

両端色

関連項目

グルメレース

MPP(kari)

• イルカイダー（本当にありがとうございます！）
•  ピコカキコ
  • ピコカキコ関連記事の一覧
• MPP(kari)
  
  • あずまうど氏による小型のピコカキコプレイヤーテンプレート（右）。
• ニコニコ大百科:HTMLテンプレート集