DarkMatter_CSS3

20091202

共有テンプレート3作目、DarkMatter_CSS3。
DarkMatter_CSS3

ダークマターです。暗黒物質です。あんまり深い意味はありません(。- ∀ -)

今回もWebTreatsETCさんの超ハイクオリティ素材をお借りしました。

ボタン色等がなんともチープな感じですが、これはこれで「80年代のサイバー」な感じでいいんでないかなと、開き直りました。JUNOなんとかって云う古いシンセとかが好きな人には分かるかも‥。

今回は明示的にアダルトサイト不可と致しましたのでご了承下さい。今回もレイアウトスイッチ機能搭載です。以下、細かい仕様等と併せて記載しますので、お読み下さい(。-∀-)

今回もCSS3を多用しています。可能であれば色々なブラウザで見比べて、表示の違いを認識した上でお使い下さい。

レイアウト切り替え機能について

初期状態では左から、「メインエリア」「プラグイン1」「プラグイン2・3」の順で並んでいます。テンプレート中のbody開始タグの記述を以下のように書き換えることによって3パターンのレイアウトに切り替わります。

「メイン」+「プラグ1」+「プラグ2・3」(デフォルト)
<body id="wtt">
「プラグ2・3」+「メイン」+「プラグ1」
<body id="twt">
「プラグ2・3」+「プラグ1」+「メイン」
<body id="ttw">

インラインコンテンツの表示最大幅(※最新バージョンの数値)

動画プレイヤー等のSWFコンテンツ
480pxまで
画像(JPEG、PNG、GIF)
478px(もしくは99%)まで(記事内のリンク画像には自動で1pxのボーダーが付く為、このサイズ)
プラグイン表示部分の最大幅
185pxまで(種類問わず)

今回も記事部分は480pxのYOU TUBE動画サイズに、サイドバーは公式プラグインのQRの最大サイズに合わせています。

勝手ながら今回もいくつか微修正を行う予定ですので、たまにダウンロード頁の更新日時をチェックして頂けると嬉しいです。併せて、こちらの内容を書き換える場合もありますのでご了承下さい(。`-ω-´)

次回はすっきり系で攻めますので飽きたらまた見に来てやって下さい。
皆さんのブログライフを、冥王星の基地から電波をゆんゆん飛ばして応援しております(。-∀-)ノ

スポンサーサイト



コメント

No title

はじめまして。
質問をさせていただいてよろしいでしょういか?もし駄目だったら削除をお願いします。
この3作目のテンプレが気に入ったのですが、「プラグ1」の下に「プラグ2・3」をもってきて「メイン」+「プラグ1・2・3」の2カラム(と言うのでしょうか?無知なので間違ってたらすみません)にしたいのですが、それは可能でしょうか?
あと横500×縦500の画像がちぎれてしまって困ってます。これもちぎれないように全部載せるのは無理でしょうか。
色々調べたりしながらやってみたんですが、さっぱり分からなくて質問させていただきました。
駄目だった場合は本当にすみません。
お手数ですが教えていただけると大変助かります。
よろしくお願いします。

Re: No title

コメント有難うございます。「DarkMatter_CSS3」のサイドバー内をヘッダ付き2カラムにしたいと云う事ですね?もちろん可能です。
しかし、今作はカスタマイズを考慮せず製作しているので、出来れば私に加工をお任せいただきたければと思います。ブログのURLなど、連絡先をお教え頂ければそちらにカスタマイズしたソースコードへのURLをお送り致します。

ただし、既に全体的な幅が大きい為、若干プラグイン1・2・3の領域を狭くしなければなりません。例えば大きめのプラグインを「3」に配置するなら、「2」を小さめにする等の対応もしておきたい所です。「2」・「3」に配置予定の画像やブログパーツ等のサイズなどをお教え頂けると幸いです。URLをお教え頂ければこちらで計測の上、製作致します。

お手数ですが上記内容についての御返信をお願いします。
その後、取り掛かります(。-∀-)ノ

No title

本当ですか?カスタマイズしていただけるのですか?
ありがとうございます!
質問してよかったのか悩んでたので本当に嬉しいです!

よく理解できてないですが、でもプラグインの幅は伸びても縮んでも全然大丈夫です。
ブログパーツは私の今のブログのままでお願いします。
すみません。どれがブログパーツなのか分からなくて曖昧な答え方でごめんなさい。
プロフィールで使いたい画像の大きさは、今使ってる画像よりもあと1cmぐらい横幅があると嬉しいです。
でも無理だったら全然構いません。

あと質問なんですが、文字サイズ「小」はちゃんと表示されますでしょうか?
小さくならないテンプレが多いもので・・・。今使ってるやつも小さくなりません。
また「中」サイズが「大」並にでかいテンプレがよくありまして、これもまた今使ってるやつもそうなんですけど、私は標準的な「中」サイズが好きです。
色々調べても基本の文字サイズを変更する方法は載ってても、「中」や「大」を変更する方法は載ってなくて・・・。
でも結局無知すぎて基本サイズを変えることすら出来なかったんですけど(笑)

ブログのアドレスをURLのところに記入しておきました。
めちゃくちゃアホなブログなので堪らなく恥ずかしいですが、どうぞよろしくお願いします。
また何かあればご連絡お願いします。

Re: No title

完了しました。既にそちらのコメント欄にお届けいたしましたので、ご確認下さい(。-∀-)ノ

http://ethertank100design.blog75.fc2.com/blog-entry-7.html
現在、お届けしたものと同じテンプレートを使用しておりますのでこちらのエントリーで表示内容をご確認いただければ幸いです。おそらく問題は発生していないものと思われますが、お尋ねのような状態であるのならば、お使いのブラウザの「最小フォントサイズ」の指定などが影響しているのかもしれません(おそらくこのあたりも、後述するIE6でのフォントサイズ可変対応と引き換えに回避できているとは思うのですが‥。)

文字サイズの指定方法についてですが、FC2さんの基本エディタのサイズ名での指定方法だと、CSSファイル側での指定サイズに対しての相対的な大きさで指定されます。どの環境でも正確に再現されるようにするには、FC2エディタでの文字サイズ指定後だけ、もしくは最初から、HTMLエディタモードで、手打ちで指定方法を変えるのが確実かと思います。

以下のようにすれば基本フォントに対して1.5倍のサイズに。
<span style="font-size:1.5em;">文字</span>

また以下のようにすればピクセルサイズで指定出来ます。
<span style="font-size:23px;">文字</span>

ただし、ピクセル単位などの絶対値で指定すると、テンプレートを変えて基本文字サイズが変わった時もその部分のフォントサイズが指定したサイズのまま表示されてしまいます。またIE6(インターネットエクスプローラー6)に於いてユーザーによる文字拡大が出来なります。

上記の理由から、「サイズ名」「em(何文字分)」「%」等の単位を用いた相対的なサイズ指定が望ましいと考えます。このテンプレートでは既に IE6への対応は最低限のものにしてある為、基本サイズを既にピクセルによる指定にさせていただいておりますが、将来的なテンプレート交換の可能性を考えるとやはり、相対値での指定がお勧めです。但し、基本文字サイズが極小のテンプレートに交換した際の事を考えると、小さい文字のみ絶対値で指定する事も有効かと存じます。ちなみに当テンプレートの基本文字サイズは記事部分が「13px」、プラグイン部分が「12px」と、かなり小さめな指定になっています。これ以上小さいサイズの指定は、特に白背景では厳しいと思います。

なんか‥説明グチャグチャでごめんなさい。
他にも相関関係がいろいろあって、説明が難儀な問題なのです(。`-ω-´)

今回ご希望して下さったレイアウトの説明を拝見する限り、おそらく既にスタイルシートやHTMLにご興味がおありであるとお見受けしました。カスタマイズ後の内容はまさに最初仰ったような、「2カラムの中に2カラムがある状態」です。

WEBで色々分かりやすく解説してくださっている方もいらっしゃるので、お暇があればぜひそちらを参考にしつつ、自家製テンプレートにも挑戦してみて欲しいです。楽しいですよ!(。-∀-)ノ

No title

カスタマイズしていただき有難うございます!
まさか今日中にやって頂けるとは思ってなかったのでビックリしました。
こんなに大きいサイズの画像がプロフィールに使えるなんてもの凄く嬉しいです。
さっそく使用してみました。とってもかっこよくて素敵です!
本当に本当に有難うございました。

あと文字サイズについて詳しく教えてくださり有難うございます!
でもなんとなく分かるとこは分かるのですが、話が本格的すぎて細かいところまでは頭がついていけないです(涙)
なので父にも読んでもらって、それから分からないところを説明してもらおうと思います。
父が理解できることを祈るのみです(笑)

でも自分でもやってみますね。
もしそれで文字サイズが変わったら感動です!
今まで調べながらやってみたときは全て見事に失敗したので^^;
「やっぱりサイズ変わらない。なんでぇ~」って嘆いてました(笑)

あ!「大・中・小のサイズがちゃんと反映されますか?」と質問したのは間違いでした!
プレビューで自分の記事を見れば分かることなのにそのことをすっかり忘れていて、幽さんの記事では基本文字ばかりだったので「中文字とかどうゆう大きさなんだろう?」と思い、あのような質問をしてしまいました。
あれではまるで「ちゃんと表示されないんですが」って言ってるみたいですよね・・・。
ほんとうにすみません。ちゃんと表示されてます!

カスタマイズにはもの凄く興味があります。
だけど全くの無知で、基本の「き」さえ知らないような状態なので、カスタマイズしたいとか考えるだけでおこがましいぐらいです。
ですが自分で色々変更できたら凄く便利だろうなって思うので、これから少しずつ出来るようになれればなぁって思ってます。

今後、幽さん以外のテンプレも含め分からないところがあったらご質問させて頂いてもよろしいでしょうか?
もし駄目でしたら気にしませんのでそう仰って下さい。すみません。
では、今回は本当に有難うございました。
これからの腐女子生活は暗黒物質さんにサポートしてもらおうと思います♪

Re: No title

喜んでいただけたなら何よりです!問題ありませんでしたか?

文字サイズについては私の説明も正直、どうかと思います‥(・ω・`;)
とりあえずちゃんと反映されているという事で一安心です。「どんなブラウザで見ても文字サイズが同じでIE6でもちゃんと文字サイズが変化する」と云う方法や‥他にも色々あるのですが、個人的には一般の方のブログではそこまで対応する必要が無い様に感じています。若干ですが、読み込み速度とかにも関わってきますし。‥お父さんがんばって!w

いきなりブログのカスタマイズはかなり困難だと思いますが‥、例えば添付ファイルに忍ばせておいたhtmlファイルの様な「中央寄せ1カラム」でも、例えば自己紹介のページなんかには使えると思いますし、楽しいですよ!

何か間違いがあってここのアクセス数が倍増したりしない限りは、出来るだけ協力いたします。
ただ‥他の方のテンプレートへの記述となると、著作権的な問題があったり、フリーであっても、失礼に当たる場合もあるかと思いますので、もし作者さんがサポートを受け付けているようでしたら先ずはそちらにお伺いするのが宜しいかと思います(。`-ω-´)

私としましても、出来るだけ短期間で100本のテンプレートをリリースしようと企んでおりますので(笑)、他所様の作品のカスタマイズより、「こんなの作って!」と云った大雑把なリクエストの方が嬉しいかなー‥と思います(笑)

今回リクエストいただいたレイアウトに関して、既に別デザインのテンプレートで製作予定でしたが、後回しにしておりました。直接リクエストを頂いたことで、需要があるのだなと感じましたので製作の優先度を修正しようかなと思います。貴重なご意見、有難うございました。

あ、幅の狭いのプラグインを「2」と「3」に振り分けるともっとすっきりすると思いますよ!


それでは、楽しい腐女子ライフをお楽しみ下さい。

(。-∀-)っミ○ ←暗黒物質

No title

わぁ!返事ありがとうございます。
実は今、入院中なので家に退院できたらお父さんに聞いてみたいと思ってます。
まさに幽さんの言うとおり「お父さん頑張って!」です(笑)

そうですね。ほかの人のテンプレはまずその人に聞いてからにします。
それでも分からなかった時は、お時間が空いているようでしたら少し教えていただければ嬉しいなと思います。
でもなるだけ自分で頑張りますね!

100本ものテンプレを作るのですか!?凄いですね!ビックリです!
リクエストは今のところとくにないんですけど・・・(すみません/笑)
でもでっかい画像がプロフィールに使えるのはとても気に入りました!
ほかの人もそう思うのかは自信ないですけど私は好きです。

ではまた機会がありましたらよろしくお願いします。
本当にありがとうございました!

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

先程の者です。

前のコメントで書き忘れたのですが、
本文欄も画像や文字が多く入る様に
若干(2~3cm)広げて貰えると
嬉しいです。
無理言ってすみません。

Re: 先程の者です。

初めまして、こんばんは。コメントに気付かず返信が遅れて申し訳ありません。
ご希望のカスタマイズ、承ります(。-∀-)b

本文欄を広げるとプラグイン群の表示部を若干狭くせざるを得ませんので、その点はご了承下さい。もしブログパーツなどで、現在よりも大きいものを指定する可能性が有り、そのサイズ(幅のピクセル値)が現時点でお分かりでしたら予めお教えいただければ幸いです。特になければこちらでバランス等を考慮してカスタマイズ致します。

上記について御返信を頂き次第、取り掛かります。
何卒、宜しくお願いします(。-∀-)ノ

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

上記コメントの方へ

こんばんは。残念ながら、表示は私の意図するものとは異なっていますが、ご自身がご不満でなければそのまま使って頂いて問題ないです。html側テンプレの最後にある著作表示を消してご自身のテンプレートとしてお使いいただければ幸いです。ガンガンいじってみて下さい!

ただ、テンプレートには特定のブラウザだけのチェックでは分からないような細工を複数施していますので、なかなかカスタマイズは難しいと思います。特に各部の横幅の変更に関しては、プロ製作者レベルの方でないと適切な改変は難しいかと思います(。`-ω-´)

Operaに関しては、現在アルファ版の「ver10.50」からFirefoxやChromeなどとほぼ同様の表示結果が得られます。正式リリースまでそんなに時間はかからないと思います。IEはIE9から一部対応されると思われますが、当分先の事になると思います。その点は仕様ですのでご了承下さい。

また何か御座いましたらお気軽にご連絡下さい(。-∀-)ノ

2カラム化について

「ダークマター」すばらしいテンプレートですね! 是非ともお借りしたいのですが、自分のブログが2カラムのため、3カラムだと本文の改行がおかしくなってしまいます・・・このテンプレートを2カラムにするには、どのように設定変更すれば良いですか?? 素人質問ですみませんがお手すきのときで結構ですので、ご教示いただければありがたいです。ちなみに私のブログは下記URLです。よろしくお願いします。
http://rocketbus.blog75.fc2.com/

Re: 2カラム化について

お褒めいただき有難うございます!
お問い合わせの件ですが、少々難解な造りになっておりまして‥。説明が困難なので、出来る限りこちらでカスタマイズさせていただくようにしております。

既に出来上がりましたので、以下のリンクをクリックしてダウンロードしてお使いいただければ幸いです。勝手ながらご要望の点以外も変更してしまいましたので、もしご不満が御座いましたらお手数ですがまたご連絡下さい。


(っ-∀-)っ http://bit.ly/ctNDXW

ありがとうございました!!

さっそくカスタマイズまでしていただき、本当にありがとうございます! いただいたマニュアル通りにhtmlとcssをコピペしたらバッチリ2カラムで表示されました。まさにイメージ通りで感謝感激です。

それで、メインタイトルや本文との間隔を多少詰めていただきたく、下記のURLにスクリーンショットをアップいたしました。こちらもお時間のあるときで結構ですので若干の修正をお願いできれば有り難いです。何卒よろしくお願いします。

http://www.smart-net.jp/blog/layout.jpg

Re: ありがとうございました!!

あら‥余計な事しちゃいましたね。
何だか狭く感じたものでつい拡げちゃいました‥。申し訳ありません。

該当部分を修正しました。以前お渡ししたカスタムテンプレートのCSS側スタイルのみを以下のものに書き換えてご利用下さい。

(っ-∀-)っhttp://bit.ly/ctCpIy

Re: ありがとうございました!!

うわ~パーフェクトです! 大感謝です! 

本当に本当にありがとうございました☆☆☆☆☆

No title

申し訳ありません。
記事の下に固定(全ページに表示)して広告を表示したいのですが、(フッターではありません)どこにどの用に書き込めがいいか教えてください

何度かためして見たのですが、広告を表示させるとプラグイン3?がしたにきてしまいます。

~図解~
(通常)
title
記事ープラグイン①ープラグイン②

私が広告を入れると
title
記事ープラグイン①
広告(バナー)
プラグイン②

rimさんへ

申し訳ないのですが、おそらく頂いたコメントの意味が理解できておりません(・ω・`)
とりあえず、一般的な広告位置を想定して返信させていただきます。

<!--community-->

という変数が各記事に指定した「テーマ」及び「ジャンル」を表示するものですので、この変数の直前に

<div>広告</div>

などと入力すれば、各記事エリアに表示されます。
テンプレート編集画面で「CTRL + F」を入力し、先の変数を検索していただければ入力箇所がお分かり頂けるはずです。

当ブログにも現在、上記コードを埋め込んでみましたので、ご確認ください。
この位置がお好みでない場合は、大変申し訳ないのですが、
もう一度ご連絡いただけると幸いです。

No title

迅速な対応ありがとうございます。

まさに回答どおりの質問をいたしました。

感謝いたします。

プラグイン表示速度について

プラグインとメインの関係を

プラグイン2・3ーメインープラグイン1

としたのですが、

プラグイン2・3が遅れて表示されるようになってしまいました。

何か対策等ありましたら、どうぞよろしくお願いします。

No title

度々、すみません。

横メニューを挿入したいのですがどこに書き込めばよろしいのでしょうか?

また、タイトル部の背景を画像に変えることは可能でしょうか?

Re: プラグイン表示速度について

返信が遅れ申し訳ありません。

プラグイン2・3の表示遅れについてですが、
レイアウトのタイプに関わらず、本文部分→プラグインカテゴリ1→2→3の順序で表示されるように設計してあるので、当方ではあまり良い対策方法が提示できません。

・極力重いブログパーツを使用しない。
・表示が遅いブログパーツをプラグインカテゴリ3の末尾に移動する。
・1ページに表示する記事数の設定値を減らす。

上記の様な変更を行って頂けるのであれば、若干表示速度が向上すると思います。

Re: No title

> 度々、すみません。
> 横メニューを挿入したいのですがどこに書き込めばよろしいのでしょうか?
> また、タイトル部の背景を画像に変えることは可能でしょうか?

「横メニュー」と云うのはブログタイトル部分の下の横並びのメニュー(通称・グローバルナビゲーション)の事で宜しいでしょうか?? それでしたら、
<div id="header">
の閉じタグの後に記入して頂くのが最も簡単な方法です。
タイトル部の背景は #headerに対するスタイル指定で可能です。


====== ※例 =======

[HTML]
<div id="header">
(略)
</div>
<div id="grobal_navigation">
<ul>
<li><a href="<%url>" title="HOME">HOME</a></li>
<li>(略)</li>
<li>(略)</li>
</ul>
</div>


[CSS]

#header {
background-image: url(画像のURL) ;
background-repeat: ※repeat or no-repert ;
background-position: ※left top等、任意の位置を指定 ;
}
#global_navigation { /* 任意のスタイル */ }
#global_navigation ul { /* メニュー全体の背景など */ }
#global_navigation li { /* フロート及びその他のスタイル */ }
#global_navigation a { /* display:block等、任意のスタイル */ }

#global_navigation ul:after { /* クリアフィックスなど */ }

銀さんのスタイルシートに関する知識などについて当方でまったく把握出来ておりませんので、今回は細かい解説は省略させていただきます。

maineの幅の拡張希望

はじめまして

テンプレートがとても気に入り使用させていただきました。

今困っていることはYoutubeがうまく入りませんmaineを広げたいのですが規制がかかっているのでしょうか。

ご回答をよろしくお願いします。

Re: maineの幅の拡張希望

> はじめまして
>
> テンプレートがとても気に入り使用させていただきました。
>
> 今困っていることはYoutubeがうまく入りませんmaineを広げたいのですが規制がかかっているのでしょうか。
>
> ご回答をよろしくお願いします。


はじめまして!
メインカラム(#main)の拡張についてはスタイルシートを編集する事で実現できます。

しかし、当テンプレートは特定のモニタサイズ(XGA / 1024px * 768px 以上)に合わせて製作しているもので、またサイドバー領域幅も既にかなり小さい為、メイン領域の拡張はお勧め致しかねます。

以前、YOUTUBE の仕様変更の際、貼り付け用タグに含まれる初期サイズが変更となり、個人的にも不満を抱いておりました。しかし、現在では YOUTUBE上での貼り付けコード取得時に簡単にカスタムサイズを指定できるようになっているようです。

「幅」の入力欄に半角数字で「480」以下の数値を指定する事で、下部のプレイヤー部分を除く動画表示部分のみの縦横のサイズ比率を保ったまま、当テンプレートに合わせたサイズに変更可能です(縦幅は自動で計算され、補完されます)

※YouTube 動画の埋め込み - YouTube ヘルプ
http://www.google.com/support/youtube/bin/answer.py?hl=ja&answer=171780

より細身のテンプレートへの変更も見越して、480 より小さめな数字にしておくのも良いかもしれません。
(`-ω-´)b


承認待ちコメント

このコメントは管理者の承認待ちです
非公開コメント
Profile

ethertank(幽)

Author:ethertank(幽)
FC2ブログの共有テンプレートを量産します。
FC2ブログランキング

Template
共有テンプレート
Wood_and_Neon_CSS3
Wood_and_Neon_CSS3_T
DarkMatter_2col
DarkMatter_CSS3
Sound_of_Silence
Sound_of_Silence_W
共有テンプレート(スマートフォン用)
et_Chloroplast
et_Snow
[おNEW] et_BEAMS
Recent Entry
Recent Comments
Category
Tags

レイアウトスイッチ 黒背景 2カラム 3カラム 寒色 暖色 透過 無彩色 白背景 テンプレート変数 DummyText 1カラム  HTML5 スマートフォン 

Monthly Archives
Book
暗黒物質のTwitter
RSS
Access Ranking
[ジャンルランキング]
ブログ
1809位
アクセスランキングを見る>>

[サブジャンルランキング]
共有テンプレート
16位
アクセスランキングを見る>>
Calendar
05 | 2023/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Link
Mail

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

おすすめテンプレ作家さん

琴線に触れたテンプレート作家さんを勝手にリストアップ。


Pagetop