MY CSS DESIGN

最新記事のRSS

FC2ブログのテンプレート配布・作成日誌。

PREV | PAGE-SELECT | NEXT

≫ EDIT

ヒヨコ君増殖中テンプレートNEWS

はてさて今回のテンプレートはニュース系のサイトを意識して作ってみました。一見完成されているようにみえますが当テンプレートシリーズの特徴でもあるトップ画像変更やベースカラーの変更は他のテンプレート同様、簡単に変更可能にしてあるので好きなようにカスタマイズしてお使いくださいませ。尚、あまりにも需要が無いようなら管理していくのが面倒なので削除する可能性がありますので欲しい人はお早めにどうぞです。

ヒヨコ君増殖中テンプレートmenu750px版

何気に需要があるようなので復活。

■ 主な概要

  • テンプレート名:hiyoko-news
  • メニューの増減可能。
  • サイドメニュータイトル左ボーダーの色変更可能
  • 英訳リンクを挿入してみた。←半分ネタなのでいらなければ削除してください。※302Movedとか出てあまり使えないようです。
  • 管理リンクは新管理画面用にしておきました。
  • 印刷用CSS有り。
  • プラグインモードのみに対応
  • 不具合報告お願いします。

■ NEWS900px版

使用方法は土台となるHTML(hiyoko-news)をダウンロードしCSSのみを上書きしてください。尚、現在FC2ブログでは同ネームのテンプレートがダウンロードできなくなっているので両方とも必要な場合はダウンロードしたテンプレートをリネームしてください。そうすれば同じテンプレートでもダウンロード可能になります。

■ 基本的なカスタマイズ情報(野生の勘などを働かせて応用してください)

今回、追記の展開やツリースクリプトは外してあります。もしご利用になられるのなら別の当テンプレートのソースを参考に挿入くださいませ。

■ テンプレート利用規定

| FC2ブログテンプレート | Permalink | comments:52 | trackbacks:0 | TOP↑

COMMENT

★ kuroさん はじめまして
テンプレートご利用ありがとう。
サブメニューのプルダウン化については残念ならが
昔に挑戦してみたのですが自分の知識では不可能でした><;

またいつか挑戦してみようと思っているのでその時はよろしくです。

| ひよこ@管理人 | 2008/04/08 23:16 | URL | ≫ EDIT

凄く素晴らしいテンプです。有り難く使用させて頂いています。
そこで、質問が1つあります。
トップのサブメニューをプルダウンにしたいのですが、、。
是非お願いします。

| kuro | 2008/04/08 18:32 | URL |

★ ココロの樹さん
おめでとうでございます。
そうやって経験を重ねていって知識を身に付けていってください。
車買えたら報告しますw

| ひよこ@管理人 | 2008/03/28 21:09 | URL | ≫ EDIT

やったーでございます。ひよこさんのおかげで問題が無事クリアーできました♪

最初は頭がテンパッてるのでGIFの方にも「img { の border」らしきものがあったので、そちらのborderを削除したりと変なことばかりしていました。でも冷静になって考えたらスタイルシートの方だったんですね。ひよこさん、あんたは天才じゃぁ!

お礼に車が買えるぐらいアド■■スを押しときました(本当は4回だけどね)v-411

| ココロの樹 | 2008/03/28 00:52 | URL | ≫ EDIT

★ ココロの樹さん
テンプレートご利用ありがとう
いろいろはっつけてるのに綺麗にまとまってますね。

本題ですが画像の薄い枠を消したい場合は
img { の borderの一行を削除くださいませ。

コピペ読んで笑顔になってもらえれば幸いです。

| ひよこ@管理人 | 2008/03/27 20:30 | URL | ≫ EDIT

ひよこ管理人さま

はじめまして。素人がひよこさんのテンプレートを借りてブログを楽しませてもらっています。ホント感謝感謝です♪

ひよこさんに迷惑をかけちゃいけないと思い、できることは自分で調べながら遊んでいましたが、どうしても一つだけ解決しないんです。よろしかったら教えてください。

GIFで透過にするんですが、枠線がうっすら見えるんです。これって解決方法ありますか?

最後になりますが、笑った泣いたコピペ最高ですv-20

| ココロの樹 | 2008/03/27 12:32 | URL | ≫ EDIT

★ ZENOさん
変えられますがうちのテンプレートでそれをすると
多分ずれるのでお勧めしません。

ちなみに該当する場所は.navi-contents li { です。

| ひよこ@管理人 | 2008/03/16 23:00 | URL | ≫ EDIT

ありがとうございます。できました。
もう1つ質問なのですが文字の前につく●は他のものに変えられないのですか?

| ZENO | 2008/03/16 18:19 | URL |

★ ZENOさん
.navi-contents { のmarginで調整してください。

| ひよこ@管理人 | 2008/03/16 00:04 | URL | ≫ EDIT

プラグインタイトルの下のことです。

| ZENO | 2008/03/15 23:44 | URL |

★ ZENOさん
プラグイン上の空間といいますと何処の事でしょうか?

| ひよこ@管理人 | 2008/03/15 23:31 | URL | ≫ EDIT

ありがとうございました。
無事に表示できました。
もう1つ質問なのですがプラグインの上に少し空間ができてるんですが、コレはどうにかできないんでしょうか?

| ZENO | 2008/03/15 17:23 | URL |

★ ZENOさん
なるほど。
まずHTMLのヘッダ部分を下記のように変更。

<!-- ▼ヘッダ -->
<div id="header">
<h1><a href="http://abyssaltool.blog62.fc2.com/"><img src="http://blog-imgs-19.fc2.com/a/b/y/abyssaltool/tool.png" alt="Abyssal Tools" width="750" height="55" border="0" /></a></h1>
</div>
<!-- ▲ヘッダ END -->

次にCSSに下記を追加。

#header h1 {
margin: 0px;
padding: 0px;
}

これでいけると思います。

| ひよこ@管理人 | 2008/03/14 22:53 | URL | ≫ EDIT

http://blog-imgs-19.fc2.com/a/b/y/abyssaltool/tool.png
↑のようなのにしたいんですが・・・

| ZENO | 2008/03/14 16:18 | URL |

★ ZENOさん
ブログタイトル裏の背景画像の事ですか?
変えようとしているTOP画像を見せていただければ多分即答できます。

| ひよこ@管理人 | 2008/03/13 23:00 | URL | ≫ EDIT

TOPを画像にするにはどうすればいいのでしょうか?

| ZENO | 2008/03/13 21:54 | URL |

★ kotobukiさん
はい。お疲れ様です。

| ひよこ@管理人 | 2008/03/01 01:52 | URL | ≫ EDIT

ひよこさん
無事できました☆
ありがどうございます^^

| kotobuki | 2008/02/29 17:35 | URL | ≫ EDIT

ひよこさん、はじめまして。
今回、はじめて、ひよこさんのテンプレートを発見して、
すごくカッコイイと思い、使わせていただいています。

まだ、自分なりのカスタマイズはできていませんが、
これからゆっくりとやっていきたいと思います。

ありがとうございます!

| ケータイについていろいろ | 2008/02/29 12:21 | URL | ≫ EDIT

★ kotobukiさん はじめまして
テンプレートご利用ありがとう。

早々本題ですが
続きを読むの下線は下記をCSSに追加すれば消えます。

.entry_more a {
text-decoration: none;
}

文字の先頭に付く「●」を消したいと言うのはサイドメニューのリストマークの事かなもしそうなら.navi-contents ul { に list-style-type: none; を追加してください。そうすれば消えます。

| ひよこ@管理人 | 2008/02/29 00:15 | URL | ≫ EDIT

こんにちは。
現在、FC2blogで「hiyoko-news」をお借りしていますが
右カラムの文字と追記の「続きを読む」の文字の下に付く
下線と文字の先頭に付く「●」を消したいと思っていますが
どこを変更したらいいのでしょうか?自分なりに色々と調べて
みたのですが分かりません。よろしくお願いします。

| kotobuki | 2008/02/27 12:28 | URL | ≫ EDIT

★ りりさん ご報告ありがとう。
FC2ブログの翻訳機能はGoogle翻訳を利用しているようなのでGoogleからのメッセージが出るのは不思議な事ではありませんが、なにやら胡散臭いメッセージだったので「現在お客様のリクエストを処理できません。」でググってみました。

翻訳に限らずそのメッセージが表示される場合がたまにあるみたいですね。それらの情報を読んだ上で個人的にですが危険とは感じなかったので英訳リンクを外す事はしませんが気になるようなら取っ払ってくださいませ。

また何かあったら教えてください。

| ひよこ@管理人 | 2008/01/18 23:41 | URL | ≫ EDIT

お世話になります。テンプレートを使わせていただくかもしれません(確認中)。気に入っています。

英訳ですが、
現在お客様のリクエストを処理できません。ウィルスまたはスパイウェアが自動的にリクエストを送信しており、お客様のコンピュータまたはネットワークも感染された可能性があります。

アクセスの回復に向けて速やかに作業中ですので、今しばらくお待ちください。その間、ウィルスチェッカーまたはスパイウェア削除プログラムを使い、お客様のコンピュータがウィルスや他の不正ソフトに感染していないことをお確かめになることをお勧めします。

ご迷惑をおかけし申し訳ありません。今後とも Google をご活用いただきますようどうぞよろしくお願いいたします。


とのコメントが出てきました。

| りり | 2008/01/18 03:41 | URL | ≫ EDIT

★ 名も無き店主さん
はい。またどうぞ。

| ひよこ@管理人 | 2008/01/09 21:12 | URL | ≫ EDIT

ひよこ様>
おかげ様ですっきりとBlogがまとまりました。
他にも色々いじってみたいと思いますので、今後とも利用させていただきます。どうぞよろしくお願いいたします。
ありがとうございました。

| 名も無き店主 | 2008/01/08 23:44 | URL | ≫ EDIT

★ mさん
ああ。解決したようですね。
そうです原因はoverflow: hidden;です。いちおうWindowsIEのカラム落ち対策で付けてるんですが動画の表示を優先したいのなら仕方ありませんね。

| ひよこ@管理人 | 2008/01/08 21:08 | URL | ≫ EDIT

★ 名も無き店主さん はじめまして
テンプレートご利用ありがとう。トップ背景画像が良い感じですね。

本題ですが
メニューの幅を固定するならCSSの#submenu a {を下記のようにしてみてください。

#submenu a {
text-decoration: none;
display: block;
font-size: 12px;
font-weight: bold;
padding: 4px 0px;
border-right: 1px solid #CCCCCC;
width: 100px;
}

幅はwidthの値でで調節できます。幅が広がる事でメニューの数が制限されてしまうかもしれませんがこれでいけると思います。

| ひよこ@管理人 | 2008/01/08 21:06 | URL | ≫ EDIT

先ほどの件、イロイロいじっていたら
解決できました。

overflow: hidden; の記述をとるだけで
よかったんですね。
お騒がせしました。。

| m | 2008/01/08 20:29 | URL |

先日はありがとうございました。</div>以外は修正
出来たみたいです。コレでめでたし・・・と思っていたら
今回またまたお伺いしたいことがありまして・・・・

以前のpureではこのような表示が可能だったのですが
http://segafan.blog62.fc2.com/blog-entry-4871.html#more

上のリンクで確認してもらえばわかるのですが
見た目無視のオブジェクトがブログのサイズを
はみ出しているわけで・・

動画の大きさを最優先した形だったんですけど
新しいひよこさまのテンプレはきっちり固定化されて
しまっていて画面をはみ出さない仕様になっているみたい
ですよね。

コレを回避できる方法は・・・と無茶な質問を
したいと思います。。。

どこが違うのかもわからないチンプンカンプンな
ド素人なので今一度ご指南ください。

どうぞよろしくお願いします。

| m | 2008/01/08 20:02 | URL |

初めまして、テンプレートを利用させていただいています。
当方、小さい飲食店を営んでおりましてこういうテンプレを探しておりました。
が、使わせていただくに当たり、少々困った事が起きています。
上部メニューの幅がばらばらで、あまり見た目が宜しくないのです。
メニュー幅を均一化する方法、また、メニューに画像(ボタン)が使えるのかどうかをお教え下さい。
どうぞよろしくお願い致します。

| 名も無き店主 | 2008/01/08 15:50 | URL | ≫ EDIT

★ mさん
いえいえ。ところでFirefoxで閲覧していたので気付きませんでしたがIE6.0で見るとカラム落ちしてます。その部分もfooter部分と合わせてじっくりチェックしていってください。

| ひよこ@管理人 | 2008/01/06 00:30 | URL | ≫ EDIT

明快な回答ありがとうございました。

自分のCSSのTOP絵指定に
width: 100%; の記述が抜けていたので
記載したらバッチリでした!

・・・ただご指摘のあった最後のフッター記述部分の
バーナー</div>閉じ忘れは行方不明に・・・
こちらはほかにテンプレ不具合が発動していないので
修正できればとジックリチェックしたいです。

正月のガキの使いを見ながら2時間半かけても
わからなかったので感謝です!

| m | 2008/01/06 00:15 | URL |

★ mさん
応援ありがとうございます。ブログ拝見させていただきました。
なるほど。カスタマイズ情報にある『TOP画像に直接ブログタイトルを書き入れて使用したい。』を応用したのですね。あれはpureと犬テンプレートようなのでNEWSになると若干変わってきます。

■ HTML

<!-- ▼ヘッダ -->
<div id="header">
<h1><a href="<%url>"><img src="画像のURL" alt="<%blog_name>" border="0" /></a></h1>
</div>
<!-- ▲ヘッダ END -->

■ CSS

/* ----------------・トップ画像用設定 */

#header {
margin: 0px;
padding: 0px;
clear: both;
width: 100%;
}

#header img {
border: none;
margin: 0px;
padding: 0px;
}

#header h1 {
margin: 0px;
padding: 0px;
}

こんな感じになります。ただmさんのテンプレートは既にかなりのカスタマイズをなされているようなので上記のようにしても正しく表示されるかわかりません。それとfooter部分(最下層コピーライト)部分が画面いっぱいに伸びているという事はどこかにdivの閉じ忘れ等の記述ミスがあるかと考えられます。もし正しく表示されない場合は面倒ですがもういちど同じテンプレートをダウンロードして挿入するタグの記述ミスに注意しながらカスタマイズしなおしてみてください。

| ひよこ@管理人 | 2008/01/05 23:18 | URL | ≫ EDIT

・・・間違えました。
先ほどのHTMLはスタイルシートがわで
TOP絵の200以下選択でした。

ひよこさんの「TOP絵の高さを変更する」を参照に
変更いたしました。

| m | 2008/01/05 16:27 | URL |

かげながら応援しているものです。
テンプレートも愛用して利用させてもらってます。

今回テンプレート900バージョンということで
早速利用させてもらっておりますが
HTML側でTOP画像指定を200以下にして
200以下の画像を利用すると
オペラプラウザやsafariなどで画像がその下に
おいたコンテンツやバーナーにかぶってしまいます。
(今は200にしてスペースを空けています。
あとsafariでは右上にあるカコイイリンク群(ログインとか
も表示されていないみたいです。

自分もテンプレ知識があるわけでもないので(というより皆無
変更方法があるのかもしれないのでお伺い
したかったのとFC2側の不具合かもしれないと
思いまして報告とご質問をかねてさせてもらいました。

・・・でも今回のは相当カッコイイテンプレですよね!
年末だったから需要が少なかったと思いますよ。
次回作も期待しています!

| m | 2008/01/05 16:24 | URL |

★ aoiさん はじめまして!
いつもありがとうございます
もう少し需要があったら残したんですが・・・ごめんなさいです。
これからも使ってあげてください。
コメントありがとう。

★ 紀一 瑠璃さん 初めまして。
ダウンロードありがとうございます
背景の壁紙については下記リンクを参考にしてみてください。
http://www.doblog.com/weblog/myblog/3613/388294#388294

★ ゆきさん はじめまして
ダウンロードありがとう
MENUの変更なら下記リンクのソースを参考にしてみてください。
場所は<!-- ▼menu2 -->近辺です。

http://hiyokokun.blog2.fc2.com/?template=hiyoko-news_ore750&index

| ひよこ@管理人 | 2007/12/25 22:54 | URL | ≫ EDIT

はじめまして!
いつもテンプレート使わせていただいてます〜♪
使いやすくて重宝してます。

公開楽しみにしてたんで、すぐ終わっちゃってすごい残念です。
ダウンロードしたので900px版使わせてもらいました。
文字が大きくて幅広で見やすいテンプレを探してました。
これからも使用させていただきます。(^^)

| aoi | 2007/12/25 17:17 | URL | ≫ EDIT

初めまして。テンプレートをダウンロードさせていただきました。
壁紙なんですが、固定して一箇所に表示するのは無理なのでしょうか?
用件のみですが失礼いたします。

| 紀一 瑠璃 | 2007/12/25 10:24 | URL | ≫ EDIT

はじめまして。ゆきです。
ダウンロード間に合いましたが、上部メニュー1〜5の使い方が分かりません。
どのようにして使うのでしょうか?
初歩的な質問ですみません。宜しくお願い致します。

| ゆき | 2007/12/24 18:36 | URL | ≫ EDIT

★ やよいさん はじめまして。
嬉しいお言葉ありがとう。
目的があれば結構使えると思ったんだけど需要なかったです・・・とほほ
また機会があればこんな感じのを作ってみようと思うのでよろしくです。

| ひよこ@管理人 | 2007/12/24 12:35 | URL | ≫ EDIT

はじめまして。

今回のテンプレートですが、公開すごく楽しみにしてました。
早速ダウンロードして使わせて頂いております。

カスタマイズ性に優れていてニュースの記録サイトに使えるテンプレートを探していたので、まさに理想のテンプレートに巡りあえたって感じです。

これからも頑張ってください。

| やよい | 2007/12/23 22:08 | URL |

★ veadarさん
あーw 気を使わせてごめんなさいです。コメントなんて義務ではないのでぜんぜん無問題なのでお気軽にダウンロードくださいませ。

嬉しいお言葉ありがとう。これからもがんばりますよ。

| ひよこ@管理人 | 2007/12/23 21:13 | URL | ≫ EDIT

ダウンロードして愛用させていただいているのにコメントしていませんでした。
ごめんなさい。
新作のテンプレートも格好よくて使いやすそうです。
ひよこさんのデザインセンスはとっても好きですので、これからも頑張ってください。

| veadar | 2007/12/23 21:01 | URL | ≫ EDIT

★ ユイさん
うんうん。英訳の方法が変わったのかも。
需要なさそうだったので750px版をメインにしたよw

nofollowは無駄な部分が検索エンジンにインデックスされないように付けてみました。なのでその部分は残してリンクを書き替えてください。ただnofollowは通常?スパム避けで使用するものだから、もし何らかのペナルティがあるようならまた告知するから大丈夫だよ。←素敵キーワード使ってみたw

| ひよこ@管理人 | 2007/12/22 14:38 | URL | ≫ EDIT

コメントを見て仕様が変わったとこあるんだなと
ver1.5DLしました!
エントリーEDITの部分を新管理画面用に変更するのに
過去記事の管理画面への直リンク変更の手引きを見たのですが

rel="nofollow" ってのはそのままで その後をコピペでいいんですよね?
その部分は何だろう ブログのスパム対策とか書いてあったけど…

| ユイ | 2007/12/22 12:23 | URL | ≫ EDIT

この前は英語訳すると崩れてたけど
今はちゃんと見えます
ニュース系のブログにはぴったりなテンプレートだね♪
スッキリと見やすいし(*´・ω-)b

| ユイ | 2007/12/21 23:20 | URL |

★ Chakoさん こんにちは。
なるほど、説明とコンテンツのtext-alignは別々で設定するのが仕様なんですね。プラグイン部分のHTMLなんて数年前に弄ったっきりぜんぜん気にしてませんでしたw

全テンプレートを仕様に対応させました。
また何か気付いた事なんかあれば教えていただけると幸いです。
愛してます。

新作・・・IE7の不思議挙動に対応させていたら参考にもならないような微妙な作りになってしまいました。とほほ。でもこれぐらいのフォントサイズならMac使ってる人にも多少は優しいですよね。まあMacIEは完全に切り捨ててますがw

| ひよこ@管理人 | 2007/12/19 22:54 | URL | ≫ EDIT

こんにちは。
新作、ひよこくんワールドですね〜♪
すっきりと美しくて素敵です!

ところで、ひよこくん作のテンプレートをいくつかプレビューしていて気付いたのですが、
プラグインコンテンツの文字配置<%plugin_first(second,third)_align>が、
プラグインの説明(description,description2)の文字配置「ialign」になっているようです。

ウチではdescription2を右寄せしているプラグインがいくつかあるので、コンテンツ全部が右寄せになってしまいます。

こうなっているもの、公式テンプレでもよく見かけるんですよね…。

たぶん意図されたものでは無いと思いますが、もしそうならごめんなさい。

| Chako | 2007/12/18 17:56 | URL | ≫ EDIT

★ Fleisherさん はじめまして
ご報告ありがとう助かります。
タイトルが隠れる現象はIE7でも発生しますね。
基本的にWin2000のIE6で制作しているので全然気付きませんでした。
公開される前に何とか修正してみます。

また気付いた事などあればよろしくお願いします。

| ひよこ@管理人 | 2007/12/17 23:16 | URL | ≫ EDIT

はじめまして。ひよこ様のテンプレート愛用している者です。
公開が待ち遠しいです!

英語表示にすると、ブログタイトルが隠れてしまいました・・・
ブラウザはスレイプニルです。

英語にしないと思うので気にしませんが、一応報告してみました。

| Fleisher | 2007/12/17 20:31 | URL |

★ 北斗緑オーラさん
この手のテンプレートは需要が少し不安ですが作ってみました。
そのうち公開されると思うのでよろしければ使ってみてください。
嬉しいお言葉ありがとう。

| ひよこ@管理人 | 2007/12/16 20:12 | URL | ≫ EDIT

ひよこさん!びっくりです。新作・・・
かっこいいすっ
シンプルで機能性にすぐれていていそう・・・
テンプレ幅も適度に広げていて(900)
サイドブライングもいい感じの幅サイズ(270)!
とっても見やすい。

こんなかっちょいい新作を作成していたとわww・・・><

ますますひよこさんファンになりましたw^^

| 北斗緑オーラ | 2007/12/16 09:31 | URL |













非公開コメント

※現在hodogaya.kanagawa.ocn.ne.jpを書き込み規制しております。
書き込めない人は恐れ入りますがメールでお願いします。

TRACKBACK URL

言及リンクの無いトラックバックは受け付けておりません。

http://hiyokokun.blog2.fc2.com/tb.php/553-b59d5474

TRACKBACK

PREV | PAGE-SELECT | NEXT