広告


この広告は30日以上更新がないブログに表示されております。

新規記事の投稿を行うことで、非表示にすることが可能です。

posted by fanblog

スキン(テンプレート)を変更する前に変更の仕組みを知ろう!

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

今回は、スキンを変更するときに要注意なんだけど便利な機能っていう訳のわからないお話しをします。
スキンの変更は誰でもカンタンにできちゃいます。スタイルシートやHTMLを何もいじっていない方は注意する必要はまったくないのですが、これからこの「+ ぷちカスタマイズ日記 +」でもスタイルシートやHTMLタグを変更してデザインや見た目を変える方法をお伝えしていきますので、覚えておいてくださいね。
要注意というのは、新しいスキンに変更すると、スタイルシートやHTMLが全て上書きされてしまうということです。既にスキンの色やデザイン、カラムの幅など色々変更されている方は要注意です。
「試しにこのスキンにしてみようかな?」などと軽い気持ちで変更しますと、今まで保存してきたデータが上書きされてしまいますので、あわてて元のスキンに戻しても、あとの祭りです。(ToT)/~~

スタイルの編集画面を見てみよう!

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

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

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

スタイルシート  ブログの「見栄え」担当。色やフォントの大きさ、カラムの幅なんかが記述されていま す。
HTMLファイル ブログの「構成」担当。ヘッダーや記事の配置や順番なんかが記述されています。
通常はこの2枚の組み合わせってことまでは、なんとな〜く知っていたのですが、ファンブログは、なんと6枚もあります。^_^; しかも、ファンブログ FAQ には、このスタイルシートやHTMLについての説明が載っていません。

5枚のHTMLファイルの活用法

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

前回のスタイルの編集画面を見てみよう!のお話で、スタイルシートが1枚で、HTMLファイルが5枚あるのは面倒だけど慣れると便利っていうような説明をしましたが、今回は何故5枚のHTMLファイルがあると便利なのかということを、具体的に活用されている方のブログを紹介しながら説明します。
まずは「メイン」、「アーカイブ」、「1記事」の3つのファイルで説明します。「メイン」は、いわゆるTOPページで表示される画面のHTMLファイルです。今回は、TOPページの記事の上にバナーが表示されるよう、「メイン」のHTMLファイルにバナータグを貼ったと仮定してみましょう。

プロフィールのページにバナーを貼ってみよう!

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

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

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

TOPページの記事の上にバナーを貼ってみよう!

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

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

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

TOPページのバナーをアーカイブや1記事でも表示させる方法

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

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

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

ポータルのページにサイトマップを作ってみよう!

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

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

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

メインページにフリーエリアを設置してみよう! : HTML 簡易版

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

だけど、せっかく紹介していただいたのに、試せないのもどうかとも思いましたので、CSS に記述を追記をしなくても HTML タグを貼るだけでカンタンに表示させる方法を考えてみました。
2013年06月10日 : 記述変更
記事タイトルと同じ文字色が最初から表示されるように変更しました。
2012年05月20日 : 説明文追記
記事表示部分のCSSの指定を解除する方法を追記ました。
2009年08月27日 : 機能追加
記事の隙間調整ができるよう、padding 機能を追加しました。
貼るだけカンタン!と申しましても、フリーエリアは、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コードをご用意しましたのでお試しくださいませ。
※ 対応しているのは、シンプル系スキンだけです。画像を使ったデザイナーズスキンでは不具合がでます。
2013年06月10日 : 記述変更
記事タイトルと同じ文字色が最初から表示されるように変更しました。

2012年05月20日 : 誤記訂正・書き換え
ページ送りナビゲーション <!-- nextprev --> の記述に誤りがございましたので訂正して書き換えました。
お持ち帰りのコメントはいただいてませんので、この場での報告となりますことをご容赦ください。
2012年05月16日 : 加筆・修正
2009年09月17日の記事が下書きとなって埋もれていました。訳あって全ての記事を下書きにして非公開にしていた時期がありまして、再び公開する際に見落としていたようで2年半以上眠っていました。( ^ω^;))
読み返してみますと非常にわかりにくい内容でしたので、追記の部分を加筆、修正して全面的に書き直しました。

ファンブログにSNSボタンを設置してみよう!

新しく追加されたSNSボタン付スキンは最初から3個のSNSボタンが設置されていますので、初心者の方にはとても魅力的なものなのですが、SNSボタン付でないスキンに変更するとSNSボタンは表示されなくなってしまいます。
SNSボタン
こっちのデザインのスキンにもSNSボタンが付いていればいいのに...って思いながらデザイン重視でSNSボタンを諦めてしまった方のためにSNSボタン付スキンに設置されている3個のSNSボタンを自分のサイトの同じ場所に設置する方法をご説明します。(≧ω≦)b
次へ  »
ブログパーツ
美容整形