2013年01月 02日22日26日31日の記事 - カスタマイズするならFC2ブログがおすすめ

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

torn_paper テンプレートイメージ

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

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

例）<p &align>　→　<p>

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

FC2BLOG自作テンプレート - 関連記事

CATEGORY：FC2BLOG自作テンプレート
TAGS：

THEME：インターネットサービス | GENRE：コンピュータ

2013.01.02 Wed 15:43 |
TRACKBACK(0)

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

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

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

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


<div class="fc2_footer" style="text-align:left;vertical-align:middle;height:auto;">
	<a href="javascript:;" onClick="javascript:window.open('ＵＲＬ');">
		<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="ＵＲＬ" 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=ＵＲＬ&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に追加する事により３段になると思います。
各数値はお好みで変更してください。

FC2BLOGカスタマイズ - 関連記事

角丸（角R）ボックスを実現するjavascriptの比較（2013.03.08）
FC2拍手・Twitterツイート・Facebookいいねボタンを縦に並べる方法（2013.01.22）
未来記事の表示/非表示をコントロールする（2012.12.01）
超簡単な折りたたみ展開メニュー（2012.11.24）
「タイトルタグの重複」対策 FC2ブログパーフェクト版（俺的に）（2012.11.14）

CATEGORY：FC2BLOGカスタマイズ
TAGS：

THEME：インターネットサービス | GENRE：コンピュータ

2013.01.22 Tue 12:19 |
COMMENT(0) |
TRACKBACK(0)

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

moon_tree テンプレートイメージ

■プラグインについて
プラグイン１は、最上部のメニューバーに配置され、マウスオーバーで展開するメガメニューになってます。
メガメニューを増やす場合は<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

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

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

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

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

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

FC2BLOG自作テンプレート - 関連記事

CATEGORY：FC2BLOG自作テンプレート
TAGS：

THEME：インターネットサービス | GENRE：コンピュータ

2013.01.26 Sat 02:51 |
TRACKBACK(0)

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

oirase テンプレートイメージ

■背景動画の設定
<body>のすぐ下の<a>タグの中にあります。
・videoURL：YouTube動画のURL
・opacity：0.1～1 （透過値）
・mute: true または false （ミュートのon/off）
・showControls: true または false （コントロールパネル表示/非表示）
・loop: true または false （ループのon/off）

■最上部のメニューについては、次の記事に説明があります。
FC2ブログ共有テンプレート説明 moon_tree

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

FC2BLOG自作テンプレート - 関連記事

CATEGORY：FC2BLOG自作テンプレート
TAGS：

THEME：インターネットサービス | GENRE：コンピュータ

2013.01.31 Thu 15:16 |
COMMENT(20) |
TRACKBACK(0)

2013年01月 - アフィリエイトに最適なFC2 BLOGの作り方 - ブログっぽくないホームページ風にカスタマイズする方法

カスタマイズするならFC2ブログがおすすめ

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

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

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

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