10分で着替えてメイクに1日以上かかっちった stinger3の子テーマ「かしわもち」を着てからのカスタム

公開日: : 最終更新日:2014/04/06 wordpress ,

  

wordpressで無料国産テーマと言えば「stinger3」。というくらい何気に見ているブログでも本当によく使用されています。もちろんこのブログでも使用させていただいてます。

そして「stinger」と言えば子テーマです。出不精の管理人は、自分のデザインセンスに光を見出せなかったので、やっぱりセンスのある方から拝借 (ーー;)

拝借させて頂いた先は、stinger使いなら知らない方はまずいないでしょう、こちら

今見たら、上記タイトルは既に1,500viewオーバーしてました。

おみそれしやした

m(_ _)m

せっかくの超おしゃれな新子テーマを使わせて頂けるのに、使わない訳がありません。さっそく拝借&カスタム開始です。

管理人のカスタムはこんな感じ。

デモサイト

近々に稼働予定です。

作者のQtaro様、今回もありがとうございます。

SponcerdLink

管理人のカスタム備忘録?

今回の子テーマはバックイメージを全配置で固定させたスタイルになっていますので、まず重要なのはバックイメージです。これを崩してはどんなカスタムをしても第1印象を悪くしてしまいます。

管理人も以前はデザインの担当をやっていました。主に飲食関係のメニューやパンフその他サイトの画像などですが、何が一番大変か分かりますか?

写真なんです。これは写真を使うことに限定された話ですが、どんなにフォトショでいじっても、元の画像が悪ければきれいなデザインは作れません。

ですから今回の子テーマを利用される場合は、バックイメージの選定は慎重に行ったほうが良いと思います。

背景の画像を決める

管理人のバックイメージはこちらのサイトからまたまた拝借。

ついでにもう一つおすすめは

なんかもう人様の力を借りてしか生きれなくなってます。

そんなことは気にしない。プロに任せる!!

後は自分好みにカスタムするだけ。今回は家内の希望でフルードグリッドレイアウト。なんてカッコイイ名前があるもんだから使ってしまった。

見た目の大きな変化は、サイドを右から左へ、ホームのメイン内の記事配置をあまり好きではないのですが、グリッドっぽくしてみました。記事のボックスを縦長にしたくなかったので、本文の抜粋はサムネイルの中にマウスオーバー時の透過を利用して見えてくるようになっています。

CSSのみでアニメーションをつけても良いかな?とかも考えたのですが、パソコン以外の端末からでは見えない効果なので、そこまではいいか?と都合の良い妥協をしました。また機会があれば何か実装してみます。

サイドバーの記述をメインの前へ

これは別にPHPの記述を変えなくても対応できます。管理人の気分です。昔、後述のサイドバーを左に持っていこうとして、floatが上手く使えず大苦戦した記憶があるからかも。でもW3Cではブロックの構成とHTMLの記述を合わせるべきとか言っていたと思うのでおk。

header.phpの最後、メインの前に、サイドバーの読み込み処理をします。

元はこうなってます。

</pre>
<div id="wrap">
<div id="wrap-in">
<div id="main">

“wrap”の後にスマホとPCの分岐をしておきます。ここではPCならサイドバーを呼び出すという形です。

</pre>
<div id="wrap">
<div id="wrap-in"><!--?php if(is_mobile()) { ?-->
<!--?php }else{?-->
<!--?php get_sidebar(); ?-->
<!--?php } ?-->
<div id="main">

スマホと分岐の記述をサイドバー呼び出しの前に入れないと、スマホの表示に影響がかなり出ます。忘れずに。

footer.phpにも同様の記述を。footer.phpで上記コードの閉じタグがありますので、ここでもう一度スマホとの表示分岐を。

元はこうです。初めの3行、

<!-- /#main -->
<!--?php get_sidebar(); ?-->

コメントアウトで、前述の閉じタグがメインのものであると説明してくれてありますので、その下に、

<!--?php if(is_mobile()) { ?-->
<!--?php get_sidebar(); ?-->
<!--?php }else{ ?-->
<!--?php } ?-->

function.phpで先に記述をしても良いのですが怖いのでいじりません。というよりその辺のことに関しては詳しくありません。

home.phpの変更箇所

サムネイルの画像サイズを変更します。これは記事のボックスの横幅の設定にもよりますので、最終的には好みのサイズに調整してください。

</pre>
<!--ループ開始-->
 <div id="dendo"> </div>
 <!-- /#dendo -->
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <div class="entry">
 <div class="sumbox"> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
 <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
 <?php
$title= get_the_title();
the_post_thumbnail(array( 150,150 ),
array( 'alt' =>$title, 'title' => $title)); ?>
 <?php else: // サムネイルを持っていないときの処理 ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="150" height="150" />
 <?php endif; ?>
 </a> </div>
 <!-- /.sumbox -->
<pre>

11行目と14行目のサイズ指定を今回は横幅200に変更しました。

</pre>
<!--ループ開始-->
 <div id="dendo"> </div>
 <!-- /#dendo -->
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <div class="entry">
 <div class="sumbox"> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
 <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
 <?php
$title= get_the_title();
the_post_thumbnail(array( 200,150 ),
array( 'alt' =>$title, 'title' => $title)); ?>
 <?php else: // サムネイルを持っていないときの処理 ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="200" height="150" />
 <?php endif; ?>
 </a> </div>
 <!-- /.sumbox -->
<pre>

という感じです。最後にダッシュボードから「設定」、「メデイア」と進み、サムネイルのサイズを200,150に変更で完了です。

single.phpの変更

投稿記事の表示で読み込まれる部分ですが、パンくずが記事外に位置しているのをこちらもPHPで変更。

<!--?php get_header(); ?--></pre>
<div class="kuzu">
<div id="breadcrumb">
<div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="<?php echo home_url(); ?>"> <span itemprop="title">ホーム</span> </a> ></div>
 <!--?php $postcat = get_the_category(); ?-->
 <!--?php $catid = $postcat[0]--->cat_ID; ?>
 <!--?php $allcats = array($catid); ?-->
 <!--?php  while(!$catid==0) {     $mycat = get_category($catid);     $catid = $mycat--->parent;
 array_push($allcats, $catid);
}
array_pop($allcats);
$allcats = array_reverse($allcats);
?>
 <!--?php foreach($allcats as $catid): ?-->
<div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">></div>
 <!--?php endforeach; ?--></div>
</div>
<pre>
<!--/kuzu--></pre>
<div id="dendo"></div>
<pre>
<!-- /#dendo --></pre>
<div class="post"><!--ループ開始--><p style="margin-bottom:5em;">
 <!--?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?-->
<div class="kizi">
<h1 class="entry-title"><!--?php the_title(); ?-->

3行目から23行目までの”kuzu”の括りを、まるっとクラス名”kizi”の後に入れ込みます。これで記事枠内の先頭にパンくずが表示されるようになります。

<!--?php get_header(); ?--></pre>
<div id="dendo"></div>
<pre>
<!-- /#dendo --></pre>
<div class="post"><!--ループ開始-->
 <!--?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?-->
<div class="kizi">
<div class="kuzu">

これで残すはCSSの変更のみとなりました。

CSSの変更点

今回のカスタムの中で、見た目で大きく変わる部分はホーム画面のメインです。サイドは微調整のみでほとんどいじってません。

フルードグリッドレイアウト?(そもそもstingerってレスポンシブじゃないレスポンシブだから、この表現は間違い)みたいにすることにあります。

画面の表示範囲を拡大していくと、記事の並びは3列から2列、1列になっていきます。逆に縮小していけば、横に並ぶ記事の数は増えていきます。リキッドレイアウトは、このように2列サイドバーを、表示画面によって1列にしたり、メインの下に持ってきたりするわけです。

どうするのかというと、メインの横幅を100%にして、サイドの幅と余白分をマイナスマージンにするです。今回はこれで対応。

ちょっと待って、

考えさせてくれ。

提案です!

CSSの変更点はちょっと多すぎるため、ここでは書き切れません。ごめんなさい。

もし、同じように配置して、そこから更に自分なりの変更をしたいという方が見えたら、コメント覧からでもご一報ください。CSSファイルを差し上げます。

管理人が変更した箇所を当ブログでファイルとして配布するのは再配布ですし、Qtaro様にも失礼なので、もし万が一センスのない管理人のデザインが気に入った方はご連絡ください。

ここまできて申し訳ありませんが、その方が変更するのも早いですし、管理人も助かります。

とんでもない締めくくりで申しわけ m(_ _)m

  
  
   
sponcerd Link
  

ランキング TOP10

smartphone

accessory

books

関連記事

Gray Grid

WordPressのテーマ「stinger3」でわたしが使っている子テーマはコレ!

stinger3を使用したいろんな方のブログにお邪魔しています。みなさんほんとに綺麗にデザインを作ら

記事を読む

stinger公式サイト

このサイトは「stinger3」を使用しています。wordpressでブログを作る。

今更ではありますが、このサイトのテーマで利用している「stinger3」の紹介です。 &nbs

記事を読む

FC2

FC2ブログは、やはりグーグル八分なのか?wordpressでブログを作った理由とは。

SEOの検証をする目的と、それぞれのサービスの利点を活用しようと、3つの無料ブログサービスを

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

お得な口座開設

  • XM(旧XEmarkets)

    おすすめキャッシュバックサイト

    キャッシュバックサイトの老舗

PAGE TOP ↑