忍者ブログ
HOME > カスタマイズの記事 Admin RSS  
独自ドメインを無料で利用できる忍者ブログでカスタマイズ・テンプレート・アフィリエイト・アクセスアップSEOを徹底調査 
定番とも言えるカスタマイズですが、ページを切り換えたり、リロードした際に背景をランダムに選択します。
透過フォト・透過フォト2.0などをご利用の際に使ってみてください。
PR
私のブログは日記的要素が少なく、さかのぼって古い記事を見直して編集することが多くあります。
そんなときにブログから直接記事編集ページに移動できるリンクがあると便利です。
ブログに関するメインサイトをSEESAAで運用していて、そのようなリンクを設置しています。(SEESAAの場合は管理画面の移動が遅いのも必要な理由の一つですが)
記事編集ページへの直接リンク
このninja-blog.comも少しずつ記事が増え、そろそろ該当する記事を編集するにも探すのが面倒になってきたので、独自構文解説書/構文辞典INDEXを参考に、ブログから直接記事編集ページへアクセスできるリンクを設置してみました。

当ブログの各記事フッターに「Edit」というリンクがありますが、そこをクリックすると当該記事の編集ページに移動出来ます。
ただし、ログインしていないと移動できませんので、当然ID・パスワードを知らない人は記事編集出来ません。

同様にカスタマイズしたい方は参考にしてください。
<記事編集画面へのリンク設置方法>
「管理画面」-「テンプレート設定/編集」で現在使用中のテンプレートの「修正」をクリック
記事のフッター部分(標準的には<div class="EntryFooter">を探してみてください)に下記のタグを追加
(私は記事フッターに置きましたが、<!--entry-->から<!/--entry-->の間であればどこでも設置可能)
<A href="<!--$g_url-->hoge/EditEntry/<!--$entry_no-->/" target="_blank">Edit</a>

「target="_blank"」は好みに応じて削除しても結構です。
アンカーテキスト「Edit」も「記事編集」など使いやすい文字に変更下さい。「.」や「_」など目立たない文字にするのも一つの方法です。

<参考:利用したタグ>
記事番号
ブログのURL
ブログのカスタマイズページとアーカイブページに記事一覧を加えました。

以前読んだhttp://customize.blog.shinobi.jp/さんのページにあったタグを使わせて頂きましたが、当該ページは削除されてしまっていますので、引用しご紹介します。

メイン部分の<!--entry-->を探し、その上に下記htmlを挿入します。
テンプレにsnowmanを使っている場合、
<!--/plugin5-->
■ここに下記htmlタグを追記■
<!--entry-->

【HTML】
<!-- タイトル一覧【カテゴリページ】 -->
<!--if_category-->
<div class="TitleListBox">
<div class="TitleListTitle">■<!--$g_page_title--></div>
<div class="TitleListText">
<!--entry-->
[<!--$entry_year-->/<!--$entry_mon-->/<!--$entry_day-->] <a href="<!--$entry_link-->"><!--$entry_title--></a> (No.<!--$entry_no-->)<br />
<!--/entry-->
</div>
<div class="TitleListPageLink">
<!--if_prev_page--><a href="<!--$pagelink_prev_link-->">≪</a> <!--/if_prev_page-->
<!--pagelink_10-->
[<!--$pagelink_10_link-->]
<!--/pagelink_10-->
<!--if_next_page--><a href="<!--$pagelink_next_link-->">≫</a> <!--/if_next_page-->
</div>
</div>
<!--/if_category-->
<!-- /タイトル一覧【カテゴリページ】 -->
<!-- タイトル一覧【アーカイブページ】 -->
<!--if_date-->
<div class="TitleListBox">
<div class="TitleListTitle">■<!--$g_page_title--></div>
<div class="TitleListText">
<!--entry-->
[<!--$entry_year-->/<!--$entry_mon-->/<!--$entry_day-->] <a href="<!--$entry_link-->"><!--$entry_title--></a> (No.<!--$entry_no-->)<br />
<!--/entry-->
</div>
<div class="TitleListPageLink">
<!--if_prev_page--><a href="<!--$pagelink_prev_link-->">≪</a> <!--/if_prev_page-->
<!--pagelink_10-->
[<!--$pagelink_10_link-->]
<!--/pagelink_10-->
<!--if_next_page--><a href="<!--$pagelink_next_link-->">≫</a> <!--/if_next_page-->
</div>
</div>
<!--/if_date-->
<!-- /タイトル一覧【アーカイブページ】 -->
【CSS】
次にCSSの一番下などに下記を貼り付け。ご自分のテンプレに合わせてカラーなど変更。
/*-------------------------------------------------------
記事タイトル一覧部分 > 全体
-------------------------------------------------------*/
.TitleListBox {
font-size: 95%; /* フォントサイズ */
width: 542px; /* 枠の幅 */
text-align:left; /* テキスト位置 */
background-color:#E6E6FA; /* 背景色 */
border:1px solid #CCCCCC; /* 枠線の設定 */
padding:5px; /* 内側余白 */
margin: 0px 0px 15px 0px; /* 外側余白 */
}
/*-------------------------------------------------------
記事タイトル一覧部分 > タイトル
-------------------------------------------------------*/
.TitleListTitle {
font-weight: bold;
}
/*-------------------------------------------------------
記事タイトル一覧部分 > テキスト
-------------------------------------------------------*/
.TitleListText {
font-size: 95%;
text-align:left;
margin: 0px 0px 0px 10px;
}
/*-------------------------------------------------------
記事タイトル一覧部分 > ページリンク
-------------------------------------------------------*/
.TitleListPageLink {
font-size: 95%;
text-align:center;
}
ブラウザの次に揃えたいソフトが、htmlエディタです。
ブログのカスタマイズはhtmlとCSSの変更が必要になってきますが、その編集をとてもやりやすくなります。
忍者ブログのカスタマイズ画面はなかなか良くできていて、左側メニューでフォントや背景などのカラー選択などが出来るようになっていますが、更に高度なカスタマイズにはhtmlとCSS用のエディタを使った方が効率的です。

また、htmlに慣れてくると、記事投稿時にもhtmlエディタを使った方が便利です。
忍者ブログのエディタはWYSWYG的な高性能エディタも付属し、使いやすいのですが、htmlエディタはさらに高機能ですし、記事のバックアップの習慣も付きますので、htmlタグに慣れてきたら、是非記事作成にも役立ててください。

私はカスタマイズなどの際はAdobe Dreamweaverというソフトを使っています。
このソフトはプロのWEBデザイナーも利用する高機能なソフトでとても使いやすいのですが、多少高価です。(2007.10現在最新バージョンのCS3で49,800円)

1万円前後で購入できるホームページビルダーでも通常は十分です。(初心者にはとても解りやすいし、価格も手頃なのですが、きれいなタグにならないのであまりお勧めしません)
これらのHP作成ソフトは製品版だけあってとても使いやすいのは確かなのですが、ブログのカスタマイズであれば無料のフリーウェアで十分です。
例えばez-htmlというリンクウェアが高機能な上とても使いやすくて気に入っています。
もちろん無料ですので、是非導入してみてください。

ez-htmlがリンクウェアになったので、最近は専らHTML Project2を使っています。

インストール方法が解りにくいので下記解説ページをご参照下さい。
初心者の館
ひろこのお部屋

とほほのWWW入門との連携をしておくと、html構文のヘルプが出来るようになり便利です。
今後、カスタマイズに関してはez-html環境で説明していく予定です。

エディタは他にも無料や格安のいいソフトが沢山出回っていますので、探してみるのもいいでしょう。
HTML Project2alphaEDIT+(初心者向け)、、秀丸エディタ(シェアウェア4,200円)、さくらエディタ、TeraPadなどなど...
ブログのカスタマイズをする際、必ず導入して頂きたいのが使いやすいブラウザです。

Windows環境の方はMicrosoftのInternetExplorer(以下IE)が初期設定になっているので、そのままIEを利用している方が多いでしょう。
実はこのIEは非常に使いにくいブラウザなのです。
特にWinXPの方はIEのバージョンがIE6を使っているケースが大半です。
VISTAに標準搭載のIE7はタブ式ブラウザになっているのですが、IE6はタブ式ではありません。タブ式になれるとIE6は2度と使いたくなくなるほど古く感じます。
ではIE7にすればいいかというと私はお勧めしません。特にXP上でIE7は細かいバグ(トラブル)が沢山あるのです。
また、VISTAユーザーはIE7だから安心かというとこれも疑問です。
他のブラウザを使ってみると解るのですが、IE7は動作が遅いのです。

ではどういうブラウザがお勧めかというと、私はFirefoxをお勧めします。
ただ、各ブラウザにより表示が若干ずれたりするので、それぞれを確認するためにユーザー数の多いブラウザは表示確認をしたほうがいいでしょう。
1.ブログカスタマイズに便利な機能が沢山ある。
  例えばCtrl+Uですぐにhtmlソースが表示されます。
2.利用ユーザー数が多い
  もちろんIEには届きませんが、国内でも世界でも2位のシェアです。
3.様々なプラグインが開発され、沢山の機能を追加利用できる。

是非利用してみてください。
私は右クリックで画像のURLが解ったり、背景を表示できたり、Ctrl+Uで簡単にソースが見られたりするのが、非常にブロガーにとってありがたい機能だと思います。
[1]  [2]  [3
ブログ内検索
プロフィール
HN:
がりんぺいろ
性別:
非公開
自己紹介:
なんちゃってアフィリエイター
数年前から趣味のサイトをいくつか作っていましたが、軽い気持ちで置いたアフィリエイトが結構稼いでくれる。ここ2~3年はブログに夢中。といっても放置しているものが多い。
本業は硬い業種のサラリーマン。
バーコード
アクセス解析
忍者ブログで独自ドメイン・カスタマイズ カスタマイズ Produced by がりんぺいろ
忍者ブログ [PR]
透過フォトver2.0 Designed by ninja-blog.com