プロフィール

FC2BLOGカスタマイザー

FC2BLOGカスタマイザー

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

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

FC2ブログ共有テンプレート説明 moon_tree

moon_tree テンプレートイメージ
moon_tree_image.jpg

■プラグインについて
プラグイン1は、最上部のメニューバーに配置され、マウスオーバーで展開するメガメニューになってます。
メガメニューを増やす場合は<div class="MegaMenu">内に次のタグを追加してください。
<a class="MegaMenuLink" href="javascript:void(0)">メニュー名</a>
<div class="MegaMenuContent">ここにメニューの中身</div>

デフォルトでは「HOME」の部分だけが通常のリンクになってます。
リンクを増やす場合は<div class="MegaMenu">内に次のリンクタグを追加してください。
<a class="MegaMenuLinkOff" href="URL">リンク名</a>

メガメニューのもっと詳しい使い方 ⇒ jQuery Mega Menu

プラグイン2・3は下部に配置しています。
プラグイン2が有効幅180px、プラグイン3が有効幅540pxと大きさが違いますので、お好みでプラグインを振り分けてください。


上部にFC2ブログの検索バーがあると月の位置が若干変わります。
検索バーを表示しない事を想定したレイアウトなので、必要が無ければ「環境設定」→「ブログの設定」→「検索バーの利用」のところで「利用しない」にしてください。


※既知の問題
メニューの中身によっては正常に表示されない事がある。
ユーザータグのプラグインで、タグ部分の日本語だけがなぜか文字化けする。

問題がある場合は下部のプラグイン2・3など、他の場所を利用してください。


あと、一応いろいろなケースを想定してCSSを設定し、IE8・IE9・GoogleChrome・FireFoxで確認してますが、それでも見落としがあるかも知れません。表示崩れ等の不具合がありましたら、テンプレートを修正しますので、「FC2ブログ共有テンプレート作ってみた。月と木」のコメントにてお知らせ頂けると幸いです。 にほんブログ村 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:コンピュータ

FC2ブログ共有テンプレート説明 torn_paper

torn_paper テンプレートイメージ
wanted_image.jpg

背景の紙はリピート画像になっています。
中央の破れた部分は独立してるので、背景画像だけ変える事ができます。、
background-imageではなくbackground-colorでビビッドなベタ色にしても、また違った雰囲気になります。
背景を変えて文字が見にくい場合は、文字色を適度に調整してください。

wanted_image.jpg

サイド部分はデザイン的に中央揃えにしていますが、中央揃えにならない場合は、各プラグイン編集の「プラグインの改造 【HTMLの編集】を行います。(上級者向け)」をクリックし、表示されるHTMLの中から「&align」を削除してください。これは左・右・中央揃えを定義するfc2の独自変数で、CSSよりも優先されます。

例)<p &align> → <p>

あと、一応いろいろなケースを想定してCSSを設定し、IE8・IE9・GoogleChrome・FireFoxで確認してますが、それでも見落としがあるかも知れません。表示崩れ等の不具合がありましたら、テンプレートを修正しますので、「FC2ブログ共有テンプレート作ってみた。破れた紙風」のコメントにてお知らせ頂けると幸いです。 にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ
CATEGORY:FC2BLOG自作テンプレート
TAGS:
THEME:インターネットサービス | GENRE:コンピュータ

FC2ブログ共有テンプレート説明 wanted

wanted テンプレートイメージ
wanted_image.jpg

プラグイン3は、画像付きプロフィール専用になっていて、トップページでは中央に大きく、トップ以外のページでは、右サイドに表示するようになっています。

プロフィールに顔写真やイラスト、ペットの写真なんかを設定している人におすすめです。

これを利用する場合は、プラグインのプロフィールをプラグイン3に移動してください。
プラグイン3はこれしか機能しませんので、残りのプラグインはプラグイン1(左サイド)かプラグイン2(右サイド)に振り分けてください。

これを利用せずに通常のプロフィールを使う場合は、HTMLの次の2箇所を削除し、プラグイン1か2にプロフィールを設置してください。
<!--▽プラグイン3・画像プロフィール・トップページ用▽-->から
<!--△プラグイン3・画像プロフィール・トップページ用△-->まで
<!--▼プラグイン3・画像プロフィール・トップページ以外▼-->から
<!--▲プラグイン3・画像プロフィール・トップページ以外▲-->まで

サイド部分はデザイン的に中央揃えにしていますが、中央揃えにならない場合は、各プラグイン編集の「プラグインの改造 【HTMLの編集】を行います。(上級者向け)」をクリックし、表示されるHTMLの中から「&align」を削除してください。これは左・右・中央揃えを定義するfc2の独自変数で、CSSよりも優先されます。

例)<p &align> → <p>

サイドメニュータイトル文字などのぼかし影を取り除く場合は、HTMLかCSSまたは両方の「shadow」というclassを削除してください。

あと、一応いろいろなケースを想定してCSSを設定し、IE8・IE9・GoogleChrome・FireFoxで確認してますが、それでも見落としがあるかも知れません。表示崩れ等の不具合がありましたら、テンプレートを修正しますので、「FC2ブログ共有テンプレート作ってみた。WANTED張り紙風」のコメントにてお知らせ頂けると幸いです。 にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ
CATEGORY:FC2BLOG自作テンプレート
TAGS:
THEME:インターネットサービス | GENRE:コンピュータ

canonical属性の注意点

<head>内に書く、検索ロボットを制御するタグに
<link rel="canonical" href="URL" />というものがある。
これは、重複した内容のページに対して設定し、優先ページへ誘導するためのタグ。
htmlに書くだけでいいので、引越しした時などにサーバーの都合でリダイレクトの設定ができない場合に、その代わりとしても使える。

リダイレクトは簡単に設定できない場合があります。たとえば、サーバーサイドのリダイレクトを作成できないウェブ サーバーを使用しているときに、新しいドメイン名に移行する場合などです。このような場合には、rel="canonical" リンク要素を使用して、このドメインでインデックス登録の対象になる正確な URL を指定できます。rel="canonical" リンク要素は絶対的な指示ではなく、ヒントとしてみなされますが、Google では可能な限りこの要素を追跡します。(GoogleWebMasterToolヘルプより)

これを悪用して、重複していない全く関係のないページにcanonical属性を記述して、一部のページを優先的に表示し、SEOの効果を高める事はできない。

rel="canonical" 属性は、重複したコンテンツを含む複数のページ(記述の順番など少々の違いがあっても重複とみなされます)から優先ページを指定する目的のみで使用してください。
たとえばあるサイトで、同じ種類のダンスシューズを紹介するページが複数あり、商品写真のシューズの色以外のコンテンツがすべて一緒である場合などは、1 番人気がある色のページを canonical ページに指定するのがよいでしょう。このページが Google の検索結果に優先表示される可能性が高くなります。しかし、ジェル製の靴シートの紹介ページを靴のページより上位に表示したいといった目的のみで rel="canonical" 属性を使用することはできません。(GoogleWebMasterToolヘルプより)

という事で、できないはずなんだけど、それができちゃうらしいんだよね。
「絶対的な指示ではなく、ヒントとしてみなされます」
「少々の違いがあっても重複とみなされます」
「優先表示される可能性が高くなります」

表現も曖昧だけど、効果も曖昧。

どの程度重複した場合にcanonical属性が適用されるかはGoogleにしかわからないけど、調べた限りでは判定が非常に甘い。
なので、間違った使い方をすると、トータルでSEO効果がマイナスになる事もありえる。
この判定が厳しければ、多くのページに設定し、判断はGoogleにまかせて、重複のない最適なインデックス状態にする事ができそうだけど、現状はそうではない。

ブログサービスを利用する場合、<head>の内容は全てのページで共通になる事が多いため、特に注意が必要。
記事などが表示されるメイン部分はページによって異なるけど、それ以外の部分(ヘッダー・サイド・フッター)などが固定になっている事が多いから、短い記事のページが多かったりすると、それぞれの8割方が重複なんて事もありえる。
曖昧だけど、感触的には5割程度重複していると適用されてしまう。
なので、ブログサービスでは書かないほうがいい。

FC2ブログだと、全記事一覧がarchives.htmlと?allで完全に重複、
個別記事エリアもblog-entry-○.htmlと?no=○で完全に重複するため、
前に書いた「タイトルタグの重複」対策 FC2ブログパーフェクト版のサンプルでも記述してるけど、次のように全記事一覧ページと個別記事ページだけに設定するといい。

<!--titlelist_area-->
<link rel=canonical href="<%url>archives.html">
<!--/titlelist_area-->

<!--permanent_area-->
<link rel=canonical href="<%url>blog-entry-<%pno>.html">
<!--/permanent_area-->

もし、両方インデックスされている場合、その分のインデックスが減る事になるけど、内容が全く同じページでURLが違うだけなので、このインデックスは無意味。
むしろ重複コンテンツとしてマイナス評価になりえるので減っても問題ない。
片方にアクセスを集めたほうが効果的といえる。 にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ
CATEGORY:Google SEOについて
TAGS:
THEME:インターネットサービス | GENRE:コンピュータ
テンプレート
テンプレートに関する質問は、このブログでは受けつけておりません。複数のサイトやブログを運営しており、メインブログ以外はコメントに気がつかない事が多いからです。質問がある方は下記から、それぞれのテンプレートのリンクをクリックし、そちら(メインブログ)で質問をお願いします。
▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼

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

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

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

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

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

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