2007年08月06日

どっちーず　-　ブログパーツ

BlogPetのサイトから「どっちーず」というサイトを知りました。
名産、ご当地、あなたの地元、みんなのイメージで日本ができるブログパーツ「どっちーず」あなたのブログから新しい日本地図をつくってみよう！

あなたのブログからの投票で日本の地図が変わるかも…！ というのがうたい文句らしいです。



私のサイトからは、埼玉県か相手の都道府県どちらかを選ぶ事ができます。
埼玉県に清き1票を！

まだ情報量が少ないのですが、Mackyのお出かけサイトもよろしくね。

クロスワード日本地図 クロスワード日本地図

おとなの日本地図 読み出したら止まらない　おとなの日本地図  

Posted by Macky at 10:52 │Comments(0) │TrackBack(0) │カスタマイズ

2007年05月26日

引用文に枠、背景色を付ける

記事を書いていて、引用文を挿入するときにツールパレットからを選択しますが、初期設定だとインデントが着くくらいで、引用されているのかがよくわかりませんね。（テンプレートによっては設定してあるかも）

そこで、スタイルシートでスタイルの指定内容を記述します。

記述の仕方はログインしてから「デザイン」タブをクリックし、サイドメニューのデザインカテゴリから「オリジナルデザインの登録」を選択。
スタイルシートの自分で解りやすいところに以下の文を挿入します。
blockquote {
padding: 10px;
background-color: #eee;
border: 1px dotted #ccc;
}

どこに記入したら解らない場合は一番最後に追加するのがよいでしょう。

background-color: #eee;は背景色。#+3桁か6桁のカラーコードを記入します。
border: 1px dotted #ccc;は最初から枠の太さ、線の形状、線の色。
solid（普通の線）、double（二重の線）、groove（谷型の線）、ridge（山型の線）、inset（凹型）、dotted（点線）、dashed（大きい点線）

※プレビュー画面では表示されませんので注意してください。
※引用文にはリンクを張って、引用元を解るようにしましょう。（無断転記不可の場合もあります）

詳しい内容は【HTMLタグの簡単検索】TAG index - Web制作情報のCSS書式の基本を参考にしてください。

　HTML／XHTML（エクスエイチティーエムエル）＋CSS例解スタイル辞典  

Posted by Macky at 07:00 │Comments(0) │TrackBack(0) │カスタマイズ

2006年10月11日

カスタムプラグイン

カスタムプラグインでもタイトルと枠線等が入ります。



昨日のサイドバーカスタマイズのやり方で、「設定」「カスタムプラグインの登録」でも表示することが解りました。
もっと早くに気がつけば簡単だったのに。

<div class="sidetitle">
タイトルを記入。
</div>
<div class="side" ALIGN="center">

カスタムプラグイン用のタグを記入します。

</DIV>

これだけでした。m(_ _)m

ALIGN="center"は枠の中央に表示。"Left"または"Right"に変更可能です。



★TAGに関する本を探す？★

  

Posted by Macky at 10:37 │Comments(0) │TrackBack(1) │カスタマイズ

2006年10月10日

サイドバーをカスタマイズ

カスタムプラグインだと表示するだけでタイトルとか枠とかが入らないので、「プロフィール」や「最近のコメントと同じように表示するようにしてみた。



「デザイン」変更画面から「トップページ」の中から以下の部分を見つけます。

<div id="links">
<%PluginList%>
</div>

<%PluginList%>と</div>の間にタグを入れます。


<!-- 追加プラグイン -->　　　　　「<!--」と「-->」に囲まれた文字は表示されません。
<div class="sidetitle">　　　タイトルのスタイルシートを呼び出します。
タイトル　　　　　　　　　　　　　　　　　　　　題名を入れます。
</div>　　　　　　　　　　　　　　　　タグを閉じる
<div class="side">　　　　　　サイドメニューのスタイルを呼び出します。
　　　　　　　　　　　　　　　　　　　　　　　　　枠とか背景の設定はスタイルシートで行います。

カスタムプラグイン用のタグを記入します。

</div>　　　　　　　　　　　　　　　　タグを閉じる

枠の中で、真ん中に表示したいときは
<div class="side" ALIGN="center">
と記入します。
<DIV style="text-align:center">
も同じですが、</div>をもう一つ追加します。

タグの閉じ忘れ、特に<div ○○○・・・>が重なったときの終了タグ</div>に注意が必要です。
表示が崩れたときは、確認してみてください。

下は今話題の「やわらか戦車」のBlogプラグインです。

<!-- やわらか戦車 -->
<DIV class="sidetitle">
やわらか戦車
</DIV>
<DIV class="side">
<DIV style="text-align:center">
<script type="text/javascript" charset="euc-jp" src="http://image.blog.anime.livedoor.com/plugin/js/yawaraka_bph.js"></script>
</DIV>
</DIV>

「個別記事」や「アーカイブ」に表示させたいときにも同じ場所を探してタグを記入してみてください。  

Posted by Macky at 10:52 │Comments(0) │TrackBack(0) │カスタマイズ

2006年10月06日

記事欄背景に画像を挿入

記事欄に画像を挿入



記事欄の枠内背景に画像を入れてみました。
オリジナルデザイン変更画面から「スタイルシート」の中から以下の部分を見つけて、


.blogbody{

	background	:#fff;

	margin		:0px 0px 10px 0px;

	padding		:8px;

	border-left	:1px solid #00514D;

	border-right	:1px solid #00514D;

	border-bottom	:1px solid #00514D;

}

backgroundのところを変更(追加)します。 


.blogbody{

	background:#000 url(http://△△△/◎◎◎.gif) no-repeat right bottom;

	margin		:0px 0px 10px 0px;

	padding		:8px 15px 8px 15px;

	border-left	:1px solid #BE3101;

	border-right	:1px solid #BE3101;

	border-bottom	:1px solid #BE3101;

}

background:背景色 背景画像 並び方 画像スクロール 表示位置 ;
:と;の間にそれぞれの値を、半角スペースで区切って記述します。
記述する順番は自由で、必要のない指定は省くこともできます。（省いた部分はデフォルトが適用されます）
私の例だと、黒背景 ハロウィン画像 繰り返しなし 右 下　になってます。
お試しあれ！  

Posted by Macky at 15:07 │Comments(0) │TrackBack(0) │カスタマイズ

2006年10月05日

テンプレ－ハロウィンバージョン

今までの復習がてら、テンプレートをハロウィンバージョンに変更しました。



白背景から黒背景に変更すると、文字から何から変更しなくてはならいので大変。
黒背景のテンプレートが用意されていれば良かったのですが、結局自分で変更してしまいました。

素材は本店でお世話になっています「PACK」さんにお借りしました。  

Posted by Macky at 15:30 │Comments(5) │TrackBack(0) │カスタマイズ

2006年10月04日

記事欄の背景を指定

バナーの背景変更の応用。



オリジナルデザイン変更画面から「スタイルシート」の中から以下の部分を見つけて、


.blogbody{

	background		:#fff;

	margin			:0px 0px 10px 0px;

	padding			:8px;

	border-left		:1px solid #00514D;

	border-right		:1px solid #00514D;

	border-bottom		:1px solid #00514D;

}

のbackgroundのところに背景にする画像のURLを記入する。


.blogbody{

	background	:#fff url(http://blog.saitamania.net/usr/△△△/◎◎◎.gif);

	margin			:0px 0px 10px 0px;

	padding			:8px;

	border-left		:1px solid #00514D;

	border-right		:1px solid #00514D;

	border-bottom		:1px solid #00514D;

}

同じく、サイドメニューの背景を変えるのは・・・
backgroundがないので追加しましょう。


.side{

	font-size			:12px;

	line-height		:140%;

	margin			:0px 0px 10px 0px;

	padding			:8px;

	border-left		:1px solid #00514D;

	border-right		:1px solid #00514D;

	border-bottom		:1px solid #00514D;

	width			:167px;

	background	: url(http://blog.saitamania.net/usr/△△△/◎◎◎.gif);

}

あれ？カレンダーの背景が変わらない？
ここも変更（追加）します。


.calendartable{

	margin				:0px auto 20px auto;

	padding				:0px;

	width				:185px;

	text-align				:left;

	background			:#fff

	border-top			:1px solid #00514D;

	border-left			:1px solid #00514D;

	border-right			:1px solid #00514D;

	border-bottom			:1px solid #00514D;

	empty-cells:show;

	border-spacing:0px;

	border-collapse:collapse;

	background	: url(http://blog.saitamania.net/usr/△△△/◎◎◎.gif);

}


background-repeat:repeat-x;　を追加すれば、横方向に並べ、
background-repeat:repeat-y;　を追加すれば、縦方向に画像を並べられます。
大きな画像の場合は、
background: url(http://blog.saitamania.net/usr/△△△/◎◎◎.gif) left bottom;
background:（画像の位置）（左右の基準）（上下の基準） ;

あくまでも一例です。

詳しくは→「TAG INDEX」

今日はこの辺で。  

Posted by Macky at 09:27 │Comments(0) │TrackBack(0) │カスタマイズ

2006年10月03日

バナータイトルの位置を変える

バナータイトルの位置を変える
下の写真のようにバナータイトルとブログの説明文の位置を変更してみます。



オリジナルデザイン変更画面の「スタイルシート」の中から以下の部分を見つけます。


.blogtitle{

	font-size						:30px;

	font-weight					:bold;

	padding						:20px 0px 0px 10px;

	text-align						:left;

	letter-spacing					:2px;

}



.description{

	color						:#fff;

	font-size						:12px;

	padding						:4px 0px 0px 35px;

	text-align						:left;

	letter-spacing					:2px;

}

「.blogtitle」はブログのタイトルのスタイル
「.description」はブログの説明文のスタイルです。

見やすいようにスペース（タブ）を減らしました。
緑色の所を"left"左から"right"右に変えました。
青文字の所は、表示する色を変更出来ます。


.blogtitle{

    color		:#fff;

    font-size	:30px;

    font-weight	:bold;

    padding	:20px 0px 0px 10px;

    text-align	:right;

    letter-spacing	:2px;

}



.description{

    color		:#0F0;

    font-size	:12px;

    padding	:4px 0px 0px 35px;

    text-align	:right;

    letter-spacing	:2px;

    font-weight	:bold;

}

今回は、比較的簡単？

カラーコード表は、検索サイトで探すといっぱいあるので、自分で使いやすいサイトを選んでください。  

Posted by Macky at 13:22 │Comments(0) │TrackBack(0) │カスタマイズ

2006年10月02日

バナーの壁紙変更

オリジナルテンプレートをカスタマイズしてみました。
はじめはバナーの壁紙変更。

現在使っているデザインを変更するなら、自分のブログにログイン後「デザイン」「オリジナルデザインの登録」をクリック。
テンプレートを変更するならば、変更後に行う。
万が一タグの入力を間違って元に戻せなくなることを考えて、スタイルシートの中身をメモ帳などに保管しておいた方がよいでしょう。
私の場合、オリジナルデザインの登録のスクロール画面が扱いづらいので、「STYLE NOTE」というフリーソフトにコピーして、こちらでタグを変更してから元に戻しています。

他にもいろいろなソフトがあると思いますが、これはフリーソフトで、スタイルインスペクタなどお助けメニューがありますので、重宝しています。

本題に戻りますが、先ず画像を登録。
「記事の投稿メニュー」から「画像・動画の登録、一覧、削除」
表示させたい画像を選んで「画像のアップロード」。拡張子が、*.jpgか.gifがトラブルがなくてよいと思います。
サムネイルで表示された画像をクリックすると画像が保存されているURLが解ります。
このURLを記憶しておきます。

オリジナルデザイン変更画面から「スタイルシート」の中から以下の部分を見つけます。

#banner,#subbanner{
background :#00D2C5 url(/_img/simple_marine/head.gif) left bottom;
padding :0px 10px 10px 10px;
}

赤字の部分を先ほどアップロードした画像のURLと置き換えます。
URLの後ろのあるタグは、表示する画像の基準値を決めます。個別にも指定できます。
プロパティの変更は、「TAG INDEX」を参考にされると良いでしょう。わかりやすく解説しています。
私の場合は以下のように変更しました。

#banner,#subbanner{
background:#fff url(http://blog.saitamania.net/usr/○○○/△△△.jpg) left bottom;
padding:0px 10px 10px 10px;
background-repeat:repeat-x;
height: 100px;
}

変更が終わったら、元に戻して、登録。確認して、表示がおかしかったら、タグの構文を再確認してみてください。
くれぐれもタグの閉め忘れに注意してください。

一度挑戦してみてください。

「STYLE NOTE」ダウンロード先→http://www.wht.mmtr.or.jp/~riki/style/

カスタマイズの参考サイト→「TAG INDEX」  

Posted by Macky at 11:45 │Comments(0) │TrackBack(0) │カスタマイズ
このページの上へ▲