FC2ブログ

ハーレクイン図書館      
ハーレクインのことなら何でも・・・                         FC2館

お正月ブログパーツ

クリスマスと比べてお正月用のブログパーツって
なかなか気のきいたのがない。
おまけに年末に貼っておくと新年を迎える前から
「あけましておめでとう」となってしまって具合悪い。

となるとカウントダウンかな・・・
ということで、こんな便利なサイトがあります。

カウントダウンメーカー

使えるひな型が決まっていますが
最近オリジナル写真も使えるようになりました。

新年にならないと貼れないのですが
↓これもなかなかいいでしょ。


花餅と富士の向こうから出てきた初日の出。
花餅がバラバラと落っこちてしまったら
鏡餅をクリックしながら持ち上げてみてください。

遊び心と華やかさで新年を演出。

スポンサーサイト






Edit
  1. 2011/12/26(月) 17:14:27|
  2. ブログ初挑戦レポート|
  3. トラックバック:0|
  4. コメント:2

クリスマスなブログパーツ



クリックするとツリーが光って音楽が流れます

スノードーム

そりに乗ったサンタさんがトナカイに引かれてブログを通り抜けます

サンタがブログにやってくるブログパーツ

出産祝いならギッフィーベビー



日替わりのステキなクリスマスムービー。
クリスマスが終わると、自動的に時計表示にかわります。

日替わり&カウントダウン

小さいサンタさんとトナカイさんが秒針になっている時計のブログパーツ。

サンタ時計

釣り人サイトのかわいい魚のかざりがついたきらびやかなツリー








Edit
  1. 2011/12/15(木) 13:52:15|
  2. ブログ初挑戦レポート|
  3. トラックバック:0|
  4. コメント:0

日付を消す

記事の日付を消す というと次の2つの場合が考えられます。

1、投稿した記事内の日付を消す。

2、サイドバーの最新記事の日付を消す。



非プラグイン対応テンプレートの場合、どちらも
「テンプレートの設定」→「HTML/CSS編集」で
日時を指定している部分のHTMLの書き換え(削除)を行えばいいだけ。


以下はサイドバーの最新記事の日付を消す方法です。

記事を書くメイン部分に対して、サイドバーの指定箇所は結構下のほうです。
「Recent Entries」などの文字を探してください
(ブログによって表記文字は変わります)。

こんな感じ↓


<h3>Recent Entries</h3>
<ul>
<!--recent-->
<li><a href="<%recent_link>" title="<%recent_body>"><%recent_title></a> <script type="text/javascript">
nw(<%recent_year>,<%recent_month>,<%recent_day>,<%recent_hour>)
</script> (<%recent_month>/<%recent_day>)</li>
<!--/recent-->
</ul>

赤字の部分を削除して更新ボタンを押してください。
サイドバーの最新記事の日付が消えるはずです。






Edit
  1. 2011/12/14(水) 13:42:05|
  2. ブログ初挑戦レポート|
  3. トラックバック:0|
  4. コメント:0

新着記事にNew!!をつける

なかなか記事を更新しないので
こんなカスタマイズをしても意味がないのですが
一度やってみたかった・・・

新着記事にNew!!をつける

この方法はプラグイン非対応のテンプレートの場合です。



まず管理画面のテンプレートの設定からHTMLの編集を開きます。
</head>と書いてある場所を探してください。
このすぐ前に以下をコピーしたものを貼り付けます。
(</head>は上のほうにあるはずです。)

<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) {
document.write('<span class="new">New!!</span>')}
}
--></script>

さらにHTMLの編集の中から「最近の記事」の該当場所をさがしてください。

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

↑こんな感じのところ。
赤字で書いた</a>の後に

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

をコピーして貼り付けて下さい。


次にスタイルシートの編集をします。
スタイルシートの一番下までスクロールさせて最後のタグから一行あけて

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

をコピーして貼り付けます。

あとは「更新」ボタンを押すだけ。

(ちなみに、時間を変えたければ一番最初に設置したnt=24の数字を変えるだけ。
NEW!!の文字でなく違う文字にしたければ、この文字を変えれば変わります。
文字の大きさや色はスタイルシートに貼り付けた部分を変えるだけです。)









Edit
  1. 2011/12/11(日) 00:12:08|
  2. ブログ初挑戦レポート|
  3. トラックバック:0|
  4. コメント:0

Editボタンの追加―FC2ブログの場合

Editボタンの追加―記事の修正が簡単に!

ということで、seesaaブログのカスタマイズ方法を
説明しましたが、今日は
FC2ブログの記事にEditボタンを追加する方法です。

簡単です。


まずはログイン、管理ページの「テンプレートの設定」をクリック
「HTML編集」を見てください。
比較的上のほうに<!--エントリー-->の記述があると思いますので、
これを目安に探すと探しやすいです。

<!--topentry--> ~ <!--/topentry--> 内のどこでも好きな場所に下記の赤字の部分をコピペ
更新ボタンをクリックするだけです。

<a rel="nofollow" href="http://blog7.fc2.com/control.php?
mode=editor&process=load&eno=<%topentry_no>" style="color:#919F55; cursor:default" target="_blank">edit</a>


黒字部分の数字はご自身のブログに合わせて変更してください。
カラーコードは私のブログにあわせた文字色ですので、自由に変えてください。
ちなみに color:#fefefe に設定すると透明で見えなくなります。
target="_blank" (別窓で開く設定) は外してもいいです。





Edit
  1. 2010/05/01(土) 12:51:27|
  2. ブログ初挑戦レポート|
  3. トラックバック:0|
  4. コメント:0

Editボタンの追加―記事の修正が簡単に!

ブログカスタマイズの中でも威力を発揮するのが

Editボタンの追加

記事が増えれば増えるほど重宝するカスタマイズ化です。


過去記事を読んでいて加筆したいな!って
思った時どうしますか?
いちいち管理画面を出して記事一覧で検索して
その記事の編集画面を探し出すのって結構面倒。

そんなとき威力を発揮するのがこのカスタマイズ。
だまされたと思ってやってみてください。

とにかく管理が楽になります。
「あっ、ここ直したいな」と思ったら
記事中のEditボタンをクリック!
瞬時でその記事の編集画面に変わります。



ハーレクイン図書館本館(seesaaaブログ)でのカスタマイズ方法をメモしますので
seesaaブログの方は、真似してみてください。
とても簡単&効果抜群です。




seesaaカスタマイズ-記事個別編集を可能にする

編集を加える場所は

Seesaa>マイブログ>デザイン>コンテンツ>記事>HTMLを編集

以下の表記をさがして(下のほうです)赤字の部分をコピペしてください。
あとは保存して再構築するだけ。


--------------------------------------------------------------------------------
<% if:style.disp_category %>| <a href="<% article_category.page_url %>"><% article_category.name %></a><% /if %>|

<a href="http://blog.seesaa.jp/pages/my/blog/home/?blog_id=<% blog.id %>&goto=/pages/my/blog/article/edit/input?id=<% article.id %>" >edit</a>

</div>
--------------------------------------------------------------------------------

これだけです。


おまけ:
記事のタグを無効にする





Edit
  1. 2010/04/30(金) 11:09:47|
  2. ブログ初挑戦レポート|
  3. トラックバック:0|
  4. コメント:0

インスタントストア ウィジェット★アマゾン

*この記事はアマゾンアソシエイト(アフィリエイト)が提供する、Amazon の商品を紹介するための、簡単に設定ができる小さなリンクパーツ、アマゾンウィジェットについてのレポート記事です。ウィジェットについて詳しくはhttp://widgets.amazon.co.jp/


アマゾンのインスタントストアというものが
何なのかわかる方、インスタントストアを持っている方は
このインスタントストアウィジェットを試してみてください。

自分のインスタントストアに掲載されている商品(一部)を簡単に表示できます。


ただし・・・画像のサイズが小さいのが気になりますね。
大きな画像を選んだりすることはできませんし
タイトルや値段等を非表示にするようなこともできません。
表示枠全体はサイズがいろいろ選べ、
カラーも自由にカスタマイズOKです。



Edit
  1. 2007/12/27(木) 19:12:31|
  2. ブログ初挑戦レポート|
  3. トラックバック:0|
  4. コメント:0

縦と横の幅を変更する

Heart Shop
Powerd By WebToJpeg
昨日に引き続きJUGEMテンプレート [card]のカスタマイズ
テンプレートの編集→テンプレート編集→css編集フォーム

.entry {
margin: 20px 0px 0px 20px;
background-color:#bbeeff;
border: 1px solid #0066cc;
width:220px;
float:left;
}


この部分の記述を変更。

.entryという表記部分は投稿記事のフォームを指定しています。
この[card]というテンプレートは投稿記事が
カードの形で表示されるというユニークなもの。
オリジナルではカードの色(background-color)が水色(#bbeeff)、
周りの線(border)が青(#0066cc)に指定されています。
これをサイトの色に合わせて白×ピンク系に変更。

さらにカードの横と縦の長さを固定。
オリジナルでは投稿記事の長さにあわせて縦に伸びる形式だったのですが、
凸凹が生じてしまい、ちょっと不都合。
カードの大きさを固定することでレイアウトの崩れがなくなりました。
横と縦の長さ(150px,250px)は、ご自分のサイトの幅に合わせて
決定するといいと思います。

Heart Shopの場合はサイト幅が900pxなので、余白部分を含めて
横にカードが5枚並ぶように設定しました。

変更後のcssはこちら

.entry {
margin: 20px 0px 0px 20px;
background-color:#FFFFFF;
border: 1px solid #FF32CB;
width:150px;
height:250px;
float:left;
}



Edit
  1. 2007/01/16(火) 19:57:11|
  2. ブログ初挑戦レポート|
  3. トラックバック:0|
  4. コメント:0

サイトの幅を変える―可変幅タイプ

まずは可変幅って何?
サイトの幅がパソコンの画面の大きさに応じて広くなったり
狭くなったりするように設定してあるサイトを可変幅タイプといいます。
(固定幅タイプはこちら

このようにブラウザサイズに合わせて横幅を自由に変えたい場合は、スタイルシート(css)の width: の表記を通常%で表記します。width: 100%; のように設定すると画面全体まで幅が伸びます。

画面全体を使用できるのか・・・いいな~と思いますが、
ブラザサイズによって見え方が違うという点にご注意ください。
自分のパソコンでよく見えていても、他のパソコンで見ると
レイアウトが崩れてしまっていたり・・・という危険性もありますので。

サイトを固定幅にするか、可変幅にするかという問題は
結構難しい問題らしく私にはよくわかりません。
まっ、固定幅のほうが無難かな・・・と。
で・・・こちらのサイトが面白いです。
固定幅と全幅レイアウトを JavaScript で切り替える
どっちもできる!実際に設置するのは今のところパスですが
こんなこともできるんですね~。
試してみたい方はどうぞ。



Edit
  1. 2007/01/15(月) 20:06:14|
  2. ブログ初挑戦レポート|
  3. トラックバック:0|
  4. コメント:0

サイトの幅を変える―固定幅タイプ

ご使用のパソコンによってサイトの『見え方』はちがいます。

あまり横幅がひろいサイトにすると
パソコンによってはレイアウトが崩れてメチャメチャなんてことも。
3カラムのテンプレートの場合、右サイドバーが落ちてしまって
メインの下にぶらさがってしまうこともあります。

一般的にサイト幅を750ピクセルぐらいに設定すると
どのパソコンでもレイアウトの崩れなく表示されるとのこと。

ということでサイト幅を変える方法です。

スタイルシート(css)で次のようなところがあります。

/* 全体囲み */
#all { width: 722px;

とにかく『width』の文字に注目して探してください。
上のほうにあるのですぐ見つけられると思います。
この数値を変えてお好みのサイズにカスタマイズしてください。
これだけです!
ちなみに当ブログはFC2公式テンプレート[rose]使用

スタイルシートによって表記が違う場合もあります。

たとえばJUGEMブログを利用しているHeart Shop はwidth表記がない!
Powerd By WebToJpeg
テンプレートは[card]を使用していますが、このテンプレートは
カードデザインのユニークなもの。
ブラウザサイズに合わせて一列に2枚だったり、4枚だったり、
自由にカードが配置されます。試してみてね。
でも・・・見え方をある程度統一したいな・・・ということで

body { width: 900px;

body部分の表記に、下線部分を追加。
このようにすることでサイトの幅が固定されます。
Heart Shop の横幅を900pxに固定したのは、
大きなカードがちょうど3枚並ぶ幅にしたかったから。







Edit
  1. 2007/01/15(月) 10:48:33|
  2. ブログ初挑戦レポート|
  3. トラックバック:0|
  4. コメント:0
次のページ