PrincipleというWordPressのテンプレートを使い始めた。
Principleは魅力的なテンプレートなのだが、サイトの幅がちょいと広い。
大きな画面で見るにはいいんだけど、おいらのPCは11インチぐらいしかないのでなんだか見えにくい。
TOPページのアイキャッチ画像もやたらに大きくて目立つ。
ということでWordPressテーマ、Principleの幅とアイキャッチ画像の大きさを変更する方法をご紹介。
WordPressテーマPrincipleの幅を変更
1、【テーマ】⇒【スタイルシート】をクリック。
2、bodyのサイズ変更をする。
body{
min-width: 1080px;
}
＊赤い文字1080の部分。
3、#main-sideをbodyと同じサイズに変更。
#main-side{
width: 1080px; /**** a+b+c */
margin: 20px auto;
overflow:hidden;
}
4、#mainのwidth＋margin-right＋#side{のwidthがbodyサイズと同じになるように調整する。
5、.blog_title{の中のwidth: のサイズをbodyと同じサイズにする。
6、img.header_pic{の中のwidth: のサイズをbodyと同じサイズにする。
＊テキストエディタにスタイルシートの中身をコピーして、1080pxを任意のサイト幅に一括置き換えすると簡単。
7、【ファイルを更新】をクリック。
WordPressテーマPrincipleのアイキャッチ画像の大きさを変更
1、【Principle: loop.php 】をクリックして開く。
2、以下の250を任意のサイズに変更
<?php if(has_post_thumbnail()){ ?>
<?php $title= get_the_title(); the_post_thumbnail(array(250,250),array( 'alt' =>$title, 'title' => $title)); ?>
3、【スタイルシート.php】を開く。
4、スタイルシートの以下の部分を任意のサイズに変更する。
div.thumb-box{
height: 250px;
float: left;
overflow: visible !important;
}
img.wp-post-image{
display: block;
max-width: 250px;
height: auto;
-webkit-box-shadow: 3px 3px 3px #333;
-moz-box-shadow: 3px 3px 3px #333;
-ms-box-shadow: 3px 3px 3px #333;
-o-box-shadow: 3px 3px 3px #333;
box-shadow: 3px 3px 3px #333;
}
5、【ファイルを更新】をクリック。
コメント