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

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

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

Twenty Ten

「Twenty Ten」CSS カスタマイズ

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

関連記事

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

CSSでカスタマイズ

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

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

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

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クレジットを削除

 

#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」です。

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

 

 

 

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

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