2007年09月19日

いろんな名称を変えちゃおう 

今回は「次のページ」や「このページの上へ▲」などといった名前を変更する紹介をしたいと思います。
これらはジツはめっちゃ簡単で、「トップページ」、「個別記事」、「アーカイブ」のそれぞれhtml内を探せば、そのまま文章として入力されていますので、その文章を書き換えるだけで変更できちゃいますkao10



上の画像のように、いろんなところに存在しますから探してみてください。
下にある程度一覧を記入しておきますので参考にしてください。

トップページ&アーカイブ
・続きを読む
・Posted by
・at
・前のページ
・次のページ
・このページの先頭へ▲

個別記事
・Posted by
・at
・このBlogのトップへ
・前の記事
・次の記事
・この記事へのトラックバックURL
・この記事へのトラックバック
・この記事へのコメント
・名前:
・メール:
・URL:
・情報を記憶:
・コメント:
・書込
・このページの上へ▲

※1 テンプレートによっては名称が多少異なる場合がございます。
※2 個別記事での「確認せずに書込」は滋賀咲くBlog側での設定ですので変更は難しいと思います。


設定

例えば「次のページ」を英語にしたい場合は「Next Page」のように書き換えてやればOKです。
ただこれだけ。


応用

文字ではなく画像に変更したい場合は以下のように入力します。

<IMG src="画像URL">

アップロードした画像のURLを青文字のところに貼り付けてください。
例えば「このページの上へ▲」を画像に変更する場合は次のようになります。

<div class="pagetop"><a class="aposted" href="container"><IMG src="画像URL"></a></div>

画像作成に自信のある方はお好みに、また作成に自信がない方でも、いろんなサイトでHP素材集などを無料提供されておられますからご利用になられるのもいいかと思います。
文字と画像を同時にする場合は次のようになります。

<div class="pagetop"><a class="aposted" href="container">このページの上へ<IMG src="画像URL">いっとく？</a></div>

文章はそのまま入力で、画像はタグを用います。
画像の後に文章を入れる場合でも、文章はそのまま入力します。


まとめ

どうでしたかiconN05お好みの名前に簡単に変更できたことでしょうkao10
全部英語にするのも良し、可愛らしく語尾に「だよicon06」とか付けても良し。
いろいろ工夫してみてくださいねicon22（ただあんまり長くなるのもどうかと思いますが・・・）
それではお疲れ様でしたicon23
  

Posted by nory at 00:31 │Comments(0) │TrackBack(0) │HTMLタグ

2007年09月12日

はてなスターを設定しよう 

少し前からこのブログの記事タイトルの横に が付いていますが、これは「はてなスター」というもので、各記事に対して評価をいただくものです。
コメントはちょっと・・・って方でも、これならiconN36ですよね。
これは滋賀咲くブロガーのお京さんから教えていただいたもので、オモシロそうで気に入ったので設定してみました。
お京さん、ありがとうございますkao05

お京さんのブログ → 滋賀咲くブログで やってみよう♪

っというわけで、僕も設定方法を紹介したいと思いますicon22


設定

滋賀咲くぶろぐにはてなスターを設置するには、「トップページ」、「個別記事」、「アーカイブ」に設定します。
まずそれぞれのhtml内から「</head>」を探してください。
その上に次の文章を加えます。

<!--はてなスター-->
<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<!--はてなスターEND-->

入力するのは少し大変かと思いますから、上の文章をコピー＆貼り付けしてくださいね。
設定が解りやすいように画像を用意したので御覧下さい。



これで完了です。


まとめ

どうでしたかiconN05上手く設置できたでしょうか。
はてなスターへの登録方法が分からなかった方は、こちら でどうぞ。
はてなスターのカスタマイズ方法も載ってますから、興味のある方はチャレンジしてみてくださいね。

オモシロい記事をいっぱい書いて、いっぱいiconN08をもらっちゃいましょうkao10
それではお疲れ様でしたicon23
  
～追記を読む～

Posted by nory at 23:48 │Comments(4) │TrackBack(1) │HTMLタグ

2007年09月10日

ナビゲーションバーを設置しよう 

前回の反省点で、へこんではおられません。
まだまだがんばりますicon14icon21

今回は滋賀咲くブログのナビゲーションバー設置の紹介をしたいと思います。
ナビゲーションバーとは↓のことです。（正式名はiconN05icon10）



ナビゲーションバーは、みなさんが選択されるテンプレートによって、設置されてあるものと、設置されてないものがあります。
設置されてないけど今のテンプレートがお気に入りの方にはもってこいの紹介だと思いますよ。


設定

ナビバーは「トップページ」、「個別記事」、「アーカイブ」それぞれに設定します。
その中から「<body>」もしくは「<!--HEADER-->」を探してください。



その間に次の文章を付け加えます。 

<!-- Navigation -->
<div style="font-size:12px; background:url(http://shiga-saku.net/img/ad/bg_head.gif); background-repeat:repeat-x;">
<table cellpadding="0" cellspacing="0" width="100%" border="0"
class="header_scroll">
<tr>
<td nowrap width="1%"><div align="left"><script type="text/javascript"
src="http://shiga-saku.net/js/header_logo.js"></script></div></td>
<td nowrap width="97%"><td>
<td nowrap width="1%"><div align="right"><script type="text/javascript"
src="http://shiga-saku.net/js/scroll.js"></script><script
type="text/javascript"
src="http://shiga-saku.net/js/scroll_news.js"></script><script>topics.start();</script></div></td>
<td nowrap width="1%"><div align="right"><script type="text/javascript"
src="http://shiga-saku.net/js/header_login.js"></script></div></td>
</tr>
</table>
</div>
<!-- Navigation -->

自分で入力していくのは大変だと思うので、↑のをコピー＆貼り付けしてください。
これでOKです。


まとめ

どうでしたかiconN05上手く設置できたでしょうか。
これが分かっていれば、ナビバーが設置してあるテンプレートの方でも一工夫できちゃいますよ。
べつに「<body>」のすぐ下に設置しなくても、このブログのように「<div id="container">」と「<div id="banner">」の間に設置してやってもオモシロいと思います。
あとは背景画像も自分で用意できるのであれば変更可能ですねkao10
いろいろ試してカスタムしちゃってください。
それではお疲れ様でしたicon23
  

Posted by nory at 22:39 │Comments(0) │TrackBack(0) │HTMLタグ

2007年09月10日

おぉ～っと！ 

みなさんブログカスタマイズ楽しんでいらっしゃいますかkao07
今回はカスタムの紹介ではなく、僕の感想文です。

これまでいろいろ覚えながら紹介してきたわけですが、ここにきてちょっと反省ですkao02
僕はいつもブラウザはWindows Internet Explorer7を使用しています。
それがいつの間にか当たり前になってしまっていました。
それで久しぶりに他の環境、他のブラウザで自分のこのブログを見てみたのですが・・・おぉ～っと、表示がおかしいじゃありませんかicon10
ほとんどのブラウザでは全体の表示が左寄り。
あるブラウザでは「marquee」&「table」を使ったiconN15のサイトマップが崩れてたり表示されていなかったり。
頭の中じゃ分かってたはずなのに、ジツは分かってなくってちょっとショックkao12
っと同時に、まだまだ勉強不足だということが分かり、更なる意欲が出た気もしますicon14
あと「他のブラウザでの確認なんて、そうそうできるわけないやん！」っとちょっとギャクギレkao03

とりあえずいくつかは修正しましたけど、今まで&今でも見難い方々にはホント申し訳ないです。
まぁ僕の実力もこの程度なのですよkao08
ってなわけで、こんな僕&ブログですが、これからも利用できるところは利用したってくださいねkao10icon22
  

Posted by nory at 01:39 │Comments(0) │TrackBack(0)

2007年09月06日

サイドバー項目名を変更しよう 

今更ながらちょっと恥ずかしいのですが、サイドバーの項目名を変更できることに気付きましたkao08
例えば「お気に入り」という名前を「リンク」というようなかんじに名前を変更できるのです。
そんなん知ってるわ～icon09っとつっこまれそうですが、一応、設定の紹介をします。


設定

設定は↓の画像を参照してください。


まず管理画面TOPからサイドバーを選択し、サイドバー設定画面へと進みます。
変更したい名前を選択して、「名称変更」ボタンをクリックします。
すると名前を変更できる枠が表示されますから、お好みの名前に変更してOKをクリックします。
これだけで名前の変更は完了です。


まとめ

どうですかiconN05これもりっぱなカスタムですよね。
尚、名前を変更できないモノもありますから、そのへんはしょうがないってことでkao08
あと、名前は変更できても機能までは変わりませんからご注意をiconN04（ナカガワ@湖底さんから情報をいただきました）
それではお疲れ様でしたicon23


  

Posted by nory at 22:18 │Comments(7) │TrackBack(0) │サイドバー

2007年09月05日

カスタムプラグインのデザイン 

今回はカスタムプラグインのデザインを、他のサイドバー項目と同じデザインに設定する紹介をしてみたいと思います。
カスタムプラグインには、みなさんそれぞれブログペットなど、いろんなツールを設定されていることと思います。
でもカスタムプラグインには他のサイドバーの項目のようにスタイルシートが適応されません。
これはいろんなツールのデザインへの配慮や、javascriptを用いる場合に枠だけ表示されるのは変だということへの配慮ではないかiconN29っと勝手に思っていますkao08
ってことで、スタイルシートを用いたデザインの設定を紹介します。

その前にまず、一応カスタムプラグインの設定場所の確認です。
↓の画像を御覧下さい。



カスタムプラグインの設定は、管理画面TOPからブログ環境設定へと進み、下にスクロールしていくとあります。
１～3のお好きな欄をご使用下さい。


設定

今回はスタイルシートで設定してある「sidetitle」、「side」のクラスを用います。
まずは↓の例を御覧下さい。

<div class="sidetitle">項目のタイトル</div>
<div class="side">
リスト１<br>
リスト2<br>
リスト3
</div>

1行目の「<div class="sidetitle">～</div>」はタイトルです。
これで他のサイドバーのタイトルと同じデザインになります。
みなさんが設定される内容に合ったタイトルをつけてくださいね。

2行目の「<div class="side">」から最後の「</div>」までがサイドリストです。
設定したい内容を、この間に入力してください。
例えばプチ情報付きのホームページへのリンク集にする場合、

<div class="side">
<a href=http://customshichao.shiga-saku.net/" target="_blank">カスタムしちゃお♪</a><br>
<span style="font-size:10px">私のブログです。</span>
</div>

っというようなかんじになります。
※ここで登場したタグの簡単な説明は下の追記に書いておきます。
これで他のサイドバー項目と同じデザインに設定できました。


まとめ

どうでしたかiconN05難しいようで簡単でしょkao10
でも小さなミスが多いと思います。
例えば「<br>」で改行しなくて文章がつながっちゃったとか、「</div>」などで要素を閉じてなくて表示がおかしくなっちゃったとかkao04
まぁ僕がしょっちゅうするミスなんですけどね・・・kao08
でも簡単に修正できますから、慌てずミスのチェックをしましょうiconN37
それではお疲れ様でしたicon23
プラグインを用いて楽しいブログにしてくださいねkao05
  
～追記を読む～

Posted by nory at 21:50 │Comments(0) │TrackBack(0) │HTMLタグ

2007年09月04日

記事タイトルをリンク化しよう 

滋賀咲くブログ、バージョンアップ後 第2弾です。
前回に引き続き記事タイトルですが、みなさんのブログでは自動的にリンク化されているようですが、中にはリンク化されてないkao04っという方もおられるみたいです。
そこで、だったら自分でリンク化してみようkao10ってことを紹介したいと思います。

設定

まず、個別記事へのリンク設定には「<%EntryPermalink%>」という置換タグを用います。
これは各個別記事のURLに変換させる役割があります・・・たぶん。
それをリンクさせるので「<a href="~">~</a>」と組み合わせます。

設定する場所は、「トップページ」、「個別記事」、「アーカイブ」のそれぞれhtml内です。
※「トップページ」だけでも構いませんが、すべてに設定されることをお薦めします。
その中から↓の画像のような欄を探してください。



変更する点は↑の画像で赤下線の、

<h3 class="title"><%EntryTitle%></h3>


という部分です。
ここに次の青文字の文章を加えます。

<h3 class="title"><a href="<%EntryPermalink%>"><%EntryTitle%></a><</h3>

 これで完了です。
もし個別記事やアーカイブのページにも記事タイトルをリンク化したい場合は、それぞれ同じ文章を加えればOKです。

まとめ

どうでしたかiconN05上手くリンク化できたでしょうかicon10
僕もこれにはちょっと確信がないのですが・・・kao08
自分のブログもみんなのブログと同じように記事タイトルのリンク化にしたいという方は、試してみる価値はあると思うのですが。
とりあえず参考までに記事にしてみました。
今回はお疲れ様ではなく、お粗末さまでしたってことでicon23
  

Posted by nory at 22:01 │Comments(5) │TrackBack(0) │コンテント

2007年09月03日

記事タイトルをカスタムしちゃお 

今回の滋賀咲くブログのバージョンアップによって、ブログ記事タイトルがリンク化されましたね。
その記事タイトルのリンク化ですが、標準では下線が表示されているようになっていると思います。
また、記事タイトルのフォントを指定されてた方は、上手く表示されず、ページ全体のフォント設定が反映されていると思います。
ってことで、今回は、記事タイトルのリンク設定を紹介したいと思います。

設定

まずクラス名ですが、以前紹介したように、リンク設定してあるクラスには「a」が付きます。
そして記事タイトルのクラス名は「title」ですから、記事タイトルリンクは「title a」のようになります。
ですからスタイルシートには↓のように入力します。

/*記事タイトルリンク*/
.title a{
color:#0000cd;
text-decoration:none;
font-family:"HGS創英角ﾎﾟｯﾌﾟ体";
}

.title a:link{
color:#0000cd;
text-decoration:none;
}

.title a:visited{
color:#0000cd;
text-decoration:none;
}

.title a:active{
color:#0000cd;
text-decoration:none;
}

.title a:hover{
color:#ffffff;
text-decoration:none;
background:#0000cd;
}

こんなかんじになります。
↑以外の属性（font-sizeなど）は今までのように「title」の方でも構いません。
みなさんの描くイメージどおりになるよう、いろいろ試してみてくださいね。
※リンクの各設定の意味が分からない方は、詳しい説明をこちらでしていますから参考にしてくださいね。

まとめ

どうでしたかiconN05僕も急な対処でまだまだブログ全体の変更点を把握しておりませんが、とりあえず記事タイトルのリンク化はクリアできたと思います。
まだまだこれまで紹介してきた画像などの修正が残っておりますが、のんびり楽しみながらやっていこうと思います。
それではお疲れ様でしたicon23
  

Posted by nory at 20:36 │Comments(0) │TrackBack(0) │コンテント

2007年09月02日

インラインフレームを使ってみよう 

ずいぶんご無沙汰してますkao08
今回はインラインフレームの紹介をしてみたいと思います。

インラインフレームとは、ページの中に小さいページ枠を作って、別のページを表示させるということです。
このブログでも何度か使用していますね。
前回の「<MARQUEE>」の詳細説明にも使用しています。
ただ、この滋賀咲くブログではhtmlファイルはUPできないようですので、他のホームページのスペースをお持ちの方ならともかく、そうでない方にはちょっと・・・。
って思われるでしょうが、滋賀咲くブログにUPされた画像でもできますから、今回は画像を使ってインラインフレームの紹介をしてみます。
しかもこれはブログのデザインだけでなく、記事の内容にも使用することができるので、アイデアしだいではいろんな事ができるかもしれませんよkao05


設定


インラインフレームを用いるときには、


<IFRAME align=center marginWidth=0 marginHeight=0 src="http://shiga-saku.net/usr/customshichao/explain012.jpg" width=222 height=350></IFRAME>

このようなかんじで入力します。
記事の投稿画面で紹介しますと↓のようになります。



注目する点は赤枠のところです。
インラインフレームを設定する場合は、コード画面で直接入力しなければいけません。
デザイン画面でいくら入力しても、文章としてしか表示されません。
注意も終わったところで続いて各説明です。
それぞれの設定はもうご存知でしょうが、1つずつ紹介していきます。

「align」はインラインフレームの表示位置で、「left（左揃え）」、「center（中央揃え)」、「right（右揃え）」で表示させます。

「marginWidth」はインラインフレーム内の上下の余白設定で、「marginHeight」が左右の余白設定です。
単位はピクセルとなっています。

「src」はインラインフレーム内に表示するページのurl設定です。
今回は画像を用いますが、滋賀咲くブログにUPした画像もhtml文書になってますから問題なく表示されます。

「width」、「height」はフレームのサイズ指定です。


他にも細かく設定するなら以下のものがありますので紹介しておきます。

「frameborder」
インラインフレームの境界線を表示させる設定です。
値は「1 or yes」が表示させるで、「0 or no」が表示させないとなります。
初期値は「1」ですから、上の説明のように入力しない場合は境界線を表示させるようになっています。

「name」
インラインフレーム名を指定します。
書き方は「name="frame001"」といったかんじです。

「scrolling」
スクロールバーの表示です。
「yes」が表示、「no」が非表示、「auto（初期値）」がページのサイズにより必要に応じて表示・非表示を切り替えます。


見本


では上の説明のように設定するとどうなるかやってみます。
まず画像は↓を使います。



ずいぶん縦長ですよね・・・。
文章を横に置くなら話は別ですけど、横幅がある画像だとそうはいきません。
そんなときにインラインフレームを使ってみると↓のようになるのです。



まとめ 


どうですかiconN05何だかスッキリしたと思いませんかiconN05
こんな風にすれば面白味もあっていいですよね。
普段の画像UPに一工夫、画像を加工して宝探しiconN34
アイデアしだいといったのはこんなかんじのことができるからなのです。
みなさんもアイデアを振り絞って、遊び心でいろいろ試されてはいかがでしょうか。
それではお疲れ様でしたicon23


  

Posted by nory at 02:17 │Comments(3) │TrackBack(0) │HTMLタグ

2007年08月06日

説明文を自動的にスクロールさせよう 

今回は説明文を自動的にスクロールさせる設定を紹介したいと思います。
これは僕の中で1番好きなタグで、このブログに限らず、メインブログやホームページにも多用してるほどお気に入りですkao05
ブログやホームページを動的に見せるにはjavascriptを用いないとなかなか難しい中で、この設定はタグだけで動的に見せることができるのですiconN36
動きのあるブログにしたい方には必見だと思いますよiconN04
それでは早速iconN07


設定


今回用いるタグは「<marquee> ～ </marquee>」というものです。
これを説明文のところに設定してやります。



上の画像で、赤の下線が引いてあるところが元々書かれてあるところです。
そして青の下線が追加したところです。
個別に説明すると、「<div class="description">」が説明文に対してのスタイルシート適応設定ということで、「<%BlogDescription%>」が説明文となります。


<div class="description"><%BlogDescription%></div>

この間に「<marquee>」を加えます。


<div class="description"><marquee direction="left" width="100%" scrolldelay="300"><%BlogDescription%></marquee></div>

上の設定では、いくつか詳細設定をしています。
右から左へ、幅は100%、速さは300ってところです。
他にも詳細設定がありますから、下の一覧表を御覧になって設定してください。



上の一覧表でお好みに設定すれば完了です。


応用


この「<marquee>」は文字だけではなく、画像でも使えますから、説明文以外のところでも前回の画像表示の説明を参考にして、画像も動かしてみると楽しいですよkao10


<marquee scrolldelay="300"><img src="画像"></marquee>

まぁこんなかんじです。
あと、


<marquee direction="up" behavior="alternate" height="50"><Marquee direction="right">トビウオ
</Marquee></Marquee>

こんなかんじにタグを連続させると、オモシロい動きをしますから、いろいろ組み合わせて楽しんでみてくださいねkao10


まとめ


今回はどうでしたかiconN06オモシロいでしょkao05
やっぱ動きがあるのって、見てて楽しいですよねiconN04


次回はインラインフレームを使って、何か楽しいことでもしてみたいと思います。
それではお疲れ様でしたicon23
  


Posted by nory at 22:13 │Comments(0) │TrackBack(0) │HTMLタグ
[次のページ]