WordPressで作る
今日からはじめるウェブサイト

Snipets

ここでは、カスタマイズの際に改めて追記するコードや、やや長い入力がある箇所を掲載しています。
元のコードを一部削除するなどの場合は記載しておりません。
※Xの文字列や、細かい数値はご自身の好みの文字列や数値に置き換えてください。
※修正箇所は、書籍を読んで作業してください。
※[コピーしたURL] と指定してある場合の [] はコードに含みません。

P.125
■フォントの色を変更する

.mainContents .entryText p {
  margin:0 0 30px;
  color: #XXXXXX;
}

P.126
■フォントの大きさを変更し、行間を調整する
.mainContents .entryText p {
margin:0 0 30px;
color: #XXXXXX;
font-size: XXpx;
line-height: X.X;
}

P.127
■フォントを太字にする
.mainContents .entryText p {
margin:0 0 30px;
color: #XXXXXX;
font-size: 18px;
line-height: 2.5;
font-weight: bold;
}

■文章を右寄せにする
.mainContents .entryText p {
margin:0 0 30px;
color: #XXXXXX;
font-size: 18px;
line-height: 2.5;
font-weight: bold;
text-align: right;
}

P.128
■スマホに対応させる
.mainContents .entryText p {
margin:0 0 30px;
color: #XXXXXX;
font-size: 18px;
line-height: 2.5;
font-weight: bold;
text-align: right;
}

P.135 手順04
■タイトルを画像(ロゴなど)に置き換える
<h1 class=”sitelogo”><a href=”<?php echo home_url( ‘/’ ); ?>”><img src=”[コピーしたURL]” alt=”<?php bloginfo(‘name’); ?>” title=”<?php bloginfo(‘name’); ?>” /></a></h1>

P.139
■Big Button
<a href=”http://b.hatena.ne.jp/entry/[url]” class=”hatena-bookmark-button” data-hatena-bookmark-title=”[title]” data-hatena-bookmark-layout=”vertical-balloon” title=”はてなブックマーク”><img src=”http://b.st-hatena.com/images/entry-button/button-only.gif” alt=”はてなブックマーク” width=”20″ height=”20″ style=”border: none;” /></a><script type=”text/javascript” src=”http://b.st-hatena.com/js/bookmark_button.js” charset=”utf-8″ async=”async”></script>

■Small Button
<a href=”http://b.hatena.ne.jp/entry/[url]” class=”hatena-bookmark-button” data-hatena-bookmark-title=”はてなブックマーク” data-hatena-bookmark-layout=”standard-balloon” title=”はてなブックマーク”><img src=”http://b.st-hatena.com/images/entry-button/button-only.gif” alt=”はてなブックマーク” width=”20″ height=”20″ style=”border: none;” /></a><script type=”text/javascript” src=”http://b.st-hatena.com/js/bookmark_button.js” charset=”utf-8″ async=”async”></script>

P.143
■背景画像の繰り返しの方法を変える
※画面全体にパターン画像を繰り返す場合
background: #FFF url(images/bg.gif) repeat center top;

P.148
■本文の幅を変える
手順03
.mainContents .entryText .photo img {
margin:0 0 6px;
max-width:100%;
}

P.149
■POINT
.mainContents .entryText .photo img {
margin:0 auto 6px auto;
display: block;
}

P.155
■正方形にする
echo ‘<img src=”‘ . get_bloginfo(‘template_directory’) . ‘/images/default_square.png’ . ‘” width=”300″ height=”300″ alt=”thumbnail” />’;

P.172
■本文のフォントを明朝にして大きくする
.mainContents .entryText p {
margin: 0 0 30px;
font-family: “Georgia”, “Hiragino Mincho ProN”, serif;
font-size: 14px;
}
■スマホに対応させる
.mainContents .entryText p {
margin:0 0 10px;
font-family: “Georgia”, “Hiragino Mincho ProN”, serif;
font-size: 14px;
}

P.174
■アイキャッチ画像のフォントを変更する
div.excerpt {
font-family: “Georgia”, “Hiragino Mincho ProN”, serif;
font-size: 13px;
}

div.excerpt {
font-family: “Georgia”, “Hiragino Mincho ProN”, serif;
font-size: 13px;
}

P.177
■手順04
66行目→86行目
<h1 class=”sitelogo”><a href=”<?php echo home_url( ‘/’ ); ?>”><img src=”[アップロードした画像のURL]“/></a></h1>

■手順06
<h1 class=”sitelogo”><a href=”<?php echo home_url( ‘/’ ); ?>”><img src=”[アップロードした画像のURL]“/></a></h1>

P.182
■手順12
<?php do_action(‘slideshow_deploy’, ’29′); ?>

P.186
■手順03
<?php if (has_post_thumbnail()) { ?>
<p class=”thumb”><a href=”<?php the_permalink(); ?>”>
<?php the_post_thumbnail(); ?>
</a></p>
<?php } ;?>

P.187
■手順06
<?php if (has_post_thumbnail()) {?>
<p class=”thumb”><a href=”<?php the_permalink(); ?>”><?php the_post_thumbnail(); ?></a></p>
<?php } ;?>

P.189
■手順02
@media screen and (min-width: 641px){
div.mainContents{
float:right;
}
div.sideContents{
float:left;
}
}

P.191
■手順03
div.mainContents{
float:none;
width: 100%
}
div.sideContents{
float:none;
width: 100%;
}

P.192
■手順03
div.sideContents{
background-color: #XXXXXX;
}
.sideContents:before,
.sideContents .sideContentsFoot:before {
border-right: 12px solid #XXXXXX;
}
.sideContents:after,
.sideContents .sideContentsFoot:after {
border-left: 12px solid #XXXXXX;
}
.sideContents .sideContentsFoot {
background: #XXXXXX;
}

P.194
■手順03
div.sideContents{
background-color: #XXXXXX;
}
.sideContents:before,
.sideContents .sideContentsFoot:before {
border-right: 12px solid #XXXXXX;
}
.sideContents:after,
.sideContents .sideContentsFoot:after {
border-left: 12px solid #XXXXXX;
}
.sideContents .sideContentsFoot {
background: #XXXXXX;
}

.sideContents .wigetWrap h3.widgetTitle{
color: #XXXXXX;
border-color: #XXXXXX;
}
.sideContents,
.sideContents .sideContentsInner a{
color: #XXXXXX;
}