style.cssカスタマイズでトップヘッダー画像を変更する

CSSのカスタマイズでは、

  • wptouchスマホテーマの枠削除
  • トップ画面でのサムネイルの表示拡大
  • ヘッダー画像&幅設定変更

の変更が出来ます。

タイトル画像を変更し、サムネイルを少し大きくすることで、
スマホで見た時のインプレッションが大きく変わってきます。

さらに、スマホテーマの枠を取る事で、
アドセンス等の広告が、記事の中に自然にとけ込みます。

この記事はスマホ最適化、
WPTouchカスタマイズの記事です。
まだ、WPTouchを導入していない場合はコチラへどうぞ
WPtouchカスタマイズの目次はこちらへ

 

wptouchトップカスタマイズ
 

/public_html/wp-content/plugins/wptouch/themes/tako/
の中にある、『style.css』をpcに保存、
テキストエディタで開きます。

WPtouchのstyle.cssファイルをカスタマイズする

スマホテーマの枠を取る

style.css の788行目あたりに

.post {
background-color: #fff;
padding: 10px;
margin-bottom: 12px;
margin-right: 10px;
margin-left: 10px;
border: 1px solid #b1b1b1;
border-radius: 8px;
position: relative;
z-index: 0;
-webkit-box-shadow: rgba(255,255,255,.8) 0px 1px 0px; box-shadow: rgba(255,255,255,.8) 0px 1px 0px;
}

とありますので、

.post {
background-color: #fff; padding: 10px;
border-bottom: 1px solid #999;
}

に書き換えます。

 

トップ画面でのサムネイルの表示拡大

style.css の2228行目あたりから

.wptouch-post-thumb-wrap {
position: relative;
margin-right: 8px;
display: block;
margin-bottom: 4px;
width: 46px;
height: 46px;

float: left;
}

.wptouch-post-thumb img {
width: 46px;
height: 46px;

とありますので、

赤文字の
width: 46px;
height: 46px;

この部分を

width: 90px;
height: 90px;

へ書き換えます。

サムネイル下側の影を消したい時

さらに、サムネイル下側についている影を消したい時は
先ほどの部分の後ろに、
overflow:hidden;を、以下のように付け足します。

.wptouch-post-thumb-wrap {
position: relative;
margin-right: 8px;
display: block;
margin-bottom: 4px;
width: 90px;
height: 90px;
float: left;
overflow:hidden;
}

.wptouch-post-thumb img {
width: 90px;
height: 90px;

このようになります。

 
wptouchサムネイル拡大
 

タイトル画像&幅設定変更

作成したタイトル画像をサーバーにアップします。
このサイトの場合だと、ダッシュボードの設定変更解説ページ
で作成した「tako」フォルダ内に、「img」フォルダを作成し、
そこに画像を入れています。
このような感じです。

/wp-content/plugins/wptouch/themes/tako/img/title.jpg

今回、画像のサイズは、横250、縦50で作成しました。

cssの176行目あたりから、赤文字の部分を書き換えます。

#headerbar {
width: 100%;
background-position: 0 0;
background-repeat: repeat-x;
height: 65px;
border-bottom: 1px solid #1e1e1e;
font-size: 19px;
-webkit-touch-callout: none;
}

#headerbar-title {
text-shadow: #242424 -1px -1px 1px;
padding-top: 10px;
padding-left: 10px;
display: block;
margin: 0;
border-style: none;
padding-bottom: 4px;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 85%;
font-weight: bold;
height: 50px;
}

#headerbar-title a {
letter-spacing: -1px;
position: relative;
display: block;
width: 280px; /*タイトル画像の横幅*/
height: 50px; /*タイトル画像の高さ*/
text-indent: -9999px;
overflow: hidden;
background: url(‘http://ここに画像のurlを記入’) no-repeat 0 0; /*タイトル画像の場所*/
}

タイトル画像が無事に変更になったら、
背景色の変更とタイトルアイコンを削除します。

 
ヘッダー部分の背景色は、ダッシュボードの設定から出来ます。

ヘッダー背景色

 
タイトルアイコンの削除は headerカスタマイズ で行います。

ヘッダーカスタマイズはこちらから

 

このエントリーをはてなブックマークに追加


ビジネスメール講座を無料で配信中!

多湖弘明

はじめの一歩

アフィリエイトとは?
自分の得意な事、好きな趣味などをブログやインターネットを使って発信し、広告収入を得てみませんか?特に難しい技術や知識はいりません。その方法を知っているか、知らないか。ただそれだけの差です。
実践して報酬を手にしよう!
こんなに簡単!広告収入の仕組みを解説します。実際にやってみてください。パソコンとインターネットがあれば、誰もが数万円のお小遣いならすぐ稼げます。一度限りの贅沢に使うか、継続した数万円の為に使うかは、自分次第。
チェンジザワールド!!
この先、このままでは不安。何かしなきゃと、わかってはいるけど、何もしていない。 何をしていいのか、わからない。 考えてるだけじゃなく、空いた時簡に収入を得れるように、今こそ、はじめの一歩を踏み出しましょう。

2件のコメント

  • タロウ

    こちらの記事を参考に思い通りにカスタムできたのですが、トップページサムネイル上に表示される赤丸のコメント件数がおかしく表示されます。コメントが無いのに件数が表示されたり、コメントがある記事に表示されなかったりします。具体的には、古い記事にコメントをすると最新記事に件数がまとめて表示されてしまいます。これを解消する方法はありますでしょうか。

  • タロウさま。

    はじめまして、コメントありがとうございます。
    解決法を調べて、更新していこうと思います。

    申し訳ありませんが、
    気長にお待ちください。

    今後とよろしくお願いします。

tako にコメントする コメントをキャンセル