クリックでテンプレートのプレビューができます。

★ 基本情報

テンプレート名 : ad-astra
最新バージョン : 2.0

更新履歴 - Update history

09/10/08 : バージョン表記無し→2.0
[Modify] 追記開閉スクリプト実装
[Modify] 全記事一覧表示に対応
[Modify] 「前後の記事へのリンク部分」のスタイル変更
[Modify] プラグイン3の出力方法を変更
[Modify] 非常に長い記事の場合に生じるFirefoxのバグに対応
[Modify] 簡易カスタマイズ改良
[Modify] IE8用の微調整
[Modify] MacIEへのスタイル適用を除外
[Modify] pre、hrなどのデフォルトスタイル変更
[Modify] その他色々大幅更新

星々の軌跡。ManicStarがベースになっています。
タイトル画像の変更、左右カラムの切り替え、幅可変/固定の切り替えのほか、様々なカスタマイズ項目を用意。
プラグイン3はトップページの記事上部に表示されます。
バトン用専用スタイルあり。プラグインON/OFF対応。XHTML 1.0 Transitional。jQuery1.3.2をテンプレート内で使用しています。

Mac版InternetExplorerで閲覧する際には、スタイルを適用しないよう設定されています(ad-astra 2.0以降)。ご了承ください。

★ テンプレート更新通知機能つき

更新機能・見本 ver.2.0より、テンプレートの更新通知機能がつきました。更新があるとブログのフッタ部分に★マークがつきます。たまに確認していただけるとありがたいです。

★ カスタマイズ情報

★ 簡易カスタマイズ項目

以下の項目は簡易カスタマイズとしてまとめられています。 詳しくはスタイルシート上部を参照してください。
(バージョンによって項目に多少差があります)

  • フォントの設定
    • 基本となるフォント
    • ブログタイトルのフォント
  • フォントサイズの変更
    • 全体の文字サイズ
    • タイトルの文字サイズ
    • ブログ紹介文の文字サイズ
    • メインカラムの文字サイズ
    • 記事の本文の文字サイズ
    • サブカラムの文字サイズ
  • 文字色の変更
    • 記事の文字色
    • サブカラムの文字色
    • ブログタイトルの文字色
    • ブログ紹介文の文字色
    • 一部のアクセントカラー
  • 背景色の変更
    • 全体の背景色
    • 記事・コメント・トラックバック・プラグイン3の背景
  • 記事部分の枠の設定
  • カラム幅の変更
  • 記事中の画像に枠をつける
  • タイトル部分の設定
    • 画像の差し替え
    • 画像の縦幅の調整
    • 画像の配置の調整
    • ブログタイトル・ブログ紹介文エリアの横幅調整
  • 簡易カラーコーディネート
  • 幅可変/固定の切り替え
  • カラム配置設定

★ テンプレート独自クラスについて

記事中での使用を想定したいくつかのクラスが用意してあります。
(バージョンによって項目に多少差があります)

1.要素の回り込み

T38@sapporo 2081222_DSC00456

これまでは回り込みなどを実現するにはいちいちスタイルを直接書き込まなければなりませんでした。しかも、たとえばfloat : left;としただけでは画像と文字が近すぎて、見栄えが良くありません。そこで、テンプレート側で回り込みに関するクラスを用意し、余白などをいちいち設定しなくても良いようにしてみました。

指定方法
テキストを右へ回り込ませたい場合は、「class="f-left"」を、左に回り込ませたい場合は 「class="f-right"」を画像等の要素に追加してください。

<img src="画像のurl" class="f-left" />

太字の部分を追加すればOKです。

なお、このクラスは「2.写真風の枠」、または「3.シンプルな枠」と重複して設定することができます。重複して設定する場合は、

<img src="画像のurl" class="f-left photo" />

というように、半角スペースとともにクラス名を追加してください。

2.写真風の枠

画像に対して写真風の枠をつけます。
「1.要素の回り込み」と重複して指定することが可能です。
090109_DSC00477
こんな感じになります。

指定方法
imgタグに 「class="photo"」を追加してください。

<img src="画像のurl" class="photo" />

太字の部分を追加すればOKです。

3.シンプルな枠

画像に対してシンプルな枠をつけます。
「1.要素の回り込み」と重複して指定することが可能です。
DSC00069
こんな感じになります。

指定方法
imgタグに 「class="imgbox"」を追加してください。

<img src="画像のurl" class="imgbox" />

太字の部分を追加すればOKです。

4.枠をつけない

記事中の任意の要素に枠をつけないようにします。
このクラスは、記事中の画像に枠を表示させるカスタマイズ(スタイルシート上部、簡易カスタマイズ内に項目があります)と組み合わせて利用してください。
「1.要素の回り込み」と重複して指定することが可能です。

指定方法 imgタグに 「class="noimgbox"」を追加してください。

<img src="画像のurl" class="noimgbox" />

太字の部分を追加すればOKです。

★ 使用条件・ライセンスについて

Creative Commons License
このテンプレートは、 クリエイティブ・コモンズ・ライセンス の下でライセンスされています。
テンプレート各部分の原著作者・ライセンスは以下の通りです。

タイトル画像
"Kilimanjaro"/Stig Nygaard (Flickr)
Creative Commons License
HTML・CSS
"Ad-astra" / rimse
Creative Commons License
関連記事


コメント

  1. K.T | aIcUnOeo

    Re: [template] ad-astra

    はじめまして、こんにちは。
    こちらのテンプレをお借りしています。

    早速なのですが、記事開閉の「....続きを読む」をクリックしたときに
    開く記事の下に、過去の記事も連なって表示されるのを
    「....続きを読む」をクリックした記事だけを表示にするには
    どのようにカスタマイズすれば良いのでしょうか?

    どうかアドバイスのほどをよろしくお願いいたします。

    ( 09:54 [Edit] )

  2. rimse | 4HNZ8mMg

    Re: [template] ad-astra

    K.Tさん初めまして。

    記事開閉の「....続きを読む」をクリックしたときに
    開く記事の下に、過去の記事も連なって表示されるのを
    「....続きを読む」をクリックした記事だけを表示にするには
    どのようにカスタマイズすれば良いのでしょうか?


    ごめんなさい、ちょっとよくわからないのですが…
    私が作っているテンプレートはすべて、「続きを読む」をクリックした際には個別の記事のページへ移動する仕様になっているはずです。
    それとはまた別のものでしょうか?

    もう少し詳しい状況を教えていただきたいです。
    お手数おかけしてすみません。

    ( 12:00 [Edit] )

  3. はじめまして!!
    一目ぼれして使わせていただいてます!!

    一つ質問なんですが、記事が増えてくると
    崩れてしまうのですが、直らないでしょうか・・・

    えっと右側の部分が下にいってしまうのですが・・・

    初心者なので難しいことは分からないのですが、アドバイスいただけたら、嬉しい限りです。。

    ( 06:19 )

  4. Re: [template] ad-astra

    しつこくてすいません。。。
    原因がわからないです。。
    できれば、ずっとこのテンプレート使っていきたいのでお願いします・・

    ( 06:26 )

  5. rimse | 4HNZ8mMg

    Re: [template] ad-astra

    スリムなドラえもんさん、初めまして。

    ブログを拝見させていただいたのですが、症状を確認することが出来ませんでした。
    すみませんが、症状が発生するページや、お使いのブラウザなどを教えていただけませんか。

    特定のページで症状が発生するような場合ですと、記事本文中で使用したタグが正しく閉じていなかったりということも考えられます。

    ( 08:28 [Edit] )

  6. 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>こうゆうのタグって言うんですかね?
    これの、文字が途中で切れていた記事をアップしたところ、右の部分が下に行っていました・・・
    多分これが原因だったと思います(他の部分をいじってないので)

    レスが遅れてすいませんでした。
    とても気に入っているので、末永く使わせていただきます。
    お忙しい中お手数かけましたことをお詫びもうします。

    それでは、失礼します。。

    ( 15:33 )

  7. rimse | 4HNZ8mMg

    Re: [template] ad-astra

    解決したようで、安心いたしました。
    これからもテンプレートを可愛がってやってくださいe-68
    ではでは。

    ( 23:58 [Edit] )

  8. kulo | V0Zz7F9Q

    カスタマイズの質問

    はじめましてad-astraお借りしています
    rimse様のテンプレはとてもシンプルで
    使い勝手がよさそう(まだ作り始めたばかりw)です。
    どこかに独自性がどうというコメントがありましたが、rimse様のシンプルでスマートなテンプレは沢山の人に楽しんでもらえるいいテンプレだと思いますよ。
    現にいいテンプレに出会えて助かっています。

    時に質問なのですが
    FC2の非公式カスタマイズHPで「画像をランダムで変更する方法」と言うのが載っていました。
    そこで「をを!ad-astraの写真の部分がブログを開くたびに違ったら楽しい!」と思ったのですが、、。
    ただそこのHPは公式テンプレ用の改造方法しか載っていなくて配布テンプレのどこを触れば同様の変更ができるのか初心者過ぎてわかりません(泣

    すみませんがお助け願えないでしょうか。よろしくお願いいたします。

    ( 11:21 [Edit] )

  9. rimse | 4HNZ8mMg

    Re: カスタマイズの質問

    kuloさん初めまして。
    ad-astraをお使いいただきましてありがとうございます!

    ad-astraでタイトル画像をランダムにする方法について、新しく記事にまとめてみました。
    http://rimse.blog73.fc2.com/blog-entry-225.html
    動作確認はしていないのですが多分大丈夫だと思いますので(適当)、どうぞお試しくださいませe-68

    ( 14:37 [Edit] )

  10. kuroguro | -

    こんにちは。
    ひとつ教えてください。
    コメントを記入する画面でタイトルの
    メント メントの投稿 ラックバック の最初の文字が黄色のなっている部分の色の変更をしたいのですがどこを変更すればよいのでしょうか。
    よろしくお願いします。

    ( 21:24 )

  11. rimse | 4HNZ8mMg

    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」の値を変更してくださいませ。

    ( 11:40 [Edit] )

  12. hiro | -

    こんにちは
    ad-astra気に入ったので、使わしていただこうと思うのですが
    タイトル画像って言うのでしょうか?星の写真は
    変更させていただいてよろしいのでしょうか?
    いいなら、どこを変更すれば反映されるのでしょうか?
    答えていただければ幸いです^^★

    ( 16:26 )

  13. rimse | 4HNZ8mMg

    hiroさんこんにちは。コメントありがとうございます。

    > タイトル画像って言うのでしょうか?星の写真は
    > 変更させていただいてよろしいのでしょうか?
    もちろん大丈夫ですよe-68

    スタイルシートの編集を行います。編集箇所はナンバリングを参考に探してみてください。
    /*[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

    ( 23:04 [Edit] )

  14. Mitch.K | XoxlQHfE

    タイトルのの改行について

    初めまして。Mitchと申します。
    ad-astraを気に入って使わせて頂いています。
    ありがとうございます。

    表記について質問があるのですが
    私のブログタイトルが長く、途中で
    自動的に折り返されているのです。

    折り返さないようにするには
    どのような設定が必要か、お教え頂けないでしょうか?

    よろしくおねがいします。

    ( 00:34 [Edit] )

  15. rimse | 4HNZ8mMg

    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の方法を組み合わせることで、折り返さないで表示することができるようになるかと思います。

    ( 20:48 [Edit] )

  16. Mitch.K | XoxlQHfE

    Re: タイトルのの改行について

    お返事ありがとうございます!
    早速試してみたところ、上手くできました。
    ありがとうございます!!

    幅を「大きくし」固定すれば良かったのですね。
    まったく思いつきませんでした。
    なぜか「固定=小さくする」と思い込んでいたようです。

    引き続き、テンプレート利用させて頂きます。
    これからも、宜しくお願い致します。

    ( 02:13 [Edit] )

  17. 10hills | -

    記事本文のフォントカラーを変更したいのですが。

    はじめまして。10hillsと申します。
    ad-astraを気に入って使わせて頂いています。
    ありがとうございます。

    首記の件ですが、可能でしょうか。
    エントリの背景色をもう少し薄くし、フォントカラーをもう少し濃くしたいのですが、どこをいじればよいのかわかりません。
    ご教授いただければ幸いです。
    よろしくお願いいたします。

    ( 21:30 )

  18. rimse | 4HNZ8mMg

    Re: 記事本文のフォントカラーを変更したいのですが。

    10hillsさん、初めまして。コメントありがとうございます。

    > エントリの背景色をもう少し薄くし、フォントカラーをもう少し濃くしたいのですが、どこをいじればよいのかわかりません。
    カスタマイズするものをまとめてみました。次の記述をテンプレートの最後尾に追加してみてください。

    div.entry {
    color : #fff; /* 記事の文字色 */
    background : #444; /* 背景色 */
    border-color : #888; /* 記事の枠線の色 */
    }

    あとはコメントの通り、赤字の値を編集してください。
    (一応、これを追加しただけでも『エントリの背景色をもう少し薄くし、フォントカラーをもう少し濃く』することができます。)
    また、背景色の設定によっては枠線が消えたり、微妙な表示になりそうだったので、枠線についての設定もつけてみました。

    ( 23:30 [Edit] )

  19. 10hills | -

    rimse様

    本当に有難うございます!早速反映させていただきました!

    ( 11:18 )

  20. |

    管理人のみ閲覧できます

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

    ( 16:39 )

  21. rimse | 4HNZ8mMg

    コメント20番のかたへ

    原因・修正方法ともにわかりましたので、新規記事にて取り扱いました!
    貴重な情報ありがとうございます!

    ( 01:42 [Edit] )

  22. kiwami | XMciXXWA

    お久しぶりです。その後お加減いかがですか?

    ところで、以前使っていたこちらのほうが評判が良くてこっちに戻しました。
    全記事表示についてはNudeのバージョンアップと同じにやればできちゃうのでしょうか?同じにやればいいならやってみたいなと思いますが、その場合は、あの記事の何番を挿入したらいいのかなと思って質問です。

    あらためて作らないと、ということなら放置してくださってかまいません。流用できるならと思いついただけですので。

    ( 22:13 [Edit] )

  23. rimse | 4HNZ8mMg

    kiwamiさん、お久しぶりです。
    最近は平穏な日々をすごしております(笑)

    > 全記事表示についてはNudeのバージョンアップと同じにやればできちゃうのでしょうか?同じにやればいいならやってみたいなと思いますが、その場合は、あの記事の何番を挿入したらいいのかなと思って質問です。
    全記事表示だけなら、
    http://rimse.blog73.fc2.com/blog-entry-289.html
    こちらの記事の、1・4・5を適用させれば大丈夫だとおもいます。

    なおAd-astraは今後のアップデートで追記開閉・全記事表示などを実装させていく予定です。

    ( 11:53 [Edit] )

  24. kiwami | XMciXXWA

    ありがとうございます!

    やってみました、できました(笑)。
    当たり前ですね、これだけ丁寧にフォローしてもらっているのですから。
    ありがとうございました。

    >実装させていく予定
    それはまた楽しみです。例によっていじくってますが、rimseさんの指示は的確なのでついていけると思います。いえ、ついていきます!どこまでも!←迷惑な顧客ですいません。

    ( 18:20 [Edit] )

コメントの投稿

(コメントの編集・削除時に必要)
(管理者にだけ表示を許可する)

質問の際のお願い

テンプレートに関する質問は、それぞれのテンプレート専用の記事にて受け付けています。トップページの「Templates Information」から、各テンプレート用の記事へリンクが張ってあります。

質問の際には、情報の共有のため非公開コメントはご遠慮くださいませ。
また、使用しているバージョンによって編集内容が異なる事があるため、多くの場合ソースコードの確認が必要になります。出来る限りブログのURLを入力してください。ブログのURLを公開したくない場合は、質問内容を公開コメントで投稿した後、非公開コメントにてブログのアドレスを追加投稿してくださいませ。

質問以外のコメントは、ご自由にコメントしていただいて結構です。たくさんのコメントお待ちしております。


トラックバック

Trackback URL
Trackbacks


Recent Entries