クールでかっこいいWordpressテーマVer.7のカスタマイズ

クールでかっこいいWordpressテーマVer.7のカスタマイズ

「クールでかっこいいWordpressテーマVer.7」のカスタマイズ方法について解説します。

■メニューの設定

 ・入力欄[メニューの名前]に「topmenu」と入力。
 ・[外観]→[メニュー]。[「topmenu」で設定します。]にチェックを入れる。


■ターゲットとするブラウザの種類を3種類から4種類に変更する

 「クールでかっこいいWordpressテーマVer.7」は、デフォルトでは、PC、iPad、iPhoneの3種類にのみ対応しており、今後増えてくることが予想されるNexus7などのタブレット端末には対応していません。
従って、タブレット端末でもキレイに見えるようにする設定を行います。

/* ------ ~ 767px ------ */
@media screen and (max-width: 767px) {
↓編集
/* ------ ~ 767px ------ nexus7縦(640px) */
@media screen and (max-width: 767px) {
	#gnav nav ul li a {padding: 8px 6px;}
}

/* ------ ~ 599px ------ nexus7縦(600px) */
@media screen and (max-width: 599px) {


■メニューの幅と高さを変える。

 1.PC向け(幅980px以上)
#gnav nav ul {float: left;}
#gnav nav ul li {float: left;}
#gnav nav ul li a {display: block;padding: 8px 35px 6px;border-right: solid 1px #CCCCCC;font-size: 93%;}
↓編集
#gnav nav ul {list-style-type: none;}
#gnav nav ul li {width: 20%; float: left; margin: 0;text-align: center;}
#gnav nav ul li a {display: block;padding: 10px 25px 8px;border-right: 1px solid #CCCCCC;font-size: 110%;}
#gnav nav ul li:last-child a{border-right: 0px;}


 2.iPad向け(幅768~979px)
/* ------ ~ 979px ------ */
@media screen and (max-width: 979px) {
	#gnav nav ul li a {padding: 8px 20px 6px;}
↓編集
/* ------ ~ 979px ------ iPad縦(768px) */
@media screen and (max-width: 979px) {
	#gnav nav {width: 100%;}
	#gnav nav ul li a {padding: 10px 0px 8px;}

なお、上記の、
#gnav nav {width: 100%;}
の記述は重要です。この一行の記述により、メニューの幅がブラウザの幅に合わせてフレキシブルに変わるようになります。


■メニューの個数に応じて、メニューの幅を自動で調節する。

 ↓この行の「width: 20%」のところを「width: 25%」(メニュー4つ)などに変更。
#gnav nav ul li {width: 20%; float: left; margin: 0;text-align: center;}


■ipad、nexus7でのサイドバーウィジットの幅を変える。(幅48%→100%)

#sidebar1 {float: left ; width: 48%;}
#sidebar2 {float: right; width: 48%;}
↓編集
#sidebar1 {float: left ; width: 100%;}
#sidebar2 {float: right; width: 100%;}


■サイトのイメージ色を変える。

 1.下記2つの画像ファイルを加工。

  menu_bg_orig.png
  topmenu_bg_orig.png

 2.[外観]→「テーマ編集」。

  ◆スタイルシートstyle.css(3箇所)

  ・「#ptitle」の行: #4E7AC7 → #3c3c9a
  ・「#gnav」の行: #4E7AC7 → #3c3c9a
  ・「footer」の行: #4E7AC7 → #3c3c9a

  ・「#gnav nav ul li a」の「background: linear-gradient」の行:

    グラデーション上  #7FB2F0 → #5f5fe2
    グラデーション下  #334488 → #3434a2

  ・iPhone向けのメニューボタンも同様に変更(一括置換)。

    グラデーション上  #7FB2F0 → #5e5ef2
    グラデーション下  #334488 → #3535a3

    グラデーション上  #8bbaf3 → #5e5ef2
    グラデーション下  #4258af → #3535a3


■スマートフォンでピンチ(二本の指でサイトを拡大表示)できるようにする。


↓編集


■Youtube動画のサイズをレスポンシブにする。

 ・スタイルシートstyle.cssの末尾に下記を追記。

// Youtube動画のサイズを可変にする。
.video-wrapper {
	width: 600px;
	max-width: 100%;
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

 ・Youtube動画タグを、
で囲む。


■ファビコンの追加。
 ・ヘッダーheader.phpに下記を追記。



■フッター部分にあるメニューの文字サイズを大きくする。

 ・フッターfooter.phpの下記の部分を編集。
  (つまり「font-size:」について、「79%」となっているのを「120%」などに書き換える。)
footer ul li {display: inline-block;*display: inline;*margin-bottom: 12px;padding: 0 10px 0 15px;line-height: 100%;font-size: 79%; color: #FFFFFF;border-left: solid 1px #CCCCCC;*zoom: 1;}
↓編集
footer ul li {display: inline-block;*display: inline;*margin-bottom: 12px;padding: 0 10px 0 15px;line-height: 100%;font-size: 120%; color: #FFFFFF;border-left: solid 1px #CCCCCC;*zoom: 1;}

  
■「スマホにおいてだけ改行をしたい」という箇所でそれを実現する。

 1.まず、改行したい位置に下記を追記。


 2.次に、
/* ------ ~ 979px ------ iPad縦(768px) */
@media screen and (max-width: 979px) {
の直前に
.br-sp {display:none;}
を追記。

 3.最後に、
/* ------ ~479px ------ ガラケー */
@media screen and (max-width: 479px) {
の直下に
.br-sp {display:inline; line-height:12pt;}
を追記。


■カテゴリーの階層表示をより分かりやすくする。
 
 1.小カテゴリーのインデントを大きくする。
  ↓この行の「text-indent:」の値を「10px」から「30px」などに変更。
#sidebar section ul.children li{border-top: solid 1px #D5D5D5; text-indent: 10px;}

 2.ウィジットについて、階層表示するように設定する。

  [外観]→[ウィジット]→[サイドバー上S]→[カテゴリー]
  と進み、「階層を表示」にチェックを入れて保存。


■特定の固定ページだけ、1カラムにする。

 1.「page.php」(固定ページテンプレート)を複製して「page2.php」を作成する。

  中身をカスタマイズするか、あるいは↓これをそのままコピーする。

Top
 2.「style.css」に、上記ソースの「contents2」用のスタイルを追記する。

/* ------ コンテンツ ------ */
(省略)
article section a.post-column:hover{background-color: #EFEFEF; text-decoration: none;display: block;}
  の塊の下に、
/* ------ コンテンツ2(1カラム固定ページテンプレート) ------ */
#contents2 {width: 900px;padding-bottom: 20px;}
.main-title {margin: 0; padding: 0;font-size: 143%;font-weight: bold;line-height: 158%;color: #333333;-webkit-text-shadow: 1px 1px 2px #BBBBBB;text-shadow: 1px 1px 2px #BBBBBB;}
.contents-title{padding: 20px 0 10px 0;font-size: 143%;font-weight: bold;line-height: 143%;color: #333333;-webkit-text-shadow: 1px 1px 2px #BBBBBB;text-shadow: 1px 1px 2px #BBBBBB;}
.posts-title{padding: 0 0 5px;font-size: 129%;font-weight: bold;line-height: 143%;color: #333333;-webkit-text-shadow: 1px 1px 2px #BBBBBB;text-shadow: 1px 1px 2px #BBBBBB;}
article section {padding: 10px 5px;border-top: solid 1px #CCC;}
article section:first-child {border-top: none;}
article section h1{padding: 10px 0; font-size: 129%; font-weight: bold; color: #333333;}
article section h2{padding: 10px 0; font-size: 115%; font-weight: bold; color: #333333;}
article section h3{padding: 10px 0; font-size: 115%; font-weight: bold; color: #333333;}
article section.info {margin: 0;padding: 0 5px;border-top: none;clear: both;}
article section.top {margin: 0;padding: 0 5px 20px;border-top: none;clear: both;}
article section p{line-height: 150%;}
article section .doc{padding: 10px 0 10px 10px;line-height: 150%;}
article section p.list{line-height: 150%;font-size: 86%;}
article section .img-set{float: left; padding-right: 10px;}
article section a.post-column {text-decoration: none;display: block;padding: 5px 36px 5px 5px;color: #333333; background: url("img/arrow_01.png") no-repeat center right;}
article section a.post-column:hover{background-color: #EFEFEF; text-decoration: none;display: block;}
を追記。

そして、
#contents {float: none;width: 94%;margin: 0 auto;padding-bottom: 0;}
  の直下に、
#contents2 {float: none;width: 94%;margin: 0 auto;padding-bottom: 0;}
  を追記。

  これで1カラムの固定ページテンプレートが追加されました。

 4.追加した固定ページテンプレートを、各固定ページで適用する。

  [固定ページ]→「編集」と進み、
  [ページ属性]の欄にある[テンプレート]リストボックスにて、
  “固定ページテンプレート2”を選択して保存する。


■カテゴリーページに表示されるアイキャッチ画像(NoImageという画像)を表示させないようにする。
 (記事にアイキャッチ画像を適用しない場合)

 カテゴリーテンプレートcategory.phpの↓この部分をコメントアウト。
echo '';


■リンクの色を変える。

 「a:link」または「a:active」と検索し、ヒットした箇所を修正する。

 
ひとまず以上です。

関連記事

  1. JPEG画像の圧縮ソフト
  2. Blokenkinkcheckerのリンク切れ
  3. AmebloBIZ3の不具合
  4. EclipseでPerlのデバッグ環境を構築する手順
  5. WordPressのバックアップ
  6. cronの設定・書き方
  7. WordPressでトップページ以外が表示されない
  8. お名前.com(KVM)の初期設定
  9. WordPressの投稿入力欄のサイズを大きくする方法
  10. WordPressのインストール方法

JPEG画像の圧縮ソフトとして有名な「Jpeg-mini」。

この「Jpeg-mini」と、「リサイズ超簡単!Pro」を組み合わせることで、「Jpeg-mini」単体の時よりも13.5%、小さく圧縮できましたので、ここにメモ。

手順は以下の通り。

1.「リサイズ超簡単!Pro」で画像の大きさを(例えば50%)で圧縮。
2.「Jpeg-mini」で「Resize Photos」というチェックを外してフォルダごと一括圧縮。

これにより、「Jpeg-mini」単体で50%リサイズ付き圧縮するよりも、13.5%の高圧縮を実現します。

「リサイズ超簡単!Pro」
リサイズ超簡単!Pro  
「Jpeg-mini」
JPEGmini

関連記事

  1. Blokenkinkcheckerのリンク切れ
  2. AmebloBIZ3の不具合
  3. EclipseでPerlのデバッグ環境を構築する手順
  4. WordPressのバックアップ
  5. cronの設定・書き方
  6. WordPressでトップページ以外が表示されない
  7. お名前.com(KVM)の初期設定
  8. WordPressの投稿入力欄のサイズを大きくする方法
  9. クールでかっこいいWordPressテーマVer.7のカスタマイズ
  10. WordPressのインストール方法