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

Blog Battler 専用ページの設置

2007–01–05 （Fri） 21:48

私の日記（…と言いつつ、たまにしか更新しないブログ） HAKOIRI-SAKURAnbou の方に Blog Battler という、ブログパーツを設置しました。
ブログバトラーの開発日記ブログは、こちら。（どうやら、不具合報告などのお知らせも兼ねているようです）

トップページにそのままドーンと置くのも何なので、別ページにリンクする形で置いてみました。

他の方の設置画面を見習いつつ、HTMLとCSSファイルをそれぞれ作っています。
追記以下の説明を参考にしながら各ファイルを書き換えた後、御自分のブログにアップロードしてください。

＜注意＞追記以下の解説は、FC2ブログユーザーに対応した方法です。

他のブログサービスなどで、目的の結果が得られるかどうかは不明です。（画像ファイルの外部呼出しは禁止されているため。）他のブログサービスをご利用の方は、「テキストエディタの保存文字コード」「画像ファイル」などを、御自分のブログサービスに対応したものに置き換えて、作成してください。

他のブログサービスをお使いの方は特に、次の点に注意していただく必要が有ります。
「HTMLファイル」「CSSファイル」の各冒頭部分で指定してある文字コード「EUC-JP」は、FC2ブログサービスに対応したコードです。現在お使いのブログサービスで対応している文字コード（例：Shift-JISなど）を調べ、必ずそちらに書き換えるようにしてください。

追記 – open

作業の手順：

windows系ならTeraPadまたはサクラエディタ、Mac系の方ならmiなどの、EUC-JP形式に対応できるテキストエディタを起動します。（FC2ブログをご利用の方は、「データのバックアップ」の画面下から各エディタのダウンロードができます。）
HTMLファイル、CSSファイル共に枠内をコピペでOK。EUC対応テキストエディタで編集し、保存します。
ファイルの末尾にある拡張子.txt を.htmlに、または.cssに、それぞれ書き換えてください。
自分のブログ（管理者ページ）のアップロード画面から、各ファイルをアップします。（CSSをデフォルト設定のまま使用する場合、CSSファイルのアップロードは不要です。）
アップロードしたファイルのうち、HTMLファイルの「表示」という文字リンクをクリックし、きちんと表示されていればOKです。
ご自分がリンクさせたい任意の場所に、自ブログにアップしたHTMLファイルのフルパスを記述して、<a href="HTMLファイルのフルパス" target="_blank">Blog Battler</a>などとなるよう、リンクを貼ります。

＜留意点-１＞
私の思い違いかもしれませんが、普通のテキストエディタ（メモ帳など）で編集したファイルをそのままアップしたら、HTML中の「ブログタイトル」や「紹介文」「項目名」「Blog Battler 下の文」などの、日本語の部分が文字化けしたように思う（英字部分は文字化けしなかった）ので、一応EUC形式に対応したエディタで編集→アップロードという手順を取りました。

＜留意点-２＞
EUC形式対応のテキストエディタは、あらかじめ「表示」の「オプション」などで、「保存文字コード」の種類を「EUC」に設定しておいてください。

HTMLファイル：
ピンク・グリーン・ブルーの部分は、それぞれ御自分の情報に書き換えてください。Blog Battler のスクリプト直下の文も、適宜御自分のお好みのものに書き換えてください。

CSSファイルを御自分独自のものに変更する場合、オレンジの部分を自分でアップロードしたCSSファイルのフルパスに変更してください。

<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="imagetoolbar" content="false" />
<meta name="author" content="自分の名前" />
<meta name="description" content="自分のブログの紹介文" />
<title>ブログタイトル</title>
<link rel="stylesheet" type="text/css" href="http://blog27.fc2.com/h/hakoirisakura/file/wired_battler.css" media="screen,tv" title="デフォルト" />
<link rel="alternate" type="application/rss+xml" href="自分のブログアドレス?xml" title="RSS" />
<link rel="top" href="自分のブログアドレス" title="トップ" />
</head>
<body>
<div id="wrapper"><!--wrapper-->
<div id="header"><!--header-->
<h1 class="site-tittle"><a href="自分のブログアドレス" accesskey="0" title="自分のブログタイトル">ブログタイトル</a></h1>
<p class="site_info">自分のブログの紹介文</p>
</div><!--/header-->
<div id="master-column" class="column"><!--master-column-->
<div class="section3">
<h2 class="plugin_area">項目などの文</h2>
<div class="entry-body2">
～ここに、登録サイトから入手した自分のスクリプトタグを貼り付ける～
<br /><br />コメントなどございましたら、<a href="自分のブログ内の関連記事などのアドレス">関連記事のタイトル</a>&nbsp;という記事のコメント欄までどうぞ。
</div>
</div>
</div><!--/master-column-->
<div id="footer"><!--footer-->
<div id="ads">copyright&nbsp;&copy;&nbsp;2007&nbsp;自分のブログ名&nbsp;all&nbsp;rights&nbsp;reserved.<br />Powered&nbsp;By&nbsp;<a href="http://blog.fc2.com/" target="_blank">FC2 blog</a>&nbsp;/&nbsp;Template design&nbsp;by&nbsp;<a href="http://emeraldmountain.blog11.fc2.com/" target="_blank">◆&nbsp;若干廃墟&nbsp;◆</a>
</div>
</div><!--/footer-->
<!--/wrapper-->
</div>
</body>
</html>

＜留意点-３＞
できれば、テンプレートの著作権表示と、Powered by FC2 の部分は削除しないでください。CSSをいじって、画像から何から全て作り変えてしまった場合は、その限りではありません。（ただし、このBlog Battler 設置場所のデザインに限ります。）

CSSファイル：
オレンジ色の部分は、御自分で好みの画像に入れ替えてください。（もちろん、そのままでもOKです。）
01月06日追記→body背景画像を、ファイルサイズ小さめの物に変更しました。（表示の軽量化）

@charset "EUC-JP";

/* 全体的な設定--------------------------------------------- */
* { margin: 0;
    padding: 0;
    font-style: normal;
    font-weight: normal; }

html { scrollbar-track-color: #222;
       scrollbar-face-color: #000;
       scrollbar-arrow-color: #4242ff;
       scrollbar-3dlight-color: #333;
       scrollbar-darkshadow-color: #444;
       scrollbar-highlight-color: #777;
       scrollbar-shadow-color: #555; }

body { color: #fff;
       background-color: #000;
       background-image: url("http://blog11.fc2.com/e/emeraldmountain/file/kalos_1_12_700_cm.jpg");
       background-repeat: no-repeat;
       background-position: top center;
       background-attachment: fixed;
       line-height: 150%;
       font-size: 12px;
       text-align: center;
       font-family: "\30D2\30E9\30AE\30CE\20Pro\20W3","Osaka","Verdana","Helvetica","Arial","\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF",sans-serif; }

html>body { font-size: 12px; }

textarea { width: 90%; }

/* リンクの設定
------------------------------------------------------------ */
a { text-decoration: none;
    color: #9191ff; }

a:hover { color: #4242ff;
          background-color: #222; }

a img { border-style: none;
        border-width: 0px;
        text-decoration: none; }

/*--- 見出しの設定 ---*/
h2, h3 { color: #fff; }

h4, h5, h6 { font-size: 12px; }

/* レイアウトの設定
------------------------------------------------------------ */
div#wrapper { width: 541px;
              margin-left: auto;
              margin-right: auto;
              text-align: left; }

div#header { width: 541px;
             height: 100px;
             margin: 0px;
             padding: 0px;
             background-color: transparent;
             text-align: left; }

div.column { margin: 0px; }

/* master-column
-------------------------------------------------------------*/
div#master-column { margin: 0 auto;
                  text-align: center;
                  padding: 0px;
                  width : 541px; }

html>body div#master-column { width: 541px; }

/* footerの設定
------------------------------------------------------------ */
div#footer { clear: both;
             text-align: center;
             margin-bottom: 0px;
             padding-top: 6px;
             width: 541px;
             height: 60px;
             background-color: transparent; }

/* header
------------------------------------------------------------ */
div#header h1 a { text-decoration: none;
                  color: #fff;
                  font-size: 20px;
                  font-weight: bold; }

div#header h1 a:hover { text-decoration: none;
                        color: #7171ff;
                        background-color: #333; }

html>body div#header h1 a { font-size : 20px;}


.site-tittle { margin : 0px;
               padding-top: 20px;
               text-align : left; }


.site_info { margin: 0px;
             padding-top: 15px;
             text-align: left;
             font-size: 12px;
             font-weight: normal;
             color: #fff;
             line-height: 150%; }

html>body .site_info { font-size : 12px;
                       line-height: 150%; }


/* master-column
------------------------------------------------------------ */
/*--- 項目名＋コンテンツ全体のサイズ ---*/
div.section3 { width: 541px;
               margin: 0px auto; }

/*--- 項目名の設定 ---*/
div#master-column h2.plugin_area {
 width: 541px;
 height: 38px;
 margin-bottom: 10px;
 padding-top: 11px;
 background : url("http://blog11.fc2.com/e/emeraldmountain/file/dot541x38p-2f.gif") top left no-repeat;
 text-align: center;
 font-size: 14px;
 font-weight: bold;
 color: #fff; }

html>body div#master-column h2.plugin_area { font-size: 14px; }    

/*--- コンテンツの設定 ---*/
div.entry-body2 { margin: 0px auto;
                  text-align: center;
                  padding: 10px 25px 10px;
                  line-height: 150%; }

html>body div.entry-body2 { line-height: 150%; }


/* footer内の設定
------------------------------------------------------------*/
div#ads { margin-top: 5px;
          padding: 0px;
          font-size: 10px;
          line-height: 150%;
          color: #eee; }

div#ads a { margin-top: 5px;
            padding: 0px;
            font-size: 10px;
            color: #eee; }

div#ads a:hover{ color: #5252ff;
                 background-color: #222; }

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

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>" 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>" 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>" 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>" 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-->
<!--▲全記事表示ページここまで▲-->

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

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

カレンダー

04 | 2008/05 | 06
日	月	火	水	木	金	土
-	-	-	-	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 」だったり、「wired（わや）」だったり…

Author:「 emeraldmountain 」だったり、「wired（わや）」だったり…
こちらは私の2ndブログです。
日記的1stブログはこちら。↓
HAKOIRI-SAKURAnbou
ブログバトラーはここにいる！（管理人：三毛猫さん） ↑ ブログバトラー設置サイトのリンク集

◆ 若干廃墟 ◆

スポンサーサイト

Blog Battler 専用ページの設置

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

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

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

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

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

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

リストマークの表示

translate this blog into

カレンダー

最近の記事

最近のコメント

最近のトラックバック

カウンター

プロフィール

ブログ内検索

カテゴリー

全記事（数）表示

Llnks

RSSフィード

Powered By FC2