FC2ブログ用テンプレートの制作・配布。シンプルなデザインが多めです。
21:26
テンプレート名 : ad-astra
最新バージョン : 2.0
星々の軌跡。ManicStarがベースになっています。
タイトル画像の変更、左右カラムの切り替え、幅可変/固定の切り替えのほか、様々なカスタマイズ項目を用意。
プラグイン3はトップページの記事上部に表示されます。
バトン用専用スタイルあり。プラグインON/OFF対応。XHTML 1.0 Transitional。jQuery1.3.2をテンプレート内で使用しています。
Mac版InternetExplorerで閲覧する際には、スタイルを適用しないよう設定されています(ad-astra 2.0以降)。ご了承ください。
ver.2.0より、テンプレートの更新通知機能がつきました。更新があるとブログのフッタ部分に★マークがつきます。たまに確認していただけるとありがたいです。
以下の項目は簡易カスタマイズとしてまとめられています。
詳しくはスタイルシート上部を参照してください。
(バージョンによって項目に多少差があります)
記事中での使用を想定したいくつかのクラスが用意してあります。
(バージョンによって項目に多少差があります)
これまでは回り込みなどを実現するにはいちいちスタイルを直接書き込まなければなりませんでした。しかも、たとえばfloat : left;としただけでは画像と文字が近すぎて、見栄えが良くありません。そこで、テンプレート側で回り込みに関するクラスを用意し、余白などをいちいち設定しなくても良いようにしてみました。
指定方法
テキストを右へ回り込ませたい場合は、「class="f-left"」を、左に回り込ませたい場合は 「class="f-right"」を画像等の要素に追加してください。
<img src="画像のurl" class="f-left" />
太字の部分を追加すればOKです。
なお、このクラスは「2.写真風の枠」、または「3.シンプルな枠」と重複して設定することができます。重複して設定する場合は、
<img src="画像のurl" class="f-left photo" />
というように、半角スペースとともにクラス名を追加してください。
画像に対して写真風の枠をつけます。
「1.要素の回り込み」と重複して指定することが可能です。
こんな感じになります。
指定方法
imgタグに 「class="photo"」を追加してください。
<img src="画像のurl" class="photo" />
太字の部分を追加すればOKです。
画像に対してシンプルな枠をつけます。
「1.要素の回り込み」と重複して指定することが可能です。
こんな感じになります。
指定方法
imgタグに 「class="imgbox"」を追加してください。
<img src="画像のurl" class="imgbox" />
太字の部分を追加すればOKです。
記事中の任意の要素に枠をつけないようにします。
このクラスは、記事中の画像に枠を表示させるカスタマイズ(スタイルシート上部、簡易カスタマイズ内に項目があります)と組み合わせて利用してください。
「1.要素の回り込み」と重複して指定することが可能です。
指定方法 imgタグに 「class="noimgbox"」を追加してください。
<img src="画像のurl" class="noimgbox" />
太字の部分を追加すればOKです。
このテンプレートは、
クリエイティブ・コモンズ・ライセンス
の下でライセンスされています。
テンプレート各部分の原著作者・ライセンスは以下の通りです。
K.T | aIcUnOeo
Re: [template] ad-astra
はじめまして、こんにちは。
こちらのテンプレをお借りしています。
早速なのですが、記事開閉の「....続きを読む」をクリックしたときに
開く記事の下に、過去の記事も連なって表示されるのを
「....続きを読む」をクリックした記事だけを表示にするには
どのようにカスタマイズすれば良いのでしょうか?
どうかアドバイスのほどをよろしくお願いいたします。
rimse | 4HNZ8mMg
Re: [template] ad-astra
K.Tさん初めまして。
記事開閉の「....続きを読む」をクリックしたときに
開く記事の下に、過去の記事も連なって表示されるのを
「....続きを読む」をクリックした記事だけを表示にするには
どのようにカスタマイズすれば良いのでしょうか?
ごめんなさい、ちょっとよくわからないのですが…
私が作っているテンプレートはすべて、「続きを読む」をクリックした際には個別の記事のページへ移動する仕様になっているはずです。
それとはまた別のものでしょうか?
もう少し詳しい状況を教えていただきたいです。
お手数おかけしてすみません。
スリムなドラえもん | -
はじめまして!!
一目ぼれして使わせていただいてます!!
一つ質問なんですが、記事が増えてくると
崩れてしまうのですが、直らないでしょうか・・・
えっと右側の部分が下にいってしまうのですが・・・
初心者なので難しいことは分からないのですが、アドバイスいただけたら、嬉しい限りです。。
スリムなドラえもん | -
Re: [template] ad-astra
しつこくてすいません。。。
原因がわからないです。。
できれば、ずっとこのテンプレート使っていきたいのでお願いします・・
Re: [template] ad-astra
スリムなドラえもんさん、初めまして。
ブログを拝見させていただいたのですが、症状を確認することが出来ませんでした。
すみませんが、症状が発生するページや、お使いのブラウザなどを教えていただけませんか。
特定のページで症状が発生するような場合ですと、記事本文中で使用したタグが正しく閉じていなかったりということも考えられます。
スリムなドラえもん | -
Re: [template] ad-astra
すいません、解決しました・・・
原因はよくわからないのですが、
<a href="http://blogranking.fc2.com/in.php?id=306296"><img src="http://blog-imgs-26.fc2.com/t/i/b/tibario/a_02.gif" style="border:0px;"></a>こうゆうのタグって言うんですかね?
これの、文字が途中で切れていた記事をアップしたところ、右の部分が下に行っていました・・・
多分これが原因だったと思います(他の部分をいじってないので)
レスが遅れてすいませんでした。
とても気に入っているので、末永く使わせていただきます。
お忙しい中お手数かけましたことをお詫びもうします。
それでは、失礼します。。
Re: [template] ad-astra
解決したようで、安心いたしました。
これからもテンプレートを可愛がってやってください
ではでは。
kulo | V0Zz7F9Q
カスタマイズの質問
はじめましてad-astraお借りしています
rimse様のテンプレはとてもシンプルで
使い勝手がよさそう(まだ作り始めたばかりw)です。
どこかに独自性がどうというコメントがありましたが、rimse様のシンプルでスマートなテンプレは沢山の人に楽しんでもらえるいいテンプレだと思いますよ。
現にいいテンプレに出会えて助かっています。
時に質問なのですが
FC2の非公式カスタマイズHPで「画像をランダムで変更する方法」と言うのが載っていました。
そこで「をを!ad-astraの写真の部分がブログを開くたびに違ったら楽しい!」と思ったのですが、、。
ただそこのHPは公式テンプレ用の改造方法しか載っていなくて配布テンプレのどこを触れば同様の変更ができるのか初心者過ぎてわかりません(泣
すみませんがお助け願えないでしょうか。よろしくお願いいたします。
Re: カスタマイズの質問
kuloさん初めまして。
ad-astraをお使いいただきましてありがとうございます!
ad-astraでタイトル画像をランダムにする方法について、新しく記事にまとめてみました。
http://rimse.blog73.fc2.com/blog-entry-225.html
動作確認はしていないのですが多分大丈夫だと思いますので(適当)、どうぞお試しくださいませ
こんにちは。
ひとつ教えてください。
コメントを記入する画面でタイトルの
コメント コメントの投稿 トラックバック の最初の文字が黄色のなっている部分の色の変更をしたいのですがどこを変更すればよいのでしょうか。
よろしくお願いします。
kuroguroさん、はじめまして。
コメントありがとうございます。
該当部分については、スタイルシートの以下の部分が編集箇所になります。
ナンバリングなどを参考にお探しください。
/*[11.2]*/
div.comment h3:first-letter ,
div.trackback h3:first-letter ,
div.edit-comment h2:first-letter {
color : #cc6;
font-size : 1.5em;
}
この中の、「color」の値を変更してくださいませ。
hiro | -
こんにちは
ad-astra気に入ったので、使わしていただこうと思うのですが
タイトル画像って言うのでしょうか?星の写真は
変更させていただいてよろしいのでしょうか?
いいなら、どこを変更すれば反映されるのでしょうか?
答えていただければ幸いです^^★
hiroさんこんにちは。コメントありがとうございます。
> タイトル画像って言うのでしょうか?星の写真は
> 変更させていただいてよろしいのでしょうか?
もちろん大丈夫ですよ
スタイルシートの編集を行います。編集箇所はナンバリングを参考に探してみてください。
/*[3.1]*/
#header {
background-image : url("http://blog-imgs-41.fc2.com/r/i/m/rimse/adastra_title.jpg");
background-repeat : no-repeat;
background-position : 100% 0;
padding : 170px 0 110px;
color : #fff;
}
太字部分を、使いたい画像のurlと置き換えてください。
なお、編集の際にはこちらの注意点もご覧くださいませ。
http://rimse.blog73.fc2.com/blog-entry-102.html
http://rimse.blog73.fc2.com/blog-entry-232.html
Mitch.K | XoxlQHfE
タイトルのの改行について
初めまして。Mitchと申します。
ad-astraを気に入って使わせて頂いています。
ありがとうございます。
表記について質問があるのですが
私のブログタイトルが長く、途中で
自動的に折り返されているのです。
折り返さないようにするには
どのような設定が必要か、お教え頂けないでしょうか?
よろしくおねがいします。
Re: タイトルのの改行について
Mitchさんはじめまして。コメントありがとうございます。
タイトルを折り返さないで表示する方法として、次のものが考えられます。
1.タイトル部分の幅を固定
スタイルシートの編集を行います。
/*[3.2]*/
.header-container {
margin-right : 50%;
border : 1px solid #ccc;
border-left : none;
background-image : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/amaris_title_alpha.png");
background-repeat : repeat;
background-position : 0 0;
padding : 1em 1em 1em 3em;
}
太字部分を、
width : 450px;
と置き換えてください。これにより、幅を固定することができます。
幅は下線部分の数値を変えることで調整可能です。(最大で520px程度)
2.タイトル部分の文字サイズを小さくする
こちらもスタイルシートを編集します。
/*[3.4]*/
#title h1 {
margin : 0;
font-weight : normal;
font-size : 200%;
line-height : 1.1;
}
太字部分の数値を小さくすることで、文字サイズを小さくすることができます。
以上の1・2の方法を組み合わせることで、折り返さないで表示することができるようになるかと思います。
Mitch.K | XoxlQHfE
Re: タイトルのの改行について
お返事ありがとうございます!
早速試してみたところ、上手くできました。
ありがとうございます!!
幅を「大きくし」固定すれば良かったのですね。
まったく思いつきませんでした。
なぜか「固定=小さくする」と思い込んでいたようです。
引き続き、テンプレート利用させて頂きます。
これからも、宜しくお願い致します。
記事本文のフォントカラーを変更したいのですが。
はじめまして。10hillsと申します。
ad-astraを気に入って使わせて頂いています。
ありがとうございます。
首記の件ですが、可能でしょうか。
エントリの背景色をもう少し薄くし、フォントカラーをもう少し濃くしたいのですが、どこをいじればよいのかわかりません。
ご教授いただければ幸いです。
よろしくお願いいたします。
Re: 記事本文のフォントカラーを変更したいのですが。
10hillsさん、初めまして。コメントありがとうございます。
> エントリの背景色をもう少し薄くし、フォントカラーをもう少し濃くしたいのですが、どこをいじればよいのかわかりません。
カスタマイズするものをまとめてみました。次の記述をテンプレートの最後尾に追加してみてください。
div.entry {
color : #fff; /* 記事の文字色 */
background : #444; /* 背景色 */
border-color : #888; /* 記事の枠線の色 */
}
あとはコメントの通り、赤字の値を編集してください。
(一応、これを追加しただけでも『エントリの背景色をもう少し薄くし、フォントカラーをもう少し濃く』することができます。)
また、背景色の設定によっては枠線が消えたり、微妙な表示になりそうだったので、枠線についての設定もつけてみました。
rimse様
本当に有難うございます!早速反映させていただきました!
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
コメント20番のかたへ
原因・修正方法ともにわかりましたので、新規記事にて取り扱いました!
貴重な情報ありがとうございます!
お久しぶりです。その後お加減いかがですか?
ところで、以前使っていたこちらのほうが評判が良くてこっちに戻しました。
全記事表示についてはNudeのバージョンアップと同じにやればできちゃうのでしょうか?同じにやればいいならやってみたいなと思いますが、その場合は、あの記事の何番を挿入したらいいのかなと思って質問です。
あらためて作らないと、ということなら放置してくださってかまいません。流用できるならと思いついただけですので。
kiwamiさん、お久しぶりです。
最近は平穏な日々をすごしております(笑)
> 全記事表示についてはNudeのバージョンアップと同じにやればできちゃうのでしょうか?同じにやればいいならやってみたいなと思いますが、その場合は、あの記事の何番を挿入したらいいのかなと思って質問です。
全記事表示だけなら、
http://rimse.blog73.fc2.com/blog-entry-289.html
こちらの記事の、1・4・5を適用させれば大丈夫だとおもいます。
なおAd-astraは今後のアップデートで追記開閉・全記事表示などを実装させていく予定です。
ありがとうございます!
やってみました、できました(笑)。
当たり前ですね、これだけ丁寧にフォローしてもらっているのですから。
ありがとうございました。
>実装させていく予定
それはまた楽しみです。例によっていじくってますが、rimseさんの指示は的確なのでついていけると思います。いえ、ついていきます!どこまでも!←迷惑な顧客ですいません。
Author:rimse
ペンギンを愛してやまないペンギン病患者。
LOVEペンギン。
ただいまお仕事でえらいこっちゃしてます。
ブログのテンプレ作ってました。
共有テンプレートのページで、作者「rimse」と検索すると出てきます。
シンプルめのテンプレが多いかも。
Recent Comments