備忘録」カテゴリーアーカイブ

lightboxの設置

--- 2016年7月4日 (月) ---

まず [lightbox] をダウンロードし 圧縮ファイルを展開すると、いくつかのフォルダとファイルが解凍される。基本的に、使用するのは「js」フォルダの中にある[lightbox.js]と、「css」フォルダの中にある[lightbox.css]、それと「img」フォルダの中の、ベースとなる4つの画像(close.png、loading.gif、next.png、prev.png)だ。

手順
(1)まず html ファイルの <head>〜</head> 内の任意の場所に、以下のコードを記述する。

<link rel=”stylesheet” href=”css/lightbox.css”>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”js/lightbox.js” type=”text/javascript”></script>

各ファイルへのパスは環境に合わせて書き換えること。

(2)続いて <body>〜</body> 内の[Lightbox]を組み込みたい箇所のアンカー要素に「rel=”lightbox”」を追加し、さらに、「href」プロパティでは拡大表示させたい画像を指定。具体的には以下のような記述になる。

<a href=”images/img-1.jpg” rel=”lightbox”><img src=”images/thumb-1.jpg” alt=”” /></a>

また、[Lightbox]には画像をグループ化して前後の画像とリンクさせることも可能で、この場合は、通常「rel=”lightbox”」と記述するところを、「rel=”lightbox[sample-group]”」と書き換えればOK。[sample-group]の文字は自分で適宜決める。

ほとんどのサイトが以上の様に設置方法を紹介している。ところが、これでは動かなかった。で、探し回っているとここに解決方法があった。

<script src=”js/lightbox.js” type=”text/javascript”></script>

この一行を </body> の直前に入れる。これで動いた!! ありがとう!

オーディオプレーヤー(wonderplugin-audio)

--- 2015年11月11日 (水) ---

11audio-player
このブログではBGMを流すのに wonderplugin-audioのFree版を使っている。これにたどりつくまでにいろんなプレーヤーを探しては試しを繰り返した。今のところこれが一番いいのだが一つだけ不満なところがあった。それはデフォルトのボリュームが設定できないのだ。skypを使っている友人にはPCのボリュームを最大にしている者もありページを開いた途端大音量で急いでボリュームを絞る、「初めから小さい音にしておいてよ」といわれていた。何とかならないかとjsファイルを開きvolumeなどという文字があるところの数値をいじったりはしてみたが、知識もなくスキルなしの素人にはできるはずもなく、そのためmp3のファイルをMP3Gainで音量を落として載せるという手間をしていた。

先日バージョンアップの知らせがあり、新しいバージョン3.7でデフォルトのボリュームを変えることができるようになった。さらに数日後3.8にバージョンアップされ、オーディオリスト関係のオプションが2つ追加されていた。

What’s New
Version 3.8
 ・プレイヤーのデフォルトのボリュームを設定するオプションを追加
 ・オーディオリストを逆にする機能を追加

Version 3.7
 ・プレイヤーのデフォルトのボリュームを設定するオプションを追加

早速ダウンロード、設定も簡単だ。
WonderPulugin audio playerからManage Existing Audio Playersを開き該当するプレーヤーのIDのEditをクリックしてDesiningのOptionsを開けばDefault volumeという設定項目が追加されている。チェックボックスを入れ0から100の適当な数値としSave & PublishでOK。
これで今は音量を30にしている。ますます使い勝手が良くなった、感謝感謝!。

wonderplugin-audio のダウンロードはこちら
インストール、設定はこちらのサイトに詳しく書かれています。

記事へ投稿日を挿入

--- 2013年5月16日 (木) ---

index.phpのスタートループの箇所へ、下記の太字部分を追加した。

<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>

<p style=”margin:5px 0 15px 24px;color:peru;”>投稿日:<?php the_time(‘Y年n月j日’); ?></p>

<?php get_template_part( ‘content’, get_post_format() ); ?>
<?php endwhile; ?>