◆ 若干廃墟 ◆◆カスタマイズのヒント

スポンサーサイト

--–--–-- （--） --:--

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

| スポンサー広告
|

当方で配布中のブログテンプレートは、メインカラム（記事のあるカラム）の一番下に、
Topページでのみプラグイン3を表示するように作られています。
このプラグイン3を記事の上に表示させ、お知らせ等に使いたい方のためのカスタマイズ方法です。
お知らせなどの内容は、プラグイン3にフリーエリアを使用して表示させます。
この場合、お知らせ内容やタイトルの変更はフリーエリアの編集で行います。

まず、HTMLの編集画面で記事部分を表示させるカラムを探します。
当方では、first-column や master-column などの名称が付けられています。
テンプレートによって名称が異なるので、それぞれ置き換えて読み替えてください。

マスターカラム（もしくはファーストカラム）はカラム全体を包む大枠です。
その中に記事を包む小さな枠があります。
その二つの枠の間にプラグイン3のHTMLを入れ込みます。

プラグイン3のHTMLは、初期設定のデザイン位置に記述されたものをコピーし、
指定の位置にペーストしてください。

初期設定の位置はマスターカラム（もしくはファーストカラム）の大枠の最下部で、
ページ移動ナビの下などに記述してあると思います。
上部にコピー&ペーストで移動させた後、元のプラグイン3のHTMLの方は削除してください。
全く同じ内容のものが二つ表示されても構わない場合は、そのままでも結構です。
どちらもトップページのみに表示され、記事ごとの個別ページでは非表示になります。

カスタマイズ例： eme_orchid_3b

<!--▼master-columnには記事本文が書かれています▼-->
<div id="master-column" class="column"><!-- master-column -->

このあたりにプラグイン3のHTMLをペースト

<!--▼記事部分ここからはじまり▼-->
<!--topentry-->

～ 略 ～

<!--/topentry-->
<!--▲記事部分ここまで▲-->

・
・
・
～略～
・
・
・

<!--▼前・次ページ移動ナビ▼-->

～略～

<!--▲前・次ページ移動ナビここまで▲-->


デフォルトのプラグイン位置↓（コピー後に削除）

<!--▼プラグイン3ここから▼-->

<!--index_area-->
<!--plugin-->

<!--plugin_third-->
<div class="section3">
<h2 class="plugin_area" align="<%plugin_third_talign>" title="<%plugin_third_title>"> <%plugin_third_title> </h2>
<div class="entry-body2" align="<%plugin_third_ialign>"> <%plugin_third_description> </div>
<div class="entry-body2" align="<%plugin_third_align>"> <%plugin_third_content> </div> 
<div class="entry-body2" align="<%plugin_third_ialign>"> <%plugin_third_description2> </div>
</div>
<!--/plugin_third-->

<!--/plugin-->
<!--/index_area-->
<!--▲プラグイン3ここまで▲-->


</div><!-- /master-column -->
<!--▲master-columnここまで▲-->

スポンサーサイト

テーマ→FC2ブログテンプレート / ジャンル→ブログ

全記事表示（タイトルのみ表示する）

2010–01–30 （Sat） 06:16

以前書いた、全記事リスト表示ページを作るカスタマイズの続きです。
上記ページの一番下に同様の内容を追記してありますが、念のためこちらの記事にも記載しています。

「タイトル（日時）」「カテゴリー」「本文の一部」が表示されるものを、「タイトルと日時のみ」の表示にします。
HTMLの中の<li> ~ </li> の中に含まれる、赤文字部分の記述を削除してください。

HTML例：eme_3col_mint
※クラス名等は、お使いの各テンプレートに準じて置き換えてください

<!--▼全記事表示ページここからはじまり▼-->
<!--titlelist_area-->
<div class="section">
<h2 class="plugin_area">All Archives</h2>
<!--titlelist-->
<div class="plugin_content2">
<ul>
<li><a href="<%titlelist_url>" _fcksavedurl=""<%titlelist_url>"" _fcksavedurl=""<%titlelist_url>"" _fcksavedurl=""<%titlelist_url>"" _fcksavedurl=""<%titlelist_url>"" _fcksavedurl=""<%titlelist_url>"" _fcksavedurl=""<%titlelist_url>"" _fcksavedurl=""<%titlelist_url>"" _fcksavedurl=""<%titlelist_url>"" _fcksavedurl=""<%titlelist_url>"" _fcksavedurl=""<%titlelist_url>"" _fcksavedurl=""<%titlelist_url>"" _fcksavedurl=""<%titlelist_url>"" target="_blank"><%titlelist_title> （<%titlelist_year>年<%titlelist_month>月<%titlelist_day>日）</a> / <a href="<%titlelist_category_url>"><%titlelist_category></a><br />&nbsp;&nbsp;&#8658;&nbsp;<%titlelist_body>…</li>
</div>
<!--/titlelist-->
</div>
<!--/titlelist_area-->
<!--▲全記事表示ページここまで▲-->

テーマ→FC2ブログテンプレート / ジャンル→ブログ

追記部分を折りたたむ

2010–01–30 （Sat） 05:47

追記を別ページへのリンクで飛ぶデザインの物を、ジャバスクリプトを使用した折りたたみ表示に変更します。
あらかじめ追記以下の部分を読み込み済みで、デザイン上閉じているだけです。
『追記Open』の文字クリックで開閉して、視点移動することなく続きが読めます。

※当方で配布中のテンプレートに対応したHTMLを記述しています。
他のデザインに関しては、クラス名などを置き換えてカスタマイズしてください。

※2010年02月17日追記※
17日以前の追記用HTMLにて、環境設定によっては「拍手アイコンが表示されない」という不具合を報告いただきましたが、折りたたみ専用HTMLの修正をいたしました。
記事上のHTMLをそのままコピー&ペーストしていただくことで、拍手・ブックマークアイコンを記事上に表示できます。
また、ジャバスクリプトをオフにして閲覧している方の場合は、「追記リンク」での表示に切り替わるようになっています。
※追記終了※

まず、カスタマイズしたいテンプレートのHTMLの中から、記事を表示させる部分を見つけてください。
↓こんな記述が見つかると思います。この下に目的のHTMLが隠れています。

<!--▼記事部分ここからはじまり▼-->
<!--topentry-->
<div class="section" id="a<%topentry_no>">

すぐ下に↓こういう記述がありますが、ここはタイトル部分なので今回はいじりません。

<!--▼記事タイトル部分-->
<h2 class="entry-header"><a href="<%topentry_link>" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" title="「<%topentry_title>」の永続的アドレス"><%topentry_title></a></h2>

追記 – open

そして、更に下の方を見ていくと… 記事本文部分が出てきました。
追記以下へのリンクを含むHTML部分を削除して、折りたたみ専用のHTMLで置き換えます。
プレビューで折りたたみ部分をクリックして「機能するかどうかを確認」してから、更新ボタンをクリックしてください。

追記リンクHTML
対応テンプレート名 eme_milky-way など

<!--▼記事本文部分-->
<div class="entry-body">
<div class="entry-time"><%topentry_year>&ndash;<%topentry_month>&ndash;<%topentry_day>&nbsp;（<%topentry_youbi>）&nbsp;<%topentry_hour>:<%topentry_minute></div>
<%topentry_body>
<!--more_link-->
<div class="entry-more"><a href="<%topentry_link>" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" _fcksavedurl=""<%topentry_link>"" title="「<%topentry_title>」の続きを読む">続きを読む &#8658;</a></div>
<!--/more_link-->
<!--more-->
<%topentry_more>
<!--/more-->

折りたたみ専用HTML

<!--▼記事本文部分-->
<div class="entry-body">
<div class="entry-time"><%topentry_year>&ndash;<%topentry_month>&ndash;<%topentry_day>&nbsp;（<%topentry_youbi>）&nbsp;<%topentry_hour>:<%topentry_minute></div>
<%topentry_body>
<!--▼追記部分-->
<!--more_link-->
<script src="http://blog-imgs-29.fc2.com/e/m/e/emeraldmountain/tuiki_oritatami_2a.js"></script>
<div class="entry-more"><a href="<%topentry_link>" title="「<%topentry_title>」の追記" onclick="oritatami('<%topentry_no>','<%topentry_title>');return false">追記&nbsp;&ndash;&nbsp;<span id="<%topentry_title>">open</span></a><noscript><a href="<%topentry_link>" title="「<%topentry_title>」の続きを読む">&nbsp;</a></noscript></div>
<div id="<%topentry_no>" style="display:none"><%topentry_more></div>
<!--/more_link-->
<!--more--><%topentry_more><!--/more-->

テーマ→FC2ブログテンプレート / ジャンル→ブログ

全記事リスト表示ページを作る

2006–12–13 （Wed） 00:04

FC2::Developer'sBlog さんのちょっとテストという記事に、基本のソースがあります。

そちら＋テンプレート機能一覧（テンプレート中で使える変数一覧）を参考にしながら改造（欲しい表示項目を足したり引いたり…）しつつ、自分のテンプレートデザインに合わせたクラス名を適用させることで、自ブログと外観が統一された「全記事リスト一覧ページ」を作ることができます。

元のソースで設定されていたスタイルを取っ払って、クラス名だけの設定にしてみたのが↓こちら。（12月27日記事のHTML表記を訂正）
contentは記事ごとのくくり、dateは記事のヘッダー部分、content_bodyは記事の文章部分…などと同じクラス名に適宜変更します。こちらのHTMLを、自分の好きな場所（記事と同じカラム内の方が見やすい）に配置すればOK。

<!--titlelist_area-->
<div class="content">
<h3 class="date">All Archives</h3>
<!--titlelist-->
<div class="content_body">
<a href="<%titlelist_url>" _fcksavedurl=""<%titlelist_url>"" target="_blank"><%titlelist_year>/<%titlelist_month>/<%titlelist_day> <%titlelist_title></a> | <a href="<%titlelist_category_url>"><%titlelist_category></a><br>
　　∟<%titlelist_body>...</div>
<!--/titlelist-->
</div>
<!--/titlelist_area-->

「全記事リスト一覧ページ」へは、共有プラグインの「全記事（数）表示」などを利用して移動してください。（現在配布中の当方デザインテンプレには、全記事リストページへの文字リンクを記載済み）

追記以下には、共有テンプレートとして配布中の当方デザインの物への個別対応HTMLを記載しました。
御手持ちのテンプレが全記事リスト表示に対応していないバージョンの場合、説明文を参考にしながら、該当箇所に追加（枠内をまるっとコピペでOK）してください。
既に有る設定（クラス名）を適用するだけの変更なので、スタイルシートの変更は無しです。

なお、クラス名等は個々のデザインに合わせてあり、それ以外のテンプレートでは使用できませんので、ご注意ください。

追記 – open

HTML追加箇所：記事と同じカラム内（一番広い部分）の記事下あたりに配置します。（推奨）
リスト一覧ページに飛んだ時以外は表に表示されないので、基本的にどこに配置しても大丈夫だと思います。

<!--▲トラックバック部分ここまで▲-->
～～～このあたりに追加～～～
<!--▼前・次ページ移動ナビ▼-->

追加するHTML一覧：

[ eme_fireplace_3b ]
[ eme_orchid_3b ]
[ eme_milky-way ]
[ eme_race_2col_bw ]
[ eme_race_2col_bw-r ]
[ eme_race_2col_wb-r ]共通：

<!--▼全記事表示ページここからはじまり▼-->
<!--titlelist_area-->
<div class="section3">
<h2 class="plugin_area">All Archives</h2>
<!--titlelist-->
<div class="entry-body2">
<ul>
<li><a href="<%titlelist_url>" _fcksavedurl=""<%titlelist_url>"" _fcksavedurl=""<%titlelist_url>"" _fcksavedurl=""<%titlelist_url>"" _fcksavedurl=""<%titlelist_url>"" _fcksavedurl=""<%titlelist_url>"" target="_blank"><%titlelist_title> （<%titlelist_year>年<%titlelist_month>月<%titlelist_day>日）</a> / <a href="<%titlelist_category_url>"><%titlelist_category></a><br />&nbsp;&nbsp;&#8658;&nbsp;<%titlelist_body>…</li>
</div>
<!--/titlelist-->
</div>
<!--/titlelist_area-->
<!--▲全記事表示ページここまで▲-->

[ eme_lace-up_2w ]
[ eme_lace-up_2b ] 共通：

<!--▼全記事表示ページここからはじまり▼-->
<!--titlelist_area-->
<div class="section3">
<div class="jig-bottom">
<h2 class="plugin_area">All Archives</h2>
<!--titlelist-->
<div class="entry-body2">
<ul>
<li><a href="<%titlelist_url>" _fcksavedurl=""<%titlelist_url>"" _fcksavedurl=""<%titlelist_url>"" _fcksavedurl=""<%titlelist_url>"" _fcksavedurl=""<%titlelist_url>"" _fcksavedurl=""<%titlelist_url>"" target="_blank"><%titlelist_title> （<%titlelist_year>年<%titlelist_month>月<%titlelist_day>日）</a> / <a href="<%titlelist_category_url>"><%titlelist_category></a><br />&nbsp;&nbsp;&#8658;&nbsp;<%titlelist_body>…</li>
</div>
<!--/titlelist-->
</div>
</div>
<!--/titlelist_area-->
<!--▲全記事表示ページここまで▲-->

[ eme_3col_mint ] のみ：

<!--▼全記事表示ページここからはじまり▼-->
<!--titlelist_area-->
<div class="section">
<h2 class="plugin_area">All Archives</h2>
<!--titlelist-->
<div class="plugin_content2">
<ul>
<li><a href="<%titlelist_url>" _fcksavedurl=""<%titlelist_url>"" _fcksavedurl=""<%titlelist_url>"" _fcksavedurl=""<%titlelist_url>"" _fcksavedurl=""<%titlelist_url>"" _fcksavedurl=""<%titlelist_url>"" target="_blank"><%titlelist_title> （<%titlelist_year>年<%titlelist_month>月<%titlelist_day>日）</a> / <a href="<%titlelist_category_url>"><%titlelist_category></a><br />&nbsp;&nbsp;&#8658;&nbsp;<%titlelist_body>…</li>
</div>
<!--/titlelist-->
</div>
<!--/titlelist_area-->
<!--▲全記事表示ページここまで▲-->

＜2010年01月30日：追記＞
なお、全記事表示のうち『カテゴリー表示及び、本文の一部が表示されるもの』を、『タイトルのみ表示』に変更したい方は、同様のHTMLの内の<li> ~ </li> 部分に含まれる、赤文字部分の記述を削除してください。

<li><a href="<%titlelist_url>" _fcksavedurl=""<%titlelist_url>"" _fcksavedurl=""<%titlelist_url>"" target="_blank"><%titlelist_title> （<%titlelist_year>年<%titlelist_month>月<%titlelist_day>日）</a> / <a href="<%titlelist_category_url>"><%titlelist_category></a><br />&nbsp;&nbsp;&#8658;&nbsp;<%titlelist_body>…</li>

スレッドテーマ・ジャンルの表示

2006–06–20 （Tue） 15:39

FC2ブログでは、記事を投稿する際に『ジャンル』と『スレッドテーマ』を選ぶ事ができます。

私が配布したテンプレートの中には、それらの表示に対応していないものもあります。その場合、以下のタグをHTMLとCSSに追加することで、記事上に表示できます。
追記以下を参照してください。

逆に、この機能がついているテンプレートを使用していて、ジャンルやテーマを表示したくない場合は、HTMLに書かれたコメントにしたがって、該当部分のタグを削除してください。

追記 – open

１：「 HTMLの編集」で、記事本文中から次のような部分を捜します。（追記部分のタグです）

<!--more_link-->
～略～
<!--/more-->

２： のすぐ下に、以下のタグを丸ごとコピー&ペーストしてください。

<!--▼ジャンル・スレッドテーマの表示-->
<!--▼ジャンル・テーマを非表示にしたい場合、以下を削除▼-->
<!--community-->
<div class="community">テーマ→<a href="<%topentry_thread_link>" title="<%topentry_thread_title>へ移動"><%topentry_thread_title></a> / ジャンル→<a href="<%topentry_community_janrelink>" title="<%topentry_community_janrename>へ移動"><%topentry_community_janrename></a></div>
<!--/community-->
<!--▲ジャンル・テーマを非表示にしたい場合、ここまでを削除▲-->

３：「 CSSの編集」で、以下の設定を丸ごとコピー&ペーストして追加します。（場所はどこでもOK。後で編集したくなった時、ご自分がわかりやすい場所に。）

/*-- テーマ・ジャンルの文字位置 --*/

div.community { padding: 10px 0 0;
                 text-align: right; }

記事の右下に「テーマ」と「ジャンル」が並んで表示されます。左側に表示させたい場合、text-align を left に変更してください。

プロフィール画像の表示位置を変える

2006–06–10 （Sat） 10:31

私が共有登録しているテンプレートデザインは、初期状態でプロフィール画像がカラムの中央に配置されるよう、CSSで設定してあります。

これは、
プラグインの設定＞プラグインの編集＞設定の変更＞コンテンツの文字位置
…の部分で、『中央寄せ』または『右寄せ』を選択した時に、プロフィール画像と自己紹介文が『一緒に中央寄せ』もしくは『一緒に右寄せ』になるのを避けるための、配置設定です。（中央配置にしているのは、単に私の好みです^^）

画像の表示位置は、CSSのの該当部分を書き換えて右寄せ・左寄せに変更します。追記以下を参照してください。

追記 – open

初期設定 : 中央配置

/* --- プロフィール画像の余白・表示位置（プラグイン無効・有効時共通）--- */

.author-image img,
.plugin-myimage img { display: block;
                      margin: 0 0 15px;
                      text-align: center; }

html>body .author-image img,
          .plugin-myimage img { display: block;
                                 margin: 0 auto 15px; }
/* Opera、Firefoxなど比較的新しいブラウザでのプロフィール画像表示位置 */

変更後-１ : 右寄せ配置

/* --- プロフィール画像の余白・表示位置（プラグイン無効・有効時共通）--- */

.author-image img,
.plugin-myimage img { display: block;
                      margin: 0 0 15px;
                      text-align: right; }

html>body .author-image img,
          .plugin-myimage img { display: block;
                                 margin: 0 auto 15px 0; }
/* Opera、Firefoxなど比較的新しいブラウザでのプロフィール画像表示位置 */

画像を左寄せにしたい場合、CSSの該当部分冒頭に/*、最後尾に*/を書き加えて、内容をコメント扱いにして無効化することで、画像が左寄せになります。（左寄せ配置-a）

ですが、『それでは不安だ』という場合は、左寄せ配置-bのように設定しても良いでしょう。

変更後-２ : 左寄せ配置-a

/* --- プロフィール画像の余白・表示位置（プラグイン無効・有効時共通）--- */

/*.author-image img,
.plugin-myimage img { display: block;
                      margin: 0 0 15px;
                      text-align: center; }

html>body .author-image img,
          .plugin-myimage img { display: block;
                                 margin: 0 auto 15px; }*/
/* Opera、Firefoxなど比較的新しいブラウザでのプロフィール画像表示位置 */

変更後-３ : 左寄せ配置-b

/* --- プロフィール画像の余白・表示位置（プラグイン無効・有効時共通）--- */

.author-image img,
.plugin-myimage img { display: block;
                      margin: 0 0 15px;
                      text-align: left; }

html>body .author-image img,
          .plugin-myimage img { display: block;
                                 margin: 0 0 15px auto; }
/* Opera、Firefoxなど比較的新しいブラウザでのプロフィール画像表示位置 */

左右のカラムを入れかえる

2006–06–05 （Mon） 03:41

私の作っている2カラムの共有テンプレートは、float を使って左右に各カラムを配置しています。入れかえは非常に簡単です。

追記以下を参照してください。

追記 – open

記事位置・アーカイブ等位置の設定部分を、それぞれ left → right に、right → left に書き換えます。

変更前

/* first-column（本文記事）全体の位置・幅・余白
-------------------------------------------------------------*/

div#first-column { float: left;
                   margin: 0px;
                   padding-left: 40px;
                   width : 544px; }


/* second-column（アーカイブ等）全体の位置・幅・余白の設定
-------------------------------------------------------------*/

div#second-column { float: right;
                    margin: 0px;
                    padding-right: 40px;
                    width: 214px; }

変更後

/* first-column（本文記事）全体の位置・幅・余白
-------------------------------------------------------------*/

div#first-column { float: right;
                   margin: 0px;
                   padding-right: 40px;
                   width : 544px; }


/* second-column（アーカイブ等）全体の位置・幅・余白の設定
-------------------------------------------------------------*/

div#second-column { float: left;
                    margin: 0px;
                    padding-left: 40px;
                    width: 214px; }

注： first-column、second-column と書いてある部分は、それぞれmaster-column 、slave-column という名前になっている場合もあります。

また、[ eme_lace-up_2w ] のように、背景画像の配置を % で指定している物は、以下の緑字部分の指定も変更してください。（画面左端からの位置を指定しています。）

変更前（右側寄りに背景画像を配置）

/*--- サイト全体のレイアウト ---*/

div#wrapper { width: 800px;
              margin-left: auto;
              margin-right: auto;
              background-color: #fff;
              background-image: url("～略～");
              background-repeat: repeat-y;
              background-position: 72% 0%;
              text-align: left; }

変更後（左側寄りに背景画像を配置）

/*--- サイト全体のレイアウト ---*/

div#wrapper { width: 800px;
              margin-left: auto;
              margin-right: auto;
              background-color: #fff;
              background-image: url("～略～");
              background-repeat: repeat-y;
              background-position: 28% 0%;
              text-align: left; }

プラグインの幅設定を変える

2006–05–12 （Fri） 07:02

各種プラグインの中には、最初から幅が固定してあって（検索窓など）
テンプレデザインを変えると、どうにも収まりが悪くなったりするものがあります。
それらのプラグインが、使用テンプレに合わせて自動的に幅が伸縮してくれると便利です。

例：検索窓
初期設定では、以下のようなHTMLになっています。
緑字の部分が幅の設定です。この部分を、桃字のように変更します。

追記 – open

変更前

<form action="./" method="get">
<p class="plugin-search" &align>
<input type="text" size="20" name="q" value="" maxlength="200"><br>
<input type="submit" value=" 検索 ">
</p>
</form>

変更後

<form action="./" method="get">
<p class="plugin-search" &align>
<input type="text" style="width:90%;" name="q" value="" maxlength="200" /><br />
<input type="submit" value=" 検索 " />
</p>
</form>

こうすることによって、サイド（アーカイブやリンク集）のカラム幅に対して
プラグインの検索窓が、常に90%小さい状態で表示されるようになります。
90%などの数値設定は、お好みで変更してください。

なお、 <input type～> 及び <br> の末尾にはなるべく、上記桃字部分のように
『半角の空白』と『スラッシュ』を追加してください。
当テンプレートにあわせた、XHTMLの記述形式です。
（万一の不具合防止のため）

プラグインコンテンツへ枠をつける

2006–05–08 （Mon） 19:51

プラグインコンテンツへ一項目ごとに枠を付ける場合、まずHTMLの編集画面で
以下の場所に、赤文字の部分をそれぞれ付け加えます。
プラグイン２・３にも、それぞれ同じようにして付け加えますと、CSSで設定している
外枠の指定が有効になります。

追記 – open

たとえば、こんな感じ↓のデザイン指定です。

div.section2 { margin-bottom: 15px;
               padding: 0px;
               border-width: 2px;
               border-style: solid;
               border-color: #eee #ccc #bbb #eee; }

例１：プラグイン１の項目を個別に囲む
※カレンダー、月別アーカイブ、リンクなどが、それぞれ別々の枠で囲まれます。

<!--plugin_first-->
<div class="section2">
<h2 class="plugin_area" align="<%plugin_first_talign>" title="<%plugin_first_title>"> <%plugin_first_title> </h2>
<div class="plugin_content" align="<%plugin_first_ialign>"> <%plugin_first_description> </div>
<div class="plugin_content" align="<%plugin_first_align>"> <%plugin_first_content> </div>
<div class="plugin_content" align="<%plugin_first_ialign>"> <%plugin_first_description2> </div>
</div> 
<!--/plugin_first-->

例２：プラグイン１全体を囲む
※カレンダー、月別アーカイブ、リンクなど、プラグイン１の全ての内容が
一緒に枠で囲まれます。

<div class="section2">
<!--plugin_first-->
<h2 class="plugin_area" align="<%plugin_first_talign>" title="<%plugin_first_title>"> <%plugin_first_title> </h2>
<div class="plugin_content" align="<%plugin_first_ialign>"> <%plugin_first_description> </div>
<div class="plugin_content" align="<%plugin_first_align>"> <%plugin_first_content> </div>
<div class="plugin_content" align="<%plugin_first_ialign>"> <%plugin_first_description2> </div>
<!--/plugin_first-->
</div>

リストマークの表示

2006–05–08 （Mon） 01:59

プラグイン有効時のプロフィール欄で、名前や自己紹介文にリンク集やアーカイブ部分と
同じようなアイコンを表示させたい場合、『 HTMLを編集する』をクリックして
以下の様な変更を加えます。
（緑文字部分を削除して、桃文字部分を書き加えてください）

本文中にリストマークを使いたい場合は、ソースの表示画面を開いて
下記のような形式でタグを書くことで表示させられます。

<ul>
<li>夜露に震えるあの子の頬髭</li>
<li>肉球の中に隠した秘密の冒険</li>
</ul>

それ以外の場所については、追記以下を御覧下さい。

追記 – open

初期設定

<!--myimage-->
<p class="plugin-myimage" &align>
<img src="<%image>" alt="<%author_name>">
</p>
<!--/myimage-->
<p &align>
Author:<%author_name><br>
<%introduction2>
</p>

変更後

<!--myimage-->
<p class="plugin-myimage" &align>
<img src="<%image>" alt="<%author_name>" />
</p>
<!--/myimage-->
<ul>
<li &align>Author:<%author_name></li>
<li &align><%introduction2></li>
</ul>

…と同時に、<img src ～の最後の方を、半角文字の空白＋スラッシュ＋>で
閉じていただくと、尚一層完璧！
これは当方のテンプレデザインがXHTML形式なので、それに対応したタグの記述です。
推奨。
CSSでリストマークが設定されているものは、この方法でマークをお揃いにできます。

フリーエリアなどにリストマークを設定する場合
１：『HTMLを編集する』で、あらかじめ桃字部分を書き込んでおきます。

<!-- ＆freeareaの中にHTMLが代入されます。 -->
<div class="plugin-freearea" &align>
<ul>
&freearea
</ul>
</div>

２：『フリーエリア内容の変更』で『ブログパーツ等を設置する場合は～』の欄に
マークをつけたい文字の前と後に、以下のような形式で書いてください。

<li &align>（もしくは <li>）風薫る五月 </li>
<li &align>（もしくは <li>）雨歌う午後 </li>

BlogPeople などの外部呼出しのリンク集を使う場合
上記１の手順の後 Blogpeople の管理画面を開けて『表示形式の設定』で
『詳細設定』をクリックし、『7.HTMLタグの利用』の項目で以下を追加してください。

<a>タグの前： <li> （ もしくは <li &align> ）
</a>タグの後： </li>

| HOME |

translate this blog into

カレンダー

06 | 2017/07 | 08
日	月	火	水	木	金	土
-	-	-	-	-	-	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	-	-	-	-	-

最近のトラックバック

カウンター

総閲覧数：

プロフィール

emeraldmountain

Author:emeraldmountain
最近こちらのブログにはあまり出入りしていません。返信等はかなり遅れます。ご容赦くださいませ。

◆ 若干廃墟 ◆

スポンサーサイト

プラグイン3を記事の上に表示する（Topページのみ）

全記事表示（タイトルのみ表示する）

追記部分を折りたたむ

全記事リスト表示ページを作る

スレッドテーマ・ジャンルの表示

プロフィール画像の表示位置を変える

左右のカラムを入れかえる

プラグインの幅設定を変える

プラグインコンテンツへ枠をつける

リストマークの表示

translate this blog into

カレンダー

最近の記事

最近のコメント

最近のトラックバック

カウンター

プロフィール

ブログ内検索

カテゴリー

全記事（数）表示

Llnks

RSSフィード

日	月	火	水	木	金	土
-	-	-	-	-	-	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	-	-	-	-	-

日	月	火	水	木	金	土
-	-	-	-	-	-	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	-	-	-	-	-

日	月	火	水	木	金	土
-	-	-	-	-	-	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	-	-	-	-	-