PROFILE

俺

Author:俺
青森県青森市在住。「あなたB型でしょ?」とよく聞かれます。そうですが何か問題でも??

全ての記事を見る

TEMPLATES

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

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

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

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

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

glass_boardシリーズに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。glass_boardシリーズ
SEARCH
COMMENTS+TRACKBACK
Comments<>+-
Trackback <> + -
ARCHIVE
RSS FeedWind
Twitter
FC2拍手RANKING
RECOMMEND

海外の反応に代表される日本や日本文化に対する外国人の反応、あとは逆パターンで異文化と日本人の出会いなんかを見るのが好きだから、この中国嫁日記はRSSを登録してかかさず見てる。月さんかわいいね。

FC2ブログ共有テンプレート作ってみた。WANTED張り紙風

wanted_image.jpg

前回1~3カラムの3タイプ作ったけど、3カラムの反応が良かったので、今回は3カラムのみ制作。
詳細:FC2ブログ共有テンプレート説明 wanted

インパクトはあると思うんだけど、その分クセが強いからどうかなぁ。
しかも画像多めだから、環境によってはちょっと重いかも?

足跡とかアクセス解析から、前回作ったテンプレートgrass_boardをダウンロードしたと思われる人のブログをこっそり見に行ったりしてるんだけど、センスある人は上手くアレンジしてるから、こっちも参考になるし刺激にもなるね。

じゃんじゃん改造しておくれ。

★共有テンプレートwantedの不具合報告・質問等は、この記事にコメントをお願いします。

★補足・更新情報
  • 2012年12月29日現在、このテンプレートは申請中・承認待ちです。 2012年12月31日承認されました。
  • 2013/01/01 長い英文やURLがエリアよりはみ出る事があったので、改行に関するスタイル「word-wrap:break-word;」を追加しました。
  • 2013/01/02 記事エリア内にエリア以上の幅のスクリプト等を貼り付けた場合にスクロールバーが出てかっこ悪いので、スクロールバーが出ないように.entry_bodyに「overflow:hidden;」を設定しました。これにより記事エリアよりはみ出た部分は表示されないので、エリア内に収まるように元の幅を適度に調整してください。
  • 2013/01/02 youtube動画等のiframe表示ははみ出ないように「max-width:100%」を設定していますが、youtubeの仕様でサイズが小さすぎる場合に「Video player is too small」というエラーが出ます。たぶん小さすぎると広告が正常に表示できないケースがあるからだと思います。調べたところheight:232pxが最小のようなので、エラーが出る場合はiframeのheightを適度に調整してください。また、ニコニコ動画やFC2動画等のscriptタイプの動画はcssで調整できないので、エリアから見切れる場合は元のサイズを調整してください。
  • 2013年1月6日、amazonアフィリエイトの画像が表示されない場合は、CSSの▼デフォルトにあるimgのmax-width:100%;を削除してみてください。
  • 2013年1月19日、「続きを読む」部分のタグを微修正しました。大きなサイズの文字の行間が狭くなる事があったためline-heightの単位を変えました。
  • 2013年1月21日、入力フォームがエリアよりはみ出るケースがあったので、inputタグにmax-width:100%;を設定しました。
ブログ村

THEME:ブログカスタマイズ | GENRE:ブログ | TAGS:

COMMENT

教えてください

はじめまして。
ブログのテンプレートお借りしております。
早速ですが、WANTEDの文字の上にブログタイトルが来ます。WANTEDの代わりにブログタイトルを入れたいのですが、HTML編集のどの部分を変更すれば良いですか?
また、全体的にもう少し横長にしたいです。ご教授お願い致します。

pcqq7222さん

はじめまして、こんばんは。

WANTEDとブログタイトルの部分はCSSにて定義してますので、次の部分を変更してください。

#wanted
#header_content h2

#wantedの中でWANTED画像を定義しています。
#header_content h2の中でブログタイトルを定義しています。
どのように変更したいのか具体的にわかりませんので、これくらいしかアドバイスできませんが、大丈夫でしょうか。


また、横長にしたい件ですが、バックの画像の作り直しも必要になるため、難易度が高いです。
一応CSSの変更箇所を書きますが、見て理解できないようであれば難しいかなと思います。

例)センターカラムを今より200px増やす場合に変更する箇所

■3カラム全体の幅
#container{
width:1050px; ←1250pxに変更
margin-left:-525px; ←625pxに変更
}

■センターカラムの幅
#center_area{
width:560px; ←760pxに変更
}

これより下は画像の差し替えになります。
ちょうどよいサイズの画像を作り直してアップロードし、URLを差し替えてください。

■ページの背景画像(木)
body{
background-image:url("http://blog-imgs-51.fc2.com/o/r/e/oreshiten/wood_wall200.jpg");
}

■センターエリアの背景画像(紙・上部)
#header_content{
background:url("http://blog-imgs-51.fc2.com/o/r/e/oreshiten/paper_conh.png");
}

■センターエリアの背景画像(紙・下部)
#footer_content{
background:url("http://blog-imgs-51.fc2.com/o/r/e/oreshiten/paper_conf3.png");
}

■センターエリアの背景画像(紙・中間部)
#main_content{
background:url("http://blog-imgs-51.fc2.com/o/r/e/oreshiten/paper_conm.png") repeat-y;
}

No title

おはよう御座います。
イメージとしては、
 WANTED
 (ブログタイトル)
の様にしたいです。出来れば、ブログタイトルも
同じ書式・色でしたいのですが、よろしくお願い致します。

pcqq7222さん

同じ書式と言うのは同じ書体という事でしょうか?
「WANTED」の文字は画像なので、それは難しいです。
やるとしたらブログタイトルを画像で作成して配置してください。

文字の色は変えられます。
まず、デフォルト重なっている「WANTED」とブログタイトルを2段にするためにはスペースが足りません。
簡単に実現するためには「WANTED」の画像サイズを小さくする方法がありますが、「WANTED」が背景画像になっていて、サイズの調整ができないため、普通の画像に切り替えます。
次のようにhtmlに1行追加して下さい。

<div id="wanted">
<img src="http://blog-imgs-51.fc2.com/o/r/e/oreshiten/wanted.png" style="width:560px;height:170px;">ここにこの1行を追加。
<h2><a href="<%url>"><%blog_name></a></h2>

widthとheightの値はお好みで調整してください。

あとはCSSを次のように編集します。

#wanted{
height:210px;
}

#header_hole{margin-top:0px;}

#header_content h2{
font-weight:bold;
font-size:16px;
margin-top:-30px;
}

#header_content h2 a{color:#432;text-decoration:none;}
#header_content h2 a:link,
#header_content h2 a:visited{color:#432;text-decoration:none;}
#header_content h2 a:focus,
#header_content h2 a:hover,
#header_content h2 a:active{color:#432;text-decoration:none;}

それぞれの数値はお好みで調整してください。
これで希望のレイアウトになると思います。

有難う御座いました

有難う御座いました。当方が思っている通り出来ました。
また、何かあればよろしくお願い致します。

EDIT COMMENT

非公開コメント

人気記事TOP10

SEARCHINA

PICK UP
NEW ENTRY
E-MAIL

名前:
メール:
件名:
本文:

MANAGEMENT