意外と簡単なんだけど、テンプレートによって仕様が異なる。
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>
やり方はいくつもあるのですが今回はtransformを使う方法です。
transformを使う場合メリットは、自分自身の基準位置からの移動距離をしてするだけなので、コードがシンプルで済みます。ただ、自分が中心なので、扱い辛いです。
ほら、自分中心の奴って扱いづらいじゃないですか？（笑）
transformを使う方法
#cc-website-title
h1{
display:inline-blcok;
transform:translate(-20px,100px);
}
2015年7月25日現在サイトタイトルを使用していないテンプレートは以下の通り。
Dubai、Dublin、Malaga、Milano、Paris、Reykjavik、St.Petersburg
※Romaは対応しているけど使えないかなぁ？
※Osakaはサイトタイトルは存在しているが、非対応（対応させる方法は存在しますが、そうすると、上の点線を犠牲にすることになります。）
▼ タグの貼り付け方はここ マウスを当てると画像が開きます。
transformの位置の決め方
自分自身の現在の位置を中心に、左から右へ、数値をプラスで指定すれば、右方向に、マイナスを指定すれば、左方向へ移動します。
上から下への数値も、数値をプラスで下方向へ、マイナスで上方向に移動させられます。
#cc-website-title h1{
display:inline-blcok; /* 文字にあわせたブロック要素です */
padding:10px 20px; /* 背景の余白をつける */
background:rgba(255,255,255,0.8); /* 背景色をつける */
transform:translate(10px,10px);
}
この位置が、基本のサイトタイトルの位置だったとします。
右に200px移動
左に200px移動
上に50px移動
上に50px移動
上、右後方に飛び出す！
transformの使い方は、シンプルなのでこれで終わりです。
コメントをお書きください
川合勝 (金曜日, 31 7月 2015 17:21)
何度も済みません。
これ等の方法でタイトル位置を動かすので、何と素晴らしい事か。
translateは簡単で使いやすいのですが、タイトルを右方向にずらせて中央へ持って行くと、マウスオーバーでオレンジの帯が左側に出てしまいます。
今はpositionで行っておりますが、今度はナビゲーションまでの高さが狭く成ります。
本来は高さを自由に出来ればいいのですが、せめて高さをデフォルトのままタイトル位置だけを動かしたいのですが。
現行はロゴとタイトルが接近して、狭苦しく感じますので。（個人の好みかも知れませんが）
川合勝 (月曜日, 17 8月 2015 08:40)
transformを使うとオレンジ帯が付く原因が分かりました。
「リンク写真」の項で、私のサイトではマウスオーバーで画像の下にオレンジ帯が付くのに、村井さんのサンプルにはそれが有りません。
そこで気が付いたのですが、リンク文字にマウスオーバーで背景色をオレンジにしており、此れが影響している事が分かりました。
因みに背景色を取るとオレンジ帯は当然ですが付きません。
逆に言うとtransformを使うときは、リンク文字に背景色を付けると駄目と言う事ですね。
川合勝 (木曜日, 20 8月 2015 08:35)
Jimdo側で直したらしく、リンク文字に背景色を付けても、リンク写真やtransformに影響が出なく成りましたので、今迄のコメントは不要と言う事に成ります。
お騒がせしました。