WordPressテーマ 新着情報一覧

$posts = get_posts('numberposts=6&category=1');
global $post;
?>
if($posts): foreach($posts as $post): setup_postdata($post); ?>

http://wp-site.biz/?p=2059 続きを読む →]]> 今回ご紹介するプラグインは面白い動きのブックマークボタンを挿入する『wp-share-list』というプラグインです。IE7、Firefox、クロムでも同じ動きをするのでこのサイトでも利用しています。この記事の下に表示していますのでマウスをのせてみてください。ピョコッとアイコンが動いて影もいっしょに動作します。

とても良いと思うのですが問題点は中国発のプラグインなのでブックマークボタンが中国のサイトのものばかり・・・
ただしTwitter、Delicious、Facebook、google Buzzはあるのでこれだけでも良いかなと思っています。

インストール

1　プラグイン新規追加で『wp-share-list』を検索する。

2　『インストール』＞『有効化』

3　右下の画像を見ながらセッティング

左の『設定』の項目に『收藏分享列表』というリンクが出現しますのでクリックをして現れる画面が左の画面です。

※左の画像をクリックしてこのとおりに設定すると良いと思います。

各ソーシャルブックマックのアイコンも出現しますのでチェックを入れるとTwitter、Delicious、Facebook、Buzzと並んでいる箇所に並びます。

間違えたときは、全部削除したり、対象のブックマークだけを消したり、順番の入れ替えなどの操作ができます。

例えばTwitterだけを削除する場合は、Twitterの文字をクリックして下記の『删除』というボタンをクリックすると消えます。

・上に移動する場合は、『上移』
・下に移動する場合は、『下移』
・削除をしたい場合は、『删除』
・全部削除する場合は、『全部删除』

をクリックしてください。設定はとても簡単です。

 

4　ソースコードを表示したい箇所に追加。

single.phpの下部に追加する場合は<?php the_content(); ?>の下に以下のソースコードを追加すると一般的にはちゃんと表示と思います。

<?php if(function_exists(‘wp_share_list’)) wp_share_list() ?>

　これですべての作業が終了です。ちゃんと設定ができたら下記のようにブックマークアイコンが表示されます。このプラグインを利用してhatena、livedoor、FC2などの日本版を作ってくれる人がいるとうれしいですね。おもしろい動きだと思いませんか？

　

]]> http://bukken.asia/?feed=rss2&p=2059 0 http://bukken.asia/?p=2019 http://bukken.asia/?p=2019#comments Fri, 14 Oct 2011 10:51:35 +0000 admin http://wp-site.biz/?p=2019 続きを読む →]]> テーマをWordPressビジネス用テンプレートセット001からWordPressビジネス用テンプレートセット004に変更しました。大幅に変更を行いましたが今回のリニューアルはクリーン&ミニマルな雰囲気にしたかったのでCSSでボタンと検索窓、パーツなど角丸にしました！下記はリニューアル後の全体画面です。

全体画面

変更点

※変更後のコードは参考までに一部公開しますがIEは基本的に無視していますのでご利用にはご注意ください。
ご存知だと思いますがIEだと角丸など表示できません。

h3

H3はこのように変更しました

下から上へのグラデーションです。まったく目立たない存在感です。

 

blockquote(引用)

blockquoteはこのように変更しました。下のほうが色が濃ゆくだんだん上にいくにつれてうすくなるというグラデーションです。角は丸くしてありますがIE7とかだと普通に丸くなりません・・・ソースコードは以下です。radiusの5pxの箇所で角のラウンドを調整できます。fafafaからfffへのグラデーションです。上記のh3もこのソースコードが使えます。

blockquote { padding-top: 17px;
padding-right: 17px;
padding-bottom: 17px;
padding-left: 17px;
margin-bottom: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fafafa));
background: -moz-linear-gradient(top, #fff, #fafafa);
background: -o-linear-gradient(top, #fff, #fafafa);
border: 1px solid #E3E3E3;}
blockquote p { margin:0 0 5px 0; }

検索窓と検索ボタン

検索窓に影をつけてボタンにマウスをのせると色が変わるようにしました。

 

Htmlソースコードサンプル

<form id=”searchform” action=”http://●●/” method=”get”>
<div><input id=”s” type=”text” name=”s” value=”" />
<input id=”searchsubmit” type=”submit” value=”検索” /></div>
</form>

CSSソースコードサンプル

input[type="text"], textarea {
padding: 4px;
background: whiteSmoke;
border: 1px solid #BFBFBF;
box-shadow: inset 3px 3px 3px rgba(0,0,0,0.1);
-moz-box-shadow: inset 3px 3px 3px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 3px 3px 3px rgba(0,0,0,0.1);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #828282;
}
#searchsubmit:hover {
background-color: #777;
}
#searchsubmit {
border: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #4B4B4B;
color: white;
text-transform: uppercase;
font-size: 12px;
padding: 5px 8px;
cursor: pointer;
}

 

ボタン

画像だと色を変更するのも一苦労ですがCSSだけの表示なら色コードだけで変更できるので楽ですね。
ボタンに影があり、マウスをのせると色が若干うすくなり、クリックすると押した感じにしてみました。

WordPress Template Category

 

Htmlソースコードサンプル

<div class=”btn_s”><a href=”http://wp-site.biz/category/theme”>テーマ一覧はコチラ</a></div>

 

cssソースコードサンプル

.btn_s{
text-align: right;
clear: both;
padding: 10px;
margin: 10px;
}
.btn_s a,
a.btn_s {
border: 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #444;
text-transform: uppercase;
font-size: 12px;
padding: 6px 25px;
margin-left: 5px;
cursor: pointer;
background: #dedede;
background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
background: -moz-linear-gradient(top, #f5f5f5, #e5e5e5);
background: -o-linear-gradient(top, #f5f5f5, #e5e5e5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f5f5f5′, endColorstr=’#e5e5e5′);
-webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
border: solid 1px #aaa;
}

.btn_s a:hover,a.btn_s:hover {
border-color: #999;
color: #222;
background: #e9e9e9;
background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#e9e9e9));
background: -moz-linear-gradient(top, #fefefe, #e9e9e9);
background: -o-linear-gradient(top, #fefefe, #e9e9e9);
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}

.btn_s a:active,
a.btn_s:active {
color: #333;
background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#dcdcdc));
background: -moz-linear-gradient(top, #f4f4f4, #dcdcdc);
background: -o-linear-gradient(top, #f4f4f4, #dcdcdc);
-webkit-box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.2);
-moz-box-box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.2);
}

 

ページナビゲーション

Wp-pagenaviをインストールをしている場合、CSSに以下のコードを追加すると下記のようないい感じになります

«123»5…最後 »

 

cssソースコードサンプル

.wp-pagenavi { margin:10px 0 10px 30px; padding:0; font-size:11px; }
.wp-pagenavi a, .wp-pagenavi a:visited { padding:5px 10px; margin:3px; text-decoration: none; color:#777; border:1px solid #bbb;
background:#fff; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
.wp-pagenavi a:hover { border:1px solid #2089cc; color:#2089cc; background:#fff; }
.wp-pagenavi span.pages { padding:0px; margin:0 0 14px 5px; color:#777; display:block; }
.wp-pagenavi span.current { padding:5px 10px; margin:3px; border:1px solid #a9b9b7; color:#fff; background:#a9b9b7; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
.wp-pagenavi span.extend { padding:5px 10px; margin:3px; border:1px solid #a9b9b7; color:#777; background:#fff; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }

 

最後に

CSSだけで画像のような表現ができてもIEでは見れません！個人的にはIEは表示テストでしか使用しませんが、昨日アクセス解析のブラウザ比率をみるといまだにIE6を利用されている方がけっこういましたのでIE6でサイトを確認してみたら崩れまくっていました。(配布テーマはIE6でも表示は大丈夫です)

IEがある限りHTML5、CSS3は発展しないような気がします・・・自分のサイトだといいですがクライアントのサイトにはまだXHTMLしか利用できないなと痛感しました。

]]> http://bukken.asia/?feed=rss2&p=2019 0 http://bukken.asia/?p=80 http://bukken.asia/?p=80#comments Thu, 06 Oct 2011 12:35:55 +0000 admin http://wp-site.biz/chintai/?p=80 続きを読む →]]> Googleのアクセス解析を見るとスマートフォンからのアクセス数が多くなってきたのでスマートフォン対応にしました。

『wptouch』というプラグインを導入すると便利ですがロゴなどが反映されないのでなんだかオリジナリティが欠けるのでなるべくオリジナティがでるようにしました。

本サイトとスマートフォンのURLは全く同じでスマートフォンからサイトにアクセスしたときにスマートフォン用テーマを表示して、PCからサイトにアクセスしたときにサイト用テーマが表示されるようになっています。

スマートフォン用テーマはWordpressデフォルトテーマである『Twnty Eleven』をカスタマイズしたものです。検索窓をナビゲーションの下に表示してロゴを表示させるというだけでもけっこう時間がかかりました。

スマートフォン対応にするなら最初からスマートフォンでの表示を考えながら更新をしていかないと後からの修正はとても大変なことがわかりました。

たとえばこのサイトの場合は、テーマ配布のページの画像がものすごく小さくなってしまいます。

もちろん訂正が可能なのですがそこまで時間はかけれないので次からはスマートフォンでの表示を考えながら更新をしていきます。

『Twnty Eleven』カスタマイズした箇所

・ロゴ表示

・ヘッダーのサイズ縦幅を狭くして、1番上の空白をなくした。

・ヘッダーの検索窓を削除してナビゲーションの下に表示。

・ナビゲーションの色、位置、プルダウン

・各タイトルの文字サイズ

・サイトと同じ雰囲気になるようにソースコード追加。

・フッターにページナビゲーションを設置。

・コメントフォームカスタマイズ。

・すべてのphpファイルをカスタマイズ。

・contact form 7の表示調整。(CSSにコード追加)

 

 

 

ナビゲーションのプルダウンは下記のようになります

 

もし需要があるならこのテーマの配布と設置&導入手順の記事を書こうかなと思っています。よかったらスマートフォンからサイトを確認してみてください。けど『wptouch』導入のほうが需要ありそうですね。

 

]]> http://bukken.asia/?feed=rss2&p=80 3