Ads by Google
新しい記事を書く事で広告が消せます。
模様替え
今日はとある個人的記念の日♪
諸事情によりのんびりお祝いできる環境にないので、もうしばし
お祝いはお預けなのですが･･･
じゃあ記念にblogの模様替えをしましょう♪ということになりました。
唐突に模様替えがしたくなったというのは内緒です。
ちなみにこうさのランダム背景も入れ替えしました。
暦的にはヴァレンタインデーも終わりましたし。(うちではまだこれもお預け中･･･)
春満開
にしたい気持ちもやまやまなのですが、
北の大地は春めいたり吹雪いたり、とまだまだ気を緩められないのです。
そのため、背景も雪景色から春色背景まで織り交ぜてみました。
北海道の花が咲く季節は･･･３ヶ月後にやってきます！
さて、テンプレートの模様替え。
今回はFC2ブログでIl mio diarioの木の葉さんが配布なさっている、
[white_2col]を使わせていただきました。
白が基調の、シンプルですっきりしたデザインがとっても気に入って。
カラフルなものも気にはなるのですが、写真やキャプチャ画像を
いろいろupしたいことを考えると、やっぱり白の方が映えますからネ。
カスタマイズOKということで、またもちまちまといじってみました。
でも！テンプレート内にすでにコメント等ツリー化タグが組み込まれているなど
非常に使い勝手のよいテンプレートで、カスタマイズもかなりスムースでした♪
では、以下カスタマイズの覚え書きを。非常に長いです。
奇特な方のみご覧くださいまし。
【2006.02.21 追記】
カスタマイズの説明箇所など、コトバ足らずな部分を少々補完しました。
【１】ブログタイトル下にセレクトボックスを設置する。
前のテンプレートからそのまま持ってきて、ぺたっと貼りました。
以下の記述を、「ヘッダー・サイトタイトル表示」の下に貼ります。
この場合の注意点は、プラグイン有効の状態で使用する場合
管理画面の「プラグインの設定」で、セレクトボックス化した
各プラグインを非表示にしておかないと、ARCHIVESが２つも表示されてる！
という事態になるということ。くどくなっちゃいます(笑)
<!--▼セレクトボックス型で4つ横一列に設置。これを使用する場合は管理画面の「プラグインの設定」で各プラグインを非表示にしておかないと、コメント欄が２つも表示されてる！という事態になります。-->
<center>
<!-- ▽月別アーカイブ部分ここから -->
<select name="arc-select" onchange="window.location.href=this.options[this.selectedIndex].value"style=background-color:#ffffff;color:#778899;>
<option selected value="">ARCHIVES</option>
<!--archive-->
<option value="<%archive_link>"><%archive_year>-<%archive_month> : <%archive_count></option>
<!--/archive-->
</select>
<!-- △月別アーカイブ部分ここまで -->
<!-- ▽カテゴリ別アーカイブ部分ここから -->
<select name="cat-select" onchange="window.location.href=this.options[this.selectedIndex].value"style=background-color:#ffffff;color:#778899;>
<option selected value="">CATEGORIES</option>
<!--category-->
<option value="<%category_link>"><%category_name> : <%category_count></option>
<!--/category-->
</select>
<!-- △カテゴリ別部分ここまで -->
<!-- ▽リンク部分ここから -->
<select name="cat-select" onchange="window.open(this.options[this.selectedIndex].value)"style=background-color:#ffffff;color:#778899;>
<option selected value="">LINKS</option>
<!--link-->
<option value="<%link_url>"><%link_name></option>
<!--/link-->
</select>
<!-- △リンク部分ここまで -->
<!-- ▽エントリー部分ここから -->
<select name="arc-select" onchange="window.location.href=this.options[this.selectedIndex].value"style=background-color:#ffffff;color:#778899;>
<option selected value="">ENTRY LIST</option>
<!--entry-->
<!--topentry-->
<OPTION value="#<%topentry_no>"><%topentry_title></OPTION>
<!--/topentry-->
<!--prevpage-->
<OPTION value="<%prevpage_url>">Preview</OPTION>
<!--/prevpage-->
<OPTION value="<%url>">Top</OPTION>
<!--nextpage-->
<OPTION value="<%nextpage_url>">Next</OPTION>
<!--/nextpage-->
</select>
</FORM>
</div>
<!-- △エントリーここまで-->
</center>
<br>
<!--/ここまで▲-->
【２】エントリーフッターに記事編集リンク追加を追加する
いちいち管理画面を開かなくても、エントリそれぞれから直接
その記事の編集画面に飛べるリンクを追加します。
<a href="http://blogサーバ番号.fc2.com/ログインID/admin.php?mode=editentry&no=<%topentry_no>" target="blank">編集</a>
つづいて、CSSをちょこまかと。
【３】スクロールバーの色を変える
デフォルトの水色スクロールバーもよいのですが、やっぱりちょこっと変えたい。
どれがどこの色を指定するかは、こちらのページを参考にされるとよいかと思います。
以下は自分の好み。
scrollbar-face-color : #ffffff;
scrollbar-highlight-color : #f5f5f5;
scrollbar-shadow-color : #778899;
scrollbar-3dlight-color : #ffffff;
scrollbar-arrow-color : #778899;
scrollbar-track-color : #ffffff;
scrollbar-darkshadow-color : #cccccc;
【４】背景画像を削除
ブログタイトルの下に細長い布(？)のような画像があったのですが、
迷った末に削除してみました。
以前の「部屋風壁紙」を使おうかとも思ったのですが、たまには
背景なしもすっきりしていいかも、とお試し中です。
あぁー、先日ご紹介したSpell with flickrを使うという手もありますが･･･まぁそのうちに(笑)
背景画像の指定は以下の部分。
/*タイトルロゴを変更する場合は以下のhttp://〜のアドレスを変えて下さい。ロゴのサイズは縦150、横760の範囲内で作成してください。*/
background-image : url("ここに画像のurlを記述する");
【５】エントリー内にスクロールバーを設定する
長い記事も気にせず書けます(？)
main部分設定の中に以下の記述を足します。
heightの数字を変えればスクロールバーの長さの調節が自由自在。
.infobox{
height: 20em;
overflow: auto;
border :
text-align : left;
}
【６】画像の装飾を解除
デフォルトでは画像の周りに余白ができるよう指定がされていたのを
0pxに変更しました。
必要なときにだけエントリ編集画面内で設定するから必要ないのですー
/* 画像の装飾*/
.entry img {
margin : 0px;
padding : 0px;
background-color : #FFFFFF;
border : 0px;
}
ちなみに画像に文字を回り込ませる場合に、画像と文字が近すぎる！なんて場合は
imgタグにこのように追加記述をしています。↑は画像を左にテキスト回りこみ。<img src="画像のサムネイル画像のURL" alt="画像の代替テキスト" border="0" align=left style="margin-right:10px">
margin-rightの数値で画像と文字の間の距離感を調節します。
下線部分を辞書登録しちゃうと楽ちんですよね。「タグ」で呼び出せるようにしたりして。
【７】各プラグインにスクロールバーを設定する
CSSのいちばん下に以下の記述を追加します。
/*●以下、サイドバーのスクロールの長さの為のタグ。スクロールの長さはここの数字で変更可。
サイドバーにスクロール効果を入れたい場合は、プラグインのHTML画面を開き、<DIV CLASS=MENU_SC></DIV>で囲んでください。*/
DIV.MENU_SC { OVERFLOW : AUTO; HEIGHT : 300PX; }
そして、スクロールバーを付けたいプラグインのHTML編集画面に
以下の記述をします。
<!-- ＆freeareaの中にHTMLが代入されます。 -->
<DIV CLASS=MENU_SC><p class="plugin-freearea" &align>
&freearea
</p></DIV>
今回のカスタマイズは以上です。ふぅ。長かった･･･
最後まで見てくださった方、ありがとうございます。
お疲れさまでした┏○ぺこり
これが参考になる方がもし居たら幸いでございます。
なお、カスタマイズする際には、始める前にオリジナルの記述を
テキストエディタ等に保存しておくのが安全です。
失敗しても簡単に戻すことが出来ますｖ
また、カスタマイズは自己責任のもと行ってください。
テンプレート作者さんの規約に則るのは言うまでもありません。
あ。そうそう。
BlogPeopleのリンクリストが上手く表示できなくて行き詰まり中･･･
どうして１行あいちゃうのー？(T_T)
調べてみると、どうやらBlogPeopleの吐き出すファイルに、
すでに<br>が含まれているからそうなんですが･･･
１行あけないためにはどこをどういじれば良いのか皆目分かりませんorz
ちなみにBlogPeopleはテンプレートに直接書き込んでいるわけではなく
プラグイン、フリーエリアの内容変更内に記述しているのです･･･
どなたか、分かる方救いの手を･･･お願いします<(_ _*)>
【2006.02.21 追記の追記】------------------------------
もひとつおまけに。
【８】blockquoteのスタイルを変更する
blockquoteのスタイルを、ちょっとかわいげのある感じに変えてみました(笑)
border、すなわち線の種類はほかにもいろいろ指定が出来ます。/* 基本タグ */
blockquote {
margin : 0px;
padding : 0px 5px;
background-color : #dbe2ea;
border-top : 1px solid #778899;
border-right : 1px solid #778899;
border-bottom : 1px solid #778899;
border-left : 5px solid #778899;
line-height : 25px;
display : block;
overflow : auto;
}
などなど･･･色や太さ、種類を組み合わせて自分だけのblockquoteを。なんて。solid ⇒ 直線 、 dotted ⇒ 点線 、 dashed ⇒ 破線
double ⇒ 二重線 、 groove ⇒ 溝線 、 ridge ⇒ 稜線
inset ⇒ 窪んだような線 、 outset ⇒ 飛び出す線
- at 23:47
- [web,blog,customize]
- TB(4) |
- CO(19) | この記事へのリンク |
- Admin |
この間も書きましたが本当にシンプルで素敵です!!
本当に見やすくてイライラなんて全くしませんものね。
落ちついて記事が読めますよ。( ﾟｰﾟ)( ｡_｡)ｳﾝ♪
こうさちゃんの背景も楽しませてもらってます。
北海道はまだまだ寒いのですね。
花が咲く季節が３ヶ月も先だなんて
大阪からは遠いんだなぁと改めて思いました。
カスタマイズの覚え書き!!
ありがたいことでございます。
正直チンプンカンプンですが...(T△T)
ひとつずつやっていきますね。
分からなくてもやってみるというのも必要な気もしますし。
本当に参考になる記事をありがとうございました。＜(＿ ＿)＞