投稿者: kantaro

WordPress：投稿内で記事・固定ページ・カテゴリーページのURLをスラッグを指定して出力するショートコード

Posted on

投稿内でシングルページや固定ページ・カテゴリーページヘのリンクを貼ることがありますが、直接パスを書いてしまうと、公開URLの変更やディレクトリの移動などがあった場合にリンクが切れてしまいます。
ショートコードにしておくとその辺りの作業から開放されるので便利です。

WP MEMO：投稿内で記事・ページへのリンク・URLを出力する
こちらのページでidを指定してURLを取得する方法を紹介されていたので参考にさせていただきました。
ただ、個人的にidを使うのが分かりづらくて苦手なので、スラッグから引っ張ってこれるようにしました。

引数はシンプルに2つだけ用意しています。

//全部引数を使うとこうなります
[permalink type='cat' slug='hoge']

//typeがpageのときは省略できますので最小構成はこうなります
[permalink slug='hoge']

//固定ページで子ページの場合だけ親ページのスラッグも必要になります
[permalink slug='parent/hoge']

//使うときはhref属性の中身です。
<a href="&#91;permalink slug='hoge'&#93;">ほげ</a>

ちょこっと足せばカスタム投稿タイプにも対応できるはずです。

Concrete5：ブロック内のクラス名だけ変えたカスタムテンプレートの書き方

Posted on

『Concrete5 Beginner’s Guide』での勉強続行中です。
なかなか英語読むのしんどいですが、前に挫折した部分は超えて、前より少し分かってきたかも。

先にConcrete5：ブロックのテンプレートを単純にラップするカスタムテンプレートを作る方法で、コアにアップデートがあっても大丈夫なカスタムテンプレートの書き方を載せましたが、ラップすると余計なdivを書くことになるので、できればクラス名だけ変えたいということもあるかと思います。

今回はその方法です。
例として、オートナビブロックにMy Navというカスタムテンプレートを作成してみます。
まずblocks/autonav/templates/my_nav/というディレクトリを作成して、その中にview.phpというファイルを作成します。
本の中ではjQueryでゴニョゴニョしたり、このテンプレート専用のcssを設定することを前提にしていたのでカスタムテンプレート名のディレクトリを作成していましたが、ただクラス名を変更するだけのときは、blocks/autonav/templates/my_nav.phpでもいいと思います。
今回はmy_navディレクトリにこのテンプレート専用のview.cssも配置する想定です。

<?php
$bvt = new BlockViewTemplate($b);
$bvt->setBlockCustomTemplate(false);

functon my_nav_callback($buffer) {
	return str_replace('<ul class="nag">','<ul class="my_nav">',$buffer);
}

ob_start("my_nav_callback");
include($bvt->getTemplate());
ob_end_flush();
?>

前回のラップの時と似てますが、今回はデフォルトテンプレートを内部バッファに保存して、ulのクラス名を置換してから出力しています。
これでmy_navというクラス名を使用したスタイルをview.cssに設定することができます。

Concrete5：ブロックのテンプレートを単純にラップするカスタムテンプレートを作る方法

Posted on

デザインワークスオンサイドさんのConcrete5の記事「concrete5 でケーキ屋さんのサイトを作ろう！ :: テーマのテンプレートとページタイプのおさらい」に触発されて、途中まで読んで挫折した『Concrete5 Beginner’s Guide』を初めから読みなおしています。

オンサイドさんの記事はいっつもわかりやすくて勉強になります。おすすめです。

それで本題です。

Concrete5でデフォルトのブロックにオリジナルなCSSを適用したいときに、デフォルトブロックをたとえばclass付きのdiv要素でラップします。

ただ、デフォルトのテンプレートをコピーして、カスタムテンプレートでラップするdivを追加するだけだと、コアのアップデートでデフォルトのテンプレートに変更があったときに反映されません。

それを防ぐ書き方が『Concrete5 Beginner’s Guide』にありましたので、メモを兼ねて。

デフォルトの記事ブロックをdiv.content-wrapperで囲ったカスタムテンプレートを作成することにします。

デフォルトのテンプレートをコピーとかする必要はありません。
/blocks/content/templates/wrapper.php
というファイルを作成して、下記コードを書きます。

<div class="content-wrapper">
<?php
$bvt = new BlockViewTemplate($b);
$bvt->setBlockCustomTemplate(false);

include($bvt->getTemplate());
?>
</div>

3-6行目のphpコードでデフォルトのテンプレートを読み込んで書き出しているだけです。
こうすることで、もしデフォルトテンプレートに更新があった時でも、カスタムテンプレートにも更新が保証されます。

WordPress：qTranslate使用時にエディタの高さが低くなってしまった時の対処

Posted on

先日WordPressを3.6.1に更新したお客さまのサイトで、投稿欄が狭くなって書きにくいと問い合わせがありました。
3.5か3.6か分からないですが、投稿欄の右下をドラッグしてサイズを変更すると、それを記憶していて次回以降はその高さで表示されるようになっていたみたいですね。

ですが、多言語プラグインのqTranslateを使っていると本文欄が100ピクセルに強制的に変更されてしまいます。
ソースを見るとこんな感じでインラインでスタイルを設定されています。

qTranslateが書き換えたソース

とはいえ、!importantを使用されてるわけではないので、管理画面にCSSを追加すれば対処できました。

functions.phpに

add_action('admin_head', 'content_textarea_height');
function content_textarea_height() {
  echo'
  <style type="text/css">
    /*heightじゃなくてmin-heightにすると右下のドラッグが有効のままです*/
    #qtrans_textarea_content_ifr { min-height:450px !important; }
  </style>
  ';
}

実際には、管理画面用のCSSをすでに用意していましたので、そちらにCSSを書いただけなんですけどね。

qTranslateはTinyMCEまわりをいろいろいじってるみたいなんで、一番WordPressの更新をするのが怖いプラグインです。（個人の感想です）

WordPress：shortcodeをtinyMCEのボタンに割り当てるやつ

Posted on

自分のサイトに入れてたのにどうやったのか忘れてたので、メモ。

１．ショートコードを作る。

２，プラグインAddQuicktagをインストール。設定。

３．カスタム投稿タイプにも使いたいときには以下のコードをfunctions.phpに

// add custom function to filter hook 'addquicktag_post_types'
add_filter( 'addquicktag_post_types', 'my_addquicktag_post_types' );
/**
 * Return array $post_types with custom post types
 * 
 * @param   $post_type Array
 * @return  $post_type Array
 */
function my_addquicktag_post_types( $post_types ) {

    $post_types[] = 'my_custom_post_type';

    return $post_types;
}

WordPress：qTranslate使用時にビジュアルエディタが真っ白になるときの対処法

Posted on

多言語化プラグインqTranslateを使用するとビジュアルエディタ使用時に本文入力欄が真っ白になる不具合に遭遇しました。
環境はWordPress3.4.2、qTranslate2.5.32。

HTMLエディタに切り替えて更新し、再読み込みしてビジュアルに切り替えると表示されるとか、そのあたりのタブを適当にいじってたら表示されたりとか、たまに表示されるのですが基本使えない状態。
お客さまからクレームがあったわけではないので、環境によるのかもしれません。

解決策はフォーラムにあったのですが、日本語の情報が見当たらなかったのでシェアしておきます。

ページの2/3くらいのところでjamesbonhamさんが書いています。
qtranslate_javascript.phpの217行目の最後のsetIntervalの数値、250を500に変えるというもの。

q_config['js']['qtrans_disable_old_editor'] = "
		var waitForTinyMCE = window.setInterval(function() {
				if(typeof(tinyMCE) !== 'undefined' && typeof(tinyMCE.get2) == 'function' && tinyMCE.get2('content')!=undefined) {
					content=jQuery('#content').val();
					tinyMCE.get2('content').remove();
					jQuery('#content').val(content);
					window.clearInterval(waitForTinyMCE);
				}
			}, 500); // HACK: used to be 250
		";

ただ、私の環境ではこの数値では改善されなくて、結局2000というかなり大きな数値にしないといけませんでした。
環境による差、あるいは言語にもよるのかもしれません。
ともあれ、めでたく表示されるようになりました。

プラグインファイルを直接いじるのはちょっと抵抗もありますが、まぁしょうがない。

開発者の方がqTranslate3.0を作ると言っているので、きっともっと使いやすくなるでしょう！
と思ったら、この記事2010年のじゃないかぁ。

WordPress：Auto Post Thumbnailが動かないとき

Posted on

今お客さまのブログをアメブロからWordPressに移植しています。
その時にアイキャッチ画像の登録が面倒ですので、プラグインで記事中の写真をアイキャッチ画像に登録することにしました。
使用するのはAuto Post Thumbnailなのですが、インストール・有効化したあとに「Generate Thumbnails」のボタンを押しても何も起こりませんでした。

ちなみにAuto Post Thumbnailのバージョンは3.3.1、WordPressは3.5.1です。

端折って結論です。
プラグインファイルauto-post-thumbnail.phpの119行目

$("#message").html("<p><strong><?php echo js_escape( sprintf('All done! Processed %d posts.', $count ) ); ?></strong></p>");

のjs_escapeをesc_jsに書き換えてやるだけです。

$("#message").html("<p><strong><?php echo esc_js( sprintf('All done! Processed %d posts.', $count ) ); ?></strong></p>");

こうですね。

これで、各記事にアイキャッチ画像を設定できました！

FLASHのアニメーションをiPadに対応するために3つのツールを試してみた

Posted on

元のswfデータについて

お客さまがこれまでトップページに使用していたアニメーションの概要は、割りと単純なアニメーションで、最初に画像がスライドして、スライド終了でテキストやボタンがスライドインしてきます。

それぞれのボタンに応じてさらに簡単なアニメーションが紐づけられているというもので、タイムラインアニメーションとアクションスクリプトを使用したアニメーションが組み合わされていました。

今回の要件

・iPadやiPhoneでもアニメーションが表示されるようにしたい。
・アニメーションは現状のものを再現する
・対応ブラウザはie6まで含む(!)

以上のことから、iOS用のみ別ページを表示させる方向で、その他のブラウザの場合は現状のswfを表示させることになりました。

Google Swiffy, Adobe Edge Animate, Tumult Hypeの3つが候補

ほんとはFlash CS6 + Create JSも考えていたのですが、アクションスクリプトが使用されていたので除外しました。
細かく調整すればいけるのかもしれないですが、今回はパスです。

Swiffyは期待していなかったけど予想以上

初めに試したのはSwiffy。

https://www.google.com/doubleclick/studio/swiffy/

Google Swiffy

上のページに行って、swfファイルを選択して「upload and convert」ボタンを押すだけ！！
元のswfと変換後のデータが表示されます。

あれ、なんかほとんど完璧。これでいいんじゃない？とか思ったんですが、いくつか課題が。

  1. まずは、シェイプに光彩などのフィルタがかかっているところが、モノによって表示されていない。ややこしいことに同じ設定でも表示されているモノもありました。
    →これはオブジェクトをpng画像にすることで解決
  2. スクリプトで制御されていたボタンの挙動が微妙に再現されてない。
    →これはiPadでは問題がなくて、MacのSafariだけでしたので、結果オーライだけど、他のデータでどうなるか。
  3. 背景がスライドしつつコピーテキストがフェードインしてくるところでアニメーションがもたつく。

お手軽で、かなり再現性が高いので、場合によっては使えるのではないかと思いました。
あと、書き出されるデータがhtml１つというのもスッキリしてて好きですね。

Adobe Edge AnimateはFlashを使ったことがあれば使いやすい

2013/2/1現在は特別提供期間として、永久ライセンス付きのEdge Animateが無料で入手できますので、まだ持ってない方はインストールしておくと良いかと思いますよ。
Edge Animateは499USドル（永久ライセンスの場合）、あるいは月額14.99USドル（単体サブスクリプションの場合）相当の製品とのことです。（http://html.adobe.com/jp/edge/animate/faq.html）

edge

FLASHと似たタイムラインですので、分かりやすいです。
ピンというのの使い方が作業効率化のカギかと思うのですが、どっちに持ってきたらどっちだっけ？と毎回悩んでしまっています。

アニメーションはSwiffyのようにもたつくこともなく、スムーズに動いてくれました。

一点、分からなかったのが１つのエレメントに複数のイベントを設定する方法です。
今回は必要なかったのですが、たとえばmouseoverとclickの二つを設定したいと思っても、イベントの選択ができませんでした。

実は一番気になっていたのがHype

使いやすそうなのと、IE6まで含む幅広いブラウザに対応しているということで気になっていたTumult Hypeを、この機会に試してみることにしました。

Hype App
カテゴリ: グラフィック&デザイン
価格: ￥5,200

最初にとまどったのがタイムラインの上に表示されている時間。上のイメージでの表記は00:07.25。タイムラインの目盛りは7.75秒くらい。
なんだろう？30で1秒ってバグか？とか思ってたんですが、小数点以下はフレーム数でした。30フレーム/秒なのでこういう表記らしいです。7秒25フレーム。ちょっと気持ち悪いですが、分かってしまえば問題ないですね。

Hypeでは複数のタイムラインを作れます、ということだったので、Flashでいう個別のシンボルとかがタイムラインを持ってるのかと思ったらちょっと様子が違って、メインのタイムラインとの関係が今ひとつつかめていません。
ボタンをクリックしたらサブのタイムラインを動かす感じの使い方なんですが、メインとサブが入れ子になってるわけではないので、サブのタイムラインで作業していたらメインのタイムラインにも影響してるような。
なんかまだよくわかりません。

シーンというのを切り替えることで、難しいコードを書くことなく、インタラクティブなアニメーションコンテンツが作れる、というのがHypeの特長なのかなという気がします。
実際、このボタンをシーンAで押したらシーンBに、シーンBで押したらシーンCに、みたいな作り方をしたらすぐに完成しました。

ただ、今回は比較的単純なアニメーションでしたので良かったのですが、もう少し複雑になってシーンがどんどん増えて行ったらちょっと管理が大変かもしれないですね。あと修正が入った時の対応も大変な気がします。

手っ取り早くリッチなアニメーションコンテンツが作れる、っていうのは間違いないですね。
値段もそんなに高くないですし。

まとめると

時間がない、予算がないならまずswiffyを試してみましょう。
FLASHに慣れているならEdgeが分かりやすいです。
古いブラウザまで対応する必要があって、しかも簡単にということならHypeしかないですね。

ウェディングフォト　ケープ・ライト

Posted on
制作内容
リデザインからWordPress化など
URL
http://www.cape-light.jp/

大阪.神戸.京都の結婚式、ナチュラルスタイルのウェディング撮影と手縫いレザーアルバム
ウェディングフォト　ケープ・ライト

温かみのある写真と、時間とともに風合いの変化する手縫いのレザーアルバムを制作されているウェディングフォト　ケープ・ライトさんのサイトを制作させていただきました。

今回のリニューアルで最もチカラを入れたのは、WordPressの設置によって更新作業を容易にすること。
特に、写真が重要なファクターであるとともに数も多いので、フォトギャラリーの更新については、ほぼアップロードするだけで更新ができるように設計しました。
一つのスライドショーで数十〜百点近い写真を公開されることもあるようですので、一括で写真のアップロードができて、公開ボタンを押したらもうスライドショーができています。

トップページのスライドショーは別のスライドショープログラムを使用しているのですが、更新作業はフォトギャラリーと同じ方法でできるようにしておりますので、プログラムを意識することなく更新していただけるように配慮しました。

WordPress:カテゴリアーカイブにカスタム投稿タイプも追加した一覧ページでページングにハマった

Posted on

ニュースカテゴリの一覧ページを作成していて、そこにカスタム投稿タイプの記事一覧もあわせて表示させました。
クエリ自体は問題がなくposts_per_page=-1にすれば、すべてが取得できています。

しかし、ページ送りをしようとすると2ページ目以降でページがありません、と404が返ってきてしまうという症状で悩みました。

ページ送りは、よく使っているこちらのコード。

WP-PageNavi を使わずにナビゲーション表示 (改良版)

で、今回はそれをfunctions.phpに置くのを使わせていただきました。
ページナビゲーション機能を改版してみたり

このコードは通常のカテゴリ一覧などでこれまでに何度も使用しているので、問題ないはずなのですが、カスタム投稿タイプが絡んでるのが原因なのかよくわからないのですが、2ページ目以降で404。ただposts_per_pageの値をいじってみるとどうやらページ数はちゃんと合っています。

それで、結論から言えば、パーマリンクの/category/news/page/2/などと表示されるものを/category/news/?page=2と変えたらいけました。

試したけど今回効果がなかったものは、

・Top Level Categories Fixプラグイン
・Custom Post Type Category Pagination Fix
・表示設定の「1ページに表示する最大投稿数」を1にする

などです。

先の吟遊詩人さんのコードがこれ

function bmPageNavi() {
  global $wp_rewrite;
  global $wp_query;
  global $paged;
 
  $paginate_base = get_pagenum_link(1);
  if (strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()) {
    $paginate_format = '';
    $paginate_base = add_query_arg('paged', '%#%');
  } else {
    $paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') .
    user_trailingslashit('page/%#%/', 'paged');;
    $paginate_base .= '%_%';
  }
 
  $result = paginate_links( array(
    'base' => $paginate_base,
    'format' => $paginate_format,
    'total' => $wp_query->max_num_pages,
    'mid_size' => 5,
    'current' => ($paged ? $paged : 1),
  ));
 
  return $result;
}

そして、最終的にfunctions.phpにかいてあるコードはこれです。

function bmPageNavi() {
  global $wp_rewrite;
  global $wp_query;
  global $paged;

  $paginate_base = get_pagenum_link(1);
  if (strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()) {
    $paginate_format = '';
    $paginate_base = add_query_arg('page', '%#%');
  } else {
    $paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') .
    untrailingslashit('?page=%#%', 'paged');;
    $paginate_base .= '%_%';  
  }

  $result = paginate_links( array(
    'base' => $paginate_base,
    'format' => $paginate_format,
    'total' => $wp_query->max_num_pages,
    'mid_size' => 5,
    'current' => ($paged ? $paged : 1),
  ));

  return $result;
}

微妙に変わってます。
9行目と13行目だけか。。あんなにもがいたのに。
まぁ意図どおりに動かせたので良しです！

Illustrator：ピクセルパーフェクトを実現するために「ピクセルグリッドに整合」をチェックするよりも前にチェックすべきたった１つのこと

Posted on

いろんなところで、ピクセルパーフェクトな画像書き出しをイラレで実現するためのTipsが書かれているにもかかわらず、あまり気づかれていない気がするので書いておきます。
どなたかが書かれていましてもやさしく教えていただければと思います。

通常イラレでデザインを行いますとアンチエイリアスがかかって輪郭がぼやけてしまいます。
印刷用データなどでしたら問題ないのですが、Webで使用を使用する場合には「変形」パネルの「ピクセルグリッドに整合」にチェックをいれたり、0.5ピクセル単位で調整をされたりしているのではないかと思います。
それにもかかわらず、スライスのサイズよりも1ピクセル大きく書き出されてしまうようなことはないでしょうか？例えば、200px四方のスライスを書き出したら201*200pxの画像が書き出されていたとか。

これはアートボードの位置の設定に起因しています。
「ウィンドウ」-「アートボード」からアートボードパネルを表示して、下図のように「アートボードオプション」を選択します。
イラレ　アートボードオプション

開いたダイアログの「位置」に小数点が含まれていたら整数に直してください。
アートボードオプションの位置がキモです

ちゃんと確認してないですが、たぶんこれをきちんと設定していると、0.5ピクセルとかで調整する必要がないのではないかと思います。
少なくとも、私はそういう細かい調整をしていないです。
「アートボードの位置を整数に」＋「ピクセルグリッドに整合」でピクセルパーフェクトになるかと思います。
モヤモヤしていた方、一度お試しください。

CS3か4か5かいつからか分からないですが、アートボードを複数作ることができるようになりましたが、アートボードを追加すると新しいアートボードの位置はピクセルグリッドに沿ってくれません。
これがデフォルトでピクセルグリッドに合わせてくれたらいいんですけど、このためにクライアントから送られたデータを毎度チェックしなければいけません。
最近、いくつもの案件で各ページをそれぞれのアートボードに入れてくれたりするので、この作業だけでも半端無いんです(^^ゞ

Word：数式エディタ内で項目の縦位置を微調整する方法

Posted on

なんとも細かい話なのですが、できることがわかってちょっとうれしかったのでシェアしておきます。
そうそう需要ないとおもいますが。。

今回入力した数式は次のようなものです。

G≧の位置がだいぶ上にいってますよね。
おそらく根号の中の分数のラインと合わせる仕様になっているのだと思います。
ただ、ちょっと気持ち悪いので上下中央にセンタリングできる方法はないかと調べていたら、こちらで教えていただきました。
Inner Journeys

調整したい項目（今回はG≧）を選択してcontrol+↓。
上下左右どこにでも移動できました。
数式エディタ使いにくいと思ってましたが、これで少し自由になれた気がします。

調整後のイメージはこちら

PHP：PDFのファイルサイズを取得して表示するのにはまったので解決策を

Posted on

IR情報などPDFファイルのリストを作成することはよくあると思いますが、ファイルのサイズを表示したいという要望は多いのではないかと思います。
PHPにはfilesize()というそのまんまな関数があって、ファイルサイズを取得し、単位を出力するスクリプトを参考に下記の関数を作りました。ってほぼコピペなんですけど。

［追記］
WordPressのコアにsize_formatという関数がありましたので、単位変換部分がだいぶシンプルにできました。末尾のコードご参照ください。(2015/01/19)

あと、プラグイン化してショートコードで使えるようにしましたのでよかったら使ってください。
WordPress：PDFとかのファイルサイズを取得して表示するショートコードを公式ディレクトリに公開しました
WordPress.orgのPlugin Directory:
Get Filesize Shortcode

function get_file_size($file){
	if ( is_file($file) ){
		$filesize = filesize($file);
		$s = array('B', 'KB', 'MB', 'GB', 'TB', 'PB');
		$e = floor(log($filesize)/log(1024));
		if($e==0 || $e==1) { $format = '%d '; }
		else { $format = '%.1f '; }
		$filesize = sprintf($format.$s[$e], ($filesize/pow(1024, floor($e))));
		return $filesize;
	}
}

このとき、get_file_sizeに渡す引数$fileはカスタムフィールドにあるpdfファイルのurlになります。
http://www.ika-ring.net/aaa.pdfみたいなのです。

ですが、このままだと
Warning: filesize() [function.filesize] : stat failed for…….
というエラーが出てしまいます。もうだいぶググったのですが、サクッと理解できるようなものがなかったので書いとくことにしました。
is_file($file)とかで見てもfalseが返ってくるので、さっぱり分かりませんでした。

それで、答えはこのページにありました。
WordPress and the “filesize() [function.filesize]: stat failed” Error

最初二つのコードでなにが変わったのか分からなかったのですが、要はfilesize()やfiletype()などに渡す引数はURLではなくてサーバーのディレクトリーパスを渡せということです。フルパスっていうんでしょうか。
ということで先の$fileからstr_replaceでディレクトリーパスに書き換えることで無事できました。
以下、完成版コードです。
もっといい書き方があったら教えてください。

function get_file_size($file){
	/*教えていただいたように記述を変更しました。
	$mfile = str_replace( 'https://ika-ring.net','/usr/home/somedirectory/www/htdocs',$file );*/
	$mfile = str_replace( esc_url(home_url('/'))."wp/",ABSPATH,$file );
	if ( is_file( $mfile ) ){
		/* WordPressのコアにsize_formatという関数がありましたので、単位変換部分がだいぶシンプルにできました */
		$filesize = size_format( filesize( $mfile ) );
		return $filesize;
	}
}

Dreamweaver CS5のコードヒントカスタマイズ [backface-visibility]

Posted on

Dreamweaverを使っていて重宝するのがコードヒントという機能です。
例えば、cssファイルを編集しているときに、cと入力するとclear,color,….と入力候補が表示されるやつです。
ただ、いらない、というかほとんど使わない項目もアルファベット順に出てきてしまうというイラつきがあります。
よくあるものだとwidthを出したいのに最初にwidowsなんてのが出てくるために、widtまで入力しないといけなかったりします。つぎにhキーを打つかreturnキーを打つかの差しかなかったりするわけです。

それなら設定ファイルを変えてしまえというわけで、BUN:Logさんなどいろいろな方が、設定ファイルを配布してくださってます。

ただ、どうもこのファイルだけでは治っていない項目があり、私の場合は結構ひんぱんに入力するものなのでなんとかしたいと思っていたのが、ようやく対処できたのでご紹介します。大したことないですが。

私がよく使うっていうのは、background。みなさん使いますよね？
でも、bってうつと backface-visibility ってのが最初にでてきます。
少なくとも今のところ使うことはないので、最初に出るのがbackgroundになったら気持ちいいです。

この設定は
/Applications/Adobe Dreamweaver CS5/Configuration/CodeHints/CSS3_hints.xml
にあります。
このファイルをコピーして、
/Users/ユーザー名/Library/Application Support/Adobe/Dreamweaver CS5/ja_JP/Configuration/CodeHints/
の中にペーストします。
それでこのコピーしたファイルを開いて、770行目くらいにある

 <menuitem label="backface-visibility" value="backface-visibility:" icon="shared/mm/images/hintMisc.gif" />

をいじります。
今回は、のちのち状況が変わって使われることがあるかもしれないなぁという思いもあって、コメントアウトや削除はしない方向でいきます。
要はbackgroundよりも後に表示されたらよいので、labelを
label=”backface-visibility”
から
label=”bf-visibility”
とかに変えてしまいます。

以上。DWを再起動したらOKです。
bでbackgroundが出るようになったー。

一語変えただけのファイルに需要があるかどうか分かりませんが一応置いときます。
CSS3_hints.xml.zip [Dreamweaver CS5]

ほかにも、CSS3関連でまだ必要ないものはこのファイルで修正できると思います。
最後は、BUN:Logさんにならって、
「ご利用は、自己責任でお願いします。」

subやsupでline-heightがズレるのを防ぐCSS

Posted on

備忘録として。
下付き文字のsubタグや上付き文字のsupタグを使用すると、行送りが通常よりも広くなりブサイクになる。
それをfixするためのcss指定。

出典：CSS Advisor

<style type="text/css">
sup,
sub {
	height: 0;
	line-height: 1;
	vertical-align: baseline;
	_vertical-align: bottom;
	position: relative;
	
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}
</style>

iBooksの辞書の辞書は英和辞書だった

Posted on

iPadやiPhoneのiBooksで英語の本を読んでる時に、辞書を引くとなぜか英英辞書が表示されます。

iBooksの英英辞書イメージ

いろいろとハック的に英和辞書を使えるようにする方法が紹介されているようでしたが、辞書の中でさらに辞書を引くと英和辞書で引けました。これって周知なのだろうか？

iBooks内の英和辞書イメージ

ちょっとモヤッとするけど、新鮮だったので紹介しておきます。

追記：どうやらアップデートで英和辞書のなかのテキストが選択できなくなってしまった。代わりに「Webを検索」と「Wikipediaで検索」のボタンが追加されてるけど、辞書が選択出来たほうがいいなぁ。

PowerPoint2003：グラフの色を好きな色にカスタマイズする方法

Posted on

先日、仕事で必要に迫られて使用したTipsをご紹介します。
対象バージョンはPPT2003です。Wordでも同様に使用可能ですが、Excelでは少し問題があります。
2000以前のバージョンは検証していません。
正直なところ、最近のバージョンではどうなのか分からないので、このTipsがどれほど役に立つのかわからないのですが、私のお客さんはまだ2003のバージョンを使われているところがそこそこあるようですので、備忘録も兼ねて紹介しておきます。

マイクロソフトのオフィスを使っていて、ストレスを感じるのが色の選択ですが、特にグラフに関しては選択肢が少なすぎると思います。

今回は、それを克服する方法です。あらかじめ申し上げておきますが、めんどくさいです。

それでは始めます。

  1. グラフをダブルクリックして選択状態にします。
  2. メニューの「ツール」-「オプション」を選択します。
  3. 「色」タブを選択します。ここで既存の色を選択して、「変更」から好きな色を選ぶことでカラーパレットを自分の好みのものに変えることができます。
    ただし、ここで気をつけるのは、変更するのは上の「標準色」のみにしてください。「グラフの塗りつぶし」や「線の色」を変更した場合、一度グラフの編集モードから出て、再度グラフをダブルクリックした際に、元の色に戻ってしまうことがあります。
  4. データ系列の色を変更して、輪郭線をなしにしたり、わずかにグラデーションをかけたりして、完成になります。グラデーションをあまりきつくかけないようにご注意ください。

重要なのは、このカラーパレットのカスタマイズは、各グラフ固有のものであるという点です。
複数のグラフがあった場合に、全て設定をする必要があります。
冒頭に申し上げたエクセルでは少し問題があるというのは、エクセルの場合カラーパレットをカスタマイズするとブック全体に影響してしまうようです。
逆に言えば、全ての色を統一させられるということでもあるので、一長一短であるといえるでしょうか。