FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

横カレンダーの今日「当日」のスタイルを変えて装飾する

FCafeを運営するdanielさんが、カレンダーの今日「当日」を装飾した共有プラグイン「CalendArchive」を公開してくれています。

【参考記事】
FCafe カレンダー当日表示別法

このスクリプトを参考に、横カレンダーの今日「当日」のスタイルを変えて装飾するカスタマイズを紹介します。

検索フォームの検索ボタンを画像にする

公式プラグイン「検索フォーム」の検索ボタンを画像にするカスタマイズを紹介します。

プラグイン「検索フォーム」のHTMLを編集します。
青い箇所を削除し、赤い箇所を加えてください。

<div id="test_css">
<form action="./" method="get">
<p class="plugin-search" &align>
<input type="text" size="20" name="q" value="" maxlength="200" /><br />
<input type="submit" value=" 検索 " /><br />
<input type="image" src="画像URL" alt="検索">
</p>
</form>
</div>


これで検索ボタンを画像にすることが出来ます。

コメント欄の不必要な項目を消す

当サイト配布テンプレートのコメント入力欄の各項目には以下のものがあります。

題名
名前
URL
COMMENT
PASS
SECRET

この中に不要だと思われる項目があれば、その該当箇所を削除してください。

日別表示画面の便利ナビに日付を表示

カレンダーのリンクは月単位だけでなく、日単位でも記事の表示が可能です。
しかし便利ナビのタイトルに日付までは表示されませんでした。

hatena chipsを運営するhatenaさんのスクリプトを参考に、この日付を表示する方法を紹介します。

【参考記事】
FC2ブログ用パンくずリスト 親子カテゴリ完全対応版 - hatena chips

コメントの題名入力欄に初期値を設定する

コメント投稿欄の名前やURLは、クッキーが記憶している場合は自動で入力欄に表示されます。

しかしコメントの題名は空欄で、そのまま何も入力されることなくコメントが投稿されることは多いと思います。

この題名の入力欄に、予め決まった文言を表示しておく方法を紹介します。

例えば No title と表示したい場合は、HTMLの下記箇所に次の赤い部分を加えてください。

<!--▼コメント投稿▼-->

<label for="subject">題名:</label><br />
<input id="subject" type="text" name="comment[title]" size="40" value="No title" onfocus="if (this.value == 'No title') this.value = '';" onblur="if (this.value == '') this.value = 'No title';" /><br />



Re: 記事タイトル と表示したい場合は、3カ所の No title
Re: <%sub_title> と変えてください。

これでコメント投稿者が題名を入力しなくても、コメントタイトルには初期値が表示されます。

この記事へのトラックバック(FC2ブログユーザーのみ)

キイタ?オクサン アラヤダワァを運営するちゃんさんが、FC2ブログユーザー用のトラックバック表示を教えてくれたので紹介します。

「この記事にトラックバックする(FC2ブログユーザー) 」というリンクをクリックするだけで、FC2ユーザーはその記事にトラックバックを送る記事をすぐに書く事ができるので便利です。

同ページ内リンク (ページトップへ戻る)

ページが縦に長い場合、下からまたスクロールして上へ戻るのは少々面倒です。
このようなとき、同じページのトップに移動するリンクがあれば便利です。

同じページのトップに移動するリンクの設定方法を紹介します。

記事の中にメールフォームを作る

記事の中にメールフォームを作る方法を紹介します。
このメールフォームにより投稿されたメールは、FC2IDに登録しているメールアドレスへ送信されます。

記事設定の「改行の扱い」を「HTMLタグのみ」にして、以下を投稿してください。

<form action="./" method="post">
<p class="plugin-mail" &align>

名前:<br />
<input type="text" size="10" name="formmail[name]" value="" maxlength="100" style="width:50%;" /><br />
メール:<br />
<input type="text" size="10" name="formmail[mail]" value="" maxlength="150" style="width:50%;" /><br />
件名:<br />
<input type="text" size="10" name="formmail[title]" value="" maxlength="150" style="width:50%;" /><br />
本文:<br />
<textarea name="formmail[body]" cols="10" rows="6" style="width:100%;"></textarea>
<input type="submit" value=" 確認 " />
<input type="hidden" name="mode" value="formmail" />
<input type="hidden" name="formmail[no]" value="&formno" />

</p>
</form>


赤い数値の箇所は各入力欄の長さです。
お好みに合わせて変えてください。

これで記事の中にメールフォームを作ることができます。
必ずテストメールを送って正しく動くか確認することをお勧めします。

透過png サンプル

背景を半透明にする(透過png)ために、透過pngのサンプルを用意しました。

不透明度は4段階作りました。(より透明 ← 20, 40, 60, 80 → より不透明)

black 不透明度20 black 不透明度40 black 不透明度60 black 不透明度80 #000000 black
gray 不透明度20 gray 不透明度40 gray 不透明度60 gray 不透明度80 #808080 gray
silver 不透明度20 silver 不透明度40 silver 不透明度60 silver 不透明度80 #C0C0C0 silver
white 不透明度20 white 不透明度40 white 不透明度60 white 不透明度80 #FFFFFF white
red 不透明度20 red 不透明度40 red 不透明度60 red 不透明度80 #FF0000 red
yellow 不透明度20 yellow 不透明度40 yellow 不透明度60 yellow 不透明度80 #FFFF00 yellow
lime 不透明度20 lime 不透明度40 lime 不透明度60 lime 不透明度80 #00FF00 lime
aqua 不透明度20 aqua 不透明度40 aqua 不透明度60 aqua 不透明度80 #00FFFF aqua
blue 不透明度20 blue 不透明度40 blue 不透明度60 blue 不透明度80 #0000FF blue
fuchsia 不透明度20 fuchsia 不透明度40 fuchsia 不透明度60 fuchsia 不透明度80 #FF00FF fuchsia
maroon 不透明度20 maroon 不透明度40 maroon 不透明度60 maroon 不透明度80 #800000 maroon
olive 不透明度20 olive 不透明度40 olive 不透明度60 olive 不透明度80 #808000 olive
green 不透明度20 green 不透明度40 green 不透明度60 green 不透明度80 #008000 green
teal 不透明度20 teal 不透明度40 teal 不透明度60 teal 不透明度80 #008080 teal
navy 不透明度20 navy 不透明度40 navy 不透明度60 navy 不透明度80 #000080 navy
purple 不透明度20 purple 不透明度40 purple 不透明度60 purple 不透明度80 #800080 purple

サーバ負荷分散のため直リンクはご遠慮ください。一度ダウンロード保存後、自分のファイル置き場にアップロードしてからご自由にお使いください。

背景を半透明にする(透過png)

以前に紹介した「背景を半透明にする(RGBa)」方法は、IE8ではまだ対応していませんでした。

今回は半透明画像(透過png)を使って、IEでも半透明を実現する方法を紹介します。
ブログ内検索1
プロフィール

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
03 | 2014/04 | 05
- - 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 - - -
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

03 | 2014/04 | 05
- - 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 - - -
ユーザータグ


△ ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。