＋ぷちカスタマイズ日記＋Petit Customization Diary

ファンブログ　カスタマイズ

---

今回は、スキンを変更するときに要注意なんだけど便利な機能っていう訳のわからないお話しをします。
スキンの変更は誰でもカンタンにできちゃいます。スタイルシートやHTMLを何もいじっていない方は注意する必要はまったくないのですが、これからこの「+ ぷちカスタマイズ日記 +」でもスタイルシートやHTMLタグを変更してデザインや見た目を変える方法をお伝えしていきますので、覚えておいてくださいね。

---

要注意というのは、新しいスキンに変更すると、スタイルシートやHTMLが全て上書きされてしまうということです。既にスキンの色やデザイン、カラムの幅など色々変更されている方は要注意です。
「試しにこのスキンにしてみようかな？」などと軽い気持ちで変更しますと、今まで保存してきたデータが上書きされてしまいますので、あわてて元のスキンに戻しても、あとの祭りです。(ToT)/~~

ファンブログ　カスタマイズ

---

今回は、前回スキン（テンプレート）を変更する前に変更の仕組みを知ろう！でふれました「スタイルの編集画面」のお話です。この仕組みを説明しますと、ものすご〜く長くなってしまいますので、カンタンに説明します。

スキン（テンプレート）は、スタイルシートとHTMLファイルの組み合わせで画面に表示されます。

---

スタイルシート　 ブログの「見栄え」担当。色やフォントの大きさ、カラムの幅なんかが記述されていま す。

---

ＨＴＭＬファイル　ブログの「構成」担当。ヘッダーや記事の配置や順番なんかが記述されています。

---

通常はこの２枚の組み合わせってことまでは、なんとな〜く知っていたのですが、ファンブログは、なんと６枚もあります。^_^; しかも、ファンブログ FAQ には、このスタイルシートやHTMLについての説明が載っていません。

ファンブログ　カスタマイズ

---

前回のスタイルの編集画面を見てみよう！のお話で、スタイルシートが１枚で、HTMLファイルが5枚あるのは面倒だけど慣れると便利っていうような説明をしましたが、今回は何故5枚のHTMLファイルがあると便利なのかということを、具体的に活用されている方のブログを紹介しながら説明します。

---

まずは「メイン」、「アーカイブ」、「１記事」の3つのファイルで説明します。「メイン」は、いわゆるTOPページで表示される画面のHTMLファイルです。今回は、TOPページの記事の上にバナーが表示されるよう、「メイン」のHTMLファイルにバナータグを貼ったと仮定してみましょう。

ファンブログ　カスタマイズ　シンプル系スキン限定

---

前回の５枚のHTMLファイルの活用法のお話で、プロフィールページの有効活用のお話をしましたが、実はこの「プロフィール」のHTMLは１番単純に作られていますので、カスタマイズを始めるにはもってこいのＨＴＭＬなんです。

HTMLファイルは、カンタンに説明しますとブロックの集合体です。このプロフィールの構造は非常に単純で、大きく分けると「ヘッダー」「記事欄」の２つで、「記事欄」には「プロフィールタイトル」と「プロフィールの表」の２つしかないので、とってもわかりやすいんです。

ファンブログ　カスタマイズ　シンプル系スキン限定

---

今回はプロフィールのページにバナーを貼ってみよう！と同じ要領で、TOPページの記事の上にバナーを貼ってみましょう。

記事の上にバナーを貼れる場所は２つあって、ヘッダーの真下と記事の真上です。？（・ω・）？ それって同じじゃんって言われそうですが、ヘッダーの真下のスペースはヘッダーと同じ幅で、記事の真上のスペースは記事と同じ幅になりますんで、それぞれ貼る場所も違うんです。

ファンブログ　カスタマイズ　シンプル系スキン限定

---

前回のTOPページの記事の上にバナーを貼ってみよう！でバナーはうまく貼れたでしょうか？
今回は５枚のHTMLファイルの活用法で説明しました、「メイン」、「アーカイブ」、「１記事」の３つのHTMLファイルについておさらいをしながら、それぞれのHTMLファイルにバナーを貼る方法を説明します。

TOPページに貼ったバナーは、カテゴリやひとつの記事を選択すると消えてしまいます。これは何回かお話してますが、カテゴリは「アーカイブ」ひとつの記事は「１記事」のHTMLを見に行くしくみになっているからです。
TOPページに貼ったバナーを表示させたい場合はそれぞれのHTMLにバナータグを貼る必要があります。

ファンブログ　カスタマイズ　シンプル系スキン限定

---

今回はプロフィールのページにバナーを貼ってみよう！の応用で、ポータルのページにサイトマップを作成して、独立した HTML ファイルを持つ「ポータル」を有効活用するお話です。

私はサイトマップを記事で作成し投稿してみましたが、記事にはタイトルバーやコメントなどが表示されちゃってどうもしっくりしなかったので、何か打開策はないかと検討しましたら… (=ﾟωﾟ=)b 存在の意味がよくわからない
ポータルのページにサイトマップを作成したらいいのでは！と思いついたので、早速、試してみることにしました。

あるブログさんから、フリーエリアを使用しているサイトとしてご紹介していただいたのですが、このフリーエリアは HTML に記述して、CSS で装飾を指定する少し複雑なものなので、公開するのはまだ先という考えでいました。

だけど、せっかく紹介していただいたのに、試せないのもどうかとも思いましたので、CSS に記述を追記をしなくても HTML タグを貼るだけでカンタンに表示させる方法を考えてみました。 貼るだけカンタン！と申しましても、フリーエリアは、HTML に直接入力することになりますので、改行から、文字装飾などは全て、HTML コードで入力する必要がありますことを、ご了承くださいませ。

今回はトップページが表示されるメインページとカテゴリや月間アーカイブなんかを表示させるアーカイブページに記事タイトル一覧を表示する方法を説明します。

以前からカテゴリページに記事タイトル一覧を表示させたくて色々と試行錯誤して試した結果、非常に単純なHtmlタグの構成で表示させられることがわかりましたので、Htmlコードを公開します。(≧ω≦)b

---

<BlogEntries>
<img src="{$BlogTmplUrl$}img/icon.gif" align="absmiddle" border="0">
<a href="{$BlogEntryPermalinkUrl$}">{$BlogEntryTitle$}</a><br />
</BlogEntries>

このHtmlコードをメインとアーカイブのHTMLに貼り付けるだけで、そのページの記事タイトル一覧が表示されますが、見栄えを良くするためにはHTMLコードを追記してCSSで装飾する必要があります。

HTML はある程度わかるけど、HTML と CSS の関係は少し苦手という方のために、CSS に記述を追記をしなくても 貼るだけでカンタンに表示させるHTMLコードをご用意しましたのでお試しくださいませ。
※ 対応しているのは、シンプル系スキンだけです。画像を使ったデザイナーズスキンでは不具合がでます。

新しく追加されたSNSボタン付スキンは最初から3個のSNSボタンが設置されていますので、初心者の方にはとても魅力的なものなのですが、SNSボタン付でないスキンに変更するとSNSボタンは表示されなくなってしまいます。

こっちのデザインのスキンにもSNSボタンが付いていればいいのに...って思いながらデザイン重視でSNSボタンを諦めてしまった方のためにSNSボタン付スキンに設置されている3個のSNSボタンを自分のサイトの同じ場所に設置する方法をご説明します。(≧ω≦)b