2010.03.13.

WordPlessでページナビゲーションを表示する

WordPlessのプラグイン「WP-PageNavi(バージョン 2.61 )」を入れてみました。例によって自分のブログに合わせてデザインを変更してみます。

まずインストールしたらページナビを表示したい場所に

<?php if(function_exists('wp_pagenavi')) {
wp_pagenavi();
} else {
vicuna_paging_link('next_label=Newer Entries&prev_label=Older Entries&indent=2');
} ?>

を記入。これだけ。

サイトを表示してみると、こんな感じでナビが出てきていると思います。これはページの数が少ないと「« First」が出ないなど、ページ数によって表示のされ方が変わってきます。

さて、今度はまたWordPlessのダッシュボードに戻って、左サイドの下にある設定をクリック。さらにその中に「PageNavi」の設定があるはずです。それを開くと Page Navigation Options が出てきます。

Text For Number Of Pages はページナビの「Page 5 of 14」部分。私はジャマくさいので削除しました。
Text For First Page は「« First」。Text For Last Page は「Last »」。
Text For Next Page とText For Previous Page はそれぞれ「»」「«」です。ここは自由に書き替えられます。
例えば「« First」」を「最初のページへ」などと変えることが出来ます。
私は Text For Number Of Pages のところを削ってしまいましたが、やっぱり全体のページ数はどこかに表示したいと思ったので、Text For First Page に「« First ( P 1 )」、Text For Last Page に「Last ( P %TOTAL_PAGES% ) »」を入れてみました。
「%TOTAL_PAGES%」は全体のページ数を表示するので「Last ( P 14 ) »」などと表示してくれるはずです。Firstの ( P 1 ) は無くてもいいんですが、Lastと一緒に表示されたときにバランスが悪いので入れました。
設定が終わったら下の方にある「Save Changes」を押して設定完了です。
あまり長くなりすぎると途中で折り返されてしまって、表示が崩れることもあります。Page Navigation Options ではさらに、ページ番号をいくつまであらわすかなど細かく設定できるので、表示範囲の横幅寸法に合わせて調整するとよいでしょう。

最後にまたダッシュボード、左サイドバーの「プラグイン」の中の「編集」を開きます。右側に出てくる「編集するプラグイン」で「WP-Pagenavi」を選んで「選択」ボタンをクリック。さらにその下にある「wp-pagenavi/pagenavi-css.css」をクリックするとcssの編集画面になります。cssを変更する前にいつでも元に戻せるように、必ずコピーしてバックアップしておきましょう。後はここで好みに合わせてcssを編集すれば、オリジナルページナビの完成です。
あるいは、- wp-content/plugins/wp-pagenavi/pagenavi-css.css の pagenavi-css.css ファイルを差し替えてしまってもいいです。

私が編集したcssはこんな感じ。ezorisu-webのHomeからずずーっと下の方にスクロールしていくと実物が見えます。

元のcssをそのまま上書きすれば同じように表示されます。そのまま使いたいという方は、どうぞご自由にお使いください。

.wp-pagenavi {
	text-align: center;
	font-size: 95%;
}

.wp-pagenavi a, .wp-pagenavi a:link {
	padding: 3px 4px;
	margin-right: 1px;
	text-decoration: none;
	color: #fff;
	background-color: #999; /* IE 用 */
	background: -moz-linear-gradient(top, #999, #666); /* Firefox 用 */
	background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#666)); /* Safari,Google Chrome用 */
}
.wp-pagenavi a:visited {
	color: #b3b3b3;
}
.wp-pagenavi a:hover {
	background-color: #666; /* IE 用 */
	background: -moz-linear-gradient(top, #777, #444); /* Firefox 用 */
	background: -webkit-gradient(linear, left top, left bottom, from(#777), to(#444)); /* Safari,Google Chrome用 */
}
.wp-pagenavi a:active {
	color: #ff8000;
	background-color: #e6e6e6;
}
.wp-pagenavi span.current {
	padding: 3px 4px;
	margin-right: 1px;
	color: #555;
	background-color: #e6e6e6;
}
.wp-pagenavi span.extend {
	margin-right: 1px;
	color: #333;
}
.wp-pagenavi a.previouspostslink {
	color: #fff;
}
.wp-pagenavi a.nextpostslink {
	color: #fff;
}
.wp-pagenavi a.first {
	padding: 3px 8px 3px 12px;
	color: #fff;
	-webkit-border-top-left-radius: 50px; /* Safari,Google Chrome用 */
	-webkit-border-bottom-left-radius: 50px; /* Safari,Google Chrome用 */
	-moz-border-radius-topleft: 50px; /* Firefox 用 */
	-moz-border-radius-bottomleft: 50px; /* Firefox 用 */
}
.wp-pagenavi a.last {
	padding: 3px 12px 3px 8px;
	color: #fff;
	-webkit-border-top-right-radius: 50px; /* Safari,Google Chrome用 */
	-webkit-border-bottom-right-radius: 50px; /* Safari,Google Chrome用 */
	-moz-border-radius-topright: 50px; /* Firefox 用 */
	-moz-border-radius-bottomright: 50px; /* Firefox 用 */
}

今回は位置的に区切り線の役割も持たせたかったので、地味めの色を付けてみました。
「First」と「Last」は進行方向に丸みを持たせ、バックカラーには少しグラデーションをかけてあります。これは最近話題のCSS3による新しい機能です。
Firefox、Safari、Chrome の最新バージョンで表示されるはずです。IEは対象外ですが、単純な四角いマス目に表示されるだけで機能的には支障ありません。特に画像ファイルを用意しなくても簡単にそれなりの見せ方が出来るのはいいですね。

CSS3はなかなか素敵な機能が他にもあって、楽しそうですがこの話はまた別の機会に。

【 訂正 】
上記css内で

CSS.wp-pagenavi a:hover {
	background-color: #6898af;
}

部分を

CSS.wp-pagenavi a:hover {
	background: -moz-linear-gradient(top, #777, #444); /* Firefox 用 */
	background: -webkit-gradient(linear, left top, left bottom, from(#777), to(#444)); /* Safari,Google Chrome用 */
}

に訂正しました。(すでに訂正済み) 2010年3月13日 20時35分
a:linkにグラデーションをかけたらa:hoverもグラデーションにしないと変わらないようです。

【 再訂正 】

申し訳ない、再訂正(上記cssは訂正済み) 2010年3月13日 23時00分。
.wp-pagenavi a, .wp-pagenavi a:link { } に「background-color: #999; /* IE 用 */」追加。
.wp-pagenavi a:hover { } に「background-color: #666; /* IE 用 */」追加。

IEは機能的には支障ありませんと書いてしまいましたが、CSS3でグラデーションを使う場合、background部分の表示が消えてました。IE用には何も指定してないことになるから当然ですね。IE用にbackground-colorを指定しておかなくちゃ。
ボックスの角丸の方は、丸くならず四角く表示されますが一応見られる状態にはなっています。

CSS3は試しながら使っているので、まだまだお試し期間というところです。

2010.03.11.

Twitterのつぶやきを簡単にブログへ貼り付ける

最近作り直した(まだ途中ですが)個人的日記ブログの中でTwitterを貼りつけてみました。ブログパーツはたくさん出ているのでいろいろ試してみましたが、なかなか気に入ったのが見つからなくて自分で改良を加えてみることに。
おおもとはTwitter公式サイトのJavaScript Badgeです。Flashは使いたくないので。

ツイートは最新の1件分だけでOK。アイコン表示必須で日付は日本語がいい。この条件であっちこっち調べながら作ったものをメモしておきます。

とりあえずの出来上がりはこんな感じ。

まずはJavaScriptの部分。

<script type="text/javascript">
function relative_time(time_value) {
time_values = time_value.split(" ");
time_value = time_values[1]+" "+time_values[2]+", "+time_values[5]+" "+time_values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset()*60);
if(delta < 60) {
	return '(1分以内)';
}
else if(delta < 120) {
	return '(1分前)';
}
else if(delta < (45*60)) {
	return '(' + (parseInt(delta / 60)).toString() + '分前)';
}
else if(delta < (90*60)) {
	return '(約1時間前)';
}
else if(delta < (24*60*60)) {
return '(約' + (parseInt(delta / 3600)).toString() + '時間前)';
}
else if(delta < (48*60*60)) {
	return '(昨日)';
}
else {
	return '(' + (parseInt(delta / 86400)).toString() + '日前)';
}
}

function twitterCallback(obj) {
var id = obj&#91;0&#93;.user.id;
document.getElementById('my_twitter_image').innerHTML = '<a href="http://twitter.com/' + obj&#91;0&#93;.user.screen_name + '"><img src = "' + obj&#91;0&#93;.user.profile_image_url + '" alt = "avatar" /></a>';
document.getElementById('my_twitter_status').innerHTML = obj[0].text;
document.getElementById('my_twitter_screen_name').innerHTML = '<a href="http://twitter.com/' + obj&#91;0&#93;.user.screen_name + '">' + obj[0].user.screen_name + '</a>';
document.getElementById('my_twitter_user_name').innerHTML = obj[0].user.name;
document.getElementById('my_twitter_status_time').innerHTML = relative_time(obj[0].created_at);
}
</script>


<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/■ツイッターのユーザー名■.json?callback=twitterCallback&count=1"></script>

42行目の「■ツイッターのユーザー名■」の部分は、実際に使ってるユーザー名に書き替えてください。私の場合だと「ezorisu」。パソコンのTwitter画面で、右上の設定を開くと自分で設定した「名前」とか「ユーザー名」とかがわかります。
script上はちょっと混乱してしまいますが、「obj[0].user.screen_name」が設定画面上の「ユーザー名」、「obj[0].user.name」が「名前」になっています。

IE対応と時差調整はCreazy!の「第4回:twitter の JavaScript Badge をIEで表示するとおかしい件に対応してみる」から、日付の日本語化には葛西総合研究所Blog-ENSIS Note3.5の「Twitterブログパーツを改造」記事から、codeを使わせていただきました。ありがとうございます。
他にもユーザーアイコンURLの取得方法やJavaScriptの基本的なことなど、いろいろなサイトを参考にさせていただいています。

私の改造部分は、アイコン画像を表示するためのURLを取得してimgタグでかこったうえでリンクタグを追加、表示名を取得してこれもリンクタグを追加したくらいです。
JavaScriptもあまりいじったことがなかったので、これが最善なのか分かりませんがとりあえずはツイートの中身は取り出せました。
書き込む場所は</body>の手前。これは最後に読み込む方が表示速度が遅いときにイライラしないから。

次はブログ内のTwitterを表示したい位置に以下のcodeを書きます。

<div id="my_twitter">
	<div id = "my_twitter_image"></div>
	<div id="my_twitter_status"></div>
	<div id="twitter_information">
		Twitter : <span id="my_twitter_screen_name"></span>
		<span id="my_twitter_user_name"></span>
		<span id="my_twitter_status_time"></span>
	</div>
</div>

後はcssで自分のサイトに合うように、サイズ、色、デザインを整えていきます。

#my_twitter {
	background-color: #c0deed; /*バックは好きな色で*/
	margin: 20px auto;
	padding: 10px 10px 5px 10px;
	width: 300px; /*全体の横幅*/
	font-size:12px;	
	line-height:1.4em;
}

#my_twitter_image {
	width: 60px; /*アイコン左寄せ部分の幅*/
	float: left;
}

#my_twitter_status {
	min-height: 34px;
	width: 240px; /*右寄せ部分は(全体の横幅 - 左寄せ部分の幅)*/
	float: right;
}

#twitter_information {
	font-size: 11px;
	text-align: right;
	padding: 5px 0 0;
	clear: both; /*フロート解除*/
}

#my_twitter_user_name {
	margin-left: 0.4em;
	color: #999999;
}

#my_twitter a {
	text-decoration: none;
}

#my_twitter a:hover {
	text-decoration: underline;
}

#my_twitter img {
	border: none;
}

これで最初のサンプル画像のようなTwitter Badgeの完成です。
これをたたき台にしてさらにこのあと、自分のブログに合わせていろいろ手を加えてみました。

実際に設置したものはこちら→「Sense of Wonder
メインエリアの上部に表示したかったので、サイズを横長にしてツイートはフキダシの中に入れました。アイコンも柔らかいイメージで角を丸めてあります。ただしIE6と7は、フキダシの角が丸くなりません。
デザインはいろいろ考えられそうですね。

参考サイト

ついでに参考図書も

JavaScriptの絵本
JavaScriptの絵本

posted with amazlet at 18.09.02
アンク
翔泳社
売り上げランキング: 243,932

ホントの大まかなところを押さえるにはわかりやすくていい入門書です。なにしろ初心者なので。細かいところはネットで検索。

2009.03.08.

CSSでドロップダウンメニュー

このブログを作るに当たって、いろいろと試行錯誤をした記録です。すぐ忘れてしまうので、覚書として書き留めています。今回はヘッダーのメニュー編。

CSSのドロップダウンメニューです。テストバージョンのオリジナルWordPress Themeで一部表示がおかしくなっているところがあったので、少し整理してみました。
ヘッダー部分に横並びメニューとしてデザインしていて、メニュー項目にカーソルを合わせると階層式に子メニューが表示される、よく見るタイプです。

まずはメニューなのでリンク項目であることを前提に、リストとしてマークアップします。(DEMOではリンク部分でも別のページに飛ばないようにしています)

<div id="menu-sample">
<ul>
  <li><a href="#">01 S</a>
  <ul>
    <li><a href="#">02 短く</a></li>
    <li><a href="#">02 ても</a></li>
    <li><a href="#">02 幅一定</a></li>
  </ul>
  </li>
  <li><a href="#">01 middle</a>
  <ul>
    <li><a href="#">02 Mサイズ</a></li>
    <li><a href="#">02 真ん中</a>
    <ul>
      <li><a href="#">03 長い文章も折り返さずに表示</a></li>
      <li><a href="#">03 一番長い横幅にそろいます</a>
        <ul>
        <li><a href="#">04 menu-aaaaaaaa</a></li>
        <li><a href="#">04 menu-bbbbbbb</a></li>
        <li><a href="#">04 menu-cccccccc</a>
        <ul>
          <li><a href="#">05 menu-a</a></li>
          <li><a href="#">05 menu-b</a></li>
          <li><a href="#">05 menu-c</a></li>
        </ul>  
        </li>
       </ul>  
       </li>
      <li><a href="#">03 ただしIEを除く</a></li>
    </ul>
    </li>
    <li><a href="#">02 Mサイズ</a></li>
  </ul>
  </li>
  <li><a href="#">01 For a long sentence</a>
  <ul>
    <li><a href="#">02 基本の</a></li>
    <li><a href="#">02 横幅は</a></li>
    <li><a href="#">02 94pxに</a></li>
    <li><a href="#">02 設定</a>
    <ul>
      <li><a href="#">03 文字数が多くなると</a></li>
      <li><a href="#">03 IE以外は</a></li>
      <li><a href="#">03 最大の横幅に</a></li>
      <li><a href="#">03 合わせて広がります</a></li>
    </ul>
    </li>
  </ul>
  </li>
</ul>
</div>

1段目は横並びのメニュー項目で、2段目以降は入れ子構造にしていきます。

次はCSS。
まずは、ドロップダウンメニューとしての基本形。

#menu-sample ul { /*リスト全体*/
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu-sample li { /*リストの1段目*/
  float: left;
  min-width: 94px;
  white-space: nowrap;
}

#menu-sample ul ul { /*2段目以降*/
  display: none;
  position: absolute;
  z-index: 10;
}

#menu-sample li li { /*2段目以降のリスト項目*/
  clear: left;
  position:relative;
  width: 100%;
}

#menu-sample ul ul ul { /*3段目以降*/
  top: 0;
  left: 100%;
}

#menu-sample ul li:hover > ul {
  display: block;
}



*+html #menu-sample ul ul a { /*IE用*/
width: 72px; /*(94-10-10-1-1)パディングとボーダーの分を引いた値*/
white-space: normal; /*幅に応じて改行*/
}

ul:リストの装飾は不要なので削除。マージン、パディングも0にして、いったんきれいな身体に。

1段目のliをfloat: leftで横並びにします。
できればひとつひとつのメニュー項目の幅をそろえたいと思いますが、文字数によってはピッタリ納まるとは限らないので、あくまでも最小幅とし、文字数が増えても対応できるようにしておきます。それがmin-width: 94px部分。94pxはヘッダーの幅と入れたいメニュー項目数から逆算して適当に決めた数値。
white-space: nowrapは下層のメニュー項目も改行しないようにしています。これを入れておかないと3段目以降で固定幅になって、文字が改行されてしまいます(なぜなのかよくわからない)

ul ulはメニューの2段目以降を指定しています。ここで下層のメニューが見えないようにdisplay: noneで 非表示にします。
positionの使い方がわかりにくいですが、ul ulにposition: absoluteを指定して、2段目以降のulにabsoluteがかかるようにします。2段目のulの親要素である1段目のliにはpositionが指定されていないので、親要素の下に絶対配置されます。
z-index: 10は念のため。サイドバーなどにメニュー項目が重なったとき、下になって隠れてしまう場合もあるので。

2段目以降のリスト項目li liはclear: leftで縦並びに戻します。
position:relativeを入れて2段目以降のリスト項目左上を基準とします。
width: 100%は、リスト項目どれかの文字数が多いときにそれに合わせて同じ幅になるようにしています。

3段目以降を示すul ul ulにもabsoluteがかかっていますが、親要素である2段目以降のliでposition:relativeを指定してあるのでその要素の左上が基点となり、子要素であるulにtop、leftなどで基点からの位置を指定します。
ここではtop: 0でliと下段のulのラインを揃えて、left: 100%で親要素のul幅分右へずらしています。
4段目、5段目と階層が増えても、親要素、子要素の関係は変わらないので同じように表示されます。

あとは、li:hover > ul で子要素がある項目にカーソルが重なったときに直下のulをdisplay: blockで表示するようにします。

例によって、IE用の対策。

まずIEではli liでwidth: 100%を指定してもなぜか最大幅のメニュー項目に合わせて同じ幅に広がってくれないので、*+htmlハックでIE用にメニューの幅を固定して改行するように指定してます。
他のブラウザと見た目が少し変わりますが読めるから大丈夫、というレベルで対応。

そもそもIE6は疑似クラスの :hover や min-width が効かないので、「Google Code」の「IE7.js」を使わせてもらいます。

htmlのhead部分に

<!--&#91;if lt IE 7&#93;>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<!&#91;endif&#93;-->

を書き込むだけです。

IE6は、しょうがないから最低限の対応だけしておくか、というスタンスなのでご勘弁を。
これに関しては、「なるべくならIE用のHackは使いたくない」と「「IE7.js」で IE6 でも透過 PNG、疑似クラス :hover に対応」を見てください。
上記の*+htmlハック部分も「IEの条件付きコメント」を使って別ファイルにしたほうがスッキリします。

あとは、メニューっぽく装飾を施します。

#menu-sample li {
  margin-left: 3px;
}

#menu-sample a { /*1段目以降のメニュー文字*/
  font-size: 13px;
  line-height:15px;
  color: #dadada;
  text-decoration: none;
  text-align: center; /*1段目は文字を中央合わせに*/
  padding: 5px 10px;
  background-color: #242424;
  display: block;
}

#menu-sample a:hover {
  color: #f90;
  background-color: #111;
}

#menu-sample ul ul {
  padding-top: 2px;/*2段目を少し下げた*/
}

#menu-sample ul ul ul { /*3段目以降*/
  padding-top: 0; /*2段目のパディング2pxを元に戻す*/
}

#menu-sample li li {
  margin-left: 0; /*liのmargin-left: 3pxを元に戻す*/
}

#menu-sample ul ul a { /*2段目以降のメニュー文字*/
  font-size: 11px;
  line-height: 1.3;
  text-align: left; /*2段目以降は左寄せにもどす*/
  border-top: solid 1px #555555;
  border-right: solid 1px #070707;
  border-bottom: solid 1px #070707;
  border-left: solid 1px #555555;
  background-color: #343434;
}

文字色やバックグラウンドの色は、メニュー内のa要素で指定。display: block;でブロック要素にしてサイズを固定します。
a:hoverでカーソルが乗った位置がわかるように文字色とバックグラウンド色が変わるようにします。
2段目以降は文字サイズを少し小さくしてみました。
その他諸々の指定は、個人個人の好みの問題です。

ただ、やっぱりIEが絡んでくるとなかなかうまく表示されない場合もあって、たとえば2段目と3段目で少し隙間を空けようかとか、逆にちょっと重ねてみようかと思うと、細かいところでいろいろ苦労をすることになります。Operaも少し挙動が変になったりします。

とりあえずこのサンプルでは、その辺も考えた上での基本形ということで IE6,7,8、Opera、Firefox、Safari それぞれのブラウザであまり苦労をしないで動くような最低限のデザインにしてあります。

あとは応用ですので、バックの色やボーダー、イメージ画像を使ったりしていろいろバリエーションを楽しめると思います。

参考サイト