装飾がほとんどないからこそCSSの勉強になる「Twenty Ten」 カスタマイズまとめ

CSSの勉強になる「Twenty Ten」 カスタマイズまとめ

前ページ「「Twenty Ten」に子テーマを作ってカスタマイズ」の続き。

仕事で公式テーマ「Twenty Ten」をいじらなくてはならなくなり、とりあえずテストページにダウンロードしてみたら、装飾のための機能が一切ついてな(略)……ので、CSSでカスタマイズしたまとめ。

Twenty Ten

目次

「Twenty Ten」CSS カスタマイズ

まずはカスタマイズのための子テーマを作る。という話は前ページを見てください。

あわせて読みたい
WordPressの子テーマを自作する方法と「Twenty Ten」をカスタマイズ 仕事で公式テーマ「Twenty Ten」をいじらなくてはならなくなり、とりあえずテストページにダウンロードしてみたら、装飾のための機能が一切ついてない(のは分かってた、...

子テーマを作ったら「有効化」するのは子テーマでなければなりません。「有効化」したら、「外観」→「カスタマイズ」を開く。
では、ザっとまとめていきます。

投稿記事下の「投稿者情報」を削除

あってほしいものは、ほぼついていないのに、なぜこんなものだけ付いているのかよく分からない「この記事を書いた人」もどきのやつ…

CSSの勉強になる「Twenty Ten」 カスタマイズまとめ

/* 投稿記事下の投稿者情報を削除 */
#entry-author-info{
display: none;
}

真っ黒なヘッダー下のメニューバーカラーを変更

 

/* メニューバーカラー変更 */
#access {
background: #556b2f;
display: block;
float: left;
margin: 0 auto;
width: 1000px;
}

記事中、及びサイドバー見出しカスタマイズ

サイドウィジェットの見出しはH3なので、H3の見出し装飾を作ればサイドにも見出しが出来ます。以下はあくまでも一例で。「#f09199」などはカラー設定。

/* 見出しタグ */
h2{
padding: 12px;
margin: 5px;
color: #000;
background: #ebebeb;
border-left: solid 10px #f09199;
}

h3{
padding: 7px;
margin: 5px 0;
background: #dac8e3;
border-radius: 3px;
color:#fff;
font-size:18px;
}

h4{
padding: 5px;
margin: 5px 0;
color: #000;
border: solid 1px #f09199;
}

h5{
padding: 12px;
margin: 5px;
color: #779dc4;
border-bottom: solid 1px #779dc4;
}

「投稿日」と「作成者」を削除

CSSの勉強になる「Twenty Ten」 カスタマイズまとめ

/* 投稿日、作成者いらない */
.entry-meta{
display: none;
}

読みにくいフォントを変更

 

body {
font-family: "メイリオ", "Meiryo";
}

ヘッダーのWordpressクレジットを削除

 

/* wordpressクレジットを削除 */
#site-generator{
display: none;
}

コメントフォームを消す

コメント欄は要らないという方はCSSで隠れます。あくまでも削除ではなくて「隠す」カスタマイズ。

完全に消したければPHPから

<?php comment_form(); ?>

のコードを消さなければならない。けれども、それをやってしまったら戻そうと思った時に手間なので、とりあえず隠しておきます。

 

/* コメントフォーム非表示 */
#respond{
display: none;
}

一覧下の「コメントする」を非表示

コメントフォームを消したのに、どうしても残る一覧ページ下の「コメントする」。おかしいので、これも消してみた。

CSSの勉強になる「Twenty Ten」 カスタマイズまとめ
/* 「コメントする」非表示 */
.comments-link{
display: none;
}

次はCSSでレスポンシブ化

結果、ここまで変わりました。

CSSの勉強になる「Twenty Ten」 カスタマイズまとめ

 

次はCSSでモバイルフレンドリー。

そう……「Twenty Ten」はレスポンシブ化も自分でやらねばならないので……。つづく。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

profile

主にWordpress中心のサイト・ブログ制作&コーダー、カスタマイザー。

2000年からHP制作を始めました。

ハウツーサイトやキュレーションサイトのライター、ブログ作成・運営のお手伝いなどをしております。

お仕事で関わった無料ブログ&Wordpressカスタマイズ案件実績400件以上。

携わったワードプレステーマ30以上。

アナリティクスを観察するのは生活の一部。

Google Analytics個人認定資格取得。 SEOマーケティングアドバイザー資格取得。

SEOに特化したページ作りをめざしています。

 

カスタマイズのご依頼は「一木堂」へ

follow us in feedly 映画@見取り八段 | 映画感想ブログ coconara ss

サポートよろしくお願いします

いつもありがとうございます。

この記事を気に入って下さった方、「寄付してあげてもいいよ」という方がいらっしゃったらサポートしていただけると嬉しいです。

Amazonギフト券- Eメールタイプ - Amazonベーシック
金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

メールのあて先は 「ageru15@gmail.com」です。
※上記のアドレスは投げ銭受け取り専用です。他のメールは受け取れない設定にしてあるのでご注意ください。

aa a
よろしくお願いいたします。

なお、この投げ銭システムに関する記事はこちら→『ブログに「投げ銭」システムをつける方法を考えてみたまとめ』

コメント

コメントする

目次
閉じる