プログラマーズ雑記帳

ブログカスタマイズ カテゴリ記事

   Next 
インターネット  »  ブログカスタマイズ

ブログでコードハイライトする

Tag JavaScript FC2ブログ コードハイライト ex-html-mode.el
ブログに書いたコードにコードに色を付けて表示したいなということで、ブログでコードハイライトできるようにしました。
その方法を紹介します。


スクリプトをダウンロードする

コードに色を付けるにはコードハイライトの JavaScript を使う必要があります。
コードハイライト用のスクリプトはいろいろ公開されているのですが、私は対応している言語が多かった SHJS というのを使いました。
他にも SyntaxHighter というスクリプトが有名で試してみたのですが、こちらは何故かうまく色が付いてくれませんでした。 (^^;)

まず、以下のサイトから必要なファイルまたはコード一式をダウンロードしてきます。
http://shjs.sourceforge.net/index.html


自分のブログにファイルをアップロードする

ダウンロードしてきたファイルを自分のブログにアップロードします。このとき最低限必要なファイルは 2 つです。
  • スタイルシード sh_style.css
  • メインのスクリプト sh_main.js

後はハイライトしたい言語のスクリプト sh_xxxx.js をアップロードしておきます。

このとき後で使うのでアップロード先のパスをコピーしておいてください。


テンプレートを編集する

アップロードしたスタイルシートとスクリプトを呼び出せるように head タグ内に以下のような行を追加します。


<head>
                                            :
<link type="text/css" rel="stylesheet" href="http://blog.../sh_style.css" >
<script type="text/javascript" src="http://blog.../sh_main.js"></script>
<script type="text/javascript" src="http://blog.../sh_cpp.js"></script>
<script type="text/javascript" src="http://blog.../sh_html.js"></script>
<script type="text/javascript" src="http://blog.../sh_ruby.js"></script>
                                            :
</head>


あと、ページのロード時にスクリプトを実行するように body タグに onload="sh_highlightDocument();" の記述を追加しておきます。

<body id="pagetop" onload="sh_highlightDocument();">


これでコードに色をつけて表示することが可能になりました。


コードを書く

実際にブログ中にコードを書く場合には、クラス属性でコードを指定した pre タグ内に書きます。


<pre class="sh_xxx">
  色を付けたいコード
</pre>


ここの sh_xxx は言語ごとに変わるところで、スクリプトのファイル名の .js の前の部分です。

ただし、 html ファイル内では <, >, & は使用できないので、コード中の文字はそれぞれ &lt;, &gt;, &amp; に変換しておく必要があります。

スポンサーサイト



このエントリーをはてなブックマークに追加  
 
インターネット  »  ブログカスタマイズ

FC2 ブログのテンプレート用変数

Tag FC2ブログ ガイド

FC2 ブログのテンプレートを編集するときに必要になってくる変数についての解説です。
変数の一覧自体は公式マニュアルがあります。一覧だとわかいりづらい部分も多いので、 変数と FC2 ブログのテンプレートの基本的な構成について書いてみました。

ブロック変数と単変数

FC2 ブログのテンプレート変数には ブロック変数 と 単変数 があります。

ブロック変数

ブロック変数は html のコメント形式で指定します。 
<!--xxxx-->
ブロック内
<!--/xxxx-->
このブロック内の記述が特定の条件のときだけ使用されたり、繰り返して使用されたりします。
プログラミング言語でいうと if や while(for) のブロックと同じような機能になります。

テンプレートの html ファイルは 1 つですが、後述するようにブログではいろいろなモードがあり、 このブロック変数を使って、モードごとに表示内容を切り替えるのに使用します。

同じような記述方法で繰り返しにもなります。
条件分岐になるか、ループになるかは変数によって変わります。

単変数

単変数は以下のような型式で変数の部分が置き換わって表示されます。
<%xxxx>
例えば、 <%blog_name> と記述すると表示するときにはブログの名前になります。

単変数にはこの blog_name のようにどこでも使える変数と、 特定のブロック内でのみ使える変数があります。

モード

FC2 ブログでは 8 つのモードがあります。
モード 名前 概要 このブログ
トップページ index 最新記事を複数表示 [Home] リンクを選択。
ページ記事 - 指定ページの記事を複数表示 トップページから次ページ [Next] などを選択
カテゴリ category 同一カテゴリの記事を複数表示 カテゴリの単語を選択
タグ tag 同一タグの記事を複数表示 タグを選択
日、月別 date 同一の日または月の記事を複数表示 カレンダーから選択
個別記事表示 permanent 記事を一つだけ表示。コメントなど詳細に記事を表示。 記事のタイトルを選択
記事一覧 titlelist 過去記事の一覧を表示 [Title List] リンクを選択
検索結果表示 search 検索にヒットした記事を複数表示 メニューの入力エリアから検索を実行
モードの名前を使ったブロック変数 mode_area では、ブロック内がそのモードだけで有効になります。
逆に not_mode_area の変数を使うと内部がそのモードでは表示されなくなります。
<!--mode_area-->
mode だけで有効
<!--/mode_area-->

<!--not_mode_area-->
mode 以外で有効
<!--/not_mode_area-->
表のページ記事モードの名前は忘れたわけではありません。 このモードに対するブロック変数は用意されてないのです。
「なんでないの?」 とか 「トップページとわける必要あるの?」 と思われるかも知れません。 私もそう思いますが、実際そうなってしまっています。
ただ、 not_... のブロック変数を使って、 他のモードではないモードということでページ記事の内容を記述することは出来ます。

トップページ(index)、ページ記事、カテゴリ(category)、タグ(tag)、日月別(date)

モードはたくさんありますが、 この節タイトルの 5 つのモードはテンプレートでは、だいたい一緒に書くことができます。 ベースは同じにしておいて、こまかいところで各モードの mode_area を使って切り替えるというのが、 テンプレートを書くときの基本的なスタイルになっています。

ここでのモードに対するテンプレートの大まかな構成は以下のような感じです。
 <!-- 記事一覧, 検索以外 -->
<!--not_titlelist_area-->
<!--not_search_area-->

<!-- 記事(繰り返し) -->
<!--topentry-->

<!-- 記事タイトル -->
<h2><a href="<%topentry_link>"><%topentry_title></a></h2>

<!-- 記事本文 -->
<%topentry_body>

<!--/topentry-->


<!--/not_search_area-->
<!--/not_titlelist_area-->
まず、not_mode_area のブロック変数を使って、記事一覧, 検索以外のモードとして、5 つのモードを指定しています。
個別表示が抜けていますが、個別表示も一緒に書くことができます。これは次節で説明します。
topentry ブロックが個々の記事内容になります。ここがブログの設定で指定した回数分だけ繰り返されることになります。
topentry ブロック内では次の単変数が使えます。
変数名 内容
<%topentry_link> 個別表示記事へのリンク
<%topentry_title> 記事タイトル
<%topentry_body> 記事の内容
ブログでは通常、 <h1> でブログタイトルを表示して、 <h2> で記事タイトルを表示するようになっています。
また、記事タイトルをリンクにして、クリックすると個別記事表示になるようにしています。

個別記事(permanent)

個別記事のモードも前節の記述を使います。
先ほどのモードの場合には topentry ブロックの内容は複数回繰り返されますが、 個別記事モードとして使われる場合は 1 回だけ表示されることになります。

また、個別記事表示では、コメント、トラックバック、追記 などの記事の詳細情報も表示されることになります。

コメント、トラックバック

コメント、トラックバックにはそれぞれ comment_area, trackback_area のブロック変数を使います。このブロック内でのみ有効な単変数を使って、 それぞれの内容を記述します。

これらのブロックを先ほどの内容に追加します。 これらは premanent_area ブロックで囲まなくても、個別表示モードでしか使用されません。 
<!--trackback_area-->
トラックバック用の記述
<!--/trackback_area-->

<!--comment_area-->
コメント用の記述
<!--/comment_area-->

追記

FC2 ブログには、追記というものがあります。
これは後から書き足すという意味ではなく、記事のさわりの部分と全文を分けたいときに使います。

topentry ブロック内を追記に対応させて書くと次のようになります。 
<!--topentry-->
<h2><a href="<%topentry_link>"><%topentry_title></a></h2>

<!-- 記事本文(さわりの部分) -->
<%topentry_body>

<!-- 追記記事へのリンク(「続きを読む」) -->
<!--more_link-->
<a href="<%topentry_link>#more" title="<%topentry_title>"><%template_extend></a>
<!--/more_link-->

<!-- 追記本文(残りの部分) -->
<!--more-->
<div id="more">
   <%topentry_more>
</div>
<!--/more-->

<!--/topentry-->
追記関連のブロック変数および単変数は以下の表のようになります。
ブロック変数が有効になる場合
ブロック変数 記述対象 トップページなど 個別表示モード
more_link 追記へのリンク ○(ただし、追記がある場合) ×
more 追記 × ○
単変数
変数名 置換後
<%template_extend> "続きを読む"という文字列
<%topentry_more> 追記の内容
これらを使い、個別表示でだけ追記部分の内容を表示し、 トップページなどのモードでは "続きを読む" の文字列で追記へのリンクを表示するようにします。

ちなみに <%template_extend> は言語によって文字列の変わる 多言語用変数です。

記事一覧(titlelist)

記事一覧では titlelist ブロック変数の内容が記事の数だけ(上限 500)繰り返されます。
以下のサンプルは私のブログで使っているものをシンプルにしたものです。 
<!--titlelist_area-->
<h2>記事一覧</h2>
<ul>
  <!-- 記事の数だけ繰り返し -->
  <!--titlelist-->
  <li>
    <!-- 記事タイトル -->
    <a href="<%titlelist_url>" title="<%titlelist_body>">
      <%titlelist_title>
    </a>
  </li>
  <!--/titlelist-->
</ul>
<!--/titlelist_area-->
titlelist の中で使用できる単変数は次のものです。
変数 内容
<%titlelist_title> 記事タイトル
<%titlelist_url> 記事の個別表示へのリンク
<%titlelist_body> 記事の冒頭をテキスト型式にしたもの(約 20 文字)
<%titlelist_body> は記事の内容を簡単に表すためのもので、 ツールチップとして表示しています。
記事一覧モードでは、他のモードと違い、 記事の内容に関して、冒頭以上の内容を表示することはできません。

検索(search)

検索結果表示モード用の私のブログの簡易版です。 
<!--search_area-->
<ul>
  <!-- 記事の数だけ繰り返し -->
  <!--topentry-->
  <li>
    <!-- 記事タイトル -->
    <a href="<%topentry_link>">
      <%topentry_title>
    </a>
    <!-- 記事冒頭 -->
    <p><%topentry_discription></p>
  </li>
  <!--/topentry-->
</ul>
<!--/search_area-->
<%topentry_discription> は先ほどの <%titlelist_body> と同じで記事の冒頭部分のテキストになります。
これを利用して検索サイトっぽく検索結果の一覧を表示しています。

topentry のブロック変数はトップページなどのモードと同じものです。 実はこの検索用のモードは私が分けて使っているというだけで、 トップページなどのモードと同じ型式で表示することも出来ます。

テンプレートの基本構成まとめ

今まで出てきたものをあわせて、あげておきます。
ここでは、検索モードを特別扱いせずにトップページなどと同じものを使うようにしています。 こうするとモードはたくさんありましたが、 記事一覧とそれ以外の 2 つのパターンだけ書けばよいことになります。

実際のテンプレートはこれにプラグインなども付けますが、 基本的な構成はだいたいこのような感じになると思います。
これが分かっていれば、テンプレートを編集しようとしたとき、 もとのテンプレートの内容を理解しやすいのではないでしょうか。

<!-- ==== 記事一覧 以外のモード ==== -->

<!--not_titlelist_area-->

<!--topentry-->

<h2><a href="<%topentry_link>"><%topentry_title></a></h2>

<%topentry_body>

<!--more_link-->
<a href="<%topentry_link>#more" title="<%topentry_title>"><%template_extend></a>
<!--/more_link-->

<!--more-->
<div id="more">
   <%topentry_more>
</div>
<!--/more-->

<!--/topentry-->

<!--/not_titlelist_area-->


<!-- == 個別表示 モードだけで有効になる部分 == -->

<!--trackback_area-->
トラックバック用の記述
<!--/trackback_area-->

<!--comment_area-->
コメント用の記述
<!--/comment_area-->



<!-- ==== 記事一覧 モード ==== -->

<!--titlelist_area-->
<h2>記事一覧</h2>
<ul>
  <!--titlelist-->
  <li>
    <a href="<%titlelist_url>" title="<%titlelist_body>">
      <%titlelist_title>
    </a>
  </li>
  <!--/titlelist-->
</ul>
<!--/titlelist_area-->
このエントリーをはてなブックマークに追加  
 
インターネット  »  ブログカスタマイズ

FC2 ブログの検索フォームの改良と自作

Tag FC2ブログ ガイド
今回は FC2 ブログで 検索フォームのプラグインの問題点を解決する改造と テンプレートで独自の検索フォームを付ける方法の紹介です。

検索フォームの問題点

FC2 ブログには、ブログ内の記事を検索する機能があり、 公式プラグインやブログの設定でその検索フォームをつけることができます。
ただし、これらのもともと用意されているものをそのまま使うと多少不便なところがあります。

たとえば、プラグインなどの検索フォームで検索して、検索結果のページを表示したとします。 そこで、たくさん記事がヒットして、もう少し絞り込みたいな という状況になることはよくあります。
しかし、検索フォームの中身はクリアされて、空欄になっているので、 最初から検索ワードを入力しなければいけなくなり、ちょっと面倒です。

そこで、検索ワードを残しておくことが出来れば、 使いやすくなります。

プラグインの検索フォームを改造したり、 テンプレートを直接修正して、独自の検索フォームを付けることで、 この機能をつけることができます。

ただし、ブログの上部に表示する検索バーの場合は改造することが出来ません。

基本的な検索フォーム

まずはシンプルなサンプルで、 ブログの検索フォームと検索ワードを残す方法を説明します。 
<form action="./" method="get">
  <input type="text" name="q" maxlength="200" size="20"
    <!--search_area-->
    value="<%search_word>"
    <!--/search_area-->
    />
  <input type="submit" value=" 検索 " />
</form>
input フォームの属性の各意味は次の表のようになります。
改造する場合も size 以外は固定と思ってください。
属性 説明
type input フォームのタイプ。"text" でテキスト入力になる
name 識別名。サイト側で使用するため "q" で固定
maxlength 入力可能な最大文字数。 送信可能な量に制限があるので "200" ぐらいで
size 幅(横のサイズ)を指定する。 任意
value フォームのデフォルト値

value のところでテンプレート用変数を使って対応します。
search_area は検索モードでのみ有効になるブロック変数で、 <%search_word> は検索ワードの単変数です。
検索結果の表示画面では、テキストボックスにその検索ワードがデフォルト値として使用され、 それ以外では value が指定されないので、空欄となります。

検索モードなどのテンプレートの変数に関する基本的な説明は前回の記事を見てください。

プラグインの検索フォームの改造

プラグインの検索フォームを改造する場合には、まず ブログの管理ページで検索フォームを追加します。
  1. [環境変数] の [プラグインの設定]
  2. [公式プラグイン追加]
  3. [検索フォーム] のプラグインを追加

この検索フォームを改造します。

検索フォームプラグインの [詳細] リンクを選択します。
詳細

[html 編集] リンクでプラグインの html を表示します。
fc2blog_plugin_html.png

そこを以下の内容に変更します。
<form action="./" method="get">
  <p class="plugin-search" &align>
    <input type="text" size="20" name="q" maxlength="200" 
      <!--search_area-->
      value="<%search_word>"
      <!--/search_area-->
    /><br />
    <input type="submit" value=" 検索 " />
  </p>
</form>

独自の検索フォーム

簡単なものであれば、先ほどの基本的な検索フォーム であげたシンプルな例をテンプレートに記述すれば、検索フォームをつけることができます。
場所は好きな場所でかまいませんが、 自分で付ける場合も、ページの上部やサイドバーのあたりに配置しておいた方がわかりやすいと思います。

検索ボタンをアイコンに変更

[検索] ボタンを虫眼鏡のアイコンに変えるだけでちょっとかっこよくなります。 シンプルな例をアイコンを使ったものに変更してみましょう。
<form action="./" method="get">
  <input type="text" size="20" name="q" maxlength="200"
    title="サイト内検索"
    <!--search_area-->
    value="<%search_word>"
    <!--/search_area-->
  >
  <input type="image" alt="検索" title="検索"
    src="http://blog-imgs-44.fc2.com/y/o/h/yohshiy/search.png">
</form>
ボタンの input の type を image に変更します。
image タイプのボタンは submit と同じように送信ボタンになります。 クリックした座標を送信するという違いはありますが、使われないだけなので、 同じと思ってもらって構いません。

アイコンは使いたい画像を通常のファイルアップロード方法でブログにアップしておきます。 その時の URL を <img /> タグと同様に src 属性で指定します。

alt の属性も img タグと同じで、画像が表示されないときの代替文字列です。
title はツールチップの表示です。 おそらく、虫眼鏡で検索するというのは浸透していると思いますが、 念のためツールチップで説明を記述しています。


あとは境界線等のスタイルを CSS を使って変更していきます。 サンプルとしてこのブログで使っている検索フォームの HTML と CSS のコードを紹介します。

メニューバーにある検索フォーム

ページ上部のメニューバーに付けている検索フォームです。
fc2blog_search_menu.png

HTML 
<form action="./" method="get">
  <input class="menu_search_input" type="text" name="q" maxlength="200"
    title="サイト内検索"
    <!--search_area-->
    value="<%search_word>"
    <!--/search_area-->
  >
  <input class="menu_search_btn" type="image" alt="検索" title="検索"
    src="http://blog-imgs-44.fc2.com/y/o/h/yohshiy/search.png">
</form>
CSS で指定するためにタグに class 属性をつけています。
また、 size 属性はスタイルに関係するところなので、 CSS の width でした方がいいと思って外しています。 といいつつ、デフォルトの幅でちょうどいいかなという気がしたので、ここでは CSS でも指定していません。

CSS 
input.menu_search_input {
    height: 18px;
    background-color: white;
    padding: 2px;
    padding-left: 6px;
    padding-right: 22px;    /* 入り込んだボタンの分、空ける */
    border: 1px solid #CCC; /* 境界線をメニューバーよりに明るめにして、へこんだ感じを出す */
    border-radius: 10px;    /* 境界に丸みを付ける */
    margin-right: 0px;
}

input.menu_search_btn {
    margin: 0px;
    margin-bottom: -3px;
    margin-left: -26px;     /* ボタンを左に移動する */
    padding: 1px;
}
CSS の主な設定は次のような点です。
  • 検索ボタンのアイコンはテキストボックス内に表示
    • ボタンに逆マージンをかけて左に浸食させ、テキストボックスではその分パディングを空ける
  • テキストボックスをへこます。
    • メニューバーより明るめの境界線を付ける。
      境界線にはへこんだ感じを出すための inset というオプションがあるが、 丸みを付けているとおかしな感じになるので、周りより明るめの線を引くだけにしている。
  • テキストボックスに丸みを付ける
    • border-radius を使う
border-radius は CSS3 の機能で IE では対応していません(2012-4-13)が、 見え方がちょっと変わるだけなので、気にせず使っています。
こういった新機能のブラウザの対応状況を調べるのには HTML5 Please という便利なサイトがあります。

検索モードで表示する検索フォーム

このブログでは、メニューの検索フォームだけでなく、 検索を実行した後の検索結果ページ(検索モード)に、もう一つ検索フォームをつけています。 そちらでは大きめの検索フォームを表示して、 絞り込み検索などをさらにやりやすいようにしています。
fc2blog_search.png

HTML 
<form
  action="./" method="get">
  サイト内検索
  <input class="search_input" type="text" name="q" maxlength="200"
    value="<%search_word>">
  <input class="search_btn" type="image" alt="検索"
    src="http://blog-imgs-44.fc2.com/y/o/h/yohshiy/search_button.png">
</form>
html のコード片に search_area のブロック変数がないのは、 検索フォーム全体を search_area のブロックに入れているためです。

CSS 
input.search_input {
    width: 75%;
    padding: 2px 2px 2px 6px;
    border: 1px solid #CCC;
    height: 22px;
}

input.search_btn {
    position: absolute;
    top: 1px;
    margin-left: 2px;
}
ここでの CSS の設定はほとんど位置の微調整です。
あと、こちらは幅を width で指定しています。

その他のサンプル

FC2 ブログ向けというわけではありませんが、 以下のサイトが参考になるのではないかと思います。
このエントリーをはてなブックマークに追加  
 
   Next 
このページをシェア
アクセスカウンター
アクセスランキング
[ジャンルランキング]
コンピュータ
23位
アクセスランキングを見る＞＞

[サブジャンルランキング]
プログラミング
7位
アクセスランキングを見る＞＞
カレンダー(アーカイブ)
プルダウン 降順 昇順 年別

05月 | 2023年06月 | 07月
日 月 火 水 木 金 土
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -


最新記事
カテゴリー
┗SNS (7)
はてな新着記事
はてな人気記事
シリーズもの
このブログをリンクに追加する
タグ

使い方 Emacs Redmine インストール ガイド JavaScript 開発記 Ruby C++ Rails 用語集プラグイン プラグイン C# altjs VS Redmineインフォメーション Redmine入門 ライブラリー ツール グラフ FC2ブログ ブログ TestLinkLink クイズ 国際化 コンパイル 言語比較 UML テキスト ブラウザ SNS 書き方 正規表現 Dart 設定 JVM言語 C++11-14 Node.js web制作 バージョン管理システム Qt K2Editor Word 秀丸 英語 Javascript ライブラリ比較 ex-html-mode.el チケット Wiki Excel 関数型 Clojure 表 関数型プログラミング インターフェース gem routes HTML5 eshell TestLink コードハイライト GUI比較 Windows ブログカスタマイズ node.js .NET 置換 TypeScript lisp コンピューター Bookmarklet grep エスケープ 検索 CSS3 日本語 Boost 比較 難読化 lodash 汎化 文字コード コマンドライン ジェネリック Subversion Google 単語境界 Doxygen ガントチャート 歴史 html Graphviz css Notes トラッカー CoffeeScript GUI Markdown python ライセンス PlantUML オブジェクト図 パッケージ図 配置図 

ブロとも一覧

復活電子工作

A級プログラマーへの道
ブロとも申請フォーム

この人とブロともになる

最新コメント
最新トラックバック
FC2投票
無料アクセス解析
FC2投票
無料アクセス解析
プロフィール

yohshiy

Author:yohshiy
職業プログラマー。
仕事は主に C++ ですが、軽い言語マニアなので、色々使っています。

はてブ:yohshiy のブックマーク
Twitter:@yohshiy

サイト紹介
プログラミング好きのブログです。プログラミング関連の話題や公開ソフトの開発記などを雑多に書いてます。ただ、たまに英語やネット系の話になることも。

Powered by FC2 Blog

Copyright © プログラマーズ雑記帳 All Rights Reserved.

<免責事項> 当サイトの情報やコードの利用により生じた損失や損害などについては、 いかなる場合も一切の責任を負いません。