【WordPress】ニコニコ動画用埋め込みプラグイン”WP-Nicodo”の導入とカスタマイズ(カスタムテンプレート、動画サイズのレスポンシブ化)

シェアする

ニコニコ動画埋め込み用のWordPressプラグイン”WP-Nicodo“の導入とカスタマイズについての話です。

スポンサーリンク

デモンストレーション

埋め込まれた動画は、PCでは680x510px、スマホでは280x210pxで表示されます。


再生 : 1,009,797 コメント : 115,229 マイリスト : 16,362

15:11
2007/11/28 11:46 投稿
最終兵器子猫
どこまで耐えられるかな?(・∀・)   ※第二次ニコニコ大戦勃発【sm5211661】 ※うpリスト→【mylis...
うーーーーーーーーー 最終兵器マタタビミサ なんかジバニャン可哀 全員これに乗れ みんな乗りが 特殊作戦軍第一空挺団 ーーーーーーーーーー

ダウンロード・インストール方法

1.WP-Nicodoの開発者であるHN.アカベコ氏のサイト『アカベコマイリ』の当該HPへアクセス。

2.Zip形式で圧縮されて公開されている最新のファイルをPCにDL(現時点では2013/12/23公開のwp-nicodo-v1.2.0.zipが最新)

3.DLしたZipファイルをWordPressの『プラグインのアップロード』でアップロードし、有効化する。

使い方・カスタマイズ

基本的な使い方は公式マニュアルをご覧ください。

公式マニュアルをご一読頂いき理解されている前提で、下記からはカスタマイズの説明となります。

テンプレートにタグが表示されている件

これはABCP-weblogさんのカスタムテンプレートに手を加えたものです。

相違点はタグ一覧のタグ一つ一つをSEO対策を兼ねてstriongタグで囲っている点です。

[tags/]<a href="http://www.nicovideo.jp/tag/[value]" target="_blank"><strong>[value]</strong></a>[/tags]

このカスタマイズの手順は以下の通りです。

1.WP-Nicodoのプラグイン設定画面を開き、『テンプレート』の欄にABCP-weblogさんのページからコピーしたHTMLコードをペーストして、ページ最下部の『設定を更新』ボタンをクリックします。

2.同じくABCP-weblogさんのページにあるCSSコードを書き加えます。

この際、書き加える方法には以下の2通りがあり、どちらにするかは各自に委ねます。

方法1:ワードプレスの使用中のテーマの”style.css”またはその子テーマに直接書き込む。

方法2:先ずFTPを開いてプラグインディレクトリの”wp-nicodo”に格納されている”nicodo.css”に書き加えて保存し、その後でプラグイン設定画面のスタイルシートのチェックボックス『スタイルシートを使用する』にチェックを入れて設定更新する。

PCとスマホでは外部プレーヤーのサイズが異なる件

これは和洋風KAIさんの解説を参考にさせていただきました。

PC用のCSSに下記のようなコードを書き加えるとPC表示の際にはそのサイズになるという仕組みです。

幅(width)の指定は使用中のテーマのメインカラムの幅を基にその前後のpx値(※1)で設定する事になります。

一方で、高さ(height)は投稿が古い動画のアスペクト比を考慮して幅の4分の3のpx値を指定することをお勧めします。

embed[src*="nicovideo.jp"]{
 width: 680px;
 height: 510px;
 }

※1…現在、このブログでは”Simplicity”の同幅と同じ”680px”で設定しています。

このカスタマイズの手順は以下の通りです。

1.WP-Nicodoのプラグイン設定画面を開き、『ニコニコ外部プレイヤーのサイズ』にある幅の欄に”300″、高さの欄に”225″と入力して設定を更新します。

なお、この際に併せて『表示方法』で『ニコニコ外部プレイヤー』を選択しておくと、以降の動画サイズの入力が省けて利便性が向上するのでオススメです。

2.上述を参考にCSSコードを書き加えます。勿論、幅と高さの値は各自で決めてください。

ただし、このCSSコードを書き加える場所は先程のカスタムテンプレートとは違い、使用中のテーマの”style.css”またはその子テーマに直接書き込む方法の一択となります。

理由はスマホ表示時にこのCSSコードを読み込ませてはいけないからです。

ゆえに、使用中のテーマの仕様に気を付けて、PC表示時に読み込まれるCSSファイルのみに書き加えてください。

あとは…

下記の展示例のように動画IDをショートコード(※2)で囲えば外部プレーヤーやカスタムテンプレートに置換されます。

[nicodo]sm1643138[/nicodo]←外部プレーヤー
[nicodo display="template"]sm1643138[/nicodo]←カスタムテンプレート

※2…展示例では置換させないために”nicodo”の”n”を全角にしています。コピペで使用する場合には半角に統一してください。

なお、一つのショートコードで外部プレーヤーやカスタムテンプレートを同時に表示する事は仕様上不可能(でも改造すればできるかも?)なので、デモンストレーションでは展示例のようにショートコードを二つ続けて書いています。