ブログ記事にコードを貼りつける良い方法

私のブログは、よくブログパーツとか記事にしているので記事にJavaScriptを直接貼りつけて実行させる事がよくあります
しかし、JavaScriptなどのコード自体を記事にする機会はあまりありません。
好きですがあまり得意ではないもんで…

前回、（最新記事に新着マークをつける）を書いた時にさんざん迷った挙句、<textarea>〜</textarea>内にコードを記述しました

Ctrl+Aでエリア内のコードを全選択できるので便利かなと思ったんです。

でも、今回、またコードを書いた際にやっぱ面倒だなと思った事が3つ。
  1. 改行の扱いを「ＨＴＭＬタグのみ 」にしないと、テキストエリア内の改行が「<br />」と表示されてしまう。

  2. 改行の扱いを「ＨＴＭＬタグのみ 」にするという事は普通に改行する時にも一々<br/>と改行タグを書かなくてはならないという事。
    （「自動改行」のが断然楽！）

  3. リストタグ（<ol>〜</ol>）などのマージンがなくなって詰まって表示されてしまった。

これでは不便です〜。
もしかしたらこれからコードを紹介する機会が増えるかもしれないので結論を出しました。

今回は、i d e a * i d e aさんの『ブログにコードを貼り付ける方法で悩むの巻』を参考にさせていただきました。

ブログ記事にコードを貼りつける良い方法
  1. <textarea>〜<textarea>はとりあえず封印。（全選択は諦める。）

  2. <pre><code>〜</code></pre>が正しいらしいのでこれを使う。

  3. 中のコードの「<」や「>」は実体参照を使う！（蓄々HTML実体参照変換が便利）

  4. フォントはCourier Newや、monospaceなどのコードが読みやすい等幅フォントを使う。（cssで設定出来ます。font-family:"Courier New",monospace;）

  5. 変なところで改行されると見にくいので、overflowでscroll表示する。
    でも、画面から隠れるのも見づらいかも…

  6. <pre class="code">のように<pre>要素にクラスを付けてcssで見てくれなどを処理する

というわけで、当ブログのコードを書くエリアは<pre><code>〜</code></pre>で囲む事になりましたCtrl+Aは使えません。
コードをコピーする際は隠れた部分を残さないように注意しましょうね

≪ 関連サイト ≫
i d e a * i d e a ： ブログにコードを貼り付ける方法で悩むの巻
実体参照符号/HTML応用編

テーマ : こんなことがありました - ジャンル : ブログ

Slimbox 1.64で画像表示を素敵に演出！

Slimbox 1.64は、画像表示に素敵なエフェクトを付けてくれます
Slimbox最大の特徴は 『digitalia.be（ダウンロード先）』のタイトルにある通り、「Lightboxの究極の軽量クローン」というところです！
Lightboxのエフェクトは好きだけど重すぎるという方にはお勧めです
dog1_thumb.jpg
LightboxとはBy はてなダイアリー

LightboxからSlimbox 1.64への移行はとても簡単です！
ありがたい事に画像のタグはLightboxと変わりません。

例）
<a href="OOO.jpg" rel="lightbox" title="タイトル">イメージ</a>

私、実はLightbox2 → Lightbox → Slimboxと流れてきたんです。

Lightbox2はIEでトラブルでヤメ…。

次に入れたLightboxは、最近何故か機能しなくなりました…。

それに加えてブログがやたらと重かったので、Slim（スリム）という言葉に惹かれて、Slimboxに辿り着いた次第です。
（ついでに「続きを見る」のびよーんとなるスクリプトもはずしちゃいました。）

では、これからSlimbox 1.64の導入方法を説明します！

続きを読む»

テーマ : web制作 - ジャンル : コンピュータ

最新記事に新着マークをつける

最新記事の中でも特に新しい記事にNEWを付けてわかりやすくしてみました。
うちのブログの場合、２日間だけNEWが付きます。（変更可）
JavaScriptは外部ファイルにしました。

1.メモ帳開いて、下のコードをコピペして保存。（全選択はctrl+Aが便利）
名前は何でもOKですが、拡張子はjsで。○○.js


<script type="text/javascript"><!-- 
var today=new Date(); 
function nw(u1,u2,u3,u4) { 
var nt=24; var c=new Date(u1,u2-1,u3,u4); 
if (today-c<3600000*nt*2) { 
document.write('<span class="new">New</span>')} 
} 
--></script>


スクリプトの意味としては、現在の時刻（today）−記事投稿の時刻（c）が
3600000*nt*2より小さい時にNewを付けるということです。

現在の時刻や記事投稿時刻がミリ秒で代入されるので式の単位はミリ秒です。

1日をミリ秒単位で表すには…
24（1日は24時間）×60（１時間は60分）×60（1分は60秒）×1000（1秒は1000ミリ秒）

最後の*2はNewを何日付けておくかです。わたしの場合、2日間にしたので2をかけます。1日なら無し、3日間なら*3となります。自分の更新頻度を考えて微調節しましょう。
補足
u2には月の変数<%recent_month>が代入されます。
<%recent_month>は月を表す変数で、1〜12の範囲表します。
JavaScriptでは月は0〜11で表すので、u2-1となっているようです。


2.テンプレートの<head></head>内に下のコードを追加して先ほど作った○○.jsを外部ファイルに指定します。

<script type="text/javascript" src="外部ファイルのアドレス"></script>


FC2ブログの場合、http://blog-imgs-21.fc2.com/m/i/r/miracleblues/○○.jsのようなアドレスになります。ツールの「ファイルアップロード」にあるファイル一覧からjsファイルを探してサムネイル（表示）をクリックすればアドレスがわかります。


3.次はプラグインの設定です。
「プラグインの設定」から「最新記事」を選び、【HTMLの編集】をクリックします。
表示されたコードに直接、スクリプトを埋め込みます。

<ul>
<!--recent-->
<li &align>
<a href="<%recent_link>" title="<%recent_title>"><%recent_title> (<%recent_month>/<%recent_day>)</a>

▼ NEWをお尻につけるならここらへん にスクリプト追加▼

</li>
<!--/recent-->
</ul>


追加するスプリクトのコードです。

<script type="text/javascript"> nw(<%recent_year>,<%recent_month>,<%recent_day>,<%recent_hour>)
</script>


<%recent_○○>ってのは、FC2ブログのテンプレート中で使える変数で、最近投稿された記事の投稿時間をあらわします。
詳しくは、知りたい方はテンプレート中で使える変数一覧へ。


4.NEWのスタイルを設定する為、スタイルシートに下のコードを追加します。
環境設定の「テンプレートの設定」から行えます。
文字色を緑に、文字を太字にしてます。お好きなようにカスタマイズしましょう！

document.write('<span class="○○○">New</span>')

○○○の部分（クラス）を変更した場合はこちらも変更しましょうね！

.new {color:green; font-weight:bolder;}


以上で作業完了です。
おつかれさまでした。


実は全然JavaScriptに詳しくないので書きながら覚えてます
書いてること間違ってたらごめんくさ〜い。
コードは検索で調べましたし、自分のとこでも動いてるのでOKだと思います。

Reference Site
・FCafe　新着マーク
・T-style.com　新着マークをつける

ありがとうございました。

 | HOME |