下の編集をすることにより、Linezapの良さが失われる可能性があります。
適度に必要な部分だけを編集してください。
HTMLの編集
HTMLを編集する前にバックアップを取ってください。
使われている画像の変更または削除
bodyの背景background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy6Xvta8xai_-7rp7ey2cDiSg-mVnugEHBScUBHiJA59A0uEvAd1oTXdKptp2J3mm4Gpt-F_XStXO612LOnfhPzymaNtihTmTIYf1fh5n2ZyyXxtf48hhfAstraZQHMfUuGeeAruxeOEc/s1600/13.jpg);
あわせて、backgroundとbackground-colorを任意の色に変更する。
ウィジェットタイトルの背景画像の変更と削除
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFroPm-GN20XXomQLmygBForQJ1yj0T5RUppc_XdbzBHPRaobqEBOkXVg26STP2bSKHE40u7O5b7zBRV_D9gZpJnnD65Skpr8uS_PxLTb0jTR5fJiwqgLOiCOWJqh3nMzR_l6OePLjj1Q/s1600/dot.png
フッターのウィジェットタイトルも同様に削除または変更する。
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim6GO7Lg-pYiD-_QXAOGsGq_hxxSbizYPxaOC09Efwt1fNbTY9_9I50r9eLNoIy3EGQmusafYCBs4_VYsMAafyWMF2iSCkUFhJdCjtSDAma5WdBT36wVBOgmzUBlQ7a7i0mu-l0zI9fZY/s1600/dot-footer.png
文字をメイリオに変更
Arialを検索して、その前に
"メイリオ", meiryo,
を追加する。（全部で13箇所）
次に、
Droid Sans
を検索して、その前に同じように追加する。（全部で3箇所）
全体を一気に変更したい場合は、Bloggerのフォントをメイリオに変更する方法 記事タイトル対応を参考にしてください。
大文字を小文字に変更
uppercaseで検索して大文字にしたくないところを削除する。トップメニューの削除
今回は使用しないため表示しないようにする。top-menu
を検索すると2つヒットするので、1つ目にdisplay:noneを追加する。
または、2つ目のtop-nav部分の40行くらいを丸ごと削除する。
タイトルを画像に変更
画像サイズは257px×90pxがよさそう上の余白を消す
.headerを検索して1つ目の35pxを削除するか、任意の数字に変更する。
ナビの背景画像を削除
#navを検索して、
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVn7H6DL2VqQaGVVhEC8jpQbxFdYMc2UakOF1vc-9qlu63cSuXy77Elveij08z6_fjTV-3yp8pzbkOHK-rX4QKz1tzYnX0Yf3lrc1yvn0GQi3TY84I3xrnvDPuqo-5QFJh6RBwq7IAu74/s1600/menu-bg2.png) repeat
検索ボタンの変更
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgSUz6LSsSylFsJESnSEX39_U3glyLclCYCOMPP-7HNqkWATF0ZKrCAxQGydQHRx_L6SKciS_OFdXOnkSDWcCpIYNA1ZJH0my0Hw35bCv-1hZ8Q72bDT7__NlaFodzupqegQfG4WSGFzkG/s1600/icon-search.png
最大幅を1024pxに変更
#outer-wrapperのmax-widthを1196pxから1024pxに変更する。（1箇所）1024px時メニュー表示の変更
@media only screen and (max-width:1024px)の
#menu-main { display: none; }
を削除すると、メニューが表示される。このままだと2つ表示された状態になるためselectnav1を表示しないようにする。
@media only screen and (max-width:1024px){
#selectnav1 {
background: none repeat scroll 0 0 #333;
border: 1px solid #232323;
color: #FFF;
width: 418px;
margin: 8px 0px;
float: left;
}
.selectnav {
display:block;
width:50%;
margin:0;
padding:7px;
}
}
@media only screen and (max-width:768px){
#selectnav1 {
width: 405px;
}
}
@media only screen and (max-width:1024px){
}
@media only screen and (max-width:768px){
#selectnav1 {
background: none repeat scroll 0 0 #333;
border: 1px solid #232323;
color: #FFF;
width: 405px;
margin: 8px 0px;
float: left;
}
.selectnav {
display:block;
width:50%;
margin:0;
padding:7px;
}
}
サイドバー左を非表示
#sidebar-narrowを検索して、上から5個目にdisplay: none;を追加する。右サイドバーの幅を固定
#sidebar-wrapperを検索して、一番上のwidth:30%;
max-width:300px;width:300px;mywrapperの幅を変更
postと同じ幅まで縮小するbody#layout #mywrapper {
width: 70%;
}
div#mywrapper {
float: left;
width: 840px;
}
post-wrapperの幅を変更
@media only screen and (max-width:1066px)の#post-wrapper {
width: 670px;
max-width: 670px;
}
@media only screen and (max-width:1024px)の
#post-wrapper {
width: 730px;
max-width: 730px;
}
上記と一緒にsidebar-wrapperも変更する。
@media only screen and (max-width:1024px)の
#sidebar-wrapper{
width:100%;
max-width:100%;
}
width:300px;検索ボックスの背景色を変更
#searchform inputのbackground:#fff;を変更する。枠をつける場合は、border:none;をborder: 1px solid #fefefe;などに変更する。
このとき、枠の太さを1pxとしたならボタンのサイズを34pxから36pxに変更する。
メニューバーのデザイン変更
上の角を丸くする
.menubar2 liにborder-radius: 4px 4px 0 0;とborder-width: 1px 1px 0 1px;を追加し、マージンとパディングを変更後、背景の色を変更する。.menubar2 li {
position: relative;
margin:0 1px 0;
padding: 0;
border-color: #ccc;
border-image: none;
border-style: solid;
border-width: 1px 1px 0 1px;
border-radius: 4px 4px 0 0;
}
行の高さを低くする
#navと.menubar2 > li > aの48pxをheight:32px;
line-height:36px;
i.fa.fa-home {
font-size: 25px;
padding: 12px 5px;
}i.fa.fa-home {
font-size: 20px;
padding: 7px;
}ここで低くした場合は、検索ボックスのサイズも小さくする必要がある。
今回は、ボックスを30px、ボタンを32pxにして、マージンも0にしました。
個別記事のタイトルを変更
h2.post-title a, で検索して2つ目にfont-weight: bold;タイトル下に公開日を表示
label-info
<data:post.dateHeader/>
記事タイトル下の投稿者名を非表示
.author-info, .time-info, .comment-info, .label-info, .review-info {
margin-right:12px;
display:inline;
}
.author-info{ display: none;}記事下の投稿者名を非表示
以下をすべてコメントアウトします。<div id='author-box'>
<div class='block-head'>
<h3>
About
<data:post.author/>
</h3>
<div class='stripe-line'/>
</div>
<div class='post-listing'>
<div class='author-avatar'>
<script src='/feeds/posts/default?alt=json-in-script&callback=authorshow'/>
</div>
<div class='author-description'>
This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
</div>
<div class='clear'/>
</div>
</div>記事下のシェアボタンを非表示
#share-postで検索して1つ目にdisplay: none;を追加する。関連記事下のコメントボタンを非表示
<div id='top-comment'><div id='top-comment' style='display: none;'>画像がないときの画像を変更
検索結果のイメージ
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxe7EPg3ah7kBJBp8-xrymlxKviAc_599QMru90GySkTPVZO_2QwaGVONO3qJPkA3shYT43WXdVCQ4AWNUtmGqbhXTfvInoWJgSorpdQgr6sNXrsURzdNBr48VtqGV4e-mu_zrOeCkIwdf/w200-c-h150/no-image.pngを変更する。
ヘッダーサイズの変更
.headerの25.7%を23%に変更し、margin: 22px 0;を追加する。次に.header-rightの72.8%を77%に変更する。
これでタイトル横に728pxの広告が設置できるようになります。
人気記事のタイトルサイズ変更
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a
タブウィジェットメニューポイント時の色を変更
3分割部分のサイドバーウィジェットタイトルにマウスを乗せたときの色を変更する。.tab-widget-menu li:hover{
background: #666;
}
関連記事の表示数
デフォルトでは最大3記事表示されるようになっている。これを最大6記事表示するようにします。maxresults=3を検索して、3の部分を変更する。数字は6や9など3の倍数にすると見た目がきれいです。
画像のサイズを変更する場合は、2や4や6などでもきれいに収まります。
関連記事の記事タイトル
デフォルトでは2行分しかスペースがなく、少し長いタイトルを付けると隠れてしまうため、3行分のスペースを確保する。
25px|align|59pxを検索して、25pxを40pxに、59pxを77pxにそれぞれ変更する。
続きを読むを右へ
a.readmoreにfloat: right;を追加トップページのタグ装飾
ガジェットでテキストかHTMLを追加し、タイトルは空欄のままコンテンツ部分に下記のように入力する。
<div class="recent-post-title"><h2><span>ここにタイトル</span></h2></div>
見出しの装飾
h2に追加する。border-left: solid 5px #000;
padding-left: 10px;
上記の装飾の場合は、
border-left: none;検索結果ページのh2装飾
h2.post-title, h1.post-title関連記事の装飾
3つ目に追加する。#related-posts h2フッターのウィジェットタイトルの装飾
3つ目に追加する。#bottombar h2トップページのh2装飾
.recent-post-title h2パンくずリストの変更
パンくずリストが2行になったときに、2行目の文字が見えなくならないようにするために高さを変更します。.breadcrumbsの16pxの部分を削除する。スポンサーリンク
