カッコイイお父さんを目指すブログ

Otona-Pocket

wordpress

WordPressテーマ「マテリアル」におけるヨメレバ、カエレバのカスタマイズ

更新日:

22
どうもこんにちは、相変わらずphpとかcssの苦手なおとぽけです。

さて、先日マテリアルにWordpressのテーマを変更した事で、stinger5の時にあーでもない、こーでもないといいながらやっていたブログのカスタマイズが全部吹っ飛んでしまいました(自慢できるほどカスタムはしてませんでしたが・・・)。

中でも、かん吉さんが提供されているヨメレバ、カエレバのカスタマイズ用のcssが吹っ飛んでしまったのが、一番の痛手。今まではstinger5でやるならこれで大丈夫!!という、ちゅんこさんのカスタマイズ方法をそのまま使わせて頂いておりました。

でも、マテリアルではどうしたらいいのかわからない・・・。そこで試行錯誤しながらちゅんこさんのcssをはめ込む場所を試行錯誤する事で、stinger5で表示していた時と同じようにできましたのでこちらを報告します。

カスタマイズ方法

まずは、カスタマイズ用のcssの貼る場所の確認です。テーマ編集からスタイルシート(style.css)の中から下記を探し出します。

@media screen and (max-width: 1057px) {
body{
	font-size: 19px;
	min-width: 0; 
	width: 100%;
}

私の場合は、この上にちゅんこさんの提供されている一つ目のcssをそのまま使用させて頂きました。全文はちゅんこさんのブログからコピーをお願いしたいのですが、下記のコードで始まるものを「@media screen and (max-width: 1057px」より上の行に貼り付けます。

/*--------------------------------------
  ヨメレバ・カエレバ
--------------------------------------*/
.booklink-box, .kaerebalink-box{
	width:85%;
	margin: 1em auto 1em auto;
	padding: 5%;

二つ目の場所の確認です。まずは下記のコードを探し出します。

@media screen and (max-width: 350px) {
body{
	font-size: 15px;
}
.big-box{
	padding-left: 4%;
	padding-right: 4%;
}

.min-box{
	padding-left: 3%;
	padding-right: 3%;
}
.min-more-link{
	right: 3%;
}
.min-box .post-info{
	padding: 5px 0 0 5px;
}

.kanren .thumb-box{
	height: 67px;
}

.side{
	padding-left: 3%;
	padding-right: 3%;
}
}

次はこのコードの下の行(さっきと逆です)から、同じくちゅんこさんのコードの貼り付けを行います。こちらもコード全文はちゅんこさんのブログからお願いします。

/*--------------------------------------
 ヨメレバ・カエレバ
--------------------------------------*/
.booklink-box, .kaerebalink-box{
	width:90%;
	margin:20px auto;
	padding:20px;
}

これでOKです。きちんとコードがセット出来ていれば下記のように、ヨメレバ、カエレバが上手く調整されたボックスができると思います。ちなみに私がWordpressを始める時に初めて見た本はこちらです。

まとめ

phpやcssのカスタマイズの壁にぶち当たるたびに、ブログのデザインのイメージはあっても実現力がないため、いっつも悩みますね。ただ、Wordpressは色々な先駆者の方たちがいらっしゃるので、知恵をお借りしながらできるのがとてもありがたいところです。とは言いつつ、やっぱりもうちょっと勉強しないといけないかなあ。

<スポンサーリンク>

-wordpress

Copyright© Otona-Pocket , 2017 AllRights Reserved.