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

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

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

Twenty Ten

「Twenty Ten」CSS カスタマイズ

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

関連記事

仕事で公式テーマ「Twenty Ten」をいじらなくてはならなくなり、とりあえずテストページにダウンロードしてみたら、装飾のための機能が一切ついてない(のは分かってた、知ってたけれど改めて見ると悲しくて笑う)どころか子テーマすらないという…[…]

customize

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

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

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

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」はレスポンシブ化も自分でやらねばならないので……。つづく。

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

 

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


Amazonギフト券- Eメールタイプ – Amazonベーシック


金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

メールのあて先は 「ageru15@gmail.com」です。

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

 

 

 

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

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