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

wanted_image.jpg

前回1~3カラムの3タイプ作ったけど、3カラムの反応が良かったので、今回は3カラムのみ制作。

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

インパクトはあると思うんだけど、その分クセが強いからどうかなぁ。
しかも画像多めだから、環境によってはちょっと重いかも?
足跡とかアクセス解析から、前回作ったテンプレートgrass_boardをダウンロードしたと思われる人のブログをこっそり見に行ったりしてるんだけど、センスある人は上手くアレンジしてるから、こっちも参考になるし刺激にもなるね。
じゃんじゃん改造しておくれ。

★補足・更新情報

  • 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%;を設定しました。

インターネット 】カテゴリーの記事一覧

5件のフィードバック

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

  2. はじめまして、こんばんは。
    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&quot😉 repeat-y;
    }

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

  4. 同じ書式と言うのは同じ書体という事でしょうか?
    「WANTED」の文字は画像なので、それは難しいです。
    やるとしたらブログタイトルを画像で作成して配置してください。
    文字の色は変えられます。
    まず、デフォルト重なっている「WANTED」とブログタイトルを2段にするためにはスペースが足りません。
    簡単に実現するためには「WANTED」の画像サイズを小さくする方法がありますが、「WANTED」が背景画像になっていて、サイズの調整ができないため、普通の画像に切り替えます。
    次のようにhtmlに1行追加して下さい。
    <div id="wanted">
    <img src="http://blog-imgs-51.fc2.com/o/r/e/oreshiten/wanted.png&quot; 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;}
    それぞれの数値はお好みで調整してください。
    これで希望のレイアウトになると思います。

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


コメントする