意外と簡単なんだけど、テンプレートによって仕様が異なる。
Cicagoテンプレートを利用した例
上記で最初にやったこと
背景をつけて、文字を縮小、左寄せ、サイトタイトルを最小化。
※必ずやってほしいことは、サイトタイトルのサイズを文字にあわせること。
赤字で表示
<style type="text/css">
#cc-website-title h1:first-line{
font-size:50% !important; /* 上の文字を小さく */
color:#68A94A; /* サイトカラーで色をつける */
}
#cc-website-title h1{
display:inline-block; /* サイトタイトルのサイズを文字にあわせる */
padding:10px 20px; /* 背景の余白をつける */
background:rgba(255,255,255,0.8); /* 背景色をつける */
}
</style>
やり方はいくつもあるのですが今回はpositionを使う方法です。
どちらにも一長一短があります。
positonを使う場合には、いくつかの指定方法があります。
今回は比較的遣われることの多い、外的要因を基準に位置を決める方法を説明しています。
positionを使う方法
.j-header{
position:relative;
}
.j-header h1.j-website-title-content{
display:inline-blcok;
position:absolute;
top:-200px;
right:0;
}
transformを使う方法
.j-header h1.j-website-title-content{
display:inline-blcok;
transform:translate(-20px,100px;);
}
2015年7月25日現在サイトタイトルを使用していないテンプレートは以下の通り。
Dubai、Dublin、Malaga、Milano、Paris、Reykjavik、St.Petersburg
※Romaは対応しているけど使えないかなぁ？
※Osakaはサイトタイトルは存在しているが、非対応（対応させる方法は存在しますが、そうすると、上の点線を犠牲にすることになります。）
▼ タグの貼り付け方はここ マウスを当てると画像が開きます。
positionの決め方
.j-header{
position:relative; /* ※親要素。ここを基準にポジションを決めます */
}
.j-header h1.j-website-title-content{
display:inline-blcok; /* 文字にあわせたブロック要素です */
position:absolute; /*親要素を基準にします。 */
top:-200px; /* 親要素の上からの基準をプラスで下方向に、マイナスで上方向に */
left:10px; /*親要素の 左端からプラスは右方向に、マイナスは左方向に */
}
上から10px。左から10pxに配置
上から10px。左から10px。
下から10px。右から50pxに配置
下から20px。右から50px。
バリエーション
上から20px。右から20px。下から20px；左から50px。
左上に10px重ねる
上に10px。左から10px。
右に10px、上に10px重ねる
上記は、下方向にも有効その場合はbottomを指定する。
下に10px。右から50px。
positonの使い方は、結構複雑なので、これが最後です。
positionの使い方は、マニュアルなどを公開している人の半分以上が間違った理解をしています。
今回のposition:absoluteは、基点である青の外枠を基準にしたけれどposition:relativeを使用することで、自分自身を基準に移動させることも可能になります。
必要に応じて、一番良い指定方法を選択する必要があります。
スタイルシートは使い方次第で、色々なことが実現可能です。
興味があれば、勉強してみると楽しいかもしれません。
基準になる場所
基準に自分から下へ70px。右へ200px。
コメントをお書きください