レイアウトやデザインなどを元に戻すときに参考にする自分用の記録です。
ほとんどが、今まで記事にしてきた内容の実践です。
現在のデザインとレイアウト
上からブログタイトル、メニューバー、ブログの投稿で、右サイドバーに忍者おまとめボタン、サイト内検索、AdSense（レクタングル中）、新着記事です。
Bloggerに忍者おまとめボタンを簡単に設置する方法
サイト内検索も同様に、メニューバーに設置しているのではなく、右サイドバーにガジェットで追加後サイドバーを上に移動しています。
右サイドバーにはその他に、人気記事、メニュー、タグリスト（ラベル）、AdSense（スカイスクレイパー大）を設置しています。
左側メイン部分には、記事下にAdSense（レクタングル大）、忍者おまとめボタン、関連記事、最近の人気記事、AdSense（リンクユニット横長中）を設置しています。
フッター部分は、3分割したレイアウトを選択して、左にアーカイブ、真ん中にGoogle+とRSS、右にコンタクト用のメールフォームとAbout/サイトマップを設置しています。
コピーライトの変更と書き方
テンプレートのカスタマイズ
テンプレートのカスタマイズから行っている変更点です。
まず、シンプルテンプレートを使用して、幅の調整でブログ全体の幅を1000ピクセル、右側のサイドバーを350ピクセルに変更しています。
上級者向けのCSSを追加で下記コードを追加しています。
/* フォント変更 */
* { font-family:"meiryo","メイリオ","ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif; }
h2 { font-family:"meiryo","メイリオ","ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif; }
/* h2-h4の背景 */
h2 {
clear:both; /* 回り込み */
color:#464646;
font-size:16px;
background-image: url(http://icon.png);
background-repeat: no-repeat;
background-position: left center;
padding: 0px 0px 0px 20px;
margin: 0px 0px 5px 0px ;
}
/* 記事タイトル */
h3 {
padding: 15px 0px 0px 30px;
border-bottom: 1px solid #eee;
}
/* 記事タイトルリンク */
.entry-title a{
color: #464646;
}
.entry-title a:hover{
color: #fc4f08;
}
/* 記事内のh2 */
h2.main{
font-size:16px;
margin:30px 0px 20px -40px;
padding: 5px 0px 3px 40px;
color:#fff;
background:#464646;
text-decoration: none;
border-bottom: 2px solid #fc4f08;
border-right: 2px solid #fc4f08;
border-top: 2px solid #464646;
border-left: 2px solid #464646;
width: 104%;
background-image: none;
}
/* 記事内のh3 */
h3.main{
margin:0.5em 0;
border-left: 6px ridge #464646;
padding: 2px 10px;
}
/* 記事内 */
h4{
margin:0.5em 0;
}
/* 検索タイトルなど */
h2.title{
font-size:14px;
border-bottom: none;
}
/* フッターの色と横幅いっぱい */
footer{
margin: 0 -3%;
}
/*CSS メニューバー*/
#topmenu ul{
margin: 0px 0px 0px -58px;
border-bottom: 1px solid #eee;
display: block;
}
#topmenu li {
float: left;
text-align: center;
width: 165px;
}
#topmenu li a {
color:#464646;
text-decoration: none;
display: block;
border-left: 1px groove #eee;
}
#topmenu li a:hover,
#topmenu li.active {
color:#fff;
background: #464646;
}
/*続きを読む背景*/
.jump-link{
text-align: center;
line-height: 220%;
width: 150px;
margin: 0px 0px 0px 450px ;
}
.jump-link a{
display: block;
color:#464646;
background:#eee;
border-left: 2px solid #fc4f08;
}
.jump-link a:hover{
display: block;
text-align: center;
color:#fff;
background:#464646;
text-decoration: none;
border-left: 2px solid #fc4f08;
}
/*ラベルの設定*/
.post-footer{
background:Transparent;
margin: 0px 0px 0px 20px;
width: 90%;
}
/* 表 ①よく使う用*/
.table{
width: 100%;
}
table {
margin: 0 0 2em 2px;
}
.table td {
padding: 10px;
border: 1px solid #CCC;
background-color: #FFF;
}
.table td.tb {
width: 30%;
background-color: #F8F5EF;
}
/* 表 ②もくじ用*/
.sample_01{
width: 100%;
border-spacing: 2px 0px;
}
.sample_01 th{
width: 50%;
padding: 6px;
text-align: left;
vertical-align: top;
color: #333;
background-color: #eee;
border: 1px solid #b9b9b9;
}
.sample_01 td{
padding: 6px;
background-color: #fff;
border: 1px solid #b9b9b9;
}
/* レンサバ用テーブル */
.table010 {
width: 100%;
background-color: #ffffff;
border-width: 1px;
border-style: solid;
border-collapse: collapse;
border-color: #464646;
}
.table010 td,.table010 th {
border-width: 1px;
border-style: solid;
padding: 5px;
border-color: #464646;
width: 25%;
text-align:center;
}
.table010 th {
background-color: #464646;
color: #ffffff;
border-color: #777;
}
/* メインカラムの位置 */
#main{
background: #fff;
width: 115%;
margin: -20px -30px 0px -30px;
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari,Chrome */
border-radius: 5px; /* CSS3 */
border: 1px #aaa solid; /* 枠線の装飾 */
}
/* 右サイドバーの位置 */
#sidebar-right-1{
margin: -150px -40px 0px 60px;
}
/* SNSボタンの位置 */
.ninja_onebutton{
margin: 0px 0px -15px 10px;
}
/* ヘッダーの位置 */
header{
margin: -25px -40px;
}
/* 引用装飾 */
blockquote{
border-left:5px solid #ddd;
background: #eee;
padding: 10px;
font-size:12px;
}
/* コード装飾 */
pre{
font-size:13px;
border:1px solid #aaa;
background:#eee;
padding:0.5em;
width:90%;
max-height:100px;
overflow: auto;
}
/* 記事内の幅 */
.entry-content{
width: 90%;
margin: 0px 0px 0px 30px ;
}
/* 日付の装飾 */
.date-header{
background-image: none;
font-size: 12px;
font-weight: normal;
margin: 5px 0px -25px 5px ;
}
/* ラベル検索位置 */
.status-msg-wrap{
margin-top: 0px;
border:1px solid #fff;
}
見出しの装飾や、テーブルの装飾などをここに追加しています。
スポンサーリンク
