入口 > スポンサー広告 > スポンサーサイト テンプレ - 特徴と使い方 > サイト風に使うには:初心者さん用

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--------

サイト風に使うには:初心者さん用

ブログの登録自体初めてで、カテゴリとかエントリとか何? ぐらいの方のためのマニュアルです。
以下の手順に機械的に従っていただければ、とりあえずサイトっぽい作品ブログにはできるかと思います。

※一例として、イラストサイトを作る場合を挙げて説明しています。写真や小説など、作品の種類によって細部は変わると思いますが、適宜応用してください。
黄色背景の字のところはお好きなものに変えてくださって構いません。
※途中、何回かプレビューした状態を画像で示していますが、作業開始時点で既に記事を書かれてたりすると、画像通りにはなりません。また管理画面のキャプチャ画像も、FC2の仕様変更に伴って微妙にずれが生じている場合があります。そのへんは多少違っててもスルーして進めていってください。




【1】準備する
・うちのテンプレのマニュアルですから、まずはうちのテンプレをDLしておいてください。
cho01_tenpureDL.png
「環境設定」→「テンプレートの設定」画面で「PC用」の「共有テンプレート追加」をクリックし、作者「ucd」で検索、「詳細」→「ダウンロード」

※現在、トラブルのため共有での公開はしていません。サイト内配布場所からコピーしてお使いください。


・何かと不便なので、簡易モードをOFFにしておきます。
cho31_kanimo-do.png
「環境設定」→「環境設定の変更」→「その他の設定」→「初期ページ設定」で「簡易モードを初期設定に「しない」にし、「更新」。


・後々のために表示記事数も変更しておきます。
cho03_kijisuusettei.png
「環境設定」→「環境設定の変更」→「ブログの設定」→「記事の設定」で、表の上から2つめの「記事(ページ別)」を「7~10」ぐらいにし、下にスクロールして「更新」ボタンを押しておきます。



・好みによりますが、さらに↑の下にある「投稿設定」もついでに変更しておくと便利です。
cho04_toukousettei.png「投稿設定」の2つめの表の「自動下書き保存」を「行う」、3つめの表の「画像のリンク」を「元画像にリンクさせて」、「サムネイル作成のサイズ」を横幅縦幅とも「240〜480」ぐらいの数に、そのまた下の「アルバム」を「ファイルアップロード時にアルバムに『追加しない』」にしておく、ぐらいがおすすめです。他にもその周辺の色々をお好きなように設定したら、「更新」ボタンを押しておきます。



【2】作品を用意する
ここではイラストサイトを作ることにして、画像を2枚用意しました。
 ブルーの絵
 ピンクの絵

これを、公式マニュアル通りアップロードしておきます。
(※作品がテキスト系なら、この作業は要りません。)


【3】カテゴリを用意する
公式マニュアルを参考に、「環境設定」→「カテゴリ管理」画面を出します。
cho06_categorywotukuru.pngまずは作品カテゴリを作ります。「カテゴリ名」横の空欄に「イラスト」と入れ「追加」。

日記もつけるとして、更に「日記」と入れ「追加」。

cho07_catemeikakikae.pngサイトの説明も欲しいとこですが、これは多分後々もあんまりいじらないカテゴリになると思うので、「カテゴリ一覧」の表に既にある「未分類」というのを使います。「未分類」を「アバウト」と変え、「修正」。

これで、サイト説明用のカテゴリ「アバウト」、作品用のカテゴリ「イラスト」、日記用のカテゴリ「日記」ができました。
この時点でプレビュー(「環境設定」→「テンプレートの設定」で「site_gitai_p」をクリック)すると
cho08_purebyu-1.png
こんな感じになってると思います。(ブログ名と説明は適当です)



これで記事のためのハコの準備が整いました。
いよいよ記事を書いていきます。



【4】サイト説明用記事を書く
公式マニュアルを参考に、「ホーム」→「新しく記事を書く」画面を出します。
cho09_aboutkijiwokaku.png
タイトル欄に「サイトについて」とか記入し、カテゴリを「アバウト(など、【3】で決めたサイト説明用のカテゴリ)」にして、「本文の編集」にサイトの説明を書きます。

cho10_miraihidukedehozon.pngさらに、画面のずーっと下の方にある「記事の設定」の「日時設定」で、日付を未来のものに(2030年とか、うんと未来に)(設定できるのは15年先の12月31日までのようです)してから「記事を保存」ボタンをクリックします。
※ここで設定した「年」と「月」は後で使うので、覚えとくかメモしといてください。(☆)



【5】作品用記事を書く
もう一度「新しく記事を書く」画面を開きます。
cho11_irasutokijiwokaku.png今度はカテゴリを「イラスト(など、【3】で決めた作品用カテゴリ)」にした上で、まず「本文の編集」に前振り的な説明を書き、「追記の編集」に公式マニュアル通りイラストを挿入し(テキスト系ならこの作業はもちろん不要です)(追記部分に直接作品を書き込んじゃってください)、必要ならキャプション的な説明なども書いて「記事を保存」します。今度は日付はいじらなくていいです。
ここでは2枚イラストを用意したので、この手順を繰り返し、1記事に1枚ずつ、2つ記事を書きます。



【6】作品もくじ用記事を書く
cho12_adoresukakunin.png【5】で作った作品用記事の個別ページを開いてみて(「ホーム」→「過去の記事の管理」で記事のタイトルをクリックするとその記事のページが開きます)、アドレスを調べます。

cho13_mokujikijiwokaku.png次に別窓か別タブで「新しく記事を書く」画面を開き、タイトルを「イラストもくじ」などとして、公式マニュアルを参考に、「本文の編集」にさっき調べた作品ページへのリンクと作品の説明を目次っぽくわかりやすく書きます。
(例えばうちの小説展示例もくじだと、こういう感じで書いています。)


cho14_mokujikijiwohozon.pngさらに、画面のずーっと下の方にある「記事の設定」の「日時設定」で、日付を【4】と同年同月かつ、1日〜数日古い(小さい数の)日付にしてから、「記事を保存」ボタンをクリックします。



【7】日記用記事を書く
cho15_nikkikijiwokaku.png必須というわけではないのですが、あとでわかりやすくなるのでひとまず幾つか書いておきましょう。
カテゴリは「ダイアリー(など、【3】で決めた日記用カテゴリ)」にし、タイトルは「日記1」「日記2」、本文は「あああああああ」「えええええええ」とかで構いませんので、3~4記事適当に書いて保存しておいてください。日付は今回は気にしなくていいです。書いたら即「保存」でOKです。


この時点でプレビューすると
cho16_purebyu-2.png
こんな風になってると思います。




これで大体のコンテンツが出来上がりました。
あとは見た目をいじっていきます。
もうちょっとですよー がんばってください!



【8】テンプレートの設定をする
cho18_tenpurehensyu.png「環境設定」→「テンプレートの設定」で、「site_gitai_p」の横の「編集」をクリックしてから

cho19_csshensyu2.png画面下の方の「site_gitai_p のスタイルシート編集」までスクロールし、更にこのテキストボックスの中をまたずーっとスクロールして、一番最後の「/*★★★★ 基本の設定ここから ★★★★*/」とある部分について、
「yyyymm」を上で控えておいた「☆」の年月の数字に書き換えてください。

例えば、今回の例では案内と目次記事を「2037年6月」の日付で保存したので、編集後は以下のようになります。

/*★★★★ 基本の設定ここから ★★★★*/

/*** 日記風・サイト風表示分岐(yyyyを年、mmを月の数に) ***/
.mokuji { display: none; }
.category_date_203706 .mokuji { display: block; }
.category_date_203706 .nikki { display: none; }

/*** 案内・目次記事を入口新着情報と全記事一覧から隠す(yyyyを年、mmを月の数に) ***/
.date_203706 { display: none; }

/*★★★★ 基本の設定ここまで ★★★★*/


ここまでできたら、編集画面右下の「プレビュー」をクリックして
cho16_purebyu-2_2.pngこんな風に画面下の方から「サイト説明記事」「作品もくじ記事」が消えていたらOKなので、「更新」ボタンを押して保存します。



【9】確認する
改めて、「テンプレート管理」画面で、「site_gitai_p」をクリックしてプレビューします。
アドレスバーに「http://ブログアドレス/?template=site_gitai_p&index」のように表示されていると思うので、末尾の「index」を「cat=0」「cat=1」「cat=2」と色々変えてみてください。これで各番号のカテゴリ画面が呼び出せるのですが、「サイト説明用カテゴリ」の場合は「サイト説明記事だけ」が、「作品用カテゴリ」の場合は「作品もくじ記事だけ」が、日記用カテゴリの場合は「日記記事いくつか」が、それぞれ出てくるようになっているはずです。
(なっていなかったらどこかで間違えているので、上の手順をひとつずつ確認し直してください。)
同様に、アドレスバーの「index」部分を「no=記事番号」に変えれば、個別記事画面が確認できます。
例えばブルーのイラストのページは大体こんな風になっています。(画像が左に寄ってて違和感があるなら、記事の編集画面で画像タグを「<div style="text-align:center;">」と「</div>」で挟んでみてください。文章も揃えたいなら文章も一緒に挟んでください。)
また、同じく「index」部分を「all」にすれば、全記事一覧画面が確認できます。入口新着情報右下の「»」から飛べるページです。サイト説明記事と作品もくじ記事が表示されていないことを確かめてください。



【10】その他微調整
最後に色々調整します。

◎もし日記記事を新着情報や全更新履歴から消したいときは、
cho17_nikkicatnokakunin.png
入口画面下の新着情報部分の「日記」というカテゴリ名をクリックして、出てくるアドレス「http://ブログアドレス/blog-category-X.html」の「X」の数値を覚えるかメモしておき、
「テンプレート管理」画面で「site_gitai_p」のスタイルシート最下部

/*** OPTION ***
**** 入口新着情報と全記事一覧に載せたくないカテゴリがある場合は
**** ↓の「X」をそのカテゴリの番号に書き換えてください ***/
.cat_X { display: none; }

赤字「X」をその数に書き換えてください。「プレビュー」してこんな風に新着情報が作品記事だけになっていたらOKなので「更新」クリックで保存します。

◎【7】の日記記事はテスト用に書いただけですので、削除してしまいましょう。
cho26_purebyu-nikkisakujo.png「ホーム」→「過去の記事の管理」画面で、(記事番号が表示されていたら左上の「#」をクリックして)日記テスト記事のチェックボックスにチェックを入れ、「一括削除」ボタンを押します。

◎画面上部に常に表示されている検索バーは、レイアウトを狂わせてしまうことがあるので、差し支えなければ「環境設定の変更」→「ブログの設定」→「検索バーの設定」で「利用しない」を選択し「更新」してください。
検索バー非表示検索バー非表示

◎一番上の記事に表示される広告が鬱陶しい場合は、開設後1週間経ってから「環境設定の変更」→「ブログの設定」→「画像高速表示の設定」で「利用しない&広告を表示しない」を選択して「更新」してください。(開設1週間は強制表示されます。)
画像高速表示広告削除

◎記事ページを見てみて、twitterなどのボタンの色や位置が気に入らない場合は、「環境設定の変更」→「ブログの設定」→「記事の設定」の下の方で好きなように設定し、「更新」ボタンを押してください。拍手機能が必要な場合はFC2拍手等に登録し、こちらを参考にタグを追加してください。
・というように色々設定した上で、【9】の手順でプレビューしてみて、大体どこも問題無いようだったら、「環境設定」→「テンプレートの設定」画面で「site_gitai_p」の左の○にチェックを入れ、「適用」ボタンを押してください。



お疲れさまでした!! これで、ブログを利用した作品展示サイトとしての体裁は一応整ったかと思います。
あとは作品ができたら【5】の要領で作品記事を作り、その記事のアドレスで【6】の目次にリンクを増やしていけばOKです。
日記は日記用のカテゴリで普通に書きましょう。でももし【10】で日記記事を新着情報から消しているなら、日記更新ばかりが続くと入口ページに新着情報がひとつも表示されなくなってしまうので注意しましょう。

その他、カスタマイズ方法もこちらで色々まとめています。簡単なものもありますから、ぜひちょこちょこ試してみて、オリジナルのブログサイトを作ってください。
(例えば、今多分テンプレートの管理画面が開いてると思うので、その「スタイルシートの編集」の方のテキストボックスの一番下に「body { background: aliceblue; }」と入れて「プレビュー」してみてください。……なんかちょっとかわいくなったんじゃないでしょうか? かわいい言葉を入れたらかわいくなった何これ楽しい! と思われたら、それがカスタマイズの楽しみです、ようこそこっちの世界へ! 「aliceblue」を「snow」とか「mintcream」とか「lemonchiffon」とか「honeydew」なんかにしてもかわいいんですよ!! これらはデタラメな言葉なわけではなく、colornameとして予め決められています(参考)。もちろん背景色を変えろとかこれにしろというわけではないですし、詳しい正しい仕組みとかはスタイルシートの解説サイトなどを参照していただいたらいいんですが、とりあえず自分でいじってみるって楽しいよ~結構色々できるもんだよ~ということが伝われば、そしてうちの何もないテンプレがその材料のひとつになれば、とwebの片隅で願っています。 という蛇足でした。)
スタイルシートを多少いじろうがHTMLを変えようが記事はなくなりませんしパソコンも壊れません。トライ&エラーを繰り返してコツを掴んでみてください。カスタマイズの前にテンプレートを「複製」しておくと更に安心です。
cho27_tenpurehukusei.png

ご質問やお気づきの点があればメルフォ又はコメントからご連絡ください。お返事はお返事カテゴリにてさせていただきます。
2012-12-13
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。