今回は文字ではなくて画像を使ってみたいと思います。
ブログタイトルはブログの顔・・・かな
でもいくらスタイルシートでカスタムしても限度ってものがありますよね。
もっと可愛くしたいとかかっこよくしたいとか思ってもちょっと難しいです。
そこで、自分で作った画像、つまりタイトル画像を使えば、どんなデザインにもすることができます。
ってことで早速紹介していきます。

今回使用するタイトル画像は、

こちらです。
これは画像編集ソフトで作ってあり、文字以外のところは透明にしてGIF形式で保存してあります。
透明にすることによって、背景画像もキレイに見えますから、GIF形式で保存されることをお薦めします。
もし解らない方は、JPEG形式でも構いませんが、なるべく背景画像の色と一緒にする方がいいと思います。
また1色ではムリと思われる方は、枠などを作ったりして工夫してみてくださいね。

設定

前回同様、各HTMLすべてをイジリます。
ご承知のようにブログタイトルは赤の下線のように書かれていますよね。
見難い方は下を御覧下さい。

画像の表示に用いるタグは、

このように入力します。
これだけです。
詳細設定を付け足すこともできますが、はじめに「<h1 class="blogtitle">」とクラス設定がされていますので、画像の幅や位置などはスタイルシートで調節します。
ですから、頭から書くと、

このようになるわけです。

まとめ

どうでしたか
今回は画像編集といったことも必要でしたけど、ほとんどの方がポストカードや年賀状の作成で経験されたことがあると思うので、そう難しくはないと思うのですが
画像編集ソフトはスキャナやプリンタ、デジカメを購入されると大体付属していると思いますし、フリーでもPhotoshopなみのすごいソフトがありますからチャレンジされてみてはどうでしょうか

次回はブログの説明文をスクロールさせるといったことを紹介してみたいと思います。
このブログののようなかんじですよ
それではお疲れ様でした　

今回から本格的にはじめるHTMLタグの使い方を紹介したいと思います。
第1回目はブログタイトルにサブタイトルを付けてみようと思います。
このブログで言うと「カスタムしちゃお♪」がブログタイトルで「～滋賀咲くオリジナルデザイン術～」がサブタイトルとなっています。っていうかしてます。
これからその紹介をしていくわけですが、イジル前には必ず保存されることをお薦めします。
ミスっても、保存したものを貼り付ければ復活できますからね

設定

ではまず、下の画像を御覧下さい。

サブタイトルに限らず、HTMLをイジル場合は、「トップページ」、「個別記事」、「アーカイブ｣それぞれに追加する場合が多いです。
今回はサブタイトルですから、すべてに追加する必要があります。

赤の下線の文章がメインのブログタイトルです。
青の下線の文章が、ブログの説明文となっています。
そして今回追加するのが黄緑の下線の文章です。

このような文章を付け足します。
前回にも書き方の紹介をしましたが、この場合、「<div> ～ </div>」が要素です。
要素には「<p> ～ </p>」などもありますが、解りやすいように、追加タグの要素はほぼ「<div> ～ </div>」で紹介していこうと思います。

つづいて「class」が属性です。
この「class」は、今まで紹介してきたスタイルシートを反映させるためのものですから、スタイルシートの方でも設定が必要です。
スタイルシートの説明は、もう充分してきたと思うので省きます。
また、スタイルシートを使わずに、直接属性＆値を入力することも可能ですが、やたらと長くなってしまうと思うので、個人的には「id」や「class」を用いることをお薦めします。

つづいて、値が「blogsubtitle」となっていますが、これは僕が勝手に付けたクラス名です。
この説明も以前したので省きます。

そして内容です。
この場合、サブタイトルにしたい文章をここに入力します。

これを3箇所すべてに追加してやると、

ブログタイトルの下にサブタイトルが表示されるようになりました。

まとめ

たったこれだけでもブログの印象が変わったと思いませんか
この方法を覚えれば、好きなところに文章や画像が追加できちゃいます。

次回は文章ではなく、画像を表示させてみたいと思います。
上でもがチラッと映っていますよね。
画像を使うと楽しいですし、オリジナリティーもありますからいいと思いますよ
それではお楽しみに、お疲れ様でした

これまではスタイルシートを中心に紹介していきましたが、一般的なものは紹介し終わったと思うので、今回からはHTML文書を中心に紹介していきたいと思います

HTMLとは？

HTMLとはハイパーテキストマーク言語と呼ばれるもので、簡単に言うとホームページを作成する際に、

このような文章を書いて作ります。
っと言ってもHTML全体の構成を説明するのは大変なので、この滋賀咲くブログの中で、個別にタグを追加していく紹介をしたいと思います

タグとは？

タグは、みなさんが記事を書かれるときに目にされることがあると思います。
「デザイン」と表示されているHTMLモードで記事を書いているとき、文章をドラッグして「大」や「B」のボタンを押すと、

このように表示されると思います。
この「<SPAN style="FONT-SIZE: large"> ～ </SPAN>」や「<B> ～ </B>」がタグと呼ばれるものです。
タグには「<P>」のような開始タグと「</P>」のような終了タグがあります。
その間に文章や画像といった内容を書きます。
つまり、ここからここまでの文字を大きくしますよとかここからここまでの文字を太くしますよっていう意味です。

書き方

書き方には「<B> ～ </B>」のような簡単なものから「<SPAN style="FONT-SIZE: large"> ～ </SPAN>」のような詳細情報を付け加えるものもあります。
例えば上のように文字を大きくする場合、「SPAN」が要素名、「STYLE」が属性名、「FONT-SIZE:large」が値となります。

ってことですね。

次にタグの並びについて説明します。

このようにタグが2つ出てくる場合、「<P> ～ </P>」を①とし、「<SPAN style="FONT-SIZE: large"> ～ </SPAN>」を②とすると、

このように順番を守らなければいけません。
次のように、

文章の中の一部だけ強調したりしたい場合でも同じことです。

まとめ

今回は初歩的なHTML文書の書き方を紹介しましたけど、お解かりになられたでしょうか
でも解らなくても今はまだ大丈夫です。
次回から紹介していくように書いてちょっとアレンジすれば、簡単に設定できちゃいます
ってことで、次回はブログタイトルのあとの「～応用編～」みたいなかんじのサブタイトルを追加してみたいと思います。
説明文もあるけど、もうちょっと何か欲しいなぁって思う方はチャレンジしてみてくださいね。
それではお疲れ様でした

今回はこれまでたくさん紹介してきた中から、スタイルシートでよく使うであろう属性＆値の一覧表を作ってみました。
表示しているのは一括設定のみで、あとの細かい設定は、各インラインフレームをスクロールして確認してみてくださいね

これでちょっとは分かりやすくなったかな
逆にスクロールスクロールでウザくなってたりして
まぁ一応役立ったらいいなぁっと思っています。

今回は自分でIDやCLASSを設定して、カスタムスタイルにしてみましょう
ちょっとややこしいですけど簡単です。
まずは予め設定されているCLASSをスタイルシートに追加してみます。
変更するのは、

この検索フォームです。
文字を入力するところは、以前紹介しました「.side .text」というクラスです。
検索ボタンには予め「.button」というクラスが設定されています。
この2つをスタイルシートで設定します。

「.side .text」はすでに書かれてあるとおもいますから、そのまま属性や値を設定します。
「.button」はスタイルシートでは設定されていませんので、追加して設定します。

設定

上のようにアレンジするには以下のように入力します。

それぞれ文字の大きさや色、背景色、ボーダー、幅の設定を行います。
※ブログ内検索の入力欄は、幅が100pxと固定されているようですので変更はできないと思います。
検索フォームは2つで1つってかんじですから、デザインは同じがいいと思います。
これだけで自分好みの検索フォームに変わるのです

設定応用

次に今度は、コメント欄での書込というボタンも変えてみましょう。
これはまず、個別記事内の書込ボタンのところにIDやCLASSを追加します。

個別記事内の下の方を探すと、

このように書かれているところがあります。
そこへ、

このように「class="button"」と付け足します。
この「class="button"」は、先ほどスタイルシートで設定したクラスですから、個別記事で追加するだけで、検索ボタンと同じデザインが反映されます。
また、検索ボタンとは違うデザインにする場合は、スタイルシートと個別記事の両方に、新しくIDやCLASSを追加すればいいのです。
この場合、IDもしくはCLASSのどちらでも構いません。
ただ「#」や「.」の入力ミスに注意しましょう。
それぞれ名前はお好みで付けられますが、日本語や数字ではなく、アルファベットにしましょう。

まとめ

いかがでしたでしょうか
シンプルなボタンに飽きてた方にはもってこいのカスタムだったことと思います。
いろんなアレンジをして、お好みのボタンにしてみてくださいね。

次回は・・・まだ決めてません・・・。
それではお疲れ様でした

前回に引き続き、コンテント内の構造です。
今回は個別記事ページなどで表示されるコメント欄などの構造を紹介します。
前回よりも多少数は多いですけど、繰り返し使用されているクラスもありますから、めちゃくちゃ大変ってコトはないと思います。
ではまずいつもの画像をどうぞ

続いて各ID、CLASSの説明です。
前回紹介した「#content」 「.blog」 「.blogbody」 「.posted」 「.aposted」 「.menu」 「.amenu」 「.pagetop」の説明は省きますので、お忘れの方は前回の記事を参照してください
では上から順に参ります

「.comments-head」はこの記事へのトラックバックURL、この記事へのコメントといった文が表示されるところです。

「.trackback-url」は各個別記事のトラックバックのURLが表示されるところです。

「.trackback-body」はトラックバックされた方のブログ記事の概要、または本文が表示されるところです。

「.trackback-post」はトラックバックされた方のブログタイトルや日付が表示されるところです。

「.atrackback-post」はトラックバックされた記事タイトルが表示されるところです。（リンク）

「.comments-body」はコメントをくださった方の文章が表示されるところです。

「.comments-post」はコメントをくださった方の名前や日付が表示されるところです。

「label」は名前: メール: URL: 情報を記憶: コメント:が表示されるところです。
IDやCLASSではないので「#」や「.」を付けないよう注意しましょう。

「#author」はコメントされる方が名前を入力されるところです。

「#email」はコメントされる方がメールアドレスを入力されるところです。

「#URL」はコメントされる方が開設されているホームページアドレス、またはブログアドレスを入力されるところです。

「#bake」は、上のそれぞれ入力された情報を記憶するためのチェックボックスです。
ですが、安全にお使いいただくためにも変更はしない方がいいと思います。
っていうか、スタイルシート内には記載されていないと思いますけど・・・。

「#text」はコメント内容を入力するところです。

まとめ

これで滋賀咲くブログすべての構造がお解かりになったと思います。
こうして色分けすれば、重なりも分かりやすいと思うので、我ながら
いろんなところを自分好みにして楽しんでみてくださいね。
幅設定などは計算とかもしなくちゃいけなくて面倒臭いですけど、文字の大きさや背景の設定なら簡単で楽しいですからね。

次回はちょっと難しいかもしれませんけど、自分でIDやCLASSを設定して、スタイルシートを設定してみたいと思います。
それではお楽しみに、お疲れ様でした

今回からは記事が表示されるコンテント部分の構造を紹介したいと思います。
1度に紹介するとややこしいと思うので、今回はトップページで表示される場合の内容を紹介をします。
いつものように重なりが解るかなぁと思って絵でまとめてみたので御覧下さい

ではそれぞれの説明をしていきます。

「#content」は、記事部分の最背面枠といったところです。

「.blog」は次のページやこのページの上へを含めた枠です。

「.blogbody」は記事タイトルや投稿者名などを含めた枠です。

「.date」は投稿した日付です。
テンプレートによっては「.blogbody」内ではなく「.blog」内にある場合もあります。

「.title」は記事タイトルです。
記事タイトルがリンク化されている場合は「.title a」も設定が必要となります。

「.main」は記事内容枠です。

「.main-continues」は続きを読む（追記）を書いたときに表れます。
リンク化されていますから、「a.acontinues」の設定も必要となります。

「.posted」は投稿者名です。

「.aposted」は時間、コメント、トラックバック、カテゴリといったリンクです。
リンク設定は「a.aposted:link」などと書かれています。

「.menu」は前のページ、次のページのリンクです。
リンク設定は「a.amenu:hover」などと書かれています。

「.pagetop」はこのページの上へのリンクです。
リンク設定は「a.apagetop」などと書かれています。

設定方法は今まで紹介してきた属性を使ってアレンジしてくださいね。
枠だったら縦横の幅、余白、背景など、更に文章が入るところなら文字のスタイルなど、さまざまです。

まとめ

今回は各リンクのセレクタも紹介しました。
以前紹介したときは「.〇〇 a:link」などでしたが、今回のは「a.〇〇:link」でした。
どちらも「a」や「:link」といったかんじで書かれていますので分かると思います。

徐々に説明が適当になってきましたが、同じことを何度も書くより、シンプルな方が見やすいかなぁっと思って省くようにしました。
セレクタ、属性、値などをお忘れになったときは、過去記事を御覧になってくださいね

次回は構造の続きで、今度は個別記事ページなどで表示される、コメント欄などの紹介をしたいと思います。
それではお疲れ様でした

もう一般的な属性は紹介したと思うので、今回からは応用みたいなかんじで紹介していきたいと思います。
今回はカレンダーのアレンジです。
ブログの記事を投稿した日にマークを付けたいと思います。
また、マウスカーソルが上に乗るとマークも変わるってこともしてみます。
使用するマーク用の画像は、

いつものこの星です。
この星が記事を投稿した日だけ表示されるようにします。

設定（例）

っとまぁ、これがこのブログのカレンダーの曜日と日付の設定です。
これを参考にアレンジしてみてくださいね。
っとその前に、今回出てきた新しい属性は「margin」、「line-height」、「display」になります。
ではそれぞれの属性の説明を・・・。

margin

「margin」は「padding」と似ていまして、「padding」が枠の内側の余白設定だとしたら、「margin」は枠の外側の余白設定となります。
値は「padding」と一緒なので、過去の記事を参考にしてくださいね。
また、「auto」という値は、自動設定という意味です。
ですから上の場合、縦の余白が0pxで、横が自動ということになります。

line-height

「line-height」は行と行の間を数値で設定したりすることです。
縦の設定ということで「height」にも似ていますね。

display

「display」は「inline （インライン要素）」と「block （ブロックレベル要素）」が主に指定できます。

「inline」は要素の後に改行が入らないように設定するのに対し、「block」は改行が入るように設定します。
っとまぁ、これの説明はちょっと大変ですので省きますが、上の場合、形を崩さないために用いました。

ポイント

今回のポイントは「width」と「line-height」、「display」にあると思います。
画像のサイズと同じサイズに設定し、尚且つ形を崩さないようにするということです。

これらを設定しないと上手く表示できないと思いますので、要チェックです。
あとはみなさんのサイドバーの横幅やカレンダーのそれぞれの幅に応じて画像のサイズを微調整して設定してみてください。
これで記事を投稿した日だけにマークが表示されるようになると思います。

次に応用の、マウスが上に乗ったらマークが変わるようにしてみます。
これを行うにはもう1枚画像が必要となります。
今回は、マウスが上に乗ったら、星が渦巻きになるようにしてみます。
ってことで画像は

これです。

設定

っとなります。
「a:hover」は以前にも紹介しましたが、マウスが上に乗ったときという意味です。
上の「.calendard a」が記事を投稿した日のリンク全体設定ですから、

これらを設定しなくても継承されるので、「.calendard a:hover」では、これらの設定は必要ないと思います。
もちろん変更も可能だと思いますけど。

まとめ

今回のは細かな設定が必要とされますので、上のをコピー＆貼り付けされたところで、上手く表示されないと思います。
画像のサイズ、カレンダーなどの幅設定を微調整しながらチャレンジしてみてくださいね

次回はブログの記事の部分の構造を紹介したいと思います。
これから先は、あまり属性の紹介もないと思いますので、IDとCLASSの紹介がメインになると思います。
いろんな属性を使って、皆さんのお好みのデザインになるようアレンジしてみてくださいね。
それではお疲れ様でした

今回は、記事の横に並んでいるカレンダーやカテゴリといったところの「#links （サイドバー）」の中の構造を紹介したいと思います。
特にカレンダーの構造を知っていれば、背景や投稿日など、さまざまな設定がお好みにできるようになって楽しいと思います。
では、右の画像と共に説明していきたいと思います。

ID

「#links」はサイドバー全体のです。

クラス

カレンダー

「.calendarhead」は「< 2007年07月 >」などと表示されているヘッダーと呼ばれるところです。

「.calendartable」は曜日&日時表示の下にあるテーブルのことです。

「.calendarweek」は曜日の文字のエリアのことです。

「.carendarwd」は曜日の文字の下にあるエリアのことです。

「.calendard」は日付の文字の下のエリアのことです。

「.calendar」はカレンダー全体ですが、設定としては日付の文字になると思います。

サイドメニュー

「.sidetitle」はサイドメニューのカテゴリや最近の記事といったタイトルのエリアのことです。

「.side」はサイドメニュー各項目リストのエリアのことです。

「.side .text」はテキストの横幅などの設定のことです。

その他

この一覧以外にも、細かな設定ができるので、分かる部分だけ紹介します。

「.photo」はプロフィール画像のエリアです。

「.nickname」は名前のエリアです。

「.message」は自己紹介の文章のエリアです。

「.rss」、「ul .rss」、「ul.rss li」、「ul.rss a」は、それぞれrssの項目、項目リスト、リンクの設定です。

まとめ

今回はサイドバーの構造を紹介したわけですが、エリアという言葉を使いましたけど、エリアといっても文字の設定もできるわけですから、言い方は正しくないかもしれません。
でも、どう言えばいいか分からなかったので、エリアにしました。
だいたい言いたいこと分かりますよね

次回はカレンダーの設定を紹介したいと思います。
といっても、属性などは、これまで紹介してきたものを応用すればいいだけですので、紹介としては僕がお気に入りの「投稿日の下に画像を表示する」ってのをしたいと思います。
元々 文字をダラダラ入力するより絵を描く方が好きなもんで・・・
それではお疲れ様でした

今回は、文字の色や飾り、フォント指定を紹介したいと思います。
まずはそれぞれの書き方から説明します。

color

「color」はそのままの意味で、色の指定です。
他の文字設定とは違い、文字の始まりに「font-」は付きませんからご注意下さいね。

text-decoration

「text-decoration」は文字に飾り付けをするという意味です。
値には「underline （下線）」、「overline (上線)」、「line-through (取消線）」、「blink （点滅）」、「none （飾らない）」があります。
ですが、ブラウザにより対応しないものもあるかもしれません。
ちなみにWindows Internet Explorerでは「blink」は反映されないと思います。

font-family

「font-family」はフォントを指定するという意味です。
指定には「ＭＳ Ｐゴシック」のような指定フォントと「serif」のような総称フォント、つまり〇〇系のフォント指定の2種類があります。
一部ではありますが、下の一覧を参考にしてくださいね。

総称フォント

各フォント

ではフォント説明の続きを・・・
フォント名を書く時に注意しなければいけないのは、文字の全角、半角、大文字、小文字を正確に入力しないと適応されません。
また、自作フォントや独自に追加されたフォントなどは、見てくださる方のPCでは反映されませんので、ノーマルなフォント指定が必要となります。
OSによっても同じことが言えます。
例えばMacの場合、「Osaka」や「平成明朝」などが一般的ですから、Macで見ていてくださる方のために、これらも追加してあげるといいかもしれません。

次に指定フォントの入力をする場合、フォント名を「" (ダブルクォーテーション）」や「' （シングルクォーテーション）」で囲む必要があります。
また、複数のフォントを指定する場合は「, (カンマ）」で区切っていきます。
この時、先に指定するフォントほど優勢順位が高くなります。

以上、ここまでがフォントの説明となります。
前回のあれこれと組み合わせて使用してみてください。
一応ここまでの設定を書いておきます。

っが、まだ終われません。
今回のテーマは、ブログのタイトル文字に対しての紹介なので、これらをそのまま「.blogtitle」のクラスで設定しても反映されません。
それは、ブログのタイトルにはリンク設定がされているからです。
なので、今回はリンクの説明もしたいと思います。

リンク

リンクの設定には、必ず「a」の文字が入っています。
スタイルシートを御覧になればお解かりになられると思いますが、「a」には「a:link (未訪問）」、「a:visited (訪問済み）」、「a:active (クリック時）」、「a:hover （マウスカーソルが乗っている時）」の各設定がされています。
ですから普通の文字よりも、リンクの方が優先されるのです。
前回のあれこれと紹介を分けたのには、今回紹介した属性は、リンク設定の方で設定しないと適応されないからです。
では「.blogtitle」ではなく、どこに設定するかと言うと「#banner a」や、各「a」に対して行います。
では一通り設定を書いてみます。

設定

初めの「#banner a」は各「a」全体に反映されるため、「font-family」はここに書きました。
それぞれ色や飾りを変更したい場合は、各「a」ごとに行ってください。
前回紹介した属性も加えて、いろいろ属性を試しながら設定すると、いろんなアレンジができると思いますよ。

まとめ

いや～今回はめっちゃ長かったですね
説明もこれだけでは不十分かもしれませんし、勘違いな部分があるかもしれませんが、一応これでブログのタイトルをアレンジできると思います。
その他にも記事のタイトルだったり、コメント欄だったりと、いろんなところでも使えますので自分なりに工夫されてみてはいかがでしょうか。
次回はサイドバーの構造を紹介したいと思います。
ただ、完全に把握してるわけではないので、参考までに・・・。
それでは今回はホントにお疲れ様でした