FC2ブログ共有テンプレート作ってみた。破れた紙風
torn_paper テンプレートイメージ
またまた３カラムのテンプレート制作。
詳細：FC2ブログ共有テンプレート説明 torn_paper
背景と破れた部分は独立してるので、背景をお好みで変えると印象も大きく変わる。
★補足・更新情報
2013年1月1日現在、このテンプレートは申請中・承認待ちです。2013年1月2日承認されました。- 2013年1月5日、「もっと読む(#more)」や「コメント(#comment)」など、別ページのアンカーにジャンプした時にアンカーより上が表示されないという不具合があったので修正しました。３カラムのdivボックスの高さを揃えるためにcssに小細工をしてましたが、それが悪さをしてたので手法を変えました。
- 2013年1月6日、amazonアフィリエイトの画像が表示されない場合は、CSSの▼デフォルトにあるimgのmax-width:100%;を削除してみてください。
- 2013年1月11日、ウインドウ右下固定の「ページトップへ」の画像が、画面幅が狭いケースなどで、サイドメニューに重なった時に下側のリンク等をクリックできないため、サイドメニューの最下部に余白を設けて、重ならないようにしました。
- 2013年1月19日、「続きを読む」部分のタグを微修正しました。大きなサイズの文字の行間が狭くなる事があったためline-heightの単位を変えました。
- 2013年1月21日、入力フォームがエリアよりはみ出るケースがあったので、inputタグにmax-width:100%;を設定しました。
【 インターネット 】カテゴリーの記事一覧
- WordPressの「永続オブジェクトキャッシュを使用してください」問題を改善した話
- カラーミーショップからBASEに移転した時のリダイレクト方法
- メタキーワード（meta keyword）は俺的に必要
- 【FC2ブログからロリポップWordPressへ引っ越し】リダイレクト方法とconfでハマった話
- 2016年、アクセスが多かった記事
- 2015年、アクセスが多かった記事
- ジャッケスカード
- 2014年、アクセスが多かった記事
- 2013年、アクセスが多かった記事
- FC2ブログ共有テンプレート作ってみた。スライドショー
- FC2ブログ共有テンプレート作ってみた。奥入瀬
- FC2ブログ共有テンプレート作ってみた。月と木
- FC2ブログ共有テンプレート作ってみた。破れた紙風
- FC2ブログ共有テンプレート作ってみた。WANTED張り紙風
- 2012年、アクセスの多かった記事
- FC2ブログ共有テンプレート作ってみた。glass_boardシリーズ
- 2011年、アクセス数の多かった記事と検索キーワード
- 2010年、アクセス数の多かった検索キーワード
- ふざけながらも感動を与えるギャップが良い
- ■□君の隣で□■
- サポートも大変だろうけど、やっぱ電話窓口は必要
- やほお ごおｇぇ せお
- ２００９年のネット流行語大賞は「※ただしイケメンに限る」
- 俺と親父とネトゲ
- ジーンときた、いい話 「おばあちゃんのすごろく」
- ジーンときた、いい話 「天使です、これは」
- ジーンときた、いい話 「着物の少女」
あけましておめでとうございます♪
今年もどうぞよろしくお願いしますｍ（＿ ＿）ｍ
俺さん、いつの間にかすごいスキル＆バ～ジョンアップしてるんでねべが？（笑）
ロフト風の部屋（カラー）のテンプレート、光の加減が良い感じですｖ
あけましておめでとうございます。
こちらこそ、今年もよろしく。
このブログも４年目だから、始めた頃よりはだいぶスキルアップしてるかな。
まぁ始めたきっかけもSEOの研究も兼ねてだったし、仕事でもwebに触れる機会が多いからね。
わからない事あったら何でも聞いてｗ
今日から「破れた紙風」のテンプレートを使わせていただいております。お世話になります。
一つお願いがあるのですが・・・コメントで絵文字を入れる際、絵文字上部の数字と一行目のコメントが重なってしまいます。どう変更すればいいのか教えてください。（とは言っても私の理解力では、変更できるのか？物凄く危うい感じですが）
どうぞよろしくお願いします。
もしできましたら、「最新コメントをくれた方の名前」のみの文字色の変更が出来るでしょうか。
お暇な時にでもお願いします。
はじめまして、こんばんは。
絵文字の件ですが、普段絵文字など全く使わない無粋な野郎なもんで、全く頭にありませんでした。[絵文字:v-12]
絵文字のアヒルアイコンをクリックした時に表示される絵文字パレットみたいなやつの位置ですよね？自分で試してみたところ、特に問題は感じませんでしたが、使用に差し支える状態でしょうか？
あと「最新コメントをくれた方の名前のみの文字色の変更」、これは変数使えばできるのかなとは思いますが、具体的な方法が思いつきません。要望があるという事はそれを実現してるテンプレートがあるんですかね？どのテンプレートか教えてもらえたらソースを分析して、もしかしたらアドバイスできるかも知れません。
さっそく答えて頂きありがとうございます。
絵文字の件ですが、絵文字自体では全く問題ありません。最上部の〔ページ数字〕を変える際に少し見づらかったもので、出来れば1行分上に上がればと思ったものですから[絵文字:v-435]。
コメントをくれた方の名前の色だったのか太さだったのか定かではないのですが、違っていたブログを見た気がしたもので・・・すみません、どこのという記憶がありません。
特に使い勝手が悪いわけではないのです。
見やすくて綺麗なテンプレなので使わせていただきます。ありがとうございました。
はじめまして。
「破れた紙」テンプレート、きれいですね。
ブログをぜひこのテンプレートで作成させていただきたいと思っているのですが、プラグインの左寄せレイアウトができません。どのようにすればいいか教えていただけませんでしょうか？
FC2ブログのプラグイン設定画面でタイトル、コンテンツ、説明文ともに「左寄せ」に設定しても、すべて中央レイアウトになってしまいます。（「カテゴリー」だけは例外的に左よせが有効です）
はじめまして、こんにちは。
まず、CSSの▼サイドエリア・プラグイン１＆２の中に記述されている「text-align:center !important;」を全て削除してください。
これで全てデフォルトである左寄せになると思います。
次にプラグイン設定画面で指定した文字位置にするために<%plugin_first_talign>という独自変数をhtmlの▼プラグイン１▼の中にある次の<div>ボックスにスタイルで設定します。
<div class="plg_title" style="text-align:<%plugin_first_talign>"><%plugin_first_title></div>
<div class="plg_header_description" style="text-align:<%plugin_first_talign>"><%plugin_first_description></div>
<div class="plg_content" style="text-align:<%plugin_first_talign>"><%plugin_first_content></div>
<div class="plg_footer_description" style="text-align:<%plugin_first_talign>"><%plugin_first_description2></div>
▼右サイド・プラグイン２▼も同様に変更します。
こちらは<%plugin_second_talign>になります。
さっそく教えていただいた通りに変更してみたら、プラグイン設定画面の文字位置指定が有効になりました！
ありがとうございます！
Googleウエブマスターツールで「重複するメタデータ(descriptions)」があるのでHTMLを改善するよう指摘されてしまいます。すべてのページに"%introduction"が出てしまうのが問題のようなのですが、SEO対策上どのように変更すればいいのでしょうか？
たびたびすみません、お時間あるときに教えていただけると助かります。
http://customizefc2blog.blog.fc2.com/blog-entry-7.html
こちらの記事を見てもらえるとわかりますが、一般的なテンプレートよりは重複対策に力を入れています。
%introductionはブログの内容を示すものとして重要視していますので全てのページに入っていますが、それ以外の文章も入るように設計してありますので、それが原因で重複しているわけではありません。Googleの仕様が変わっていなければ、全体の中で一部重複していても全く同じでなければ重複とは見なされないはずです。
重複している例）ページＡ「あいうえお」、ページＢ「あいうえお」
重複していない例）ページＡ「あいうえお」、ページＢ「あいうえおかきくけこ」
実際に重複しているページのmeta descriptionを見ましたでしょうか？
この部分はGoogleへの反映が結構遅く、数ヶ月かかる事もありますので、まだ以前のテンプレートのものが反映されている可能性があります。
あと、前述の記事にも書いていますが、これでも完璧ではありません。
ページ送りした時のページや月別・日別ページ、ユーザータグのページなどは重複する場合があります。
ただ、これらのルートで記事を見る人は全体から見ると少なく、検索結果において一番重要なのはトップページと個別記事ページなので、普通のブログであればSEO的に障害になる事はほぼないと思います。
まず、これらのページがインデックスされる事が稀です。
私もSEOに興味を持ち始めた頃は全て完璧にしたいと思いましたが、今はこの重複問題はそれほど躍起にならなくても、やらないよりはやったほうがいい程度で、あまり影響は無いと考えています。
実際に重複が数千件あるサイトも運営していますが、ビッグキーワードで1位になっています。
全てのページが全く同じmeta descriptionとかなら問題だと思いますが、メインとなる部分にある程度対策をしたら、あとはあまり気にせずに中身に注力する事をオススメします。
さっそくご回答いただきありがとうございます。
なるほど、勉強になります。
重複はあまり気にせず良質なコンテンツを積み上げることにします。
ブログ初心者につき基本的な質問で失礼しました。
本当にどうもありがとうございました。
はじめまして！
ブログ初心者です(^_^;) 一般公開できないほど初心者なのでとりあえず練習用に下書きを書き溜めています。
そろそろ公開しようかと思い、テンプレに悩み始めました。
他ブログを使っている友人のように、Facebookの「イイネ」ボタンやシェアボタンを付けたいと思うのですが、貴テンプレートではそれらのボタンはありませんか？
他のテンプレには着いているのですが、デザインはこちらが絶対ステキなので追加できるなら教えていただきたいなぁと思います。
よろしくお願いします。
すみません(>_<)
使わせていただこうと思っていたのはglass_board_3colmnの方でした。あわててこちらに質問を書き込んでしまいました・・・（でもこちらもダウンロードさせていただいてマス(*^_^*)
ソースコードを調べれば、ご自身でそれらのボタンを設置する事はできると思いますが、管理画面の環境設定→ブログの設定にTwitterやFacebookとの連携を設定する項目がデフォルトでありますので、そちらを利用したほうがどのテンプレートを利用しても反映されてスマートだと思います。
早速のお返事有難うございます！
ずっとPCを見られない日々が続いており御礼が遅くなって申し訳ございません。
デフォルトであるのですね！
試してみます(^_-)-☆
初めまして。
こちらのテンプレートが素敵だったので、使わせていただきたいのですが、
背景（両サイドのカラー）を上記にある様に
色を変えてみたいのですが、どうしたら良いですか？
ド素人な質問で申し訳ないです。
新年早々、お忙しいと思いますが、宜しくお願いいたします。
スタイルシート編集の▼デフォルトのところにあるbodyの中の下記部分が背景の設定です。
background:url(http://blog-imgs-51.fc2.com/o/r/e/oreshiten/vintage_paper.jpg);
ベタ塗りカラーにする場合はこの部分を次のように変更してください。
background:#ff0000;
ff0000の部分が色指定です。
色はこちらでも参考にしてください。
http://noz.day-break.net/webcolor/
背景画像を使う場合は、使いたい画像ファイルをアップロードし、次のように括弧内のurlをアップロードした画像のurlに変更してください。
例１）
background:url(http://blog-imgs-49.fc2.com/c/a/t/cathausecattower/brown_marbled_paper_background_texture_seamless.jpg);
例２）
background:url(http://blog-imgs-48.fc2.com/c/a/t/cathausecattower/raster.png);
お忙しい所、お返事ありがとうございます。
おかげさまで上手く色を変える事が出来ました！
とても可愛くなって嬉しいです！
ご丁寧に背景の画像を使う方法まで教えて下さって
勉強になりました。今後、色んなパターンを楽しみたいと思います。
本当にありがとうございました♪
torn_paper利用させて頂きありがとうございます。
バックグランドの紙の破れた画像を別の画像に差し替えて利用するのは、色を変えるようなカスタマイズと同じ範疇で可能なのでしょうか？
醍醐味と言うべき箇所なので、カスタマイズ外であれば画像の差し替えは致しません。
突然の失礼な質問で申し訳ありません。
何も制限はありませんので、ご自由にお好みの画像に変更してください。
変更方法は、すぐ上のコメントに記載しております。
変更内容にも許可を頂き、重ねてありがとうございます。
おせわになります。
torn_paperでFC2ブログを作成させていただいているのですが、サイドのプラグイン、たとえば「最新記事」などの箇条書きリストの各行頭にマーカー（・）を表示させるにはどのようにすればよろしいでしょうか？
通常は以下で何もしなくてもマーカーが自動的に表示されると聞いたのですが、何か特別なことをしなければいけないのでしょうか。
<ul>
<li>リスト</li>
</ul>
恐れ入りますが、教えていただけますでしょうか。
スタイルシートの編集の中にある▼デフォルトの中の次の１行を削除するとデフォルトに戻りますので、マーカーが表示されるようになります。
ul,li{list-style:none}
おそらくマーカーを表示すると左寄せにしないと見栄えが悪いので、▼サイドエリア・プラグイン１＆２の中の次の部分を変更したほうがいいかもしれません。
.plg_body li{
padding: 4px 0px 2px 0px;
text-align:center !important; ←centerをleftに変更
}
また、サイドエリアを全て左寄せにするのであれば、▼サイドエリア・プラグイン１＆２の中のcenter表記を全てleftに変更してください。
お世話になります。
FC2ブログで「破れた紙」を活用させていただいております、うたまろです。
またちょっと教えていただきたく、質問させていただきました。
ブログに貼り付ける画像を小さく表示するため「・・・・ height="180" ・・・」のようにサイズ指定したところ、記事編集画面では問題なく指定どおりの大きさになるのですが、実際にアップロードされた本番の画面では指定が無視されてリンク元の画像そのもののサイズになってしまうようです。
これはどのようにすれば解決できるのでしょうか？
大きな画像を貼った場合でも画像がそれぞれのボックスの幅を超えないように（記事部分からはみ出したりしないように）CSSを設定しています。また、横幅を縮小した時に画像の縦横比（アスペクト比）が変わらないように縦サイズは自動取得になっています。（前述のようにはみ出た場合や、意図的に縮小する時も比率に合わせて計算するのが面倒だからです）もし、全て自分で指定したいのであれば、CSSの次の部分を削除してください。
img{max-width:100%;height:auto;}
宜しくお願い致します。
さっそく教えていただきありがとうございました。
実は"width"と質問には書いておきながら、実際には"height”を縮小指定しておりましたので、修正したらCSS自体を変更することなくうまくサイズ変更できました！ heightは自動で調整されるプログラムとのことで、こちらをいくら指定しても変更されなかったという理由もわかり納得しました。
ありがとうございました。
テンプレートの”torn_paper”を使わせていただいてます。ありがとうございます。
2点、教えていただけませんでしょうか。
1.壁紙の色をブルー系に変更したまでは良かったのですが、最新記事やカテゴリ〜の欄で表示されるリンク文字の色がどうしても変更できません（茶を白に）。CSSのリンクのところを触って見ましたがなんら変化が起きません。他に変更すべき重要な部分があるのでしょうか。ご教授願えればと存じます。
2.ブログのタイトル部分にイメージ画像を貼り付けることは可能でしょうか。画像のサイズは幅540・縦150を考えています。画像の貼り付けが可能であれば、現在黒字で表示されているブログタイトルは消去したいと思います。
質問は以上です。お時間のあるときに対応していただければありがたいです。よろしくお願いいたします。
1.リンク文字色の件
リンク文字色の設定は表示位置によって７ヶ所設定があります。
一度cssを丸ごとコピーしてメモ帳などのテキストエディタに貼りつけて「link」などのワードで検索してみてください。
７ヶ所見つかるはずですので希望のところを変えてみてください。
2.タイトル画像の件
htmlのh2タグのところがタイトル部分です。
<h2><a href="<%url>">ここに画像タグを入れる</a></h2>
参考URL
http://cathausecattower.blog.fc2.com/
※上記URLは検証用ブログの為、タイミングによっては全く関係のない状態になってる可能性があります。
リンク文字の色の変更、タイトル画像の挿入、ともにうまく行きました。タイトル画像を入れてしまうと元のタイトル文字が消えてしまいました。仕方がないのでタイトル文字を書き込んだ画像を表示することで、見かけをごまかしました。
ありがとうございました。