俗にいう"New Blogger"ですか？旧Bloggerとの違いや混ざった情報でパニックになっていたところを纏めてみました。
ブログパーツ「ナンプレッチョ～数独」を追加してから
どうも現状のレイアウトに不満を感じてしまい、
２カラムから３カラムのテンプレートへと変更しました。
（それから今日はこれをやり続けてました。。。）
元ネタは
Blogger Tips and Tricksから始まり
Hackosphereで公開されていた『
3-column Minima』を使用させて頂きました。
お礼のコメントをと思って慣れない英語でごにゃごにゃ文章を作っていたのですが、残念がらすでにコメントが一杯でPostできませんでした。
とりあえず、ここに書いとく事にします。（
Ramaniさんありがとう）
I will use "3-column Minima".
I managed to transform from two columns to three columns though I added a little arrangement(color,size,etc). Thank you for sharing.
変えたのは良かったんですが、今までにカスタムしていた部分が吹き飛んでしまい、そのあたりの手直しや色とサイズの微調整を行いました。
まずは色から
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#fff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#58a">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#666" value="#666">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#999" value="#999">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#c60">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#ccc">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#999" value="#999">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#666">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
*/
だったのを
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#488" value="#448888">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#335533" value="#335533">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#335533" value="#335533">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#cc6600">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#000" value="#000000">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#666666">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#999999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% 'ＭＳ Ｐゴシック', Georgia, Serif" value="normal normal 100% 'ＭＳ Ｐゴシック', Georgia, Serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 110% HGP創英角ﾎﾟｯﾌﾟ体,'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 110% HGP創英角ﾎﾟｯﾌﾟ体,'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal bold 200% Georgia, Serif" value="normal bold 200% HGP創英角ﾎﾟｯﾌﾟ体, Serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal bold 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal bold 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
*/
こんな具合に変えてみたり
３カラムの長さの配分を
#main-wrapper {
width: 400px;
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#newsidebar-wrapper {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
こいつをこんな風に変えてみたり
#main-wrapper {
width: 410px;
margin: 0px 5px 0px 5px;
padding: 0px 5px 0px 5px;
float: left;
border-left: $bordercolor 1px ridge;
border-right: $bordercolor 1px ridge;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#sidebar-wrapper {
width: 160px;
float: left;
padding-left: 5px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#newsidebar-wrapper {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
こんな細かい調整をしました。
すべてスタイル部分についてです。
しかし、この投稿を保存しようとすると
<>が引っ掛かるので
<>に変換するのにえらい面倒な目にあいました。。。
あとはタグクラウドとカレンダーなんですがそれは別途公開します。
一気に書くとものすごく長くなるので。。。
0 件のコメント:
コメントを投稿