プロフィール

FC2BLOGカスタマイザー

FC2BLOGカスタマイザー

FC2ブログ十数件、アメブロ数件、Yahoo!ストア、Yahoo!オークションストア、カラーミーショップ、ビジネスサイト数件、趣味サイト数件を現在仕事とプライベートで管理・運営中。過去には他のASPやCMSもいろいろ。

全記事表示リンク
検索フォーム
ユーザータグランキング
最新コメント
<>+-

角丸(角R)ボックスを実現するjavascriptの比較

「png画像もしくはcssにて透過するdivボックス」をJavascriptを利用して角丸にする事を目的として数種類のJavascriptを比較してみました。
それぞれの使い方は書くと長くなるので、それぞれ検索して解説してる他のサイトを探して参考にしてください。ここでは比較のみ扱います。

jquery curvycorners
curvy1.jpg
綺麗だけど重い。
重いと能力の低いパソコンでは最初は四角いボックスで、付け足すように遅れて丸い部分が表示されるので格好悪い。
あと、ブラウザで拡大表示すると変になったり。
curvy2.jpg(拡大図)


Nifty Corners Cube
nifty1.jpg
丸のカーブが汚い。そして汚いくせに重い。
丸の外側に本来の四角の部分が薄く見えたりして格好悪い。
nifty2.jpg(拡大図)


DD_roundies
dd1.jpg
綺麗で軽い。
拡大して見ると輪郭を滑らかにするアンチエイリアスが他よりも効いてる。
たぶん角丸を表現するjavascriptでは一番いい。
dd2.jpg(拡大しても綺麗)


jquery corner
ちょっと検証した時から時間が経ってしまって記憶が曖昧だけど、透過と相性が悪くて却下した気がする。

ぶっちゃけ角丸にする要素が少なければ、このようなjavascriptを利用せず、従来通りの角丸画像を用意してhtmlとcssだけでレイアウトするのが一番綺麗で軽いという結論。 にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ
CATEGORY:FC2BLOGカスタマイズ
TAGS:
THEME:インターネットサービス | GENRE:コンピュータ

FC2拍手・Twitterツイート・Facebookいいねボタンを縦に並べる方法

通常は、1段目には「拍手」だけ、2段目に「ツイート」と「いいね」が並ぶ。
なんかレイアウト的に中途半端だなと思った事ありませんか?

というわけで縦に3段にしちゃいましょう。
これらのソーシャルボタンは、各社サイズが違ったりカウントが入ったりするため、単純に横に並べるのは汎用性が低いです。
デザインにこだわるケースでは横に並べる事もありますが、簡単にレイアウトを整えるなら縦がおすすめです。

通常表示されるソースを見てみると、次のようになってます。


<div class="fc2_footer" style="text-align:left;vertical-align:middle;height:auto;">
<a href="javascript:;" onClick="javascript:window.open('URL');">
<img src="http://static.fc2.com/image/clap/number/white/1.gif" style="border:0;" />
</a>

<table class="fc2_socialbtn" style="margin-right:auto;margin-left:0;border:none;">
<tr>
<td style="vertical-align:top;border:none;" class="fc2button-twitter">
<script type="text/javascript">
document.write('<a href="http://twitter.com/share" class="twitter-share-button" data-url="URL" data-text="タイトル" data-count="none" data-lang="'+(window.navigator.language || 'ja')+'">Tweet</a>');
</script>
<script type="text/javascript" charset="utf-8" src="http://platform.twitter.com/widgets.js"></script>
</td>
<td style="vertical-align:top;border:none;" class="fc2button-facebook">
<iframe src="//www.facebook.com/plugins/like.php?href=URL&send=false&layout=button_count&width=105&show_faces=false&colorscheme=light&action=like&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:105px; height:21px;" allowTransparency="true">
</iframe>
</td>
</tr>
</table>
</div>

divやtable、td等にクラスが振られてる事がわかります。
この部分のhtmlは直接編集する事ができませんが、これらのクラスのcssを編集する事により、レイアウトの調節が可能です。


.fc2_footer{height:70px !important;}
.fc2_footer table{position:relative;}
.fc2_footer table td.fc2button-twitter{width:400px;position:absolute;padding:0;margin:0;}
.fc2_footer table td.fc2button-facebook{width:400px;position:absolute;top:24px;padding:0;margin:0;}

これをcssに追加する事により3段になると思います。
各数値はお好みで変更してください。 にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ
CATEGORY:FC2BLOGカスタマイズ
TAGS:
THEME:インターネットサービス | GENRE:コンピュータ

未来記事の表示/非表示をコントロールする

■HTML

<!--topentry-->
<div class="display_none_<%topentry_year>">
<%topentry_body>
</div>
<!--/topentry-->

■CSS

.display_none_2030 {display:none;}

<%topentry_year>は投稿年の変数なので、この例の場合はコントロールしたい記事の投稿年を2030年で更新する。
そうすれば、その記事が表示される設定になっているページにて、
<div class="display_none_<%topentry_year>">の部分を通った時に
<div class="display_none_2030">となり、
CSSの.display_none_2030と一致し、{display:none;}非表示が適用される。
ifの分岐判定みたいな感じ。

これをモード(エリア)変数と組み合わせる事により、トップページだけに表示やカテゴリーページだけに表示という使い方ができる。
また、topentryの部分をrecentやarchiveに変える事により、プラグインの最新記事や月別の一覧にも未来記事を表示しないという事もできる。

<!--topentry-->内で使える変数であれば、この投稿年以外の変数でもコントロールできる。
例えば、<%topentry_category_no>を使えば、トップページに特定のカテゴリーの未来記事だけ非表示などできる。

実際に未来記事の表示をコントロールしているページ
目の症状 - パソコン病の予防と改善

一番上の商品と人気商品4つ、商品一覧のタイトルバーまでが未来記事で、それ以降が普通の記事。この未来記事は、カテゴリーページの「目の症状」だけに表示され、他のページでは表示しない。カテゴリーページを「新しい順」で表示、そして未来記事をコントロールする事により、カテゴリー毎におすすめ(人気)商品を常に一番上に表示している。

これを利用する事により、ネットショップのようなカテゴリー別のトップページを作る事ができる。ショップ風のアフィリエイトサイトやドロップシッピングサイトを作る場合に効果的。 にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ
CATEGORY:FC2BLOGカスタマイズ
TAGS:
THEME:インターネットサービス | GENRE:コンピュータ

超簡単な折りたたみ展開メニュー

サンプルは、このブログの右サイドバー「折りたたみメニュー」RSSリンクの表示。

クリック側は、onclick属性にてdisplayによる表示/非表示を制御。
展開側は、対応するidを書くだけで、スクリプトも使わず超簡単。

ソースはこんな感じ。


<!-- 折りたたみ -->
<div onclick="obj=document.getElementById('xxxxx').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">クリックで展開</a>
</div>
<!--// 折りたたみ -->

<!-- 折りたたまれ -->
<div id="xxxxx" style="display:none;clear:both;">
ここに書いたものが上述の「クリックで展開」をクリックすると表示される
</div>
<!--// 折りたたまれ -->

2箇所ある「xxxxx」の部分は任意の同じ文字列にする。
識別するだけなので「メニュー1」のように日本語でもたぶん大丈夫。

また、次のように記事中に使う事もできる。

 ▼クリックで展開▼


まぁ普通のブログであれば、予めシステムにある「read more」や「続きを読む」で事足りると思うけど、オリジナルカスタマイズにより「続きを読む」を別の用途で使っている場合にオプションとして使えるかな。

アレンジすれば、次のページの【商品をもっと見る】のような使い方もできる。
卒業式袴 レンタル・貸衣装

ただし、複数の記事や複数のメニューなどに使う場合には注意すべき点がある。
たとえ記事ひとつに対して一つしか使ってないとしても、月別やカテゴリー別ページなどで、記事を複数件表示する設定の場合、ページによっては複数表示される事になる。

 ▼クリックで展開▼
にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ
CATEGORY:FC2BLOGカスタマイズ
TAGS:
THEME:インターネットサービス | GENRE:コンピュータ

「タイトルタグの重複」対策 FC2ブログパーフェクト版(俺的に)

Google SEO対策をする上で最重要となるツールが、Google自らが提供しているGoogleウェブマスターツール。そのツールの最適化メニューにあるHTMLの改善に「重複するメタデータ(descriptions)」と「タイトルタグの重複」という項目があり、重複するページの件数が記載されている。
異なるURLのページでタイトルや説明が重複するのはユーザビリティが悪いという事だろう。わざわざ項目を設けているくらいなので、どの程度かはわからないが、SEOにも影響があると思われる。

そして、FC2でブログをそのまま使っていると、この重複件数が増えまくる。

前の記事でレベルの高いテンプレートがたくさんあるなんて書いたが、この重複問題の対策については、まだ完璧なものを見た事が無い。SEO対策済テンプレートなどもあるし、みんな努力はしてるが、完璧に対策できてるのはまだ見た事が無い。

なので、重複が気になるユーザーは自力で改良している。
「fc2 タイトルタグ 重複」などのキーワードでGoogle検索すると、古いものから最近のものまで、対策法がたくさん出てくるが、まだ完璧なものに出会えていない。

http://help.fc2.com/blog/manual/Home/template/templatevariable.html#5
上記マニュアルのテンプレート用変数一覧にあるエリア(モード)変数を利用して、各エリアごとのタイトルを変えるのが基本的対策。ただ、トップページやカテゴリーや月別など、わかりやすいページは区別化してる人が多いが、それだけだとまだ不十分。

今までは妥協してそれなりにしか対策してなかったが、今回はじっくり腰を据えて見直してみる事にした。URLのタイプは次の10種類。それぞれのタイトルが重複しないようにしなければならない。

1.トップページ index.html
2.個別記事ページ blog-entry-0.html
3.カテゴリーページ blog-category0.html または category0-0.html
4.月別ページ blog-date-yyyymm.html
5.検索結果ページ ?q=キーワード.html
6.ユーザータグ検索結果ページ ?tag=タグ.html
7.全記事一覧ページ ?all.html または archives.html
8.コメント編集ページ ?mode=edit&rno=0.html
9.コメント送信後の戻りページ ?no=0.html
10.トップ以降のページ page-0.html

まだあるかも知れないが、今のところ確認できたのはこれで全部。
テンプレートや他の人の対策記事を見てると、下に行くほど対策ができていない。

1.トップページは、次のような感じでいいだろう。
<meta name="description" content="<%introduction>" />
<title><%blog_name></title>

とりあえず、descriptionのほうは、タイトルの<%blog_name>を<%introduction>に変えるだけでいいので、以降は省いて<title>を中心に説明する。
他のページの基本形は次のようになる。

<title><%sub_title> - <%blog_name></title>

<%blog_name>はブログ名が自動的に入る変数。
<%sub_title>は表示されるエリアによって下記の内容が入る。

2.個別記事ページでは、記事名
3.カテゴリーページでは、カテゴリー名
4.月別ページでは、年月(yyyymm)
5.検索結果ページでは、検索キーワード
6.ユーザータグ検索結果ページでは、ユーザータグ

このように2~6の5種類はページにより<%sub_title>にそれぞれ別の内容が入るので、
全て<title><%sub_title> - <%blog_name></title>で問題ないだろう。

7.全記事一覧ページは、次のような感じで問題ない。
<title><%blog_name> - 全記事一覧</title>

8.コメント編集ページは、コメント番号の変数<%eno>を利用すれば区別化できる。
<title>コメントの編集 no.<%eno> - <%blog_name></title>

9.コメント送信後の戻りページは、個別記事エリアに対して、<link rel="canonical">を設定して、インデックスされるページを統一する。
<link rel="canonical" href="<%url>blog-entry-<%pno>.html" />
インデックスが減るからもったいないと思うかも知れないけど、どうせ重複コンテンツ扱いになるから統一でいい。

問題は10。
トップページに「次のページ」や「前のページ」などのページナビがある場合に、
それをクリックしてページを移動すると、このURLになる。

このページは、エリア(モード)変数では制御できないため、諦めている人が多い。
いろいろ試してみると、変数のマニュアルにはモバイル専用として書かれてるが、
<!--page_area-->という変数が、10のエリア(モード)変数として使える事が判明。

これで完璧か…と思いきや、簡単に解決したと思っていた3~6も複数ページに渡る場合、
全てのページが同じタイトルになってしまうという問題が発生。

エリア(モード)の区分けだけじゃダメだったんや。
ページも区分けできないと完璧とは言えなかったんや。


挫折しそうになりながらも色々調べていると、これはFC2だけではなく、他のブログでも問題になっているようで、どうやらスクリプトを使えばページを区分けできる事がわかった。
しかし、対策を指南しているサイトをいくつか見たが完璧なものは無かった。

というわけでアレンジして作ってみる。
それぞれのページのURLにある「page=0」をタイトルにつけて区別するスクリプト。

これで完璧。

と言っても、パソコン版のタイトルタグだけか。
descriptionはまだ完璧ではないが、これで限界かなと思ってる。
モバイル・スマホは面倒なので今のところ無視。

以下、1~10のタイトルタグに重複対策をしたもの。
コピペしてどうぞ。


<!--★title重複回避ここから-->
<!--index_area-->
<!--index.html トップページエリア-->
<meta name="description" content="<%introduction>" />
<title><%blog_name> - トップページ</title>
<!--/index_area-->

<!--permanent_area-->
<!--blog-entry-0.html 個別記事エリア-->
<meta name="description" content="<%sub_title> - <%introduction>" />
<title><%sub_title> - <!--topentry--><%topentry_category><!--/topentry--></title>
<link rel="canonical" href="<%url>blog-entry-<%pno>.html" />
<!--/permanent_area-->

<!--date_area-->
<!--blog-date-yyyymm.html 月別エリア-->
<meta name="description" content="<%now_year>年<%now_month>月の記事 - <%introduction>" />
<title><%now_year>年<%now_month>月の記事 - <%blog_name></title>
<!--/date_area-->

<!--category_area-->
<!--blog-category0.html category0-0.html カテゴリー別エリア-->
<meta name="description" content="<%sub_title> - <%introduction>" />
<title><%sub_title> - <%blog_name></title>
<!--/category_area-->

<!--search_area-->
<!--?q=キーワード 検索結果エリア-->
<meta name="description" content="<%sub_title> の検索結果 - <%introduction>" />
<title>「<%sub_title>」の検索結果 - <%blog_name></title>
<!--/search_area-->

<!--tag_area-->
<!--?tag=タグ タグ検索結果エリア-->
<meta name="description" content="<%sub_title> - <%introduction>" />
<title>ユーザータグ「<%sub_title>」が設定された記事 - <%blog_name></title>
<!--/tag_area-->

<!--titlelist_area-->
<!--?allとarchives.html統一 全記事一覧エリア-->
<meta name="description" content="全記事タイトルリスト - <%introduction>" />
<title><%blog_name> - 全記事タイトルリスト</title>
<link rel="canonical" href="<%url>archives.html" />
<!--/titlelist_area-->

<!--edit_area-->
<!--?mode=edit&rno=xxx コメント編集エリア-->
<meta name="description" content="コメントno.<%eno> - <%introduction>" />
<title>コメントの編集 no.<%eno> - <%blog_name></title>
<!--/edit_area-->

<!--not_index_area-->
<!--not_category_area-->
<!--not_date_area-->
<!--not_search_area-->
<!--not_tag_area-->
<!--not_permanent_area-->
<!--not_titlelist_area-->
<!--page_area-->
<!--page-xx.html トップページからのページエリア-->
<meta name="description" content="<%introduction>" />
<title><%blog_name></title>
<!--/page_area-->
<!--/not_titlelist_area-->
<!--/not_permanent_area-->
<!--/not_tag_area-->
<!--/not_search_area-->
<!--/not_date_area-->
<!--/not_category_area-->
<!--/not_index_area-->

<!--ページがある場合のtitle重複回避スクリプト-->
<script type="text/javascript">
var pageurl = document.URL;
var pageurll = pageurl.match(/w+/g);
var pageurlll = pageurl.match(/page=d/);
if (pageurll[5].indexOf("page") != -1) {
document.title = document.title + " page=" + pageurll[6];
}
else if (pageurll[5].indexOf("category") != -1) {
document.title = document.title + " page=" + pageurll[6];
}
else if (pageurll[5].indexOf("no") != -1) {
document.title = document.title + " no=" + pageurll[6];
}
else if (pageurll[5].indexOf("q") != -1) {
document.title = document.title + " " + pageurlll[0];
}
else if (pageurll[5].indexOf("tag") != -1) {
document.title = document.title + " " + pageurlll[0];
}
else if (pageurll[6].indexOf("date") != -1 && pageurll.length > 9 ) {
document.title = document.title + " page=" + pageurll[8];
}
</script>
<!--/★title重複回避ここまで-->


▼2012年12月26日追記▼
月別のページで重複する事が判明。
普段プラグインのカレンダーを使わないから気づかなかった。
共有テンプレートを作るにあたり、いろいろ検証していて気がついた。

月別アーカイブなどの「2012年12月の記事」は、次のようなURLになる。
http://customizefc2blog.blog.fc2.com/blog-date-201212.html

カレンダーなどの日別、例えば「2012年12月13日」のURLは次のようになる。
http://customizefc2blog.blog.fc2.com/blog-date-20121213.html

この二つは、どちらもdate_areaになるため、同じタイトルになってしまう。
どこでも有効な変数に「年」「月」はあるけど、「日」の変数は無い。
まぁこれは他の変数で代用できて重複しないようにできたんだけど、結論としては問題が多すぎるので修正しない事にした。

問題とは、まず「2012年12月の記事」という月別の記事一覧を表示したのに「日」まで表示される事の違和感。
そして、1ページに複数の記事を表示する設定の場合、例えば3記事の場合は「2012年12月13日13日13日の記事」と意味不明な状態になってしまう。体裁を整えるために「13日16時 13日18時 13日19時 の記事」のように時間をつけてみたり、記事番号をつけて区別する事はできるけど、タイトルが無駄に長くなってしまう。
あと、月に1記事しか書いていない場合や、1ページに1記事表示の設定の場合の1ページ目は、どうしても同じタイトルになってしまう。

重複するのは、月別や日別のページがインデックスされた場合になるわけだけど、今のところ俺が管理してるブログでそれらのページはインデックスされていないから重複もしていない。
たぶん利用する人が少ないからなのかな。

というか、テンプレートを作るに当たっていろんなテンプレートを参考に見たら、カレンダーを横1列に配置するのがブーム?みたいだけど、カレンダーって必要?
いや言い方が悪いな。
カレンダーを暦として置くのは本来の使い方として自分のために意味はあるけど、他の人のブログに訪れてカレンダーの日付をクリックして記事見る事ってある?
俺はないなぁ。

というわけで、キリもないし、この件は修正しない事にした。
タイトルも「パーフェクト版(俺的に)」に改め。 にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ
CATEGORY:FC2BLOGカスタマイズ
TAGS:
THEME:インターネットサービス | GENRE:コンピュータ
テンプレート
テンプレートに関する質問は、このブログでは受けつけておりません。複数のサイトやブログを運営しており、メインブログ以外はコメントに気がつかない事が多いからです。質問がある方は下記から、それぞれのテンプレートのリンクをクリックし、そちら(メインブログ)で質問をお願いします。
▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼

sightseeingに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。スライドショー

moon_treeに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。奥入瀬

moon_treeに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。月と木

torn_paperに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。破れた紙風

wantedに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。WANTED張り紙風

glass_boardシリーズに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。glass_boardシリーズ
アクセスランキング
[ジャンルランキング]
コンピュータ 532位
[サブジャンルランキング]
Webサイト作成 27位