簡単ホームページ作成支援-Detaramehp

アメブロ(html5版)のスタイルシートカスタマイズ・改造

Detarame — Mon, 20 Feb 2012 23:13:16 PST

以前アメブロ(xhtml版)のカスタマイズは紹介していますが、今回はアメブロ(html5版)のカスタマイズを紹介します。以前のアメブロと違いhtml5版で気になるのはヘッダー広告が目立ちすぎてる事なんかじゃないかと思います。それも含めてアメブロ(html5)をカスタマイズ・改造したCSSを紹介します。

アメブロ(html5)カスタマイズ・改造の変更前と変更後のレイアウト

それではいきなりですが下記の画像を見てください。最初の画像がアメブロ(html5)カスタマイズ・改造の変更前で、次の画像が変更後です。

アメブロ(html5)カスタマイズ・改造の変更前

アメブロ(html5)カスタマイズ・改造の変更後

カスタマイズ参考ブログ「Ame Book」

何をどのように変更したのかを簡単に説明すると下記のとおりです。

ブラウザ幅いっぱいに広がるヘッダーにしてあります。
タイトル文字を消し画像で表示させています。ですのでタイトル画像だけは用意する必要があります。
画像はタイトル画像だけですので後は全てスタイルシートだけでレイアウトしています。
目立ちすぎるヘッダー広告をサイトの一部として自然な感じで表示するようにしてあります。
アメブロにはフッターはありませんが、２つあるサイドバーの１つをフッターとして利用できるようにしてあります。
ブラウザ幅いっぱいに広がるフッターにしてあります。
他の広告もサイトの一部として自然な感じで表示するようにしています。
いろんなサイトで使えるようによくあるスタイルにして、再度カスタマイズ・改造しやすくしてます。
追加してあるスタイルには説明を入れてますので改めてスタイルを変える時に参考になると思います。

簡単に説明するとこのようにカスタマイズ・改造してあります。アメブロの注意書きに書いてある「広告を消す行為の他、掲載位置変更や視認性を悪くする修正」にあてはまらいカスタマイズにしてますので広告は全て表示されます。又一部のスタイルはアメブロ側のスタイルシートとジャバスクリプトでスタイルを設定しているみたいなので、このスタイルシートとジャバスクリプトが変わるとスタイルがおかしくなる可能性があるかもしれませんがそれはご理解ください。

それではカスタマイズ・改造方法を紹介します。スタイルシートを紹介しますので基本コピー&ペーストで簡単にカスタマイズ・改造出来ると思います。

はてなブックマークブログパーツの人気記事にランキング画像を付けて表示

Detarame — Sat, 11 Feb 2012 02:46:49 PST

ランキング画像の付け方は以前紹介したWordPressの人気ランキングなどにスタイルシートでランキング画像表示と記事の内容がダブってしまう部分がありますが、今回は、はてなブックマークの紹介も含めてランキング画像の付け方を紹介します。ランキング画像はスタイルシートで設置するので簡単に出来ます。

ソーシャルブックマーク「はてなブックマーク」

はてなブックマークは「この記事は為になるとか、この記事は面白い」など思った記事をオンラインでブックマークできる、オンラインブックマークサービスです。はてなブックマーク全体では今現在どんな記事が注目を浴びているのかを確認でき、又自分のサイトではどんな記事が注目されているかを知ることが出来るので、新たな記事を作成するときに参考になると思います。登録されていない方は是非登録しておきたいソーシャルブックマークの一つです。

それでは、下記のようなメニューで話を進めていきます。

はてなブックマークボタンを設置する: はてなブックマークを利用されていない方もいるかもしないので、ブログパーツの人気記事一覧を設置する前に記事を簡単にブックマークできる「はてなブックマークボタン」の設置方法から紹介していきます。
はてなブックマークブログパーツの人気記事を設置する: はてなブックマークの登録やブックマークボタンを設置が出来ている方はこちらからご覧ください。
はてなブックマークブログパーツの人気記事にランキング画像を付けて表示: すでにはてなブックマークの登録、ブックマークボタン設置、ブログパーツの人気記事の設置（テーマは、「はてなダイヤリー」）をされている方は、こちらからご覧ください。ランキング画像はスタイルシートで設置するので簡単にできます。

はてなブックマークボタンを設置する

はてなブックマークをまだ利用したことない方は、はてなブックマークに行き登録をしてください。登録を完了したら自分のサイトの記事などに「はてなブックマークボタン」を設置しておくとブックマークしやすくなるので、はてなブックマークボタンを設置しましょう。「はてなブックマークボタン」の作成方法や設置方法は下記画像のような感じになり必要な箇所と好みのブックマークボタンを選び最後に出てくるコードをあなたのサイトに貼り付けるだけなので、とても簡単に設置できます。

ちなみにWordPressの場合では下記のようなタグを設置しておけばurlや記事のタイトルは自動で変わるので便利です。

但しdata-hatena-bookmark-layout=”vertical”の部分はブックマークボタンの種類になるので設置したいボタンの種類に変更してください。ボタンはスタンダードボタンの”standard”、バーティカルボタンの”vertical”、シンプルボタンの”simple”の３種類があります。

それでは次にはてなブックマークブログパーツの人気記事の設置方法を紹介します。

可変スタイルとMedia Queriesの組み合わせは便利だけど難しい

Detarame — Fri, 03 Feb 2012 03:24:26 PST

可変スタイルとMedia Queriesを組み合わせてスタイルシートを作成すればiPhoneやiPadのブラウザサイズに合わせてスタイル幅を可変させレイアウト変更することがスタイルシートのみで出来ます。かなり便利なんですがサイトのレイアウトによってはスタイルシートが難しいと思いました。

可変スタイルとMedia Queriesの組み合わせ

まずは可変スタイルとMedia Queriesの書き方をかなり単純に書いたhtml5とcss3を紹介します。下記はhtml5のかなり単純な書き方です。





サイトのタイトル-記事のタイトル







	
		サイトのタイトル
	

	
		記事やメインの本文など
		いろんなタグを使い表示させます
                これは単純な見本なので
                ご了承ください
	


	
			
				ここはサイドバー
				メニューなどを
				リスト形式で
				表示させています
			
	


	
		サイトのタイトルなど

続いて上記に対するかなり単純な可変スタイルとMedia Queriesを使ったスタイルシートです。

#container{
	margin: 0 auto;
	max-width: 940px;
	background: #e2e2e2;
}
header{
	width: 100%;
	display: block;
	background: #99ccff;
}
#main{
	float: left;
	margin: 0 3.8%;
	width: 56.4%;
	background: #6699ff;
}
#secondary{
	float: left;
	margin: 0 3.8%;
	width: 26.4%;
	background: #0066cc;
}
footer{
	display: block;
	clear: both;
	width: 100%;
	background: #99ccff;
}

/* ここからがMedia Queriesの書き方です
----------------------------------------------- */

@media (max-width: 800px) {/*800px以下になると下記のスタイルが適用されます*/
	#main,
	#secondary {
		float: none;
		margin: 0 3.8%;
		width: auto;
	}
}

@media (max-width: 650px) {/*650px以下になると下記のスタイルが適用されます*/
	body{
		font-size: 13px;
	}
}

@media (max-width: 450px) {/*450px以下になると下記のスタイルが適用されます*/
	#secondary {
		display: none;
	}
}

これで下記の画像の様な感じでブラウザサイズによって可変されレイアウトが変更されます。

これだけ見ると簡単で便利そうなのになぜ難しく思ったのか？ここからは今回新たに構築した際に感じたことなのでサイトデザインによっては当てはまらない場合もあると思います(^^; 興味のある方は引き続きご覧ください。

WordPressの人気ランキングなどにスタイルシートでランキング画像表示

Detarame — Wed, 01 Feb 2012 08:55:42 PST

WordPressのプラグインやphpプログラムでは自動でランキングの入れ替えを行なってくれる方法が沢山あると思います。このランキング形式にランキング画像をスタイルシートで表示する方法を紹介します。スタイルシートを使った方法なのでもちろんWordPress以外でもランキング画像を表示できると思います。

スタイルシートでランキング画像表示

下記のランキングはWP-PostViewsを使いランキングを自動表示させ、スタイルシートによってランキング画像を変えて表示させています。
ランキング画像は下記のような画像のような形で表示され又中身は下記の画像に書いてあるタグが使われています。下記のランキングは５位までをランキングしていて、そこに使われているタグはliタグを5回使っています。

liタグを5回使っているのを利用してスタイルシートで1位〜5位までの画像をスタイルシートで変えてみます。

セレクタ＋セレクタを利用してランキング画像を変える

スタイルシートのセレクタ＋セレクタでランキング画像を変えれば簡単に表示できます。

※但しul liに書いてあるタグの前にはサイトによって必要なidやクラスをつけて使う必要があります。

/*人気ランキングスタイル
----------------------------------------------- */
ul li {
	list-style: none;
	line-height:1.7;
	padding-left: 30px;
}
li:first-child {/*1番目のli*/
	background-image: url(images/ranking11_1.png);
	background-repeat: no-repeat;
	background-position: left center;
}
li + li {/*2番目のli。nth-child擬似クラスはIE8以下では使えないため+により子リストの表示を変えています。IE6は非対応*/
	background-image: url(images/ranking11_2.png);
	background-repeat: no-repeat;
	background-position: left center;
}
li + li + li {/*3番目のli*/
	background-image: url(images/ranking11_3.png);
	background-repeat: no-repeat;
	background-position: left center;
}
li + li + li + li {/*4番目のli*/
	background-image: url(images/ranking06-06004.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
li + li + li + li + li {/*5番目のli*/
	background-image: url(images/ranking06-06005.gif);
	background-repeat: no-repeat;
	background-position: left center;
}

このように1位の場所はli:first-childになり5位の場所はli + li + li + li + liの場所になるのでここにランキング画像を設定しておけば順位にあったランキング画像が表示されます。

ランキング画像はアイコン・イラストフリー素材の無料素材倶楽部｜商用利用・加工可ホームページ画像集にオシャレなランキング画像があります。

nth-child擬似クラス

上記のスタイルシートタグにも書いてありますがnth-childを使った擬似クラスもセレクタ＋セレクタと同じ効果がありますがIE8,IE7では使えないためここではセレクタ＋セレクタで紹介しています。

又セレクタ＋セレクタを使ってもIE6には対応していません。

デフォルトスタイルを一旦リセットするリセットスタイルシート

Detarame — Tue, 31 Jan 2012 17:38:24 PST

各タグにはデフォルトで行の高さ、マージンと見出しのフォントサイズなどがあらかじめ決められていて、これがホームページデザインしていく上で邪魔な場合があります。

そこでこれを一旦リセットさせるスタイルシートの書き方がリセットスタイルシートになります。

リセットスタイルシート

リセットスタイルシートはCSS Tools: Reset CSSで紹介してありすが、ここで紹介しているリセットスタイルシートはCSS Tools: Reset CSSを元にWordPressのテンプレートTwenty Elevenのスタイルシートに書いてあるリセットスタイルシートを紹介しています。

/* ここからがリセットスタイルシートになります。
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

/*フォーカスとは、ブラウザの画面上でマウスをクリックし、入力状態にあるまでの動作を指します*/
:focus {/* remember to define focus styles! */
	outline: 0;
}

body {/*行の高さをフォントサイズと同じにしています*/
	line-height: 1;
}

ol, ul {
	list-style: none;
}

table {/* 隣接するセルのボーダーを結合し、間隔を0に指定しています */
	border-collapse: collapse;
	border-spacing: 0;
}

caption, th, td {/*captionとはテーブル（表）にキャプションをつける。キャプションとは、主に図版や写真について説明のために付け加えられた文字情報のことである。*/
	font-weight: normal;
	text-align: left;
}

blockquote:before, blockquote:after,
q:before, q:after {/*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/
	content: "";
}

blockquote, q {/*引用符の表示が出ないようにしています*/
	quotes: "" "";
}

a img {
	border: 0;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {/*html5の新しいタグをブロック要素として表示される。*/
	display: block;
}
/* ここまでがリセットスタイルシートになります。
-------------------------------------------------------------- */

このような設定をしていることで、デフォルトの行の高さ、マージンと見出しのフォントサイズなどをリセットさせます。リセットスタイルシートを書いておくと、デザインを変更したい時、新たにサイトを立ち上げた時にカスタマイズもかなり楽になりますよ。

bodyに異なる classを付けてくれる便利なbody_class()

Detarame — Mon, 30 Jan 2012 03:38:11 PST

body_class()はWordPress 2.8以降から使えるテンプレートタグで、なんと各ページなどに自動でclassを付けてくれるとっても便利なテンプレートタグです。
オリジナルでWordPressを作成していてまだbody_class()を使っていない方は使っておきたい便利なテンプレートタグですよ。

body_class()の使い方

タグを使っている部分を下記のように書き換えます。

たったこれだけで各ページによってclassを付けてくれるようになります。便利！！

ちなみにこのサイトのホーム(topページ)だと下記のようなclassが自動でつきます。

投稿記事では下記のようなclassが自動でつきます。

各ページでclassが出来るので異なるスタイルにしたい場合などにはかなり活躍すると思います。

参考

テンプレートタグ/body class – WordPress Codex 日本語版

Twenty Elevenをカスタマイズしサイトのデザインを変更しました

Detarame — Sat, 28 Jan 2012 09:07:49 PST

約2ヶ月ぐらいTwenty ElevenをカスタマイズしてWordPressの新機能やhtml5、css3などを勉強していました。それと同時にカスタマイズが完成したので今回デザインを新たに変更しました。
今回はデザイン変更して勉強になったサイトなどを紹介していきます。又細かな変更の仕方などは変更した部分などが大丈夫なのを確認した上で紹介していきたいと思います。

xhtmlからhtml5へ変更

上記の画像は以前のデザインで中身はxhtmlで作成してありました。別にxhtmlでもよかったんですが、将来css3がずべてのブラウザで使えるようになった場合にはhtml5,css3はかなり便利な機能を持っているので勉強方々変更をしました。

WordPressの新機能とhtml5、css3で勉強になったサイトと便利なサイト

それではWordPressの新機能とhtml5、css3で勉強になったサイトと便利なサイトを紹介していきます。

Twenty Elevenの中身やhtml5の新しいタグで勉強になるサイト

Twenty Elevenを翻訳してあるサイト8bitodyssey.com: Twenty Elevenが翻訳されてあるのでかなり助かります。
Twenty Elevenの中身を解説してあるサイト小粋空間: とても分かりやすく解説してあり勉強になります。

css3で便利なサイト

css3全般のコードを作成するのに便利なサイトCSS3 Generator: css3全般のコードを作成するのにかなり便利です。
css3のグラデーションを作成するのに便利なサイトColorZilla.com: css3のグラデーションが見た目でデザインできコードが作成されますので便利です。

その他サイト作成の時に便利だったサイト

サイトタイトルロゴ作成で便利なサイトsupalogo: オシャレなロゴが揃っていて簡単にサイトのタイトルを作成できかなり便利です。
ブラウザサイズに合わせた背景画像が表示出来る方法CSS-Tricks: １枚の写真や画像をブラウザ幅いっぱいに表示できる方法を紹介してあります。

書籍

サイト以外では下記の本がとっても分かりやすく勉強になります。

WordPressのオリジナルテーマに翻訳可能文字列を使う

Detarame — Tue, 13 Dec 2011 07:46:55 PST

WordPressのテンプレートtwentyelevenのコードの中を見てみると _e( ‘Search’, ‘twentyeleven’ )とか __( ‘Edit’, ‘twentyeleven’ )のようなコードが含まれています。このコードが翻訳可能文字列になります。
twentyelevenのフォルダの中にはlanguagesフォルダがありその中のファイルによって日本語に翻訳できるように設定してあります。

ここではtwentyelevenのフォルダの中に入っているlanguagesフォルダを利用して、オリジナルテーマに翻訳可能文字列を使えるようにしてみます。

翻訳可能文字列を使う為の関数

まずはtwentyelevenのフォルダの中に入っているlanguagesフォルダをあなたのオリジナルテーマにアップロードします。

次に下記の関数をfunctions.phpに追加します。

load_theme_textdomain( 'twentyeleven', TEMPLATEPATH . '/languages' );

	$locale = get_locale();
	$locale_file = TEMPLATEPATH . "/languages/$locale.php";
	if ( is_readable( $locale_file ) )
		require_once( $locale_file );

これで翻訳可能文字列を使うことが出来るようになります。

あとは翻訳可能文字列を使いたい単一記事の投稿 (single.php)などのテンプレートファイルの中に下記のようなコードを書き入れます。

上記のコードでは日本語で検索と表示されます。

コードに入っている’twentyeleven’は?

functions.phpに追加した関数の中と翻訳可能文字列の中に’twentyeleven’と言う文字が入っています。これは他の名称でも構いませんが名称を変えた場合は翻訳可能文字列内の’twentyeleven’の名称も変えて使っていきます。

ちなみに私は’twentyeleven’の部分は変更しないで使っています。変えていない理由は単純にtwentyelevenテンプレート内の必要なコードを持ってきた時に’twentyeleven’の名称をいちいち変えるのが面倒だからです(^^;

翻訳可能な文字を確認してみる

翻訳可能文字列を使っても全ての文字が翻訳されるわけではなく翻訳される文字はlanguagesフォルダに入っているja.poファイルであらかじめ設定してあり翻訳されています。ja.poファイルの中身を確認されたい方はPoeditと言うフリーのソフトで確認することが出来ます。

WordPressで住所からGoogle Mapsを簡単表示

Detarame — Fri, 14 Oct 2011 05:23:00 PDT

住所からGoogle Mapsを表示させるにはプラグインを使ったやりたかなどがありますが、ここではプラグインは使わずにカスタムフィールドに登録した住所データを元にものすごく簡単に表示させる方法を紹介します。

一度設定しておけば、カスタムフィールドに住所を入力するだけでGoogle Mapsが表示されますので便利です。

カスタムフィールドに登録した住所データ

まずはカスタムフィールドを作成する必要があります。カスタムフィールドを現に使っている方はこの項目は必要ありません。カスタムフィールドを使用したことない方はよかったらカスタムフィールドに関してはWordPress 初めてのカスタムフィールドを参考にしてみてください。

カスタムフィールドに登録した住所データを呼び込むコードは下記のような感じになります。’所在地’の所はfieldnameで名前がちがってきます。

ID,'所在地',true); ?>

上記のコードを利用して住所からGoogle Mapsを表示させます。

Google Mapsを簡単表示

カスタムフィールドの住所コードを含むGoogle Mapsのコードが下記のようになります。
下記のコードをsingle.phpなどで表示させたい場所に書きます。

ID,'所在地',true); ?>&z=14&output=embed">

コードを見てもらえば分かるとおりコードの基本は、Googlemapsのサイトに地図を埋め込むタグiframeを元にコードを短縮して表示させるようにしています。
上記のコードで訂正する箇所はwidth=”630″ height=”350″のマップのサイズ、’所在地’のfieldname名をサイトに合わせて訂正してください。

このコードを設定しておけば、後はカスタムフィールドに住所を入力することでGoogle Mapsが表示されます。

※但しIEではたまに表示不具合があります。原因については問題の報告 – Google マップ公式ヘルプフォーラムに書かれています。

住所と異なる位置に表示される場合の応急処置

たまに住所と異なる位置に表示される場合があるんですが、その場合は『住所スペース店舗名』などできちんと表示される場合があります。
例えば住所が『日南市南郷町中村乙７３２−１』になっているコメリハード＆グリーンと言う店舗を表示させる場合は、日南市南郷町中村乙７３２−１では全く異なる位置に表示されてしまいますが
『日南市南郷町中村乙７３２−１コメリハード＆グリーン』の様に住所スペース店舗名で入力するときちんと表示されます。

携帯でGoogle Mapsを簡単表示

携帯でも住所用のカスタムフィールドのコードを利用して表示させます。但しこの場合はモバイル用のGoogle Mapsに移動して表示させる方法になります。

WordPressで携帯表示させる場合はKtai Style (携帯対応プラグイン)を使っていると思います。下記のコードをKtai Styleのsingle.phpなどで表示させたい場所に書きます。

Google mapsで地図確認

※’所在地’のfieldname名をサイトに合わせて訂正してください。

今の時点ではこの方法を紹介されているサイトはなくもしかしたらコードのミスなどがあるかも知れません。その場合は助言していただけると助かります。

WordPressで選択したページを簡単アクティブ表示

Detarame — Mon, 26 Sep 2011 21:54:28 PDT

メニューボタンの上にマウスを乗せてメニューを変えるにはa:hoverをスタイルシートで設定してやると簡単に出来ますが、そのメニューをクリックして選択したページ（アクティブページ）の表示を変えるには通常だとjavascriptなどを使い設定してやらないと表示を変えることが出来ません。しかしWordPressなら難しい設定をしてやらなくても簡単に表示切り替えをすることができます。

カテゴリーリストでのアクティブ表示current-cat

WordPressでカテゴリーリストを表示するにはwp_list_categoriesを使いメニューを作成していると思います。wp_list_categoriesでカテゴリーリストが生成されたときは、リストを選択した場合（アクティブページ）そのページのカテゴリー項目にのみ current-cat という HTML クラスが付きます。
ですので、current-catをスタイルシートでデザインしてやると選択されたページ（アクティブページ）の表示切替えが簡単に行えます。
よくあるスタイルはa:hoverと同じデザインにしているスタイルが多いと思います。下のコードはa:hoverと同じデザインにした場合のスタイルシートの例です。ここではスタイルの切り替えはアルファー効果でしてあります。

a:hover,
.current-cat{
	/*-- IE・Firefox・Opera・Netscape・Safariで同等表示の透明
---------------------------------------------------------------*/
	filter: alpha(opacity=50);
	-moz-opacity:0.5;
	opacity:0.5;
}

※上記のコードはあくまでも使用例です。スタイルシートのご質問はお答えできませんのでご了承ください。

ページリストでのアクティブ表示current_page_item

WordPressでページリストを表示するにはwp list pagesを使いメニューを作成していると思います。wp list pagesでページリストが生成されたときは、リストを選択した場合（アクティブページ）そのページのカテゴリー項目にのみ current_page_item という HTML クラスが付きます。
ですので、current_page_itemをスタイルシートでデザインしてやると選択されたページ（アクティブページ）の表示切替えが簡単に行えます。
よくあるスタイルはa:hoverと同じデザインにしているスタイルが多いと思います。下のコードはa:hoverと同じデザインにした場合のスタイルシートの例です。ここではスタイルの切り替えはアルファー効果でしてあります。

a:hover,
.current_page_item{
	/*-- IE・Firefox・Opera・Netscape・Safariで同等表示の透明
---------------------------------------------------------------*/
	filter: alpha(opacity=50);
	-moz-opacity:0.5;
	opacity:0.5;
}

※上記のコードはあくまでも使用例です。スタイルシートのご質問はお答えできませんのでご了承ください。

参考
テンプレートタグ/wp list categories-カテゴリーリストのマークアップと装飾
テンプレートタグ/wp list pages – WordPress Codex 日本語版-ページアイテムのマークアップとデザイン