Syntax Highlighterのフォントサイズの件。

Tue, 09 Feb 2010 04:32:46 +0000

Syntax Highlighterを導入したはイイが、文字ソース部分だけなぜかフォントサイズがでかくなってしまい、むーん。。。
いやまぁ、完全にテーマ本体のcss設計のせいなのですが。とりあえずは対処法。

生成されるソースを見ると、


　なんちゃらかんちゃら

という訳で、「syntaxhighlighter」というクラス名でフォントサイズを制御している模様。
そのありかをチェックすると、「syntax-highlighter/css/shCore.css」の22行目。

.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter span,
.syntaxhighlighter .bold,
.syntaxhighlighter .italic,
.syntaxhighlighter .line,
.syntaxhighlighter .line .number,
.syntaxhighlighter .line .content,
.syntaxhighlighter .line .content .block,
.syntaxhighlighter .line .content .spaces,
.syntaxhighlighter .bar,
.syntaxhighlighter .ruler,
.syntaxhighlighter .toolbar,
.syntaxhighlighter .toolbar a,
.syntaxhighlighter .toolbar a:hover
{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: none;
	text-align: left;
	float: none;
	vertical-align: baseline;
	position: static;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
	height: auto;
	width: auto;
	line-height: normal;
	font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
}

なーんてなっておりまして……。
下手にパーセンテージを小さくしようものなら、入れ子構造でエラいこっちゃ。

で。その次にあったのが。

.syntaxhighlighter
{
	width: 100%;
	margin: 1em 0 1em 0;
	padding: 1px; /* adds a little border on top and bottom */
	position: relative;
	overflow: auto;
}

ここだったら、クラス単体での設定が可能。
という訳で、以下のように書き加えてみました。

.syntaxhighlighter
{
	width: 100%;
	margin: 1em 0 1em 0;
	padding: 1px; /* adds a little border on top and bottom */
	position: relative;
	overflow: auto;
	font-size: 85%;
	max-height:200px;
}

「font-size:85%」というのは、

タグのサイズに準拠。
ついでに「max-height」指定をカマして、ずらずら長いソースを収納したという手筈でございます。

しっかし……今後、アップグレードする度に書き換えなきゃいけないかと思うとorz。
極力プラグイン本体の内容はいぢりたくないんだよね……(..;)。

Syntax Highlighter for WordPress ...
All in One SEO Pack 折角ブログを立ち上げるんなら、皆さんに見て頂きたい訳で。それには当然、検索エンジンの上位に載っかるコトが先決。そこで必須になってくるのが「All in One SEO Pack」。タイトルやMETAタグの内容をページ [...]...

関連記事はYARPP関連記事プラグインによって表示されています。

Syntax Highlighter for WordPress

Sat, 06 Feb 2010 07:07:32 +0000

技術系ブログをやる場合、結構頭をひねるのがソースの表示方法。
別に、フツーに

タグでくくっちまえばイイという話もありますが。
殆どデフォルトと化しているのが、Javascriptライブラリの「Syntax Highlighter」。
そのWordpressのplug-inの１つが、「Syntax Highlighter for WordPress」でございます。

同じような意図を持ったplug-in、実は色々あるのですが、これを選んだ理由は主に２つ。

開発者が日本語であること。
生成されるソースがdiv/spanベースであること

まず、日本発plug-inというコトで、ありかは「WordPress Plugins/JSeries」。
「Syntax Highlighter for WordPress (ソース整形表示)」にございます。
大まかな話はそちらに記載してあるので、インストール方法や使い方を知るために、わざわざ英語の長文読解にチャレンジしなくても良いし、改めてGoogle先生に尋ねる必要もなし。
Wordpress.orgの「Plugin Directory」に登録されていない分、アップデートしても自動更新されないという制約はつきますが、まぁその辺はイイでしょう。
アップデート情報を知るのには、専用plug-inの「JSeries Notifer」を入れるという手があります。

で。生成されるソースとは何ぞや。
とりあえず、実験してみましょう。

この部分のソースを見てみると……。

<?php
	$year = date('Y');
	$month = date('m');
	$day = date('d');
	print "ようこそ！\n";
	print "今日は".$year. "年".$month."月".$day."日です。\n";
?>

となっているのですが、FirebugでJavascriptによって見栄えを考えて生成し直したソースを見てみると……。


	
		プレインテキスト印刷?
	
	
		1.

		2.$year=date('Y');

		3.$month=date('m');

		4.$day=date('d');

		5.print"ようこそ！¥n";

		6.print"今日は".$year."年".$month."月".$day."日です。¥n";

		7.

うぎゃあっ(>_<)ヽ以外の何ものでもありません。但し、各パーツはspan/codeと、W3C上では一応問題のない構造になっています。 Wordpress.orgの「Plugin Directory」で「SyntaxHighlighter」を検索してみると、「SyntaxHighlighter Evolved」っつーのが真っ先に上がって、過去ログ見たらかなり老舗ぽかったのでありますが、なぜか自動生成、タグでやってしまってるのですね。さすがに今時、コレはないんじゃなかろーか……。という訳で。とりあえずはコレで、カッコがついた訳でございます。 Related posts: Syntax Highlighterのフォントサイズの件。 Syntax Highlighterを導入したはイイが、文字ソース部分だけなぜかフォントサイズがでかくなってしまい、むーん。。。いやまぁ、完全にテーマ本体のcss設計のせいなのですが。とりあえずは対処法。生成される [...]... 関連記事はYARPP関連記事プラグインによって表示されています。 WP-MBManagerの文字化け対策 Mon, 25 Jan 2010 11:30:21 +0000 WP-MBManagerを使い始めた時、頭を抱えたのが文字化けでした。これだったら別に、phpMyAdmin使っちゃえばイイじゃん……と思うのですが。とりあえず、対処法のメモ。まず、バックアップされる.splファイルを、デフォルト使いの「mi（ver.2.1.9r1）」で開くと、文字コードが「ISO-8859-4」になってしまい、日本語関係が全滅(..;)。実際の文字コード、UTF-8なのになんでや〜〜っ！という訳で、「ドキュメント→テキストエンコーディングを変更して再読込」でUTF-8を選んだら……またもや、文字化け(..;)。しょーがないので、「JeditX（ver.1.47）」で開くと、「エンコーディングが違うよ」アラートが出て、推奨エンコーディングは「日本語（EUC）」。なんか納得しないけど、まぁいいさと「OK」したら、ようやくきちんと日本語が読めるように。「ファイル→書類情報」からエンコーディングを「Unicode(UTF-8)」に指定し、保存し直せば無事、「mi」でもUTF-8で開くようになりました。どーやら、保存時のエンコーディングがおかしいらしい。（但し、どこがどうおかしいのかは不明←ヲイ関連情報の少なさを考えると、多分サーバの問題だと思うが）「mi」単体でチェックする場合は、「ISO-8859-4」で開いた後で「EUC-JP」で再読込→UTF-8化しておけばOK。但し、そいつを使って復元云々は、運良くまだやってないのでそれで良いか否やは、別問題でございます。あと。定期的にバックアップを取る設定になっていると、メールで添付ファイルが送られてくる訳ですが。差出人やら件名やらが文字化けしまくってキモチ悪い。海外発plug-inちうことで、マルチバイト環境考慮に入ってないのは分かるけど、どこをどう直せば良いのやら。これについては、「犬小屋にて」様に答えが載っておりました。 WP-DBManager のメール文字化けを解消する行数云々はver.によってビミョーに違うけど、「$mail_subject = sprintf」検索ワードに引っかけることで探索可能。アリガトウゴザイマスm(_ _)m これにて一安心♪ No related posts. 関連記事はYARPP関連記事プラグインによって表示されています。 WP-DBManager Wed, 20 Jan 2010 12:52:54 +0000 WordpressはMySQLをデータベースに使っているんで、バックアップを取ったり何だりというの、phpMyAdminを使えばめんどいコマンドを打たなくてもきちゃう訳ですが。それでもやっぱり、いちいちphpMyAdminに接続して定期的にバックアップ取るのはめんどくさい。という訳で「WP-DBManager」。 Wordpressの中でデータベース関連のあれこれができるplug-inでございます。まずは配布サイトからダウンロード＆展開 WP-DBManager 勿論これも英語版なので、「MMRT daily life」様が配布されている日本語版をダウンロード＆展開。 wp-content/pluginsに英語版をアップロードした後、同じディレクトリに日本語版のファイルもを放り込んで、ダッシュボードから有効化。そうしますと、こんなalertが。庚さん的ぶっちゃけ訳。「バックアップを置くディレクトリが外から見られてまっせ〜。『.htaccess』をちゃんと入れてね」ということで改めてwp-content/plugins/WP-DBManager/の中身を見ると、 htaccess.txt というファイルがございます。こいつをwp-content/backup-dbの中に放り込み、「.htaccess」とリネーム。あとの操作は、ダッシュボード < データベースにて。「DBバックアップ」で、「バックアップ」をポチすると、先刻のwp-content/plugins/WP-DBManager/に生成されたバックアップファイルが書き込まれるという寸法。また、「DBオプション」で設定すれば、バックアップファイルの生成とDBの最適化を自動的にやってくれちゃうので、非常に便利でございます。ちなみに。「.htaccess」の内容は以下の通り。 order allow,deny deny from all 要は、「誰も見るな！」という訳ですね。ハイ。 No related posts. 関連記事はYARPP関連記事プラグインによって表示されています。 All in One SEO Pack Mon, 18 Jan 2010 05:09:09 +0000 折角ブログを立ち上げるんなら、皆さんに見て頂きたい訳で。それには当然、検索エンジンの上位に載っかるコトが先決。そこで必須になってくるのが「All in One SEO Pack」。タイトルやMETAタグの内容をページごとに設定できるというものです。一応テーマファイルで色々書き込めば実現できるけど、何だかんだいってめんどくさいのでこっちを利用しちゃいましょう。まずは配布サイトからダウンロード＆展開 All in One SEO Pack 但し、本家のは英語オンリーなので、ちと敷居が高い。（中身を見ると一応日本語ファイルも入っているようだけど、なぜか英語表示になってしまう）そこで、「広告大臣」様が配布されている日本語版をダウンロード＆展開。両方の「readme.txt」を開いてVer.を照らし合わせ、ご本家版の方が上位になってたら、ご本家版の中に日本語版に入ってる all_in_one_seo_pack-ja.mo all_in_one_seo_pack-ja.po を放り込み（＆入れ替え）して、wp-content/pluginsにアップロード。（同じVer.だったら日本語版をまんまアップでOK）ダッシュボードから有効化します。だがしかしだがしかし……。いきなりこんなalertが。庚さん的ぶっちゃけ訳。「『プラグインを有効化』しただけじゃ働かないから。ちゃんと設定してちょうだい」ということで「the admin page 」のリンクをクリックすると、ダッシュボード< 設定<オール・イン・ワンSEOへ移動。設定に関しては、まぁ、見たまんま。項目のテキストをクリックすると説明文が表示されるので、それを便りに設定して行けば良い訳ですが。先刻のアラートの源は「Plugin Status:」。ここを「Enabled」にチェックすることで、このプラグイン自体が動作する仕組みになっています。 No related posts. 関連記事はYARPP関連記事プラグインによって表示されています。使用中のプラグインあれこれ。 Fri, 15 Jan 2010 01:00:27 +0000 Wordpressいぢりの醍醐味といえばやはり、プラグイン関係でございます。とりあえず、設置に当たって放り込んでみたプラグインをまとめてみました。どれもこれも、仕事の現場では（ほぼ）デフォルト物件だったりします。思い切り必要最低限に絞り込んだんだけど、それでもかなり多いですな。元々あるヤツ Akismet スパム検出 WP Multibyte Patch 日本語における不具合解決システム関係で必須物件主にSEO対策とデータベース関連でございます。 All in One SEO Pack METAタグの設定やタイトル設定etc. Google XML Sitemaps クロウラー用XMLファイル作成 WP-CMS Post Control 自動保存＆リビジョンetc.の制御 WP-DBManager データベースのバックアップコンテンツ関係で必須物件こちらはまぁ、見栄えや使い勝手etc.を良くするもの。一部、マニアック（？）なモノも入ってたりしますが、わし的には必要なのよぉ^^; Breadcrumb NavXT パンくずリスト Commented entry list コメントとトラックバックを分けて表示 Contact Form 7 メールフォーム設置 Dagon Design Sitemap Generator サイトマップ作成 Duplicate Post 記事の複製 Syntax Highlighter for WordPress ソース表示支援 WP-PageNavi ページナビゲーションの数値表示 Yet Another Related Posts Plugin 関連記事表示実際にはまだ「使用する」をぽちしただけで、実際に稼働していないのも多々アリでございますが。追々、操作etc.の備忘録をまとめる予定です。 No related posts. 関連記事はYARPP関連記事プラグインによって表示されています。手抜きのテーマ作り。 Thu, 14 Jan 2010 01:08:09 +0000 Wordpress、PHP＋MySQLをコアにしたCMSツールでございます。かなり素直な作りをしてて、それこそ特にプログラミングの勉強をしたことのないわしでもフツーに使えちゃうのが可愛くて、がしがし使ってる訳ですが。それでもやっぱ、見栄えっつーかテンプレをイチから作ろうと思うと、Photoshop辺りでデザイン→XHTML＋CSSでベース構築→PHPとWordpressのレファレンスにらみつつのファイル作成……めんどい、めんどくさすぎる！かと言って既存ファイルっちうのも味気ない。別にデザイン自体はシンプルでイイんで、“自分なり”のテーマが欲しい……というワガママに打ってつけのサービスが「Wordpress Theme Generator」。使い方は至って簡単。サイズ・レイアウト・色etc.を選んで「Save」を“ぽちっとな”したら、テーマファイル一式を自動生成してくれます。英語オンリーでもこれならおっけー。特にスグレモノだと感じるのは、何かしら選んだら、すぐさま右側のプレビューに反映されるコト。色合いなんかはやっぱり、実際に見ながらあれこれ、いぢりたいじゃないですか。でもって生成されたファイルも、かなりシンプルな作りなので、アウトラインだけこっちで作って、あとは自分なりにカスタマイズするのも吉。ビジェットにも対応しています。という訳で。このテーマもそれでちょちょいと作ってみました。個人ブログだったらこれで、充分でございましょうｗなお。「Save」後、テーマファイル一式は一括ZIPファイルと個別ファイルの二通り生成されるのですが、何度DLしてもZIPファイルは「ぱーみっしょんなんちゃら」で文句が出て開きませんでした。めんどいけど、今のところは個別ファイルを１つ１つDLする必要アリのようです。でもまぁ、イチから作るよりは余程らくちんなんですけどね^^; No related posts. 関連記事はYARPP関連記事プラグインによって表示されています。

SEVENTH HEAVEN » Wordpress

Syntax Highlighterのフォントサイズの件。

Syntax Highlighter for WordPress

WP-MBManagerの文字化け対策

WP-DBManager

All in One SEO Pack

使用中のプラグインあれこれ。

元々あるヤツ

システム関係で必須物件

コンテンツ関係で必須物件

手抜きのテーマ作り。