トップ

思いつき日記


■記事リスト■

日記をつけることにしました
これはスゴイ★完全にはまったFireFox★
フッターのCopyright表示の挿入場所について
FireFox,Part3 遂に完成!3カラム
「続きを読む」の文字を変更する
Firefox Part2,センタリングする方法
FireFoxで見てみる
2カラム→3カラムへ(旧CSSメモ)
[edit]ボタンを個別記事にも追加
トップページだけ3カラム化
背景に画像をいれる
記事一覧を表示するソース(まとめ)
プラグインA,Bの使い分けで工夫
全記事一覧をつくる方法
テンプレートの中の『 』って何?
ライブドア検索に登録を忘れずに!
月別アーカイブに記事一覧をつける
表示文字サイズを読者が選べるようにする
トップページに、あるカテゴリの記事だけを載せたい
[edit] の追加 *これは絶対便利*
リストに特定の記事を表示しない方法
新着記事をわかりやすくするアイディア―新着リストをつくる
新着記事に「New!」マークをつける
画面上の長さを測りたい
カラーコードを知りたい
コピーライトをいれる
タグを無効にする
サイドバーにもランキングバナーを貼りました
ブログランキングに参加する
カレンダーにタイトルをつける
マカフィー・ストア

2009年01月26日

日記をつけることにしました

『思いつき日記』

 このブログではライブドアブログのテンプレートのカスタマイズについて綴っています。

実際に実行したカスタマイズについては方法をカテゴリ分けして記事にしていますが、『こうしたいな!』とか 『こんなことできないかな?』という、思いつきの段階もメモ的に残しておきたいと思いまして『思いつき日記』というカテゴリも作ることにしました。

このカテゴリでは、やり方はわからないけれどとりあえず『できたらいいな』という思いつき&『こんなことできた!』という報告を投稿します。(日記形式で気軽に更新しています。)『こうすればいい』と教えてくださる方、コメントよろしくお願いします。(記事は新着順に上→下で表示しています。)



2007年02月25日

これはスゴイ★完全にはまったFireFox★

ライブドアブログを使い始めて1ヶ月。
カスタマイズするならライブドアと、一時大変話題だったブログサービスも
FC2とシーサーの愛用者としては別段すごい!という発見もないし
とりわけ『優れている』という感じはしない。

しかし・・・ライブドアブログは私にすごいものを教えてくれた。

 

続きを読む

2007年02月23日

フッターのCopyright表示の挿入場所について

コピーライトの表示場所をトップページだけ変えてみました。

続きを読む

2007年02月22日

FireFox,Part3 遂に完成!3カラム

ようやく、ようやくトップページの3カラム化が完成。

これでIEで見ても、FireFoxで見ても3カラム表示されるようになりました。

続きを読む

2007年02月18日

「続きを読む」の文字を変更する

「続きを読む」を書きかえる

ページの下のほうにある「続きを読む」という文字を書きかえる方法

管理画面から→ デザインの設定→ CUSTOM→ HTMLテンプレートの編集→ トップページ編集

を開き、「続きを読む」の部分を書き換えるだけです。
「このブログのトップへ」の書き換えも同じです。

カテゴリー、月別、個別も書き換えたい時は、それぞれ同じように書き換えます。



2007年02月17日

Firefox Part2,センタリングする方法

このブログ、FireFoxでみると見事にレイアウトが崩れてるということを昨日発見。


ブログ枠全体がブラウザの左側によってしまっているし
レイアウトも右サイドバーが本文の下にぶら下がっている・・・

ということでただいま猛勉強中。
トップページだけを3カラム化したいな〜と何気なくはじめてしまったカスタマイズだったのだけど、結構面倒くさいことに手をだしてしまったらしい。

そもそもこれまでは、ブラウザによって見え方が違うということさえ知らなかった私。インターネットエクスプローラー(IE)以外では見たこともありませんでした。

IE は、CSS の解釈があいまいで多少の CSS の設定の間違いも適当に解釈されるけど、FirefoxなどはきっちりとCSSを読むので、きちんと書いてないと上手く表示されない。

は〜〜〜な・る・ほ・ど

これはCSSの勉強が必要だわ・・・。

参考サイト

違うブラウザで見るとレイアウトが崩れる(ライブドアナレッジ)

CSSによる段組(マルチカラム)レイアウト講座

↓こちらの記事はとても参考になりそうだけど、私のレベルではまだこれから・・・とりあえずアドレスをメモまで。
双頭のCSS
 

とりあえず
ブログ枠全体がブラウザの左側によってしまっているのを解消。

センタリングする方法
参考↓ はてなの日記Akira51 さんに感謝
■ブロックレベル要素をセンタリングする方法 - Web標準普及プロジェクト

IE7以降、およびFirefoxではセンタリングするにはtext-alignは使わない
text-alignでセンタリングされるのはWindows版のIEのみ。

ブロックレベル要素をセンタリングする正しい方法は

  • センタリングしたい要素の左右のマージンをautoにし、
  • ブロックレベル要素に幅を指定する

当ブログのテンプレート(スタンダードピンク・2カラム)の場合は、もともとは上記のきまりに従って下記のように正しく表記されていたようですが、どうも私がカスタマイズの過程でmargin:0 auto;の部分を勝手に削除していたらしいです。この部分を削除してしまってもIEで見ている限り何の不都合もないのですが、Firefoxだと左側によってしまうんですね・・・。

#container{
width:775px;
margin:0 auto;
text-align:center;
}


 

 



2007年02月16日

FireFoxで見てみる

FireFoxというのはインターネットを見るためのWebブラウザソフト。

IE、インターネットエクスプローラーはどのPCにもついてくる代表的なWebブラウザソフトで、PC初心者の私などは何の疑いもなくこのソフトだけを使っていました。が・・・今人気なのは断然FireFoxなんだそうですね。

ライブドアブログを使うようになって、
『ライブドアブログのテンプレートはFireFoxだとレイアウトが崩れる』という
コメントを目にするようになりました。

FireFoxって何?って方、試しにあなたのブログをこのブラウザで
チェックしてみてください。
↓こちらのサイトから簡単に無料でダウンロードできます。

で・・・自分のサイトを見てみたら・・・

が〜んんん・・・崩れてる・・・

先日トップページだけを3カラム化することに成功!って喜んでいたのですが、FireFoxでみると見事にレイアウトが崩れてる。
グログ枠全体がブラウザの左側によってしまっているし
レイアウトも右サイドバーが本文の下にぶら下がっている・・・

キャ〜

FireFoxでこのブログを読んでいる方、
不具合を解消するまで今しばらくお待ちください。
すみません

 

 



2007年02月15日

2カラム→3カラムへ(旧CSSメモ)

ついにトップページの3カラム化に成功!

う〜ん・・・かなり苦戦しました。

とりあえず記念に
変更以前のスタイルシート(CSS)とトップページのHTMLのメモです。

2カラム

以前はトップページはこのように↑2カラムでした。
トップページだけ3カラム化する方法は後日公開予定です。

続きを読む

[edit]ボタンを個別記事にも追加

以前紹介したブログの管理・編集用の便利ボタン[edit]ボタン

[edit] の追加 *これは絶対便利*

つかってみて・・・やっぱり便利だわ〜。
自分の書いた記事を読んでいて「あっ!ここ違ってる・・・」とか
「ここに加筆したいな・・・」とか、結構あるんですね。
記事ページから直接記事の編集画面へ飛べる[edit]ボタン

あんまり便利なので個別記事ページにも[edit]ボタンを追加することにしました。

 

カスタマイズメモ(テンプレート/スタンダードピンク・2カラムの場合)

カスタマイズ/管理→デザインの設定→カスタマイズ→個別記事ページ

 

 

 

続きを読む

2007年02月13日

トップページだけ3カラム化

カスタマイズ初心者にとっての一番の教科書は人様のブログ。

いろいろなアイディアが詰まっていて、とっても為になる。
カスタマイズのノウハウ系のブログはもちろんですが
単に、「あっ!このレイアウト面白い」とか
「このブログは読みにくいな・・・」とか
「これはどうやるんだろう・・・」と新しいアイディアを喚起されるので
ちょこちょこっと覗いてみている。

よく利用しているのが

人気blogランキング

「これって本当にブログを利用したものなの?」なんて思うほど
上手にカスタマイズされたものもいっぱい。

前書きが長くなってしまったけれど
今日見つけたのがこちらのブログ。

ブログの作り方
無料ブログを作成してみました。

無料ブログ(blog)の作り方からアフィリエイトやSEOなど、無料ブログ(blog)作成に役立ててもらえるような情報を紹介。

ライブドアブログのカスタマイズをふくめ
いろいろなアイディアが紹介されていますが、読みやすい!
トップは3カラムで、記事ページは2カラム。
ブログじゃないみたい。情報量はそれほど多くありませんが
すっきりしていて、ちょこっと読むには最適です。
こういう情報サイトがわかりやすいですよね〜。

私のブログはどんどんゴチャゴチャしてきて
わけがわからない状態になってきた・・・。まっいいか・・・。
とりあえずトップページだけ3カラム化に挑戦してみようかな。
どうやるんだろう・・・

 

つづく



2007年02月12日

背景に画像をいれる

背景に画像をいれるといっても、いろいろな場所がある。

個別の記事の背景にいれる場合もあるし、
サイドバー部分の背景にいれる場合もあるし、
タイトル部分にいれる場合もある。

今日はブログ全体の背景に画像を入れてみました。

このブログの使用テンプレート:スタンダード・ピンク2カラムはデフォルトでは
ブログ部分は赤い線で囲まれていて、背景部分は無地に近い白っぽい設定。
この部分に画像を入れよう!ということです。

記事部分の背景に画像をつかうと、文字が読みにくい場合もあるので
気をつけなくてはいけないけれど、全体の背景部分だったら心配なし!
ハートの画像をゴチャゴチャと・・・
サイトのイメージがずいぶん変わります。
ちょっと男性には不評ですかね。

ブログの背景に画像を表示させる方法

ヾ浜画面からファイルのアップロードで背景に使用したい画像を保存
画像のURLをコピーしてください。

▲スタマイズ/管理→デザインの設定→カスタマイズ→スタイルシート

上のほうから↓部分の記述を探してください
/**********************************
***          Global             ***
**********************************/
*{
 word-break:break-all;
 font-family:verdana, arial, sans-serif;
}
body{
 margin:0;
 padding:0 0 30px;
 background:url("http://〜←使用中の画像のアドレスが入っています");
 text-align:center;           
 color:#333;
}

body{}がブログの背景部分を指定しているので
この部分の  background:url("http://〜"); の記述を自分のつかいたい画像アドレスに変更すればOK。

記事背景画像

 

←当ブログではこの画像が
 リピート表示されます。

 

 

 

再構築を忘れずに!



 



記事一覧を表示するソース(まとめ)

このブログでは記事タイトルのリスト表示について
二度にわたってカスタマイズの方法を紹介しました。

記事の一覧をつくる(カテゴリ別アーカイブページ)
月別アーカイブに記事一覧をつける

今日は覚書メモ&まとめです。
詳しい設置&カスタマイズの方法は↑の記事を参考にしてください。

ポイントは
<〜Loop>・・・</〜Loop>という記述。

この部分がそれぞれの記事タイトルを呼び出しています。
この記述をテンプレートの表示させたい部分に設置すればいいわけです。
当ブログでは一番上の部分に設置しましたが、
たとえば『各個別記事の下』とか『アーカイブ表示の下』などに置いてもいいと思います。



最新記事一覧を呼び出すソース
<IndexArticlesLoop>
<b>・<a href="#<$ArticleId$>"><$ArticleTitle ESCAPE$></a></b><br>
&nbsp;<small><$ArticleDate$>&nbsp;<$ArticleTime$></small><br>
</IndexArticlesLoop>

カテゴリ別一覧を呼び出すソーズ
<CategorizedArticlesLoop>
<b>・<a href="#<$ArticleId$>"><$ArticleTitle ESCAPE$></a></b>&nbsp;<small><$ArticleDate$>&nbsp;<$ArticleTime$></small><br>
</CategorizedArticlesLoop>

月別一覧を呼び出すソーズ
<MonthlyArticlesLoop>
<b>・<a href="#<$ArticleId$>"><$ArticleTitle ESCAPE$></a></b>&nbsp;<small><$ArticleDate$>&nbsp;<$ArticleTime$></small><br>
</MonthlyArticlesLoop>

 



2007年02月11日

プラグインA,Bの使い分けで工夫

先日全記事一覧をつくる方法でサイドバーに全記事のタイトルを表示するようにしました。

で、今日はもう一工夫。
テンプレートでプラグインA,Bの表示順をいじることで
トップページのサイドバー表示は従来どうりですが、個別記事、カテゴリ別、月別表示の際のサイドバー表示に変化をつけてみました。

ページの一番上、見やすい部分に記事検索欄と全記事のタイトル表示をもってきてみました。方法は簡単です。

カスタマイズ/管理→プラグインの設定
このページでプラグインの表示順と位置を設定して
まずはプラグインBの一番上に全記事一覧がくるようにします。

この設定が終わったら、管理ページ左側から
ブログの設定/管理→デザインの設定→カスタマイズ

それぞれ(個別記事、カテゴリ別、月別など)のテンプレートに注目!
どのテンプレートもサイドバーの部分のソースは共通ですので、下記の記述を探してください。

<!-- SideColumn -->
<div id="sidecolumn">
<div id="sidecolumntop"></div>
<div id="sidecolumnbody">
<!-- Plugin A -->
<$PluginList_A$>
<!-- Plugin B -->
<$PluginList_B$>
<div class="elsehead"></div>
<div class="elsebody">
<div class="reader"><a href="http://reader.livedoor.com/subscribe/<$BlogUrl$>" target="_blank" title="livedoor Readerに登録"><img src=http://parts.blog.livedoor.jp/img/cmn/icon_lr.gif border="0" width="117" height="20" alt="livedoor Readerに登録" title="livedoor Readerに登録" /></a></div>
<div class="rss"><a href="<$RSSUrl$>"><img src=http://parts.blog.livedoor.jp/img/cmn/icon_xml.gif border="0" alt="RSS" title="RSS" /></a></div>
<div class="powered"><a href="<$LDBlogUrl$>"><img src="<$LDBlogLogo$>" width="117" height="28" border="0" alt="livedoor Blog(ブログ)" title="livedoor Blog(ブログ)" /></a></div>
</div>
<div class="elsebottom"></div>
</div>
<div id="leftbottom"></div>
</div>
<!-- / SideColumn-->

太字の部分がプラグインAとBの表示順を指定している部分ですので
この部分のA,Bの順番を
<!-- Plugin B -->
<$PluginList_B$>
<!-- Plugin A -->
<$PluginList_A$>

のように逆にしただけです。

このようにすることで、プラグインBの一番上に設定した全記事一覧が
サイドバーの一番上に表示されるようになります。


 



2007年02月10日

全記事一覧をつくる方法

全記事のタイトルリストをつくりたい。

シーサーブログの場合

FC2ブログの場合

う〜む、これまたライブドアブログでの方法は実例が少ない・・・というか、ない。
困ったな〜〜〜。

散々???したあと、ふと思いついた。

そうだ!サイドバーのプラグイン『最新記事』
最新記事という名称なのでなんとなく、新しい記事だけ・・・というイメージを持ってしまっていたのですが、説明には「今までの投稿へのリンクを新しい順にリスト表示します。」とある。

ということは表示記事数の欄を200とか300とか大きな数にしておけば
事実上『全記事リスト』になりますよね。
プラグインは同じものでも複数設置できるので、
ひとつは従来の『最新記事』用に、もうひとつを『全記事リスト』用に使ったりして
使い分けるといいと思います。

カスタマイズ/管理→(プラグインの)新規追加→基本プラグイン

最新記事 『追加する』ボタンをクリック
表示件数を記入→設定

タイトル欄を『全記事リスト』のように変更するといいです。

おまけ
ついでに上記の方法でブログ検索のプラグインも追加して
タイトル欄を『やりたいことから記事を探す』のように変更して
全記事リストの上などに設置すると記事検索にばっちり利用できます。

この記事もチェック→ライブドア検索に登録を忘れずに!               

 

 

 



2007年02月08日

テンプレートの中の『&nbsp;』って何?

『&nbsp;』とは空白をあらわすHTML文上の特殊文字
 
HTML文で『&nbsp;』を記入するとスペース(空白)として画面上に表示されます。Non-Breaking Space の略だそうです。日本語のHTMLだと、このタグを複数入れると、その数だけ空白ができます。英文などの半角空白は、幾ら続けて入れても、一個分にしか認識してくれません。

 



2007年02月07日

ライブドア検索に登録を忘れずに!

基本プラグインのブログ検索で自分のブログ内を検索してもヒットせず、
「一致する情報がありません」と表示される方、
特にブログを始めたばかりの方、

まずは
ライブドア検索 http://sf.livedoor.com/register でご自分のブログサイトの登録をしてみて下さい。ただブログのURLを入力するだけ。手続きは簡単です。

ただし・・・この記事検索では2ヶ月前ぐらいの記事までしか検索できないとか・・・
絶対ではありませんので、ご自分の利用方法に応じてチェックしたほうがいいと思います。



2007年02月06日

月別アーカイブに記事一覧をつける

月別アーカイブに記事一覧をつける方法

カスタマイズ/管理→デザインの設定→カスタマイズ→月別アーカイブ

当ブログのテンプレート(スタンダード・ピンク(2カラム)デフォルト)で
貼り付ける位置を示します。テンプレート真ん中あたりの表記に注目。
太字部分が挿入したタグ。下線部は削除。
再構築を忘れずに。

<div id="banner">
<h1 class="blogtitle"><a href="<$BlogUrl$>" accesskey="1"><$BlogTitle ESCAPE$></a></h1>
<div class="description"><$BlogDescription$></div>
</div>

<div id="blogcontainer">
<div id="content">
<div id="contentin">
<div id="categorytitlebody">
<h2 id="categorytitle"><$MonthLabel$></h2> 
</div> 

<div class="main">
<b><font color="#6728B2">■記事リスト■</font></b><br/><br/>
<MonthlyArticlesLoop>
<b>・<a href="#<$ArticleId$>"><$ArticleTitle ESCAPE$></a></b><br>
</MonthlyArticlesLoop>
<div class="nextpage"><IfPrevPage><a href="<$CurrentUrl$>?p=<$PrevPage$>">前のページへ</a></IfPrevPage>
<IfNextPage>&nbsp;&nbsp;&nbsp;<a href="<$CurrentUrl$>?p=<$NextPage$>">次のページへ</a></IfNextPage></div>
</div>

<MonthlyArticlesLoop>
<$TrackBackAutoDiscovery$>
<div class="datetop"></div>



2007年02月05日

表示文字サイズを読者が選べるようにする

ブログの表示文字サイズはスタイルシートで指定するものの、
大きな文字で見たい方には、大きな文字で見られるように設定することも可能です。(ブラウザの『表示』ボタンで『文字のサイズ』を最小〜最大に指定できる。)

ところがいくら表示サイズを大きくしても「変わらない」記事もあります。
これはその記事を書いた方が、文字のサイズを【絶対指定】して固定してしまっているからです。文字のサイズを読者が指定するためにはサイズをあらかじめ【相対指定】するといいのです。

「ブログの設定/管理」→「デザインの設定」→「カスタマイズ」→「スタイルシート(CSS)」


文字のサイズを指定しているのはfont-size: という記述。
スタイルシートの記述はあなたのブログのデザインごとに少しづつ異なっているので、多少の違いがあると思います。body{}部分にfont-size: がある場合もあれば、別の部分、部分で指定するタイプのものもあると思います。
基本的には、このfont-size: の表記を変更するだけです。

ここに12pxとか書いてあったら、サイズがこのサイズに指定されています【絶対指定】。ブラウザで文字のサイズを変えようとしても、変わらないと思います。

そこでfont-size:medium; にします。
ちょこっと小さめにしたいのであれば、 font-size:small; にします。

相対指定は7段階があります。下になるほど大きくなります。

xx-small
x-small
small
medium
large
x-large
xx-large

※普通の状態は、mediumです。


参考記事:ブログ全体の文字を、ワンサイズ大きく・小さくするには?

 

当ブログでは下記の.main{}部分のフォントサイズが記事本文の
文字のサイズを指定していますので、この部分のみを変更。
デフォルト設定は13pxでした。
(このようにするとサイドバーの文字サイズなどはデフォルト設定のまま固定されます。)

文字のサイズを指定している箇所:実例はこちら

当ブログの変更例メモ:

「ブログの設定/管理」→「デザインの設定」→「カスタマイズ」→「スタイルシート(CSS)」

/**********************************
***          Common             ***
**********************************/
〜中略〜

.main
,.mainmore{
 margin:10px 5px 20px;
 line-height:147%;
 font-size:small;
}



 



2007年02月04日

トップページに、あるカテゴリの記事だけを載せたい

ブログのトップページに、あるカテゴリーのみを載せたい
トップページを開いた時に、あるカテゴリアーカイブを表示するようにする方法

↑こちらの My love letters (livedoor Blog life) さんのブログで目にしたこのアイディアは実に面白い。

トップページににアクセスした場合、ふつうは新着順にいろいろなカテゴリの記事が表示されるしくみになっています。トップページにカテゴリ別アーカイブを表示できれば、カテゴリ別にまとめてみることができるのですが、通常は無理。トップページを開いた時には、カテゴリがバラバラの記事が時間順に並んでいることになります。

それをトップページを開いた時点で、限定されたカテゴリの記事だけが表示される(カテゴリ別アーカイブ)ようにするカスタマイズをこちらの記事で紹介しています。本当にこんなことができるんだ・・・。

なかなか利用できるアイディアだと思いませんか?
考えてもみなかったことなので、当ブログでは未挑戦ですが
知っていたら絶対使ったな〜。



2007年02月03日

[edit] の追加 *これは絶対便利*

地獄変00さんの『livedoor Blogにお手軽編集機能』という記事で
このボタンの存在を知りました。

過去記事は管理画面にいって編集するものと思っていました。
FC2ブログなどは過去記事の表示を「投稿月別」「カテゴリ別」「下書き」などと分類して表示できるので、管理画面での操作をそれほど苦に思っていなかったのですが、ライブドアブログの場合、記事数が多くなると『次へ』というリンクを延々と押さなければいけない。う〜ん、考えただけでもうんざり。

で・・・地獄変00さんが教えてくれたのは
個別記事ページから直接記事の編集画面へ飛べる方法
ブログ管理者にとっては、まさに夢のように便利なはなし。
ありがとうございます!早速・・・

で・・・この方法というのが気が抜けるほど簡単。
HTMLテンプレートに以下のリンクを埋め込むだけ。
<a href="http://blog.livedoor.com/cms/article/edit?id=<$ArticleId$>">Edit</a>

個別記事ページ以外のトップ、カテゴリ別、月別、
どのページからでも編集画面に飛ぶように設定できます。
(コードを書き込む場所はlivedoor Blogにお手軽編集機能で確認!)
当ブログの場合は『カテゴリ別アーカイブ』のテンプレートにだけ
埋め込みましたので、カテゴリ別表示をした際にボタンが表示されます。
なお、この編集画面へのリンクはlivedoorにログインしていないと使えません。
また、管理者じゃない人がクリックするとビジーページへ飛びます。

具体的な埋め込み場所

記事下、コメント|トラックバック の表記がある辺りがいいかな・・と
思いまして・・・

カスタマイズ/管理→デザインの設定→カスタマイズ→カテゴリアーカイブ


続きを読む

リストに特定の記事を表示しない方法

リストに特定のタイトルの記事を表示しない方法

トップページのメイン部分に(サイドバーではなく)新着記事リストを表示させようとしたのですが(設置方法はこちら)、未来の日付で記事を投稿してあると、その分まで新着記事として表示されてしまう。これではまずいということで特定の記事(未来記事分)を新着記事リストに表示させない方法を探してみました。

個別記事:トップ、月別、カテゴリ別画面で特定のタイトルorカテゴリの記事を表示しないカスタマイズ

このカスタマイズって結構ニーズが高そうですが、いざ探してみると非常に情報が少なく、苦戦しました。で・・・ようやく見つけたのが上記の記事。

アフィリエイトで月に100万稼いで株で2倍に増やす
すごいタイトルのブログの管理人さんに感謝感謝。
1年で900万以上稼いだ!・・・師匠と呼ばせてください(笑)

師匠に言われたとおりにやったらみごとにカスタマイズ成功。
画像入りの非常にわかりやすい記事は完璧、感激です。

【考え方】
javascriptで記事のタイトルまたはカテゴリをチェックし、それが指定したもののときだけスタイルシートで非表示にする。

【設定方法】
トップページ、カテゴリ別アーカイブ、月別アーカイブのどのテンプレートにも設定可能。設定したい HTMLテンプレートに、指定された2種類のソースを挿入するだけです。2種類のソースは師匠の記事で確認!

カスタマイズ用ソース実例 (当ブログ)

<div class="main">
この部分に文字 例:新着記事です!<br />
<IndexArticlesLoop>
<SCRIPT Language="JavaScript">
//条件設定
hiddenentry = new Array("はじめに", "目次", "日記をつけることにしました", "ブログに登録", "ライブドアブログ", "テンプレートを選ぶ", "日付を消す", "目次スペースをつくる", "トップページに自由欄を追加", "ブログのタイトル画像をつくる", "タイトル画像をテンプレートに貼り付け", "サブカテゴリー表示"); ←非表示の記事タイトル例
//非表示
for(i=0;i<hiddenentry.length;i++){if(hiddenentry[i]=="<$ArticleTitle ESCAPE$>"){document.write("<div style='display:none'>");}}</script>

&nbsp;<b><FONT color=#ff0000>Up!</FONT></b>&nbsp;<a href="<$ArticlePermalink$>"><$ArticleTitle ESCAPE$></a><br /> ←この部分が新着記事を呼び出すタグ

<SCRIPT Language="JavaScript">
//非表示
for(i=0;i<hiddenentry.length;i++){if(hiddenentry[i]=="<$ArticleTitle ESCAPE$>"){document.write("</div>");}}</script>

</IndexArticlesLoop><br />
この部分に文字やリンク 例:…read more
</div>

これをトップの自由欄に貼り付ければOKです。

注:
当然のことながらリストアップされる記事数は非表示に設定した記事数よりも多く設定しておいてください。少ないと何も表示されません。
記事数はトップページに表示される記事数と同じです。

カスタマイズ/管理→ブログの設定→トップページの表示形式

当ブログは15件に設定。12件分を非表示にしてあるので、常に3件分の記事が新着として表示されます。



2007年02月02日

新着記事をわかりやすくするアイディア―新着リストをつくる

最新記事(1日以内の最新記事など)に該当するカテゴリに、[NEW]などの文字や画像を入れたいのですが、どのようにしたらいいですか?

結論から言うと、ライブドアブログでは入れられないそうです。
ライブドアブログは、カスタマイズがしやすいわけじゃなかったのね・・・
プラグインの部分がいじれないとは・・・残念。

ライブドアブログ以外のブログで
新着記事に「New!」マークをつける方法はこちら

仕方がないので
ライブドアブログで新着記事をわかりやすくするアイディアを考えてみました。

トップページの一番上、自由欄をつかう
ここに新着記事リストを載せよう!
ほかのブログサービスのように新着記事プラグインをメイン部に
移動できれば簡単なのですが、ライブドアの場合これが無理。
じゃあどうすればいいのか・・・
まさか、手動でいちいち入力するわけにもいかないし。

思いついたのが、以前お世話になったこちらの記事
パンくずリスト・記事一覧@ライブドアブログ
この記事は私にとってはバイブルです!
で、今回は『LOVE LIONS 〜獅子達の進撃〜』さんのこちらの記事も参考に貼り付けるソースを考えてみました。(すごくわかりやすいし、そのままソースをコピペするだけでもばっちりです!

こちらが最新記事のリストを呼び出すタグ
細字部分は投稿日時を呼びだしますので必要ないときはカット。

<IndexArticlesLoop>
<a href="<$ArticlePermalink$>"><$ArticleTitle ESCAPE$></a><br />
&nbsp;<$ArticleDate$>&nbsp;<$ArticleTime$><br />
</IndexArticlesLoop>

<$ArticlePermalink$>・・・個別記事のアドレス
<$ArticleTitle ESCAPE$>・・・個別記事のタイトル


「ブログの設定/管理」→「デザインの設定」→「カスタマイズ」→「トップページ」

このタグを<!-- Loop Start --> の前に挿入。(正確な
位置は自由欄の設置で確認)
本文のデザインと文字色や文字サイズを統一したい場合は、上記のタグを<div class="main">〜</div>で挟むといいです。
設定→再構築で終わり。

 

ところで当ブログの場合これだけだと問題が・・・
未来の日付で投稿した記事が『新着記事』として表示されてしまうのです。
う〜む・・・これじゃダメだ。どうしたらいいか。

リストに特定のタイトルの記事を表示しない方法へつづく



2007年02月01日

新着記事に「New!」マークをつける

新着の記事に「New!」アイコンを表示するようにしたい。

以前からあったらいいな・・と思っていましたが・・・どうすればいいのやら・・・。
サイドバーのプラグインでの『新着記事』リストは
当ブログの場合は投稿日時を意図的にいじっているので
本当の意味での新着記事の案内になっていません。

記事を更新した際にカテゴリ欄に「New!」アイコンが表示できたらいいな〜。

早速その方法を検索してみました。

新着、追記エントリーにマークをつける *vitalage*blogさん
エントリーの追加とアップデートをインジケート blog:N@TURE BRAINさん
Newマーク あずき・ンさん
新着エントリーのあるカテゴリーに New マークをつける
投稿者情報に New マークをつける
New マーク表示カスタマイズ改善のお知らせ 小粒空間さん

う〜む・・・難しそう・・・

しかし・・・こちらのブログ
初心者でもできる簡単FC2ブログの作り方
の説明のわかりやすいこと!

これならば誰にでも非常〜に簡単にカスタマイズできます。
貼り付けるタグ、位置、すべてが簡単に説明されているので
ライブドアブログ以外の方は、ぜひ挑戦してみてください。
こちらのブログ、今まで散々お世話になっている恩人・・・
教えてしまうのが勿体ないナンテネ
是非是非ポチッと応援してください。
本当にすばらしいブログです。

で・・・実はひとつ問題が・・・。そうなんです。
この方法はFC2ブログのカスタマイズ方法なんですよね。
(おそらくほかのブログサービスでもこれと同じ方法でカスタマイズOKです。)
ただし、ライブドアの場合は同じようにはいかないらしい・・・。
カテゴリアーカイブ、最新記事などのプラグインのHTMLを編集しなくてはいけないのですが、ライブドアブログの場合、これらのプラグインのHTMLをいじることができないんです。

じゃあ、どうしたらいいのでしょうか?
ただいま奮闘中。(→アイディア1、トップに新着リストをつける
カスタマイズするならライブドアって耳にしたような気がしますが
検索すると、どうも実例の紹介が少ない・・・
やっぱりカスタマイズはFC2が有利か・・・。

 



2007年01月31日

画面上の長さを測りたい

Webデザイナーのための「ピクセル定規

Web上の幅や高さはピクセルという単位で表現します。
このソフトを使えばディスプレイ上の幅や高さを本物の定規と同じように自由に測ることができます。Webページの制作にはかかせないツール。
「あと何ピクセル足りない、大きすぎた・・・」というときに便利です。



2007年01月30日

カラーコードを知りたい

とっても便利なフリーソフトの紹介です。

FE Color Palette

Web上の色は、白なら「#ffffff」、黒なら「#000000」のように、
16進数を使って表現しています。
このソフトはディスプレイ上の画面上の任意の点の色を自動的に数字に変換してくれるので、「この色を使いたいんだけど、カラーコードがわからない」というときに便利です。

こんな便利なものがあるとは知らず、今まではテンプレートのCSSの中の
コードを探しては「ああ、このタイトル部分のピンク色のカラーコードは
color:#fb2b85 なんだな・・・」とメモして使っていました。

これがあれば一発。
今までカラーコードがわからなかったような色も簡単に確認できます。



コピーライトをいれる

弱小エンジニアの小言 ミニカスタマイズ第3弾 『コピーライトを入れる』 に挑戦!

お〜すごく簡単そう。
これだけならすぐできる・・・と挑戦してみたのですが
実際はもう少し複雑でした。

こちらのコピーライトを表示するという記事がとても参考になりました。

,泙困倭淨したいコピーライトを用意します。
当ブログの場合はシンプル&スタンダードに

Copyright (C) 2007 はじめの一歩 All rights reserved.

ブログタイトルにはリンクを貼りました。
ご自分のお好きなようにアレンジしてください。
Copyright (C) 2007 <a href=http://blog.livedoor.jp/kabu77kabu/>はじめの一歩</a>  All rights reserved.

□出来上がったこのコピーライト用のタグをテンプレートに挿入して、
再構築すれば出来上がり。テンプレートはトップ、個別記事、カテゴリ別、月別の4テンプレートを変更してください。

問題なのはテンプレートのどの位置に挿入するか
これがブログの構成を知らない初心者には難しいんです。ひとつ場所を間違えると、とんでもないところに表示されたり、デザインが崩れてしまったり・・・。
(参考→ブログの構成を知る

このブログの実例をメモしておきます。
各テンプレートの一番下に注目。

デフォルト
<br style="clear:both;" />
</div><!-- End of blogcontainer-->
<div id="footer"></div>
</div><!-- End of container-->
<div id="outfooter"></div>
</body>
</html>

変更後
<br style="clear:both;" />
<div id="footer">Copyright (C) 2007 <a href=http://blog.livedoor.jp/kabu77kabu/>はじめの一歩</a>  All rights reserved.</div>
</div><!-- End of blogcontainer-->
</div><!-- End of container-->
<div id="outfooter"></div>
</body>
</html>

CSS(スタイルシート)でコピーライトの書式の設定をする

/**********************************
***          Global             ***
**********************************/
の一番下に注目。デフォルトだと#footer{}のようになっていますので
この部分にお好きな書式を設定してください。
#footer{
            color:#333;      ←文字色
            font-size:12px;  ←文字サイズ
            font-weight:bold;   ←太字指定をしたいときはこの記述を入れる           
     text-align:center;  ←ウインドウの真ん中に
       }
変更→再構築


 



2007年01月29日

タグを無効にする

記事のタグを無効にする方法

文字表示をいろいろ指定することができるのが『タグ』

<big>文字</big>
文字を大きくする
<small>文字</small>
文字を小さくする
<
font>文字</font>
文字のフォントを指定する
<b>文字</b>
文字を太字にする
<a href>文字</a>
文字にリンクを貼る

HTMLタグ< >を使用すると、< >で挟まれた文字を強調したり、文字にリンクをはったり、文字の大きさを変えたりできます。このタグ< >内の文字は画面上には表示されません。

ところでタグ入りの文を、例えば、『文字』の場合、そのまま<b>文字</b>のようにタグ入りで記述したい場合はどうしたらいいのでしょうか?

ライブドアブログの場合

* WYSIWYGエディタ
普通にキーボードからHTMLタグを記入するだけでOK。
それだけで、タグは機能せずに、そのまま表示されます。

* シンプルエディタ
タグを構成する「<」の代わりに「&lt;」、「>」の代わりに「&gt;」と記入すれば、ブログの記事を見た時は「<>」と表示され、タグの指示は無視されます。

しかし・・・いちいち「&lt;」のように手動で入力するのは面倒!という方におすすめなのがこのツール。非常に便利でいつも愛用しています。


☆ De-TAG ☆
タグ説明のためのタグ抜きツール


 



サイドバーにもランキングバナーを貼りました

昨日参加した 人気blogランキング

個別記事ページ表示の際の各記事にランキングサイトへのリンクが
自動的につくようにテンプレートをカスタマイズしました。
(設定方法はこちら

この方法だとトップページ、カテゴリ別アーカイブ、月別アーカイブ表示だと
ランキングサイトへのリンクが記事中に表示されません。
(理由を知りたい方はこちら
個別記事ページのテンプレートだけでなく、他の3つのテンプレートも
カスタマイズすればいいのですが、すべての記事にランキングサイトへの
リンクが表示されるのも読んでいてわずらわしいな・・・と思いましたので
まとめてサイドバーにランキング用のバナーを貼ることにしました。

ブログランキング2

 

 

設置方法

カスタマイズ/管理→(プラグインの)新規追加

バナーの利用方法を参考に貼り付けるタグを入手。
フリーエリアの記入欄にコピー&ペースト。
(align=left  という部分を align=center に書き換えると画像がフリーエリアの
中心に表示されます。念のため『改行設定』は『変換しない』をチェックしておいてください。)
この内容で設定→再構築。



2007年01月28日

ブログランキングに参加する

ブログランキングとは、登録されたブログのアクセス数等を集計し
ランキング形式で表示するWEBサイトのこと。
よく知られたサイトに人気blogランキングがあります。
↓こちらのバナーに見覚えがある方もいるのでは  ブログランキング

 

早速参加してみました。
どうぞ応援よろしくお願いします。

参加方法
人気blogランキングをクリック。
一番上のグリーンの部分の『新規登録』へ。
必要事項を記入してください。
登録したメールアドレスにあなたのリンク用URL・リンクタグ等が送られてきます。
人気blogランキングという文字リンクやバナー。
ここにすでにあなたのサイトのIDが組み込まれています。)
自分のサイトへこのリンクタグをはる。
(このリンクからランキングサイトを訪問した人数を集計してランキングが決定されます。ですから必ずこのリンクタグをご自分のサイトに設置してください。)

ランキング用タグ・バナーの貼り方
送られてきたリンクタグをその都度投稿欄に貼ってももちろんいいのですが
面倒ですよね。
そこでテンプレートの中に組み込んでしまいます。
こうすることで記事を投稿すると自動的にランキングサイトへのリンクも貼られるようになります。

まず貼り付けたいリンクタグ、もしくは画像バナーを用意。
ライブドアブログの管理画面から
カスタマイズ/管理→デザインの設定→個別記事ページ 

<div class="posted"><$ArticleAuthor$> at <$ArticleTime$><IfArticleAllowComment>│

という記述を探してください。
この記述の直前(上部に)以下のタグを追加。

*リンクタグ(文字リンク)の場合
<DIV class=main>
<A href="ご自分のリンクURL">人気blogランキングへ</A> <BR clear=all></DIV>

(<DIV class=main>〜</DIV>ではさむことで文字の大きさ・色などが記事本文にあわせられます。)

*画像の場合
バナーの利用方法(ライブドアの場合)を参照、
手順6で入手した画像用のタグを貼り付ける


『この内容を保存する』をクリック、再構築します。
個別記事をためしにチェックしてみてください。
ランキングサイトへのリンクが貼られていればOKです。
(なお、以上のカスタマイズだと個別記事ページのみのカスタマイズになります。
トップページ、カテゴリ別アーカイブ、月別アーカイブも同様に
変更すると、すべての表示にリンクが貼られます。)



2007年01月27日

カレンダーにタイトルをつける

カレンダーのプラグイン、なぜかタイトル表示ができない。
カレンダーにタイトル?と思うかもしれないけれど・・・

仕方ないのでフリーエリアを利用してみました。
カレンダーの上に表示して説明を加えました。
カレンダー表示といっしょにサイドバーのトップに移動。

カレンダーを利用して記事の更新をわかりやすくしようという試み。
どうでしょうか?




amazonアソシエイト
私が使っているのは書籍だけですが、DVD、電化製品、キッチン用品などなど実はすごく取り扱い商品が豊富。ほかのASPと違う点は提携先の企業があるのではなく、商品のすべてがアマゾンの商品だという点。ですから、メリットは一度登録さえすれば、そのあとの面倒な申請・審査がないという点。アマゾンの商品にありさえすれば気のむいたときにいつでもすぐリンクを作成できます。リンク作成用のツールもいろいろ開発されているのでサイト作りが楽しいです。

第一花壇 ママプードル 生花
こんなものも扱ってます
LinkShare アフィリエイトリンクシェア
大手ということで提携先も大手が多い。登録してから、各サイトに改めて提携申し込みをする必要がある。法人としか提携しないところもあり、けっこうわずらわしい。

私は最初からリンクシェアには登録しているのですが、どうも使いこなせていない。提携サイトの申し込みというのがイマひとつ・・・。本格的にアフィリエイトサイトを作ろう!という方にはいいと思うのですが、私のような片手間派には、「よし!やろう」と思ったときには提携申請ができていなくてリンクを作れず、申請が承認されたころにはやる気がうせているという悪循環。事前に申請するといっても、その時には大手の会社がひしめいていて自分のサイトとのイメージが浮かんでこない。しかも複数の一括申請ができないため、自分のビジョンがしっかりしていない人には時間ばかりかかり面倒なばかり。

でも、すっごくいいところがあるんです(これだけダメダメといっていて・・・)。報酬が1円でも毎月支払ってくれるこれは素晴らしすぎます。私のような不真面目なアフィリエーターにも毎月入金されるんです。振り込み料金リンクシェア持ち。
LinkShare アフィリエイト
よ〜し!これからがんばるぞ!! ということで、長い目で見たら絶対登録しておいたほうがいいASPです。初心者の方には特におすすめ。だって1円でも報酬がもらえるんですよ。普通は何千円単位でないと振込みがないので、初心者の初回入金までの道のりは遠いのです。それが・・・うわ〜お!振り込まれてるよ・・・1円。

いやいや初回○万円!なんて方もいるかもしれない。
A8ネット
こちらも初期に登録したASP。提携できるサイトが非常に多く、何よりも一括申請できるのが楽。ジャンル別に提携サイトの内容、報酬等が一覧表示されるので、よさそうなものにチェックつけてポチッ!これだけでOK。リンクをつくるのも簡単ですし、申請段階でどんなバーナーがあるのかササッとチェックできますので、イメージにあいそうなものをまとめて申請できます。

で・・・問題点は・・・。これまた不真面目アフィリエーターの私からしますと・・・提携サイトが多すぎて使いきれない。というか・・・ぜんぜん使ってない。ありすぎてそのうちA8ネットにログインするのさえ面倒になる有様。

そんなわけでしばらく遠ざかっていたら・・・これが結構面白い提携先が加わっているのです。リンクシェアのような大手ばかりではなくて、(大手もありますが)なんか名前も聞いたことのないような会社もあるA8ネット。それだけだったらなんかあやし〜ってなわけですが、中には「おッ・・・面白そう」というか、「こんなお店もあるんだ!」というような見っけものもたくさん。


おまけに『本人の利用OK』すなわち、『自分が購入した分も報酬がもらえる』というプログラムも結構あってなかなか便利です。
アフィリエイトで月100万円確実に稼ぐ方法
アフィリエイトで月100万円確実に稼ぐ方法伊藤 哲哉

中経出版 2006-05-20
売り上げランキング : 1210

おすすめ平均 star
star具体的な手順が書かれているのが良い
star解りやすい
starこれが「答え」だ!

Amazonで詳しく見る
by G-Tools
アフィリエイトの神様が教える儲けの鉄則50
アフィリエイトの神様が教える儲けの鉄則50丸岡 正人

中経出版 2006-10-19
売り上げランキング : 3447

おすすめ平均 star
star儲けを最優先事項にするならば良書ではあるが・・・
star「好きなことを書く」のではなく「儲けるために書く」ことに徹底している。
star方向性が明確

Amazonで詳しく見る
by G-Tools
ケータイアフィリエイト高収入マニュアル
ケータイアフィリエイト高収入マニュアル
エム・ビー・カンパニー 2006-02-25
売り上げランキング : 30309

おすすめ平均 star
star携帯サイトのアイデア探しにも使える商材!!
starアフィリエイトもモバイル時代到来です

Amazonで詳しく見る
by G-Tools
携帯サイトで給料の3倍稼ぐ方法
携帯サイトで給料の3倍稼ぐ方法加藤 義孝

毎日コミュニケーションズ 2005-09
売り上げランキング : 35312

おすすめ平均 star
star意外な効用。
star1冊持っておいてもいいのでは
star初心者にはかなりオススメ

Amazonで詳しく見る
by G-Tools
できる100ワザ アフィリエイト―ホームページでがっちり稼ぐ実践ノウハウ
できる100ワザ アフィリエイト―ホームページでがっちり稼ぐ実践ノウハウ小林 智子/藍玉 杉村 崇 和田 亜希子

インプレス 2005-05
売り上げランキング : 3552

おすすめ平均 star
starアフィリエイトの基本をマスター!
star僕はここから始めました。
starかゆいとこまで手が届く

Amazonで詳しく見る
by G-Tools
できる 100ワザ ブログ アフィリエイトも楽しめるアクセスアップの実践テクニック
できる 100ワザ ブログ アフィリエイトも楽しめるアクセスアップの実践テクニック田口 和裕 松永 英明 できるシリーズ編集部

インプレス 2005-12-02
売り上げランキング : 37422

おすすめ平均 star
star極めて重要度の高い「ブログ参考書」
starブログでやりたいことが分かっている人にオススメ
starブログライフへの道先案内

Amazonで詳しく見る
by G-Tools
エントリー全記事リスト
QRコード
QRコード
Recent Comments
Recent TrackBacks
もとのデザインはこれ
スタンダードピンクテンプレ

livedoorブログ/スタンダード・ピンク(2カラム)↑を利用してカスタマイズに挑戦!まだまだ変えていく予定です。どうぞよろしく。超初心者ですので記述内容には確信ありませんのであしからず。

2カラム
トップページを3カラム化
(2007.2.14)
ブログランキング2
Categories
またまた挑戦
ブログサービス[JUGEM]
Powerd By WebToJpeg

公式ブログテンプレート[card]を使用してカスタマイズに挑戦。

テーマは『ハート』 
Heart Shop
Powerd By WebToJpeg

こんな風にカスタマイズしてみました。
思いつき日記
記事一覧
カスタマイズの思いつき
アイディアを綴っています
最新の記事を↓チェック!

livedoor Readerに登録
RSS
livedoor Blog(ブログ)