見た目を変える両側線
記事両側に線をつけるのと、トップページの見た目を変えたメモ。
※HTML編集の前にテーマ→バックアップは忘れずに。
灰色っぽい影を付けたのです。赤文字の数字変更で色を変える事が出来ます。
*記事両側に線をつける
ボディの大きさを決めてしまう事で、線をつけています。
テーマ→カスタマイズ→CSSを追加でフォント設定していく。
もしくはテーマ→詳細設定→HTMLの編集→『 ]]></b:skin> 』の前に置く。
/*両脇に線PCのみ*/
@media screen and (min-width: 1020px) {.page_body {
box-shadow: 0 0 5px rgba(131, 141, 153, 0.5);
width: 980px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box; }｝
灰色っぽい影を付けたのです。赤文字の数字変更で色を変える事が出来ます。
カラーコードのRGBの数字を当てはめて下さい。
**その他、細かい変更。
最新記事だけ画像が大きくなるのを消したい。
レイアウト→ページの本文にある注目記事を非表示にする。
続きを読むの文字を変える。
『続きを読む』を『≫≫読む』に変えるのもレイアウトの中にある。
レイアウト→ページ本文→ブログの投稿を編集。投稿ページのテキストリンクの部分を変える。
少しだけ角を丸くしてボタンの様に表示させる。
テーマ→カスタマイズ→CSSを追加でフォント設定していく。
もしくはテーマ→詳細設定→HTMLの編集→『 ]]></b:skin> 』の前に置く。
/* 『続きを読む』を右揃え+余白を調整 */
.jump-link {
text-align: right;
padding: 10px 0;
}
/* リンクをボタン風に表示。 */
.jump-link a {
padding: 5px 10px;
line-height: 1.2em;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background-color: #ffaa00;
font-weight: bold;
text-decoration: none;
}
赤文字#ffaa00で背景色を変更できる。
文字色はテーマ→カスタマイズ→詳細設定→リンクの色で変更。
トップページの見た目はこんな感じで変えた。