カテゴリページのメタディスクリプションの設定を変えてみた
久しぶりにGoogleでエゴサーチなんてしてみたら、当ブログのカテゴリのページが検索結果に出てるじゃないですか！
１つだけだけど、これはちょ～っと嬉しいですよ。
カテゴリー："カスタマイズ"
ブログシステムに拒否されるソースコードを掲載しよう！
DBに接続してホゲホゲするソースコードをブログに掲載しようとしたら、システムに拒否されてしまいました。
でもよく考えたらブログシステムってデータをDBに保存しているわけですから、その操作に関係する怪しげなソースコードなんて、拒否して当たり前なんですよね（SQLインジェクション対策として）。
とはいえ、ソースコードは掲載したい！ というわけで考えた結果・・・。
iframeタグを使うことにしました。
方法としては、ソースコードの部分だけを別のHTMLファイルとして切り出して、別のサーバーにアップロードしておきます。
そしてこの別サーバーに保存してあるHTMLファイルをブログのエントリーの中に作った iframe に読み込めばOKなわけです。
iframe を使っているせいでソースコード部分の高さとか、スクロールバーの制御とか、ちょっと変になって見づらいかな？ となってしまいましたが、それでも掲載できないよりは良いかなと。
iframe の制御についてはおいおい勉強していきたいと思うわけではありますが、あのタグの周辺って、いろいろとカオスな事になっていそうなので早々に諦めるかも(^_^;)。
SyntaxHighlighterカスタマイズメモ
ソースコードを美しく表示してくれるSyntaxHighlighter（シンタクスハイライター）を、更に便利に使うためのカスタマイズ方法をご紹介です。
Webで読みやすいフォントはMeiryo（メイリオ）
不意に 「ウチのブログの文字、なんだか読みにくいなぁ」 と思ったので、あちこちのサイトのCSSを見て回った結果、トップに指定するフォントを“Meiryo（メイリオ）”にすることにしました。
TypePadの上級者テンプレートに “パンくずリスト” を付けてみた
１アクセス当りのページビューアップに “パンくずリスト” が有効っぽいので、個別エントリーのページに付けてみました。
パンくずリスト（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 もほとんど違いが無いと言われればそうなんですが、ちょっとでも柔らかい雰囲気になればいいかなと。
読みやすいフォントのサイズは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:13px;
font-size:14px;
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:」の部分を、好きな文言に書き換えてやればＯＫということですね。
また、デフォルトでは、エントリーの内側にブログパーツが表示されるので、任意の場所にブログパーツを表示させたい場合は、
<div class="linkwithin_div"></div>
というソースを、テンプレートの表示したい場所に貼り付けてやりましょう。
最後に編集したテンプレートを保存して、作業は完了です。
なお、最初のブログの解析に１～３日かかるそうなので、それっぽいエントリーが表示されるようになるまで、しばらく待つことにしましょうかね。
参照リンク
・LinkWithin - Related Posts with Thumbnails
・[N] ブログに「関連記事」ブログパーツを手軽に付ける方法
全角スペースを使わずに段落の先頭を一文字下げよう
TypePadのWYSIWYGエディタが変更になったようで、これまでは削除されていなかった文頭の全角スペースが削除されるようになっちゃいました・・・orz
でも日本語で書くからには段落の最初は一文字分下げたいじゃないですか。まぁ、HTMLモードで編集（全角スペースを挿入）して保存すれば、削除はされないみたいなんですけど、リッチテキストモードに行って戻ると消えてるという罠（苦笑）。
もちろんリッチテキストモードを使わなきゃいいんですが、文章やレイアウトをチェックするにはリッチテキストモードの方が便利なんですよね。かといって、毎回最後にHTMLモードで全角スペースを追加していくのは面倒です。
というわけで、何かいい方法がないか調べてみました。
第１の方法は文字エンティティを使う方法です。 を使えば、2バイトフォント相当の空白を確保できるんだとか。
こんな感じ
 で指定しました
 で指定しました
第２の方法はCSSを使う方法で、<p style="text-indent: 1em;"> ってしておくと、自動的に先頭に１文字分の空白が挿入されます。
こんな感じ
CSSで指定しました
どちらを使っても、結果の見た目は同じなんですが、「段落の頭を一文字分下げる」という意味では、CSSを使う方が理にかなっているのかなぁ
追記：
今やってみたら、先頭の も消えてるじゃん！こりゃCSSを使うしかないか。
スポンサーリンク
プロフィール
Categories
まとめページ
ブログ内検索
Licenses
OTHER
スポンサーリンク