アクセス数: | 今日: | 昨日:   記事数:996

HOMESITE MAPBOOKMARKTAG CLOUD

Tag:CSS

WordPress以前の記事で『Simple Author Highlighter』を紹介しました。
でも、そんなプラグインに頼らなくてもCSSで簡単に出来る事を知りました。

コメント表示されているページのソースを見れば一目瞭然なんですが、コメントの上から見て奇数と偶数と管理人では違うCSSのクラスが入っています。
そのクラスを利用して、自分の好きなようにすれば良いだけです。
テキストカラー、ボーダー、バックグラウンドなどなど、自由に変更出来ます。

ベースのCSSクラス。(奇数列)

ol.commentlist li.comment {
}

偶数列のCSSクラス。
ol.commentlist li.thread-odd {
}

管理人(投稿者?)のCSSクラス。
ol.commentlist li.bypostauthor {
}

上記のCSSクラスはデフォルトテーマで見たクラスなので、他のテーマ等を使っている方は分かりません。
が、ソース見れば簡単に分かると思います。

ちなみに私はコメントとトラックバックの表示を分けているんですが、トラックバックは各列に違うクラスが入っていなかったので簡単には無理でした。

WordPress - メディアライブラリ@yoidoreoさんからの要望でやってみました。

WordPressで画像を記事内に挿入する際、以前紹介した『【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法』、『【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法2』を使っています。

私は画像が大量にある時には、画像に連番付けてFTPで上げてから、記事内にイメージタグをコピペして番号だけ手打ちしています。
@yoidoreoさんはそうではなく、メディアライブラリで全部上げてからポップアップ表示してリストから挿入しているらしいです。
で、挿入する際一々画像の詳細を表示してからじゃないと画像が挿入できません。
詳細の一番下に『投稿に挿入』ボタンがあるんですから。

要は何を行ったかと言うと、

・ 画像のリスト表示部にも挿入ボタンが欲しい。
・ ついでにリストに表示する数も増やしたい。
・ ついでにサムネイル画像の大きさも変えたい。
以上3つをやってみました。

結論から言うと、以下のようになります。
変更前
WordPress - メディアライブラリ

変更後
WordPress - メディアライブラリ

では変更方法です。

1画像のリスト表示部にも挿入ボタンが欲しい
詳細を表示した際にあるボタンをリスト部に持ってくるだけなので簡単なんですが、デザイン的に崩れたりしてしまうので、ちょっとだけ手を加える必要があります。
デザインなんか関係ねぇって人はいいんでしょうけど。

では、『wp-admin/includes/media.php』を開きます。
まずはボタンを設置する方法です。

media.php 1165行目~ (2.9.2の場合)
if ( $toggle ) {
  $class = empty($errors) ? 'startclosed' : 'startopen';
  $toggle_links = "
  <a class='toggle describe-toggle-on' href='#'>$toggle_on</a>
  <a class='toggle describe-toggle-off' href='#'>$toggle_off</a>";
} else {
  $class = 'form-table';
  $toggle_links = '';
}

上記のコード内に、ボタンを表示するコードを付け足します。
ついでにCSSも直接書いてみました。

media.php 1165行目~ (2.9.2の場合)
if ( $toggle ) {
  $class = empty($errors) ? 'startclosed' : 'startopen';
  $toggle_links = "
  <a class='toggle describe-toggle-on' href='#'>$toggle_on</a>
  <a class='toggle describe-toggle-off' href='#'>$toggle_off</a>
  <div style=\"float:right; margin:5px 10px 0 0;\"><input type='submit' class='button' name='send[$attachment_id]' value='" . esc_attr__( 'Insert into Post' ) . "' /></div>";
} else {
  $class = 'form-table';
  $toggle_links = '';
}

青色のコードがCSSなんですが、『float:right;』を入れないと、画像タイトルの上にボタンが来てしまいます。
見栄え悪いし、使いづらいかとも思います。

私はシングルクォーテーションよりダブルクォーテーションの方が好きなので『¥”』の書き方にしています。
Windowsの人は『¥』でいけますが、Macの人はバックシュラッシュになります。
素直にシングルクォーテーション( ’ )だけでもOKです。


2ついでにリストに表示する数も増やしたい
同じ『media.php』の 2 3 箇所を変更する必要があります。

media.php 1807行目(ボタンコード未挿入時) (2.9.2の場合)
add_filter( 'post_limits', $limit_filter = create_function( '$a', "return 'LIMIT $start, 10';" ) );

追記
上記の変更だけでは、ページを送った際10個ダブった表示になるので、もう1箇所変更しなければいけません。

media.php 1801行目(ボタンコード未挿入時) (2.9.2の場合)
$_GET['paged'] = isset( $_GET['paged'] ) ? intval($_GET['paged']) : 0;
if ( $_GET['paged'] < 1 )
  $_GET['paged'] = 1;
$start = ( $_GET['paged'] - 1 ) * 10;
if ( $start < 1 )
  $start = 0;
add_filter( 'post_limits', $limit_filter = create_function( '$a', "return 'LIMIT $start, 10';" ) );

media.php 1870行目(ボタンコード未挿入時) (2.9.2の場合)
'total' => ceil($wp_query->found_posts / 10),

上記の『 10 』を20や30にする事で、リストに表示される数が増えます。
同じ数にしないと表示が変になると思うので、同じにしておいた方が良いと思います。


3ついでにサムネイル画像の大きさも変えたい
リストに表示されているサムネイル画像の大きさは、CSSで変更しているらしいです。
サムネイル画像には以下のCSSが使われています。
.media-item .pinkynail {
  float: left;
  margin: 2px;
  max-width: 40px;
  max-height: 32px;
}

『max-width』と『max-height』の大きさを変更すれば良いだけです。
削除すると画像がそのままの大きさで表示されてしまうので、とんでもない事になります。
適度な大きさにしておいた方が良いと思います。(50×50 pxとか)

変更したい方は『wp-admin/wp-admin.css』を開きます。
スペースが入っていない軽量版のCSSなので、『.media-item .pinkynail』で検索すれば該当するCSSクラスが引っかかると思います。

IE版のCSSは別ファイルになります。

wp-admin/css/ie.css 414行目~ (2.9.2の場合)
* html .media-item .pinkynail {
  height: 32px;
  width: 40px;
}

上記の大きさを『wp-admin.css』と同じにしましょう。
IE使ってない人は別に変更しなくても大丈夫だと思います。

100px × 100px とかにした人は分かると思いますが、画像に『float: left;』が入っていてPHPのソース内にはクリアータグが入っていません。
なので、メチャクチャな表示になると思います。
その場合は、『media.php』の以下の箇所にクリアータグを追加します。

media.php 1209行目(ボタンコード未挿入時)~ (2.9.2の場合)
$display_title
<table class='slidetoggle describe $class'>

上記タグの間に以下のクリアータグを追加します。

media.php 1209行目(ボタンコード未挿入時)~ (2.9.2の場合)
$display_title
<div style=\"clear:both;\"></div>
<table class='slidetoggle describe $class'>


簡単に見ただけなので、何か問題があればコメントください。

【WordPress】管理画面でCSS3が使われていた

『【WordPress】管理画面でCSS3が使われていた』をはてなブックマーク

WordPress凄い今更なのかもしれませんが、WordPressの管理画面でCSS3が使われている事を知りました。
『border-radius』と言う、ボーダーを角丸にするプロパティだけ知りましたが、何気に他にも使われていたりするかもしれません。

現在の最新版がベータを除き 2.9.2。
もしかしたら 2.9 の時から使われていたのかもしれません。
IEを無視するその姿勢、大好きです。w

現在主流となっている5つのブラウザで見てみました。
以下に貼っている画像は、管理画面の左サイドのメニュー部分です。

Firefox 3.5.9Opera 10.53Google Chrome 4.1
WordPress - FirefoxWordPress - OperaWordPress - Google Chrome
Safari 4.0.5Safari (iPhone)Internet Explorer 6.0
WordPress - SafariWordPress - Safari (iPhone)WordPress - Internet Explorer

さすがだIE、ちゃんと最後でオチてくれる。
iPhoneですら対応してるってのに、IE8になっても未対応なんて。
完全にみんなと違う方向向いてるだろIE。

ちなみに『Opera 9.**』もCSS3未対応です。
現在は 10.53 の最新版が出ているので、Opera使いの方はバージョンアップした方が良いかもです。

全世界のWEBデザイナーがIE6止めれば、シェアは10%切ると思うんですが。
しかし、私の勤めるスイミングは未だにIE6なので、勝手にバージョンアップしておこうかしら。

WordPress & Twitter2日前からトップページのみにTwitter(@kome__suki)のつぶやきを表示させるようにしていました。
これはいつものRSSフィードを読み込んで表示させる方法を使用していたんですが、Twitterだけは上手く読み込んでくれません。
文字コードが何故か ASCII になってバケたり、30分経っても読み込まなかったりとメチャメチャです。
ブログ用のアカウント取ったってのに、そのブログにちゃんと表示してくれなくては意味がありません。
こちらのサイトも利用して試させてもらいましたが、やっぱりダメでした。
なので、TwitterのRSSだけはプラグインに頼った方が懸命です。

サイドバーにある @kuu_san のつぶやきは『Twitter Tools』というプラグインを使用しています。
多数のアカウント設定は出来ないので、別の『Tweetable』と言うプラグインを使用しました。

これは凄いです。
何が凄いって、Twitterでつぶやいた内容が瞬時に反映されます。
TweetDeck でつぶやき、すぐにブログをリロードしたら反映されていました。
この速さには驚きです。
RSSと言うより Twitterの公式サイトに登録するので、アプリと同じ感覚なんでしょうね。
管理画面上からつぶやいたりフォロワーのTLなんかも見れますが、私は表示させたいだけだったのでこの辺はノータッチです。

バージョンが上がって少々違いますが、登録などの仕方は以下のサイトを参考に。

Ryuzee.com
[wordpress]Twitter連携用プラグインTweetableが便利すぎる!

私がハマった点は『コールバックURL』を入力しなかった為、ドえらい手間が掛かりました。
上記ページ1枚目のスクリーンショットの所に『コールバックURL』が表示されているので、ちゃんと登録画面でコピペしましょう。
設定し直すと、すんなり登録できました。

後は表示させたい場所に以下のコードを加えればOK。
<?php tweetable_latest_tweets(10); ?>
『 10 』の数字は、表示させたい件数です。
他にもフォロワー数を表示させたり出来るみたいです。
詳しくはプラグインページの『Other Notes』に書かれています。(英語)


使えたとなると、後は私の大好きなカスタマイズのお時間です。
いじくるファイルは『tweetable.php』と『main_css.css』の2つです。
CSSファイルは2つあって、『admin_css.css』は管理画面上のCSSなので、これは触らない方が良いと思います。
管理画面なんて自分しか見ませんもんね。

以下のつぶやきを元にしてみます。
2010/5/5 03:00:51 【アニメ】けいおん!!がオリコン1・2位独占。 そして中の人を初めて見た。 http://bit.ly/ba5ZFj

プラグインをそのまま使うと、以下のように表示されます。
【アニメ】けいおん!!がオリコン1・2位独占。 そして中の人を初めて見た。 http://bit.ly/ba5ZFj
May 4, 2010 6:00

まずは日付を日本語表記にします。

tweetable.php 60行目 (Version: 1.1.8)
$date = date('F j, Y g:i', strtotime($latest['tweets'][$counter]['created_at']));
 ↓
$date = date('Y/n/d H:i', strtotime($latest['tweets'][$counter]['created_at'])+32400);

日付を西暦表示にし、GMT+9時間で日本時間に変更しています。

私は日時を前に持ってきたかったので、以下のように変更しています。

tweetable.php 61~63行目 (Version: 1.1.8)
echo '<span class="twitter_status">';
echo '<span class="status-text">'.make_clickable($latest['tweets'][$counter]['text']).'</span>';
echo '<span class="twitter_meta">'.$date.'</span>';
 ↓
echo '<span class="twitter_status">';
echo '<span class="twitter_meta">'.$date.'</span>';
echo '<span class="status-text">'.make_clickable($latest['tweets'][$counter]['text']).'</span>';

只単に62行目と63行目を入れ替えただけです。
170行目からも同じ記載がありますが、こちらは変更しなくても上手くいきました。
不安な人は、どちらも変更してた方が吉かもしれません。

ソースを見ると分かりますが、コードは以下のように出力されます。
(分かりやすいように改行しています)
<li class="tweetable_item">
  <span class="twitter_status">
  <span class="twitter_meta">2010/5/05 03:00</span>
  <span class="status-text">【アニメ】けいおん!!がオリコン1・2位独占。 そして中の人を初めて見た。 <a href="http://bit.ly/ba5ZFj" rel="nofollow">http://bit.ly/ba5ZFj</a></span>
  </span>
</li>

日付を囲っている『twitter_meta』には『display:block;』が入っているので、SPANであっても改行されてしまいます。
この辺は好みで『main_css.css』ファイルをいじってください。

私はバックに画像を入れているので全てコメントアウトして、テーマ内のCSSファイルに書き込んでいます。
その方が画像を使用した場合、絶対指定しなくて済むので楽です。


なるべくプラグインに頼らずにやろうと思いましたが、最初にも書いた通り TwitterのRSSだけはプラグインに頼った方が懸命です。

大藤幹のHTML/XHTML/CSS辞典2009年内リリースを予定してたようですが思ったより困難だったのか、ついに『大藤幹のHTML/XHTMLタグ辞典』が『大藤幹のHTML/XHTML/CSS辞典』にバージョンアップしました。
残念ながらCSS3は未対応のようです。
辞典の世話にならなくても、すらすら~っとコードが書けるようになればベストなんですけど、ド忘れとかもありますし持っておいて損は無いかな。
どっかの偉い人が「調べて分かる事は覚えなくて良い」と言ってたような言わなかったような。
一理あるような無いような。

今回長いので折り込みます。
続きを読む

iPhone 3GSHTMLの知識だけで誰でも簡単にiPhoneのランチャーが作成出来るようです。

yagutaの日記
Jailbreak不要で iPhoneアプリを起動できるランチャー

上記サイトの説明だけでは分かり難かったので補足。
サイト内に貼られているダウンロード先から『ilauncher.html』をダウンロードする。
何も考えずに、そのファイルをサーバーにアップロードする。

※WordPressを使用している人は、テーマ内にファイルをアップするのではなく必ず一番上の階層にファイルをアップする。
× wp-contents/themes/テーマ/ilauncher.html
○ ilauncher.html

サーバーにアップしたら、SafariでURLを打ち込む。
このサイトだったら、『http://kome-suki.net/ilauncher.html』になります。
すると、以下の画面が立ち上がります。(URLは自動で変わります)
iLauncher

アプリ名でリスト化されており、タップするとiPhoneに入れているアプリが起動します。
インストールされていないアプリは、Safariで新しいページが開き『ページが開けません』で終わります。
『ilauncher.html』の中身を見ると、JavaScriptを使ってアプリのスキームと呼ばれるコードでアプリを起動させているようです。
スキームが無いアプリは無理でしょうけど、以下のサイト等で色々公開されています。

iBlog
アプリのスキームを調べてみた
matuダイアリー
[iPhone]購入したアプリのURLスキームを整理してみました。iPhoneをより上手に使えるようになるために…

探せばまだまだあるかもしれません。
これの良い所は、HTMLとCSSを自分好みにいじれる点にあります。
例えばこんな事も出来ちゃう訳です。(画像は合成です)
iLauncher

さすがにメールとかのカウント数字は無理でしょうけど。
アプリの画像を自分で作る。
アプリのスキームを調べる。
HTMLとCSSをいじくりまわる。
面白そうですけど、面倒なんでやりません。w

Safariでのページをホーム画面に置いておけば、なお便利なランチャーになりそうですね。

米が好き
【iPhone】ホーム画面に追加した時のアイコンを作成する方法

【WordPress】サイト軽量化&ページ活用

『【WordPress】サイト軽量化&ページ活用』をはてなブックマーク

タグクラウド以前からそうなんですが、最近特にサイトが重いなぁと思いフッターに表示させていた『タグクラウド』の表示を止めました。
今や500近く増えたタグ。
全てを表示させるのには、ちょっと重たくなるのは必然ですね。
しかし、全く消すのは惜しいってんで、『ページ』で表示させる事にしました。
サイト一番右上にリンクがあるので、見たい方はどーぞ。

以下はページで表示させるに当たって、難儀した点。

私はWordPressのプラグインの『brBrbr』を使っています。
ちなみに <pre>などに対応した新バージョン出てます。 (Version:2.0)

ページ内に作ったコンテンツも、もれなく『brBrbr』が適応されるのでタグクラウドのフラット表示が出来ません。
画像はプラグイン『Simple Tags』のタグクラウド内。
タグクラウド

これを『List』に変えます。
タグクラウド

後はCSSで <ul><li> を横並びにすれば『brBrbr』は関係なくなるんですが、ここでちょっと手間取りました。
結果的に言えば、以下のコードでOK。

ul.st-tag-cloud li {
  display: inline;
  line-height: 2;
}

横並びにする時、『float: left;』じゃなく『display: inline;』にしなければいけなかったんですね。
タグクラウドは関連してるタグによって、テキストの文字の大きさが変わるので『float: left;』だと変な表示になってしまいます。

解決してみれば、何のこっちゃという事例でした。

Tag : , ,

大藤幹のHTML/XHTMLタグ辞典HTMLとXHTMLのタグを全て(?)見れるアプリです。
9/30本日まで900円が450円の半額。
おまけに年内リリース予定の『CSS辞典同梱版』への無償アップグレードが出来るってんで、即座にポチってしまいました。

HTML/XHTMLのタグは、たまーに見る時がありますしCSSはもっと見る。
『CSS辞典同梱版』がCSS3対応だったら嬉しいなぁ。

紙面で見た方が早いってのもありますが、アプリで改めて見ると新しい発見があったり、手元に本が無い場合は重宝しそうです。

▼起動画面
大藤幹のHTML/XHTMLタグ辞典

▼検索 (要素/属性/逆引き/用語)
大藤幹のHTML/XHTMLタグ辞典大藤幹のHTML/XHTMLタグ辞典
大藤幹のHTML/XHTMLタグ辞典大藤幹のHTML/XHTMLタグ辞典

▼解説
大藤幹のHTML/XHTMLタグ辞典

▼資料集
大藤幹のHTML/XHTMLタグ辞典

▼Tips&コラム
大藤幹のHTML/XHTMLタグ辞典

頻繁に利用される『 a 』タグです。
たかが『 a 』タグ、されど『 a 』タグ。
1つのタグに対しての情報が半端ないです。
(画像クリックで a タグの情報表示出来ます)
大藤幹のHTML/XHTMLタグ辞典

対応ブラウザ一覧表です。
主に使われているブラウザに加え、『Safari for iPhone』まであるのは良いっすね。
大藤幹のHTML/XHTMLタグ辞典

HP作ってる人は、持っておいて損は無いアプリだと思います。
早く『CSS辞典同梱版』こないかなー。
その内『JavaScript辞典同梱版』とか『PHP辞典同梱版』とか出ないですかね。
勿論無償アップグレードで。www


大藤幹のHTML/XHTMLタグ辞典 (通常:900円)

ヘッドライン2009/8/2~8/8の目に付いた情報・ニュースなどをまとめてご紹介。

今は忙しくて1つ1つ記事にする暇が無いからこの形式をとっていますが、今後も続けるかどうかは不明です。
1つの事に対して、じっくりレビューってのが好きな方なので、1行コメントって楽だけど何だか味気ないような気がします。
個人的主観なので他の人を批判しているのではありません、あしからず。
続きを読む

ニコニコ動画NaN days』というサイトにCSSのコードが書かれていたので、ご紹介です。
要はニコニコ動画の動画ページを開いた時に、プレイヤーを一番上部に持ってくる為だけのCSSです。
ブラウザの表示サイズが小さい時とかに使えそうです。

ちなみに、Firefox専用のコードです。

コードは『NaN days』よりコピーして、メモ帳などに貼り付ける。
ファイル名を『userContent.css』にして保存。
そのファイルを以下の場所に移動します。

C:\Documents and Settings\ユーザー名\Application Data\Mozilla\Firefox\Profiles\英数字の羅列.プロファイル名\chrome\
赤字は各PCによって異なります。
『Application Data』は隠しファイルなので、手作業で表示させてください。
フォルダを開く - ツール - フォルダオプション - 表示タブ - 『すべてのファイルとフォルダを表示する』にチェックを入れる

一旦Firefoxを終了させて再起動する必要があります。


動画ページを開くと、以下のように表示されるようになります。
ニコニコ動画

動画ページ以外は、普段通りに表示されます。

『userContent.css』については、以下のサイトを参照してください。
Firefox まとめサイト
プロファイル