Blogger無料レスポンシブテンプレートのLinezapをカスタマイズ

Linezapからテンプレートのダウンロードとデモの確認ができます。
下の編集をすることにより、Linezapの良さが失われる可能性があります。
適度に必要な部分だけを編集してください。

HTMLの編集

HTMLを編集する前にバックアップを取ってください。

使われている画像の変更または削除

bodyの背景

background-image: url(http://1.bp.blogspot.com/-VwqGmTI9eaE/U6WXaSyO7EI/AAAAAAAAAlQ/MxL2pg4C8jY/s1600/13.jpg);
削除する場合は、上記を丸ごと削除するかurlの()内を削除する。変更する場合は、urlの()内を新しく使用する画像urlに変更する。

あわせて、backgroundとbackground-colorを任意の色に変更する。

ウィジェットタイトルの背景画像の変更と削除

http://2.bp.blogspot.com/-gzRaJ5AFrCo/U6V7dFE88nI/AAAAAAAAAi0/_DclnNHIuHY/s1600/dot.png
を検索して削除するか、新しく使用する画像urlに変更する。(全部で3箇所)

フッターのウィジェットタイトルも同様に削除または変更する。

http://1.bp.blogspot.com/-MlMosFqnzNQ/U6V71fpyrHI/AAAAAAAAAi8/DroNXqPjOw0/s1600/dot-footer.png
を検索する。(1箇所)

文字をメイリオに変更

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(http://2.bp.blogspot.com/-YxxeRcqP6UI/U6V7A_pfmnI/AAAAAAAAAik/NyzEC4z7POQ/s1600/menu-bg2.png) repeat
を削除して、任意の色に変更する。

検索ボタンの変更


http://4.bp.blogspot.com/-R8OKVUsis3s/UgZEksy0V1I/AAAAAAAAAT4/QtN9sBHMZis/s1600/icon-search.png
を検索して新しいボタン画像のurlに変更する。

最大幅を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;
        }
      }
の#selectnav1以下をコピーして
@media only screen and (max-width:768px){
        #selectnav1 {
          width: 405px;
        }
      }
の#selectnav1以下に貼り付け、418pxを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%;
}
を60%に変更する。

div#mywrapper {
float: left;
width: 840px;
}
を639pxに変更する。

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;
        }
を639pxに変更する。
上記と一緒に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;
を追加する。サイズを変えたい場合は、26pxを変更する。

タイトル下に公開日を表示

label-info
で検索して、2つ目の2個上の上に
<data:post.dateHeader/>
を追加する。

記事タイトル下の投稿者名を非表示

.author-info,で検索して、.author-info{ display: none;}を追加する。
.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&amp;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 &quot;Biographical Info&quot; 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;'>
とする。

画像がないときの画像を変更

検索結果のイメージ

http://3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/w200-h150-c/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
にfont-size:15px;を追加する。数字は任意

タブウィジェットメニューポイント時の色を変更

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;
このままだと記事以外のh2も同じ装飾になってしまうので、1つずつ消していく。
上記の装飾の場合は、
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の部分を削除する。
スポンサーリンク
スポンサーリンク

0 件のコメント :

コメントを投稿