スポンサードリンク
カテゴリー:"カスタマイズ"

SyntaxHighlighterカスタマイズメモ

ソースコードを美しく表示してくれるSyntaxHighlighter(シンタクスハイライター)を、更に便利に使うためのカスタマイズ方法をご紹介です。

続きを読む »

Webで読みやすいフォントはMeiryo(メイリオ)

不意に 「ウチのブログの文字、なんだか読みにくいなぁ」 と思ったので、あちこちのサイトのCSSを見て回った結果、トップに指定するフォントを“Meiryo(メイリオ)”にすることにしました。

続きを読む »

TypePadの上級者テンプレートに “パンくずリスト” を付けてみた

1アクセス当りのページビューアップに “パンくずリスト” が有効っぽいので、個別エントリーのページに付けてみました。

パンくずリスト(breadcrumb list)は、ウェブサイト内におけるウェブページの位置をツリー構造を持ったハイパーリンクの一覧として示すもの。パンくずナビ、トピックパス、フットパスとも言う。

パンくずリスト - Wikipedia より引用

見た目は、こんな感じです。

実装方法は、上級テンプレートの Individual Archives に以下のソースを加えます。

位置的には、<p class="content-nav"> の前あたりが良いのではないかと思います。

Enjoy!

読みやすい背景色について悩む

 ブログの背景色は白(#FFFFFF)が一般的だと思うんですが、この #FFFFFF という白って、実は目にキツイんじゃないかと思いまして、いろいろ試してみました。

 というのも、文字の色は黒(#000000)よりもグレー(#333333)にした方が読みやすいですよ。というような話は見かけても、背景色の話に出会ったことは無いんですよねぇ。あ、ちなみにこのエントリーの文字色もグレー(#333333)です。

さて、最初は普通に白の背景です。



ここの背景は #FFFFFF


次に背景を #EEEEEE にてみます。



ここの背景は #EEEEEE


いかにもグレーって感じになりました。でも、これでは “白” とは言えないので没。

もうちょっと明るくして #FAFAFA にしてみます。RGBの数値的には、R:250 G:250 B:250 となります。



ここの背景は #FAFAFA


う~ん、まだグレーっぽいっすなぁ。思い切って? #FDFDFD だとどうでしょう。



ここの背景は #FDFDFD


おっ! わりと良いかも。調子に乗って #FEFEFE だとどうなるのかな?



ここの背景は #FEFEFE


さすがに白(#FFFFFF)とほとんど区別がつきませんが、ちょっと明度が落ちてる感じはしますねぇ。

しかしグレー系のトーンは、そこはかとなく “どんより” としたイメージがあるので、もうちょっと明るくならないかなぁ? と試行錯誤した結果、#FEFFFD あたりが良さそうな気がします。



ここの背景は #FEFFFD


まぁ、#FEFEFE も #FEFFFD もほとんど違いが無いと言われればそうなんですが、ちょっとでも柔らかい雰囲気になればいいかなと。

参考リンク
 ・どや!?アクセスアップ10倍のためのブログ運用術と運営方法 | デザインどや!?

読みやすいフォントのサイズは13pxか14pxかで悩む

 最近、あちこちのブログで “読みやすいフォントのサイズは 14px (キリッ” みたいな記事を見かけるので、当ブログも本文のフォントサイズを 14px にしてみました。

 まだ見慣れていない事もあって、これで本当に読みやすくなったのか、ちょ~っと不安ではありますが・・・。

 ついでなので、フォントのサイズによって、どのくらい見た目が変わるのかのサンプル(画像)も作ってみました。

 サンプルは文字サイズ以外の設定は全て共通で、line-height が 1.2、Pタグ(Paragraphタグ,<P>~</P>)の margin-bottom が 1.5em となっています。また、ブラウザは Firefox 7.0.1 を使って表示させました。

font-size:12px;
font-size:12px; のサンプル

font-size:13px;
font-size:13px; のサンプル

font-size:14px;
font-size:14px; のサンプル

font-size:15px;
font-size:15px; のサンプル

 感じ方には個人差があるとは思いますが、1px ずつサイズを変えたにも関わらず、13px と 14px の差が、12 - 13px 間や 14 - 15px 間の差よりも大きいような気がします。

 選択するサイズとしては 13px か 14px が妥当だとは思うのですが、13px だとやや小さくて、14px だとやや大きい気がするんですよね。13.5px が指定できたら、きっとちょうど良かったと思うんだけどなぁ(もちろん無理ですけど)。

 実際 14px だと大きい気がして、いったんはフォントサイズを 13px にしてたんです。でもやっぱり、13px では字が小さいような気がしてきて、今は 14px です。

たかが 1px とはいえ、難しいものですねぇ。

TypePadの上級者テンプレートに関するメモ

 このブログはのデザインは TypePad の上級者テンプレートを使ってるんですが、どのテンプレートがどのページに関連付けられているのかをすぐに忘れてしまうので、自分用にメモメモです。

インデックス・テンプレート:
  • Archive Index Template : 過去記事のリンク集ページ
  • Atom Template : ATOM形式のフィードを出力します
  • JSON Feed Template : Javascriptで最新記事を出力するためのJSONフィードを出力します
  • Main Index Template : ブログのトップページです
  • RSS 2.0 Template : RSS2.0形式のフィードを出力します
  • RSS Template : RSS1.0形式のフィードを出力します
  • Stylesheet : ブログのデザイン用のCSS
  • Theme Stylesheet : カスタムCSSでデザインするための基本CSS
アーカイブ・テンプレート:
  • Category Archives : カテゴリー毎に記事一覧を表示するページ
  • DateBased Archives : 投稿日毎に記事を表示するページ
  • Individual Archives : 個別のブログ記事を表示するページ
  • Pages : 個別のウェブページを表示するページ
  • Search Results : 検索結果を表示するページ

参照リンク
 ・TypePad : HTMLテンプレート編集

TypePadの “上級者テンプレート” で 「LinkWithin」 を導入してみた

 最近、あちこちのブログで見かけるようになった、「関連しているかもしれないエントリー」を表示してくれるブログパーツ 「LinkWithin」 を導入してみました。

 というわけで、TypePad の“上級者テンプレート”に LinkWithin を導入する手順の覚え書きです。

 まず LinkWithin にアクセスし、メールアドレス、設置するブログのURL、ブログサービスの種類、表示するエントリー数を選択して、[Get Widget!] ボタンをクリックします。

 ブログの種類のリストには TypePad がありますが、“上級者テンプレート”を使用している場合は[Other]を選択します。

 次の画面で、テンプレートに貼り付ける JavaScript のソースが表示されるので、個別記事のテンプレート(Individual Archives)の </body> タグの前に貼り付けます。

 そのままだとブログパーツの見出し(?)が 「You might also like: 」になってしまうので、

<script>linkwithin_text='Your custom text:'</script>

というソースを上記のソースの前に加えてやると、見出しが 'Your custom text:' になります。ということで、この「Your custom text:」の部分を、好きな文言に書き換えてやればOKということですね。

 また、デフォルトでは、エントリーの内側にブログパーツが表示されるので、任意の場所にブログパーツを表示させたい場合は、

<div class="linkwithin_div"></div>

というソースを、テンプレートの表示したい場所に貼り付けてやりましょう。

最後に編集したテンプレートを保存して、作業は完了です。

 なお、最初のブログの解析に1~3日かかるそうなので、それっぽいエントリーが表示されるようになるまで、しばらく待つことにしましょうかね。

参照リンク
 ・LinkWithin - Related Posts with Thumbnails
 ・[N] ブログに「関連記事」ブログパーツを手軽に付ける方法

全角スペースを使わずに段落の先頭を一文字下げよう

TypePadのWYSIWYGエディタが変更になったようで、これまでは削除されていなかった文頭の全角スペースが削除されるようになっちゃいました・・・orz

でも日本語で書くからには段落の最初は一文字分下げたいじゃないですか。まぁ、HTMLモードで編集(全角スペースを挿入)して保存すれば、削除はされないみたいなんですけど、リッチテキストモードに行って戻ると消えてるという罠(苦笑)。

もちろんリッチテキストモードを使わなきゃいいんですが、文章やレイアウトをチェックするにはリッチテキストモードの方が便利なんですよね。かといって、毎回最後にHTMLモードで全角スペースを追加していくのは面倒です。

というわけで、何かいい方法がないか調べてみました。

第1の方法は文字エンティティを使う方法です。&emsp;を使えば、2バイトフォント相当の空白を確保できるんだとか。

こんな感じ
 &emsp;で指定しました

第2の方法はCSSを使う方法で、<p style="text-indent: 1em;"> ってしておくと、自動的に先頭に1文字分の空白が挿入されます。

こんな感じ

CSSで指定しました

どちらを使っても、結果の見た目は同じなんですが、「段落の頭を一文字分下げる」という意味では、CSSを使う方が理にかなっているのかなぁ

追記:
 今やってみたら、先頭の&emsp;も消えてるじゃん!こりゃCSSを使うしかないか。

参照リンク
 ・HTMLでの全角スペース - HTML - 教えて!goo

TypePad の「上級者テンプレート」に[最近の記事]を表示させよう

 TypePadの「上級者テンプレート」って、デザインを好きにカスタマイズできるのはいいんですが、デフォルトでは「最近の記事」のリストが表示されないんですよね。

 でもそれはちょっと寂しいので、なんとかできないかと頑張ってみました。最初にトライしたのは、TypePadの機能で実現する方法です。

 新規に「recent-posts」ってテンプレートモジュールを作って、以下のソースを張り付けて保存します。

<!-- recent comments module -->
<div class="module-recent-comments module">
<h2 class="module-header"><$MTTrans phrase="最近の記事"$></h2>
<div class="module-content">
  <ul class="module-list">
    <MTEntries lastn="10" sort_order="descend">
    <li class="module-list-item"><MTEntry><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></MTEntry></li>
    </MTEntries>
  </ul>
</div><!-- .module-content -->
</div><!-- .module-recent-comments .module -->

 次にインデックステンプレートやアーカイブテンプレートに以下のソースと追加して、保存すればOK!

<$MTInclude module="recent-posts"$>

 ところが、トップページや個別エントリーのページではうまく表示されるものの、月間アーカイブやカテゴリーアーカイブのページでは期待通りの内容が表示されません。

 月間アーカイブではその月の中での新しいエントリーが、カテゴリーアーカイブではそのカテゴリー内での新しいエントリーが表示されてしまいます。これは困った。

 そこで「どこかに最新のエントリーのリストは無いかいなぁ?」と考えて思いついたのが、RSSを利用する方法です。RSSのパースには、jkl-parsexml.js というjavascriptライブラリを使います。

 「最近の記事」という名前でタイプリスト(メモ)を作成し、下記のソースを貼りつけて保存します。

<script type="text/javascript" src="/js/jkl-parsexml.js"></script>
<script type="text/javascript"><!--
  var url = "/index.rdf";
  var XmlParser = new JKL.ParseXML( url );
  var obj = XmlParser.parse();
  
  var list = "";
  for(var i=0; i<10; i++){
    list += '・<a href="'+obj['rdf:RDF'].item[i].link+'">'+obj['rdf:RDF'].item[i].title+'</a><br />';
  }
  document.write(list);
// --></script>

 これをテンプレートモジュールの時と同様に、各ページのテンプレートに以下のソースを追加して読み込んでやればOKです。

<$MTListInclude name="最近の記事"$>

 これでどのページでも最新の記事のリストが表示されるようになりました。

 ですが、RSSを読み込んで処理している間、画面の表示(描画)が止まってしまうのはちょっといただけません。ウチみたいに左のサイドバーにセットしてると、その分本文の表示が遅れてしまいます。

 そこで、非同期に動作するように変えてみました。ソースは以下のとおりです。

<div id="resent-entry"></div>
<script type="text/javascript" src="/js/jkl-parsexml.js"></script>
<script type="text/javascript"><!--
  var url = "/index.rdf";
  var XmlParser = new JKL.ParseXML( url );
  
  var writelist = function(obj){
    var list = "";
    for(var i=0; i<10; i++){
      list += '・<a href="'+obj['rdf:RDF'].item[i].link+'">'+obj['rdf:RDF'].item[i].title+'</a><br />';
    }
    document.getElementById('resent-entry').innerHTML = list;
  }
  
  XmlParser.async(writelist);
  XmlParser.parse();
// --></script>

 あとから にゅるん とリストが追加されるのが気になりますが、全体としての表示速度は早くなったので、これで良しとしましょう。

注意:
 jkl-parsexml.js のパスとRSSファイルのパスは、ご自身の環境に合わせて変えてください。また、jkl-parsexml.js を利用するための準備作業については割愛させていただきました。

参照リンク
 ・javascript で XML をパースしよう 「jkl-parsexml.js」

ソースコードのハイライトに google-code-prettify を導入してみる

 これまで当ブログのソースコードのハイライトには 「CodePress」を使ってたんですが、IE と Firefox でしかちゃんと動かないみたいなんですよね。

 まぁ、導入したのが2007年12月ですから、「もしかしてヴァージョンアップすれば良くね?」と思ったんですが・・・。なんと!ドメインが売りに出されていました。お~ぃ。

 念のためググってみたら、SourceForge にソースあったんだけど、最終リリースが「2007-09-26」だし・・・。

 とはいえ、IE と Firefox でしかまともに動かないのも困りものなので、google-code-prettify を導入してみることにしました。

 実は2007年12月の時点で「google-code-prettify」の導入を検討してたんですねぇ、私。すっかり忘れてましたけど。

 当時のエントリーによると「BODYタグ に細工をしないといけないので、導入を断念」したとか。いや~、知識がないってのはそういうもんなんですねぇ。今だと「イベントリスナーに追加する方法も書いてあるじゃん!」てことが解るわけですから、僕も多少は進歩してたようです。

 さて、導入の手順ですが

  1. ダウンロードしたZIPファイルを解凍します。
  2. srcフォルダ内のファイルをブログにアップします(例:/js/prettify/)。
  3. タイプリスト(メモ)に読み込むためのソース記述し、保存します。

保存するソースのサンプルは以下のとおりです。

<link href="/js/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/js/prettify/prettify.js"></script>
<script type="text/javascript">
addEventListener('load', prettyPrint, false);
</script>

 使い方は、ハイライトする部分をPREタグに入れて、prettify用のクラスを指定すればOK。ちなみにソース内の < は &lt; に変換しておいた方がよさげです。

例えば、こんなコードが

<pre class="prettyprint lang-perl">
#!/usr/bin/perl

use strict;
use warnings;

print "Hello World!";
</pre>

こう表示されます。

#!/usr/bin/perl

use strict;
use warnings;

print "Hello World!";

うん。いい感じ。

参照リンク
 ・google-code-prettify - Project Hosting on Google Code
 ・MOONGIFT: ≫ Google Codeで使われているソースコードハイライタ「Google Code Prettify」:オープンソースを毎日紹介

スポンサードリンク

プロフィール


  • 書いてる人:夢界 陸

    名古屋在住のおっさん。
    プログラミングやガジェットの話など、 日々の興味を徒然と綴っています。



    Twitterやってます @mukairiku



    運営サイト
    www.mukairiku.net

アクセスランキング


ブログ内検索

Licenses

  • Creative Commons License

OTHER


  • このブログのはてなブックマーク数

    track feed
    ブログパーツ
Blog powered by TypePad

スポンサードリンク