2007年09月19日
いろんな名称を変えちゃおう
これらはジツはめっちゃ簡単で、「トップページ」、「個別記事」、「アーカイブ」のそれぞれhtml内を探せば、そのまま文章として入力されていますので、その文章を書き換えるだけで変更できちゃいます
上の画像のように、いろんなところに存在しますから探してみてください。
下にある程度一覧を記入しておきますので参考にしてください。
トップページ&アーカイブ
・続きを読む
・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> |
文章はそのまま入力で、画像はタグを用います。
画像の後に文章を入れる場合でも、文章はそのまま入力します。
まとめ
どうでしたか
お好みの名前に簡単に変更できたことでしょう全部英語にするのも良し、可愛らしく語尾に「だよ
」とか付けても良し。いろいろ工夫してみてくださいね
（ただあんまり長くなるのもどうかと思いますが・・・）それではお疲れ様でした
2007年09月12日
はてなスターを設定しよう
が付いていますが、これは「はてなスター」というもので、各記事に対して評価をいただくものです。コメントはちょっと・・・って方でも、これなら
ですよね。これは滋賀咲くブロガーのお京さんから教えていただいたもので、オモシロそうで気に入ったので設定してみました。
お京さん、ありがとうございます
お京さんのブログ → 滋賀咲くブログで やってみよう♪
っというわけで、僕も設定方法を紹介したいと思います
設定
滋賀咲くぶろぐにはてなスターを設置するには、「トップページ」、「個別記事」、「アーカイブ」に設定します。
まずそれぞれのhtml内から「</head>」を探してください。
その上に次の文章を加えます。
| <!--はてなスター--> <script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script> <!--はてなスターEND--> |
入力するのは少し大変かと思いますから、上の文章をコピー＆貼り付けしてくださいね。
設定が解りやすいように画像を用意したので御覧下さい。
これで完了です。
まとめ
どうでしたか
上手く設置できたでしょうか。はてなスターへの登録方法が分からなかった方は、こちら でどうぞ。
はてなスターのカスタマイズ方法も載ってますから、興味のある方はチャレンジしてみてくださいね。
オモシロい記事をいっぱい書いて、いっぱい
をもらっちゃいましょうそれではお疲れ様でした
～追記を読む～
2007年09月10日
ナビゲーションバーを設置しよう
まだまだがんばります
今回は滋賀咲くブログのナビゲーションバー設置の紹介をしたいと思います。
ナビゲーションバーとは↓のことです。（正式名は
）
ナビゲーションバーは、みなさんが選択されるテンプレートによって、設置されてあるものと、設置されてないものがあります。
設置されてないけど今のテンプレートがお気に入りの方にはもってこいの紹介だと思いますよ。
設定
ナビバーは「トップページ」、「個別記事」、「アーカイブ」それぞれに設定します。
その中から「<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です。
まとめ
どうでしたか
上手く設置できたでしょうか。これが分かっていれば、ナビバーが設置してあるテンプレートの方でも一工夫できちゃいますよ。
べつに「<body>」のすぐ下に設置しなくても、このブログのように「<div id="container">」と「<div id="banner">」の間に設置してやってもオモシロいと思います。
あとは背景画像も自分で用意できるのであれば変更可能ですね
いろいろ試してカスタムしちゃってください。
それではお疲れ様でした
2007年09月05日
カスタムプラグインのデザイン
カスタムプラグインには、みなさんそれぞれブログペットなど、いろんなツールを設定されていることと思います。
でもカスタムプラグインには他のサイドバーの項目のようにスタイルシートが適応されません。
これはいろんなツールのデザインへの配慮や、javascriptを用いる場合に枠だけ表示されるのは変だということへの配慮ではないか
っと勝手に思っています
ってことで、スタイルシートを用いたデザインの設定を紹介します。
その前にまず、一応カスタムプラグインの設定場所の確認です。
↓の画像を御覧下さい。
カスタムプラグインの設定は、管理画面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> |
っというようなかんじになります。
※ここで登場したタグの簡単な説明は下の追記に書いておきます。
これで他のサイドバー項目と同じデザインに設定できました。
まとめ
どうでしたか
難しいようで簡単でしょでも小さなミスが多いと思います。
例えば「<br>」で改行しなくて文章がつながっちゃったとか、「</div>」などで要素を閉じてなくて表示がおかしくなっちゃったとか
まぁ僕がしょっちゅうするミスなんですけどね・・・
でも簡単に修正できますから、慌てずミスのチェックをしましょう
それではお疲れ様でした
プラグインを用いて楽しいブログにしてくださいね
～追記を読む～
2007年09月02日
インラインフレームを使ってみよう
ずいぶんご無沙汰してます
今回はインラインフレームの紹介をしてみたいと思います。
インラインフレームとは、ページの中に小さいページ枠を作って、別のページを表示させるということです。
このブログでも何度か使用していますね。
前回の「<MARQUEE>」の詳細説明にも使用しています。
ただ、この滋賀咲くブログではhtmlファイルはUPできないようですので、他のホームページのスペースをお持ちの方ならともかく、そうでない方にはちょっと・・・。
って思われるでしょうが、滋賀咲くブログにUPされた画像でもできますから、今回は画像を使ってインラインフレームの紹介をしてみます。
しかもこれはブログのデザインだけでなく、記事の内容にも使用することができるので、アイデアしだいではいろんな事ができるかもしれませんよ
設定
インラインフレームを用いるときには、
| <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（初期値）」がページのサイズにより必要に応じて表示・非表示を切り替えます。
見本
では上の説明のように設定するとどうなるかやってみます。
まず画像は↓を使います。
ずいぶん縦長ですよね・・・。
文章を横に置くなら話は別ですけど、横幅がある画像だとそうはいきません。
そんなときにインラインフレームを使ってみると↓のようになるのです。
まとめ
どうですか何だかスッキリしたと思いませんか
こんな風にすれば面白味もあっていいですよね。
普段の画像UPに一工夫、画像を加工して宝探し
アイデアしだいといったのはこんなかんじのことができるからなのです。
みなさんもアイデアを振り絞って、遊び心でいろいろ試されてはいかがでしょうか。
それではお疲れ様でした
2007年08月06日
説明文を自動的にスクロールさせよう
今回は説明文を自動的にスクロールさせる設定を紹介したいと思います。
これは僕の中で1番好きなタグで、このブログに限らず、メインブログやホームページにも多用してるほどお気に入りです
ブログやホームページを動的に見せるにはjavascriptを用いないとなかなか難しい中で、この設定はタグだけで動的に見せることができるのです
動きのあるブログにしたい方には必見だと思いますよ
それでは早速
設定
今回用いるタグは「<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>」は文字だけではなく、画像でも使えますから、説明文以外のところでも前回の画像表示の説明を参考にして、画像も動かしてみると楽しいですよ
| <marquee scrolldelay="300"><img src="画像"></marquee> |
まぁこんなかんじです。
あと、
| <marquee direction="up" behavior="alternate" height="50"><Marquee direction="right">トビウオ </Marquee></Marquee> |
こんなかんじにタグを連続させると、オモシロい動きをしますから、いろいろ組み合わせて楽しんでみてくださいね
まとめ
今回はどうでしたか
オモシロいでしょ
やっぱ動きがあるのって、見てて楽しいですよね
次回はインラインフレームを使って、何か楽しいことでもしてみたいと思います。
それではお疲れ様でした
2007年08月05日
ブログタイトルを画像に変えよう
今回は文字ではなくて画像を使ってみたいと思います。
ブログタイトルはブログの顔・・・かな
でもいくらスタイルシートでカスタムしても限度ってものがありますよね。
もっと可愛くしたいとかかっこよくしたいとか思ってもちょっと難しいです。
そこで、自分で作った画像、つまりタイトル画像を使えば、どんなデザインにもすることができます。
ってことで早速紹介していきます。
今回使用するタイトル画像は、
こちらです。
これは画像編集ソフトで作ってあり、文字以外のところは透明にしてGIF形式で保存してあります。
透明にすることによって、背景画像もキレイに見えますから、GIF形式で保存されることをお薦めします。
もし解らない方は、JPEG形式でも構いませんが、なるべく背景画像の色と一緒にする方がいいと思います。
また1色ではムリと思われる方は、枠などを作ったりして工夫してみてくださいね。
設定
前回同様、各HTMLすべてをイジリます。
ご承知のようにブログタイトルは赤の下線のように書かれていますよね。
見難い方は下を御覧下さい。
| <h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1> |
個別に紹介していくと、「<h1 class="blogtitle">」はブログタイトルに使うスタイルシートのクラス指定です。
「<a href="<%BlogUrl%>" accesskey="1">」はトップページへのリンク設定がされています。
「<%BlogTitle%>」は、設定画面でみなさんがお決めになられたブログタイトルのことです。
言い方は悪いですが、使いまわしのようなもので、そういう意味ではスタイルシートと似ていますね。
今回はこの「<%BlogTitle%>」を消して、画像を表示させるための設定に書き換えます。
画像の表示に用いるタグは、
| <img src="http://shiga-saku.net/usr/customshichao/blogtitle.gif"> |
このように入力します。
これだけです。
詳細設定を付け足すこともできますが、はじめに「<h1 class="blogtitle">」とクラス設定がされていますので、画像の幅や位置などはスタイルシートで調節します。
ですから、頭から書くと、
| <h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><img src="http://shiga-saku.net/usr/customshichao/blogtitle.gif"></a></h1> |
このようになるわけです。
まとめ
どうでしたか
今回は画像編集といったことも必要でしたけど、ほとんどの方がポストカードや年賀状の作成で経験されたことがあると思うので、そう難しくはないと思うのですが
画像編集ソフトはスキャナやプリンタ、デジカメを購入されると大体付属していると思いますし、フリーでもPhotoshopなみのすごいソフトがありますからチャレンジされてみてはどうでしょうか
次回はブログの説明文をスクロールさせるといったことを紹介してみたいと思います。
このブログの
のようなかんじですよ
それではお疲れ様でした
～追記を読む～
2007年08月05日
サブタイトルを付けてみよう
今回から本格的にはじめるHTMLタグの使い方を紹介したいと思います。
第1回目はブログタイトルにサブタイトルを付けてみようと思います。
このブログで言うと「カスタムしちゃお♪」がブログタイトルで「～滋賀咲くオリジナルデザイン術～」がサブタイトルとなっています。っていうかしてます。
これからその紹介をしていくわけですが、イジル前には必ず保存されることをお薦めします。
ミスっても、保存したものを貼り付ければ復活できますからね
設定
ではまず、下の画像を御覧下さい。
サブタイトルに限らず、HTMLをイジル場合は、「トップページ」、「個別記事」、「アーカイブ｣それぞれに追加する場合が多いです。
今回はサブタイトルですから、すべてに追加する必要があります。
赤の下線の文章がメインのブログタイトルです。
青の下線の文章が、ブログの説明文となっています。
そして今回追加するのが黄緑の下線の文章です。
| <div class="blogsubtitle">～滋賀咲くオリジナルデザイン術～</div> |
このような文章を付け足します。
前回にも書き方の紹介をしましたが、この場合、「<div> ～ </div>」が要素です。
要素には「<p> ～ </p>」などもありますが、解りやすいように、追加タグの要素はほぼ「<div> ～ </div>」で紹介していこうと思います。
つづいて「class」が属性です。
この「class」は、今まで紹介してきたスタイルシートを反映させるためのものですから、スタイルシートの方でも設定が必要です。
スタイルシートの説明は、もう充分してきたと思うので省きます。
また、スタイルシートを使わずに、直接属性＆値を入力することも可能ですが、やたらと長くなってしまうと思うので、個人的には「id」や「class」を用いることをお薦めします。
つづいて、値が「blogsubtitle」となっていますが、これは僕が勝手に付けたクラス名です。
この説明も以前したので省きます。
そして内容です。
この場合、サブタイトルにしたい文章をここに入力します。
これを3箇所すべてに追加してやると、
ブログタイトルの下にサブタイトルが表示されるようになりました。
まとめ
たったこれだけでもブログの印象が変わったと思いませんか
この方法を覚えれば、好きなところに文章や画像が追加できちゃいます。
次回は文章ではなく、画像を表示させてみたいと思います。
上でもがチラッと映っていますよね。
画像を使うと楽しいですし、オリジナリティーもありますからいいと思いますよ
それではお楽しみに、お疲れ様でした
～追記を読む～
2007年08月05日
HTML文書とは?
これまではスタイルシートを中心に紹介していきましたが、一般的なものは紹介し終わったと思うので、今回からはHTML文書を中心に紹介していきたいと思います
HTMLとは？
HTMLとはハイパーテキストマーク言語と呼ばれるもので、簡単に言うとホームページを作成する際に、
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <HTML> <HEAD> <TITLE>タイトル</TITLE> </HEAD> <BODY> <H1>タイトル</H1> <P>おはようございます</P> </BODY> </HTML> |
このような文章を書いて作ります。
っと言ってもHTML全体の構成を説明するのは大変なので、この滋賀咲くブログの中で、個別にタグを追加していく紹介をしたいと思います
タグとは？
タグは、みなさんが記事を書かれるときに目にされることがあると思います。
「デザイン」と表示されているHTMLモードで記事を書いているとき、文章をドラッグして「大」や「B」のボタンを押すと、
| <P><SPAN style="FONT-SIZE: large">おはようございます</SPAN></P> <P><B>おはようございます</B></P> |
このように表示されると思います。
この「<SPAN style="FONT-SIZE: large"> ～ </SPAN>」や「<B> ～ </B>」がタグと呼ばれるものです。
タグには「<P>」のような開始タグと「</P>」のような終了タグがあります。
その間に文章や画像といった内容を書きます。
つまり、ここからここまでの文字を大きくしますよとかここからここまでの文字を太くしますよっていう意味です。
書き方
書き方には「<B> ～ </B>」のような簡単なものから「<SPAN style="FONT-SIZE: large"> ～ </SPAN>」のような詳細情報を付け加えるものもあります。
例えば上のように文字を大きくする場合、「SPAN」が要素名、「STYLE」が属性名、「FONT-SIZE:large」が値となります。
| <要素 属性="値">おはようございます</要素> |
ってことですね。
次にタグの並びについて説明します。
| <P><SPAN style="FONT-SIZE: large">おはようございます</SPAN></P> |
このようにタグが2つ出てくる場合、「<P> ～ </P>」を①とし、「<SPAN style="FONT-SIZE: large"> ～ </SPAN>」を②とすると、
| <①><②>おはようございます</②></①> |
このように順番を守らなければいけません。
次のように、
| <P>おはようございます<SPAN style="FONT-SIZE: large">元気ですかー！？</SPAN>私は元気です</P> |
文章の中の一部だけ強調したりしたい場合でも同じことです。
| <①>おはようございます<②>元気ですかー！？</②>私は元気です</①> |
まとめ
今回は初歩的なHTML文書の書き方を紹介しましたけど、お解かりになられたでしょうか
でも解らなくても今はまだ大丈夫です。
次回から紹介していくように書いてちょっとアレンジすれば、簡単に設定できちゃいます
ってことで、次回はブログタイトルのあとの「～応用編～」みたいなかんじのサブタイトルを追加してみたいと思います。
説明文もあるけど、もうちょっと何か欲しいなぁって思う方はチャレンジしてみてくださいね。
それではお疲れ様でした
