2012年11月07日

サイトをWPで作って失敗したなーと思ったこと

サイトをWPで作って失敗したなーと思ったことは、
記事タイトルをそのままURLにしていたこと。


何がって。。。
タイトル変更したい時にURLも変更するのかしないのかで悩むコト。

今まで、数字で管理してきたけど、
日本語ドメインだし、検索結果もGoogleは結構
日本語に対応してくれてるから検索結果から
訪問者が増えるかも!と思って設定したけど・・・

やっぱり今まで通り数字がいいと思いました。

まあ、もうすでにアクセスあるし、
301かなんかで修正したURLに飛ぶように設定します^^;

タイトルURL・・・使える時と使えない時があるので、
このあたりよく考えて使い分けるといいかもしれませんねー。

ラベル:WP 記事URL
posted by やゆよ at 06:05| Comment(0) | 作業日記 | このブログの読者になる | 更新情報をチェックする

2012年06月02日

リサーチアルチザンプロをお試し中

久々のブログ更新です(^^;

娘の卒園〜就学準備で
2月頃からバタバタしていた生活も
やっと落ち着き始めたこの頃です、ふぅ。

いろいろ書きたいことありますが、
今日は、アクセス解析の
「リサーチアルチザンプロ」について。

公式サイトは、↓ここ↓。
リサーチアルチザンプロのサイトへ

今までは、Google Analyticsと
自分のレンタルサーバーに入れて使う無料版の
リサーチアルチザンライトを併用していましたが、
あるきっかけがあり、有料版のリサーチアルチザンプロを
1か月間お試し(無料)で使うことにしました!


無料版ライトと有料版プロの違う点は、
クリックされた箇所
閲覧してくれた部分が
視覚的にわかる
ことの2点。

アフィチャレSNSでお世話になっている&5号掲載の
ばんおーコーチもおすすめのヒートマップと同じ機能のある
リサーチアルチザンプロ(上2つの解析できるツール)は
今後のことも考えて必要だと判断し
昨日、さっそく登録して導入してみました!


私が運営しているフリー素材サイトの解析になりますが、
どんな風に訪問者の行動がわかるのか
ちょっと紹介したいと思います^^


まず、どこがクリックされたかわかる
「クリックマップ」の機能。
120602.gif

画像を見てもらうとわかるとおり、
クリックされた箇所が白くポチッとなります。

この訪問者の方は、
スプーンとフォークの素材はDLしたけど
ナイフはDLしなかったということが一目瞭然☆

しかも、どのタイプの画像をDLしたのか
わざわざ画像名から調べなくても
この解析画面を開くだけでわかっちゃうのはスゴイ!
と1人大興奮でした。



次に、どこが読まれていたのかがわかる
「スクロールマップ」の機能。
120602_1.gif

一般的なアクセス解析だと
どのページにアクセスがあって、
滞在時間が何秒〜何分だったかという
数字的な解析しか表示されませんが、
このスクロールマップの機能を使えば
上の画像のように、
どの部分が読まれているのかこれまた一目瞭然!

スゴイですよね、スゴすぎです、本当に。


登録してから1か月間は、無料ですし、
無料期間が過ぎたからといって
勝手に料金がかかるということもないので
万が一、存在を忘れてても安心ですね(笑)

posted by やゆよ at 16:05| Comment(0) | ツール&書籍あれこれ | このブログの読者になる | 更新情報をチェックする

2012年03月15日

Twenty Elevenのサブタイトル(ディスクリプション)のカスタマイズ

前回、タイトルのカスタマイズが終わり、
今回は、タイトルの下に表示される
サブタイトル(#site-description)を
カスタマイズしたいと思います。


まず、HTMLのソースをみてみます。
120306_1.gif


するとディスクリプションは、
「h2 id="site-description"」で
書かれていることがわかります。



次に保存してあるTwenty Elevenのstyle.cssファイルを開き
ディスクリプションに使われているid「site-description」を検索します。
120306_2.gif


すると526行目より4個見つかりますね。
その中から文字の大きさやカラー、
そして今回は余白も変更したいと思います。



CSSのカスタマイズですが、基本的には下記の様になります。

文字の大きさを変更したいときは、
「font-size」

文字の色を変更したいときは、
「color」

文字の太さを変更したいときは、
「font-weight」

行間を変更したいときは、
「line-height」

をそれぞれ好みに変更します。




今回は、サイトの説明を表示するディスクリプションですので、
運営サイトによって文章の長さが違ってくると思います。


読んでもらいやすいように目立たせたり、
SEOを兼ねてキーワードを含めた説明文にしたりと
いろいろ使い道がわかれる部分だと思います。


そこで文字のカスタマイズと併せて
余白もカスタマイズしていきたいと思います。



余白は、「margin」と「padding」がありますが、
Twenty ElevenのCSSでは、「margin」で設定されていますので
このmarginの数値を変更して見栄えを変えたいと思います。



まずh2のサイトディスクリプションがどの様に
ブラウザで表示されるのか確認してみます。
※ブラウザは、Google Chromeで説明しています。

下の画像は、普通にページを開いた時の状態です。
120313_1.jpg


サイトの説明文(ディスクリプション)部分をドラッグ選択し、
右クリックして「要素の検証」を選択します。


すると下の画像の様に、ディスクリプションの部分が
どの様に表示されているのか目で見てわかりやすくなりました。
120313_2.jpg



この画像を見ることで、id(#site-description)の
marginがどのように影響しているかわかります。


上と左端の余白は「0」
右余白が「270px」
下の余白は、文字「3.65625em」となっています。



[マメ知識]
上の余白をCSS(529行目)で確認してみると
「margin: 0 270px 3.65625em 0;」とあります。

margin-top:0px;と1つ1つ書かれているCSSもありますが、
marginのみの場合、「上・右・下・左」回りの順番になります。





このことから今回は、
右余白である「270px」のみ変更したいと思います。


数字が多くなれば、右余白が広く取られ、
数字が小さくなれば、余白が狭くなります。


下の画像は、marginを150pxと500pxで指定した場合の比較です。
120313_3.jpg



その他、@media (max-width: 650px)と
@media printでの変更もお忘れなく。



以下、オリジナルCSSで変更した箇所のまとめです。

/*================================================
サイトディスクリプションの設定
==================================================*/
#site-description { /*526行目*/
color: #d2691e; /* リンクの色 */
font-size: 14px; /* 文字サイズ */
margin: 0 270px 3.65625em 0; /* [px]の数字が右余白 */
}


/*
メディア 幅650pxまでの場合の設定
----------------------------------------------- */
@media (max-width: 650px) {
/* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */

#site-title a {
font-size: 18px;
}
#site-description {
font-size: 12px;
}
}


/* =Print プリントアウトする時の設定
----------------------------------------------- */

@media print {

#site-title a {
font-size: 16pt;
}
#site-description {
font-size: 10pt;
}
}

===========================================



今回までのCSSは、下記のファイルになります。

文字化する場合は文字コードをUTF-8に変更してください。
ダウンロードする → style.css
(ブラウザで表示された場合は、右クリックで保存してください。)
posted by やゆよ at 07:07| Comment(0) | WP(Twenty Eleven)のカスタマイズ | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。