2009年08月26日
メインページにフリーエリアを設置してみよう！ ： HTML 簡易版
あるブログさんから、フリーエリアを使用しているサイトとしてご紹介していただいたのですが、このフリーエリアは HTML に記述して、CSS で装飾を指定する少し複雑なものなので、公開するのはまだ先という考えでいました。
だけど、せっかく紹介していただいたのに、試せないのもどうかとも思いましたので、CSS に記述を追記をしなくても HTML タグを貼るだけでカンタンに表示させる方法を考えてみました。
だけど、せっかく紹介していただいたのに、試せないのもどうかとも思いましたので、CSS に記述を追記をしなくても HTML タグを貼るだけでカンタンに表示させる方法を考えてみました。
2013年06月10日 ： 記述変更
記事タイトルと同じ文字色が最初から表示されるように変更しました。
2012年05月20日 ： 説明文追記
記事表示部分のCSSの指定を解除する方法を追記ました。
2009年08月27日 ： 機能追加
記事の隙間調整ができるよう、padding 機能を追加しました。
貼るだけカンタン！と申しましても、フリーエリアは、HTML に直接入力することになりますので、改行から、文字装飾などは全て、HTML コードで入力する必要がありますことを、ご了承くださいませ。記事タイトルと同じ文字色が最初から表示されるように変更しました。
2012年05月20日 ： 説明文追記
記事表示部分のCSSの指定を解除する方法を追記ました。
2009年08月27日 ： 機能追加
記事の隙間調整ができるよう、padding 機能を追加しました。
HTML はある程度わかるけど、HTML と CSS の関係は少し苦手という方のために、フリーエリアの、HTML コードをご用意しましたのでお試しくださいませ。
※ 対応しているのは、シンプル系スキンだけです。画像を使ったデザイナーズスキンでは不具合がでます。
▼ 今日のおみやげ ▼
お持ち帰りの際は「コメント」などを残していただけますと励みになります。
ご利用の際は、ボックス右下の 「Petit Customization Diary」 というリンクを必ず表示してください。
ボックス内にマウスを置きますとコードが全て選択されます。右ボタン⇒コピー でお持ち帰りください。
お持ち帰りいただいた「コード」を、「メイン」の HTML に貼り付けます。作業をする前に HTML のバックアップをとっておいてくださいね。
▼ この説明は「シンプル系スキン」限定です。他のスキンの場合はソースの記述が異なります。 ▼
▼ それでは設置方法の説明です ▼
「メイン」のHTMLを開いたら、<div id="entries"> という記述を探してください。比較的上の方に記述されていますので、少し下にスクロールすればすぐ見つかると思いますが、説明には付近のソースも記述してありますので、見つからない方はそちらをご覧になってから探してくみてださい。
持ち帰った「Htmlタグ」を、 <div id="entries"> と <BlogEntries> の間に貼るのですが、そのまま貼ると記述してある元のソースとコードが繋がってしまう恐れがありますので、コードを貼る前に <BlogEntries> の前にカーソルを置き、3〜4回改行して行間を広げてください。
改行して間を広げた真中あたりの行頭にカーソルを置いてコードを貼れば上下に空きができますので、貼ったコードと元から記述されていたソースとの区別がつきますから安全に作業が行えます。
<div id="main" class="clr">
<div id="content">
<div id="entries">
ココに貼ってください！
<BlogEntries>
<div class="entry">
? ここから下に貼ってください。
? ここから上に貼ってください。
「プレビュー(P)」を押し、記事の上にフリーエリアが表示されていましたら「保存(S)」を押して設置は完了です。
続いて編集方法を説明しますが、ここでもう一度、HTML のバックアップを取っておくことを推奨します。
▼ フリーエリアの編集方法の説明です ▼
<!-- 飾り枠 --> <div style="
border-width（枠線の太さ）: 1px 1px 1px 1px; ? 上、右、下、左 別々に指定可能
border-style（線種）: solid; ? 点線は dotted 、破線は dashed
border-color: #ccc; （枠線色）
background: #fff; （背景色）
margin（外側の隙間）: 0px 0px 30px 0px; （上、右、下、左）
padding（内側の隙間）: 0px 0px 0px 0px; （上、右、下、左）
">
枠線を表示をさせたくない場合は、枠線の太さを 0px に指定してください。
枠線は、上右下左の順番で別々に指定できますので 0px 0px 1px 0px; と指定しますと下線だけが表示されます。
<!-- タイトル --> <h2 class="entryTitle"
style="margin: 0px;"><a href="{$BlogArchiveLink$}">フリーエリア ： タイトル</a></h2> <!-- /タイトル -->
タイトルバーは記事のタイトルの CSS を指定しています。上に 10px の隙間ができてしまいましたので、相殺させる style="margin: 0px; を追記して 10px の隙間をなくしてあります。
サンプルとして入力してあります、 フリーエリア ： タイトル をお好みのタイトルに変更してください。
記事タイトルと同じ文字色が表示されるようにタイトルに設置したページのリンクを貼ってあります。
リンクを外しますと CSS に指定色がないため、通常の黒（#333;）で表示されてしまいますので、ご注意ください。
タイトルバーが不要の方は、 <!-- タイトル --> から <!-- /タイトル --> までを削除してください。
<!-- 記事 --> <div class="entryBody clr"
style="padding（内側の隙間）: 10px 5px 5px 5px;（上、右、下、左）
"><!-- 入力初め --> <!-- 入力終り --></div><!-- /記事 -->
入力や変更は、先ほど貼り付けた「メイン」の HTML に直接入力することになりますので、入力作業は慎重に行ってください。「プレビュー(P)」で確認しながら作業を進めていき、途中々で、「保存(S)」していきますと、落ち着いて編集することができると思います。
少しでもおかしいことをしてしまったと感じたら、「ここまで入力したのにもったいない！」という気持ちを抑えて「保存されている内容に戻す」で元に戻すことができるかが、失敗しないポイントかもしれません。
入力は <!-- 入力初め --> から、 <!-- 入力終り --> までの間に入力してください。
この範囲は、記事表示部分の CSS を指定していますので、記事全体の隙間や、フォントの行間や文字の大きさなどを変更している方でも、記事と同じ設定がそのまま反映されます。
CSS の指定を解除したい場合は、 <div class="entryBody clr" style="padding: 10px 5px 5px 5px;"> の class="entryBody clr" の部分を削除して 、 <div style="padding: 10px 5px 5px 5px;"> としてください。
記事表示部分の CSS を指定していますが、記事の内側の隙間を調整できるよう、padding 機能を追記しました。
初期設定は、デフォルトの記事と同じ隙間の設定にしてあります。
<!-- 必ずリンクを表示してください --> 〜 title="＋ぷちカスタマイズ日記＋">Petit Customization Diary</a>
ボックス右下に 「Petit Customization Diary」 というリンクが表示されます。このリンクは「フリーエリア」に興味を持たれた方を、この記事へと誘うリンクになりますので削除せず必ず表示してください。
いかがでしたでしょうか？HTML に直接入力する作業は緊張するかとは思いますが、「プレビュー(P)」で確認しながら編集できますので、サイドバーより楽に編集できると思います。
「保存(S)」さえ押さなければ、何回も元に戻すこともできますので、ぜひチャレンジしてみてくださいね。
※ 上記Htmlタグはコピー＆ペーストでそのままご利用になれます。
※ Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。
この情報が、お役にたちましたら ≫ FC2 Blog Ranking ≪
押していただけると励みになります
※ 対応しているのは、シンプル系スキンだけです。画像を使ったデザイナーズスキンでは不具合がでます。
▼ 今日のおみやげ ▼
お持ち帰りの際は「コメント」などを残していただけますと励みになります。
ご利用の際は、ボックス右下の 「Petit Customization Diary」 というリンクを必ず表示してください。
ボックス内にマウスを置きますとコードが全て選択されます。右ボタン⇒コピー でお持ち帰りください。
お持ち帰りいただいた「コード」を、「メイン」の HTML に貼り付けます。作業をする前に HTML のバックアップをとっておいてくださいね。
「メイン」のHTMLを開いたら、<div id="entries"> という記述を探してください。比較的上の方に記述されていますので、少し下にスクロールすればすぐ見つかると思いますが、説明には付近のソースも記述してありますので、見つからない方はそちらをご覧になってから探してくみてださい。
持ち帰った「Htmlタグ」を、 <div id="entries"> と <BlogEntries> の間に貼るのですが、そのまま貼ると記述してある元のソースとコードが繋がってしまう恐れがありますので、コードを貼る前に <BlogEntries> の前にカーソルを置き、3〜4回改行して行間を広げてください。
改行して間を広げた真中あたりの行頭にカーソルを置いてコードを貼れば上下に空きができますので、貼ったコードと元から記述されていたソースとの区別がつきますから安全に作業が行えます。
<div id="main" class="clr">
<div id="content">
<div id="entries">
ココに貼ってください！
<BlogEntries>
<div class="entry">
? ここから下に貼ってください。
? ここから上に貼ってください。
※<BlogEntries>より下に貼りますと１記事ごとにフリーエリアが表示してしまいますので、ご注意ください。
「プレビュー(P)」を押し、記事の上にフリーエリアが表示されていましたら「保存(S)」を押して設置は完了です。
続いて編集方法を説明しますが、ここでもう一度、HTML のバックアップを取っておくことを推奨します。
<!-- 飾り枠 --> <div style="
border-width（枠線の太さ）: 1px 1px 1px 1px; ? 上、右、下、左 別々に指定可能
border-style（線種）: solid; ? 点線は dotted 、破線は dashed
border-color: #ccc; （枠線色）
background: #fff; （背景色）
margin（外側の隙間）: 0px 0px 30px 0px; （上、右、下、左）
padding（内側の隙間）: 0px 0px 0px 0px; （上、右、下、左）
">
枠線を表示をさせたくない場合は、枠線の太さを 0px に指定してください。
枠線は、上右下左の順番で別々に指定できますので 0px 0px 1px 0px; と指定しますと下線だけが表示されます。
<!-- タイトル --> <h2 class="entryTitle"
style="margin: 0px;"><a href="{$BlogArchiveLink$}">フリーエリア ： タイトル</a></h2> <!-- /タイトル -->
タイトルバーは記事のタイトルの CSS を指定しています。上に 10px の隙間ができてしまいましたので、相殺させる style="margin: 0px; を追記して 10px の隙間をなくしてあります。
サンプルとして入力してあります、 フリーエリア ： タイトル をお好みのタイトルに変更してください。
記事タイトルと同じ文字色が表示されるようにタイトルに設置したページのリンクを貼ってあります。
リンクを外しますと CSS に指定色がないため、通常の黒（#333;）で表示されてしまいますので、ご注意ください。
タイトルバーが不要の方は、 <!-- タイトル --> から <!-- /タイトル --> までを削除してください。
<!-- 記事 --> <div class="entryBody clr"
style="padding（内側の隙間）: 10px 5px 5px 5px;（上、右、下、左）
"><!-- 入力初め --> <!-- 入力終り --></div><!-- /記事 -->
入力や変更は、先ほど貼り付けた「メイン」の HTML に直接入力することになりますので、入力作業は慎重に行ってください。「プレビュー(P)」で確認しながら作業を進めていき、途中々で、「保存(S)」していきますと、落ち着いて編集することができると思います。
少しでもおかしいことをしてしまったと感じたら、「ここまで入力したのにもったいない！」という気持ちを抑えて「保存されている内容に戻す」で元に戻すことができるかが、失敗しないポイントかもしれません。
入力は <!-- 入力初め --> から、 <!-- 入力終り --> までの間に入力してください。
この範囲は、記事表示部分の CSS を指定していますので、記事全体の隙間や、フォントの行間や文字の大きさなどを変更している方でも、記事と同じ設定がそのまま反映されます。
CSS の指定を解除したい場合は、 <div class="entryBody clr" style="padding: 10px 5px 5px 5px;"> の class="entryBody clr" の部分を削除して 、 <div style="padding: 10px 5px 5px 5px;"> としてください。
記事表示部分の CSS を指定していますが、記事の内側の隙間を調整できるよう、padding 機能を追記しました。
初期設定は、デフォルトの記事と同じ隙間の設定にしてあります。
<!-- 必ずリンクを表示してください --> 〜 title="＋ぷちカスタマイズ日記＋">Petit Customization Diary</a>
ボックス右下に 「Petit Customization Diary」 というリンクが表示されます。このリンクは「フリーエリア」に興味を持たれた方を、この記事へと誘うリンクになりますので削除せず必ず表示してください。
いかがでしたでしょうか？HTML に直接入力する作業は緊張するかとは思いますが、「プレビュー(P)」で確認しながら編集できますので、サイドバーより楽に編集できると思います。
「保存(S)」さえ押さなければ、何回も元に戻すこともできますので、ぜひチャレンジしてみてくださいね。
※ 上記Htmlタグはコピー＆ペーストでそのままご利用になれます。
※ Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。
【カスタマイズ：HTML 編の最新記事】
この記事へのコメント