オトナポケット

生活を豊かにするモノ、紹介します

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

      2015/09/27

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は色々な先駆者の方たちがいらっしゃるので、知恵をお借りしながらできるのがとてもありがたいところです。とは言いつつ、やっぱりもうちょっと勉強しないといけないかなあ。

スポンサーリンク

オススメ記事はこちら!!

1
【2016年版ランキング】オススメのSIMフリースマホ、51種類を紹介します!

2015年に格安SIMが大手家電量販店に並んだりと本格化し始めてから、同時にSI ...

2
おすすめの面白いアプリ系マンガ、ランキングベスト20!!【マンガボックス、マンガワン、comico、マガジンポケット】

こんちわっす!せーごです。アプリでマンガ読んでますか?僕は毎日、電車の中で読みま ...

201603012 3
mineoのAプラン、Dプランの通信速度を実際に測定、比較してみました。

どうもこんにちは、せーごです。 今年から使い始めたmineo、現在docomoプ ...

 - wordpress