FC2ブログ

BaySky eBLOG

  : 

<私的備忘録> 気に入ったこと、気に懸かること、気に障ること を随意に・・・

スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサー広告  /  tb: --  /  cm: --  /  △top

レイアウト変更 

ブログの両サイドの色彩を 藍白(#EBF6F7) から 紺碧(#007BBB) に変更しました。

どこかボンヤリしていたのが、スッキリ引き締まった感じがします。
スポンサーサイト
タグ: カスタマイズ 
weblog  /  tb: 0  /  cm: 0  /  △top

個々の記事に「タグ」を表示 

fc2blogcustomize_176x62 #012

個々の記事に「タグ」を表示するようにしました。

やり方は、FC2インフォメーション の ■ユーザータグ機能を追加しました および FC2マニュアル の ■ユーザータグのテンプレート対応について を参考にしました。
タグ: カスタマイズ  customize 
weblog  /  tb: 0  /  cm: 0  /  △top

デザイン変更 

ブログのトップデザインを変更しました。

紺碧のベルトをやめて、横浜港のパノラマ写真に差し替えました。
2006年4月3日午前7時53分の横浜港で、「Topaz(31,500総トン)」が入港途中、向こうの大桟橋国際埠頭には「ASUKA2(50,142総トン)」が停泊中。赤レンガ倉庫を挟んで、ランドマークタワーなどの「みなとみらい」、遠景に雪を頂く富士山が望め、右手に丹沢山塊が見える。好天に恵まれての全く幸運な景色です。

 ⇒ by 横浜観光コンベンションビューロー
タグ: カスタマイズ 
weblog  /  tb: 0  /  cm: 0  /  △top

レイアウト変更 

冒頭に配置してあった熱帯魚水槽2個と人気投票を外し、水槽1個をサイドバーに配置しました。

サイドバーに配置してあった時計をブログのタイトルヘッド部に移しました。(ヘッド部にあったバナー2個は外しました。)
タグ: blog  カスタマイズ 
weblog  /  tb: 0  /  cm: 0  /  △top

水槽と人気投票 

fc2blogcustomize_176x62 #011

ブログ画面にせかせかと動くアニメや動画を掲載するのは好みではありません。水槽でゆっくり泳ぐ熱帯魚の映像なら気分も休まり、好ましいです。勝手なものです。

そんなことで、ブログタイトルとトップ記事の間に、水槽2個と人気投票を組み合わせて設置することにしました。テスト版です。



■希望事項:
 熱帯魚の水槽と人気投票を組み合わせてブログに掲載したい。

■カスタマイズ作法:
 熱帯魚の水槽は 3D VIRTUAL AQUA から借ります。(無料)
 人気投票は FC2無料投票レンタル から借ります。(無料)
 template[green-right]のHTMLの編集を手直しします。

■カスタマイズ実技:

熱帯魚の水槽と人気投票の借用は、
それぞれのサイトに記載されている手順に従ってください。

◆HTML:BEFORE カスタマイズ:
<div id="body">
<div id="left">
<!--エントリー-->
<!--topentry-->
<div id="left-top">
<h2><%topentry_title></h2>
</div>

◆HTML:AFTER カスタマイズ:
<div id="body">
<div id="left">
<!--エントリー-->
<table border="0">
<tr>
<td>
  水槽1のJavaScriptをコピペ
</td>
<td>
  人気投票フォームのHTMLソースコードをコピペ
</td>
<td>
  水槽2のJavaScriptをコピペ
</td>
</tr>
</table>

<!--topentry-->
<div id="left-top">
<h2><%topentry_title></h2>
</div>

▲備考▼ 投票フォームの寸法は、HTMLソースコードの中に記述されている数値を加減して、調整することが可能です。




(2006/12/07 追記)
「水槽」は表示に時間がかかるケースがしばしばある。折角のサイト来場者にイライラさせるのは申し訳ないので、私はプラグイン掲載を中止しました。
タグ: blog  カスタマイズ  customize 
weblog  /  tb: 0  /  cm: 0  /  △top

閲覧中の記事の直接編集 

fc2blogcustomize_176x62 #010

自分の記事を読み返していて、編集したくなることがある。

FC2BLOGでは、管理者ページに戻り、編集・削除モード画面に移り、目次から当該記事探し、それを編集モードで画面表示して、やっと編集作業が開始できる。

古い記事の場合、編集・削除モード画面まで辿り着いても、そこで該当記事を探して編集モード画面に表示するまでが結構面倒な手順になる。

見ている記事が、ワンタッチで編集画面に表示されると、無駄な時間やイライラ感がなくなり、非常に便利でありがたいです。

■希望事項:
 閲覧中の記事をワンタッチで編集画面に表示したい。

■カスタマイズ作法:
 ここの記事に編集ボタンを組み込む。その為に、
 template[green-right]のHTMLの編集を手直しする。

■カスタマイズ実技:
編集はブログ管理者にのみ関係する作業で、訪問者には全く無関係の事柄ゆえ、設置する「編集ボタン」は目立たない方が良い。しかし、判りやすいことが肝要です。
今回は、個々の記事画面の最後尾に設置します。

◆HTML:BEFORE カスタマイズ:
<p id="sub"><a href="<%topentry_link>"><%topentry_year>年<%topentry_month>月<%topentry_day>日</a> <a href="<%topentry_category_link>"><%topentry_category></a> <a href="<%topentry_link>#trackback">トラックバック:<%topentry_tb_num></a> <a href="<%topentry_link>#comment">コメント:<%topentry_comment_num></a></p>

◆HTML:AFTER カスタマイズ:
<p id="sub"><a href="<%topentry_link>"><%topentry_year>年<%topentry_month>月<%topentry_day>日</a> <a href="<%topentry_category_link>"><%topentry_category></a> <a href="<%topentry_link>#trackback">トラックバック:<%topentry_tb_num></a> <a href="<%topentry_link>#comment">コメント:<%topentry_comment_num></a><span style="font-size:x-small; text-decoration:none; font-weight:normal;">    [<a href="http://blog1.fc2.com/baysky/admin.php?mode=editentry&no=<%topentry_no>"><font style="color:blue; text-decoration:none;"> 編集 </font></a>]</span> </p>


タグ: blog  カスタマイズ  customize 
weblog  /  tb: 0  /  cm: 0  /  △top

画像の架け替え 

fc2blogcustomize_176x62 #009

■希望事項:
 右サイドバーの冒頭に掲載している写真を自動で架け替えたい。(10枚)

■カスタマイズ作法:
 FC2BLOGの公式プラグインの「フリースペース」にJavaScriptを書き込む。

■カスタマイズ実技:
掲載する10枚の画像をアップロードする。
FC2BLOGの公式プラグインの「フリースペース」の「フリーエリア内容の変更」に次ぎのコーディング(JavaScript)を書き込んで、保存(変更ボタンを押す)する。 これにより、ブログにアクセスの都度、乱数が発生し、それでどの画像を掲載するかが自動的に決定される。

<script language="JavaScript">
<!--
var sw = 10 * Math.random(); /* 0 から 10 までの乱数を発生させる */
if (sw<=1) document.write("<img src='画像1のURL'>");
else { if (sw<=2) document.write("<img src='画像2のURL'>");
else { if (sw<=3) document.write("<img src='画像3のURL'>");
else { if (sw<=4) document.write("<img src='画像4のURL'>");
else { if (sw<=5) document.write("<img src='画像5のURL'>");
else { if (sw<=6) document.write("<img src='画像6のURL'>");
else { if (sw<=7) document.write("<img src='画像7のURL'>");
else { if (sw<=8) document.write("<img src='画像8のURL'>");
else { if (sw<=9) document.write("<img src='画像9のURL'>");
else { document.write("<img src='画像10のURL'>");
}}}}}}}}
}
//-->
</script>


▲参考▼ 上記では架け替えのキッカケに「乱数」を使っています。「日付」や「時刻」をキッカケにするなど、色んな工夫が可能です。


タグ: blog  カスタマイズ  customize 
weblog  /  tb: 0  /  cm: 0  /  △top

HTML文の掲載 (その2) 

fc2blogcustomize_176x62 #008

先日、ブログにHTML文そのものを掲載するときの工夫について記事を掲載しました。

今回は、目的は同じですが、別方式を紹介しておきます。

要領は次ぎとおりです。
  • ブログに掲載したいHTML文を、普段どおりに書きます。
  • そのHTML文の前後に、 <textarea>~</textarea>タグ を記述します。
前回方式のように Latain-1コード を記述する必要はありません。


◆ 入力原稿は次のように記述し、保存します。
<textarea cols="50" rows="8" readonly>
<div id="left-top">
<h2><%topentry_title></h2>
</div>
</textarea>


◆ 閲覧画面は、次のように窓が開いて、その中にHTML文が表示されます。




<textarea>タグ は、本来はインターネットの画面上に入力エリア(窓)を設定するタグの一種です。
上記方式ではこれを流用しています。
今回は窓の中の表示内容を書き換えられては困るので、 <textarea>タグ の中に readonly (読取専用)の指定を入れてあります。
cols="数値" は窓の横寸法、 rows="数値" は窓のタテ寸法の設定です。

最後に、大事な注意事項があります。:  FC2BLOGの場合、入力画面の下のほうにある「設定」で、「テキストフォーマット」の選択ボタンで「HTMLタグのみ」を選択しておくことが肝心です。 ただし、その結果として画面上で改行が自動的には行われなくなります。画面上で改行が必要な箇所には、面倒でも、入力原稿に <br> (改行指定)を明示的に挿入しておくことが必要になります。
ただし、 <textarea>~</textarea>タグ で挟んだHTML文には <br>タグの付加は不要(付けては駄目)です。

今回紹介した方式を採るか、それとも前回紹介した方式を採るかは、そのときの状況と個人の好み次第です。どちらが良いとは一概には言い切れません。

タグ: blog  カスタマイズ  customize  html 
weblog  /  tb: 0  /  cm: 0  /  △top

HTML文の掲載 (その1) 

fc2blogcustomize_176x62 #007

ブログにHTML文そのものを掲載するにはひと工夫が必要です。
普通にHTML文を書いて、書いたとおりの文字・記号が画面表示されるものと思って保存すると、結果はそうはなりません。

HTML文が自動的に文法解釈の対象になり、解釈された結果が画面表示されます。元のHTML文は画面には表示されません。

HTML文そのものを画面表示するにはトリックが必要です。
即ち、HTML文に不可欠の 「 < 」 と 「 > 」 を Latain-1コードで入力します。
① 「 < 」 の代わりに 「 &lt; 」 か 「 &#60; 」 を入力します。② 「 > 」 の代わりに 「 &gt; 」 か 「 &#62; 」 を入力します。

◆例えば、こんな画面表示をさせるためには、
<div id="left-top"><h2><%topentry_title></h2></div>

◆入力原稿は、次のように記述します。
&lt;div id="left-top"&gt;&lt;h2&gt;&lt;%topentry_title&gt;&lt;/h2&gt;&lt;/div&gt;



さて、貴方が今ご覧になっているこの記事も、
入力原稿は苦労(工夫)しています。

因みに、
上の記事の全文をコピーして、
貴方のブログページの新規入力画面にペーストして、
保存(更新)してみてください。
その結果を画面閲覧してみてください。
記事の後半部分がどう表示されるか、楽しみです。

理由へ「上記の如し」です。

更に、上の入力原稿では <xmp>~</xmp>タグ も活用しています。
関心のある方はどこかのタグ辞典で調べてみてください。
タグ: blog  カスタマイズ  customize  html 
weblog  /  tb: 0  /  cm: 0  /  △top

引用文のスッキリ表示 

fc2blogcustomize_176x62 #006

これは引用文ですと言うことを一目でわかるように掲示したい。
しかも、ひつこくなく、あっさりとしたレイアウトで・・・

■希望事項:
 引用文をスッキリ表示したい。

■カスタマイズ作法:
 template[green-right]のスタイルシートの編集を手直しする。

■カスタマイズ実技:
引用文は通常は blockquoteタグを付けて規定する。
[green-right]のスタイルシートには blockquote の設定がないので、
次ぎの設定を補充する。

blockquote {
margin: 20px;
padding: 10px;
border-left: 3px solid #007BBB;
border-right: 1px solid #007BBB;
background-color: #F2F9FC;
color: #444466;
line-height: 140%;
}


▲備考▼ template の色合いや雰囲気に合わせて、数値や色コードなどを設定する。

タグ: カスタマイズ  customize  blog 
weblog  /  tb: 0  /  cm: 0  /  △top
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。