ありのごとくあつまりてFC2ブログカスタマイズ,共有テンプレート,素材リンク集,フリーソフトの紹介など。 迷子にならないブログ作りを目指し... 何か1つでも お役に立てる情報 を提供できたらいいなぁと思っています。

モード変更

この記事に含まれるタグ (Keyword) :
FC2ブログ  テンプレート  

FC2ブログ共有テンプレート ari_seo シリーズ # ReadMe #

2009/09/11 (金)  カテゴリー: FC2共有テンプレート

FC2ブログの共有テンプレートとして、このサイトとほぼ同じ見た目のテンプレート ari_seo1 が登録・公開されました。 公式テンプレートなどと比べると かなり異なる部分が多いので、主な特徴 や 各エリアでの機能 などを載せておきます。

以下、ari_seoシリーズ全般の 追記の内容を含みます。

共有テンプレート ari_seoシリーズ 一覧 (09/10/14 現在)

(↓ クリックすると、そのテンプレートでこの記事を表示したものが確認できます。)
FC2ブログ共有テンプレート ari_seo1
ari_seo1

Large font , cute version?
2009/09/11~
FC2ブログ共有テンプレート ari_seo2L
ari_seo2L

Large font , for Lady's
2009/10/13~
FC2ブログ共有テンプレート ari_seo2M
ari_seo2M

Medium font , for Men's
2009/10/14~


テンプレート ari_seoシリーズ について

  1. SEO対策 と アクセシビリティ に重点を置いて作ったつもりの... テンプレートです。 例えば、検索エンジンが重視する (と思われる) <title>,<h1>→<h2>→,<p>,<a> などの使い方に配慮し、(コメント部分は<h3>,サイドバーにはヘッダーなし...etc)  なるべく記事内容に焦点をおいてもらえるように作ってあります。
  2. 上部のナビゲーション部分は Stu Nicholls | CSSplay | Skeleton MenuSkeleton dropdown menu) を、私 (paruparu) が必死にカスタマイズしたものです。 スクリプト未使用 なので、スクリプトOFFでも動作します。
    ※IE6,IE5.x への対策として、条件分岐コメント(条件付コメント) などが使われています。 そのため、IE6 にも対応。 (IE5.5 でも見た目は ほぼ同じで一応機能しますが、動きはかなりもたつきます。 ちなみに、本家のものは、IE5.5 でもサクサク動くので、多分私が手を加えた :hover あたりの関係です。)
  3. Windows Vista, Windows XP / Sleipnir2, Firefox3, Opera9, (IE8), IE7, IE6, (IE5.5), Google Chrome2 で動作確認済みです。 文字サイズの拡大,ページのズーム,画像の非表示,javascript無効 など色々な条件でページを閲覧しても大丈夫なように作ったつもりですが、不具合があれば報告お願い致します。
  4. エリア毎に、私が 便利・有効 だと思うものを組み込んでおきました。 詳細は、以下 にある エリア別の機能 及び 関連リンク,参考サイト を参照してください。 また SEO対策の1つとして、タイトルタグ(<title>)の重複対策 などもしてあります。
  5. カスタマイズ や 画像の差し替え などは基本的にご自由にどうぞ。 但し、著作権表示の削除 や 再配布にあたる行為 は原則として禁止させていただきます。

使える画像サイズ や 各種装飾 について

  • 記事中には 横幅 570px程度 の画像まで入れられます。 但し、テンプレートの変更などの可能性も考えておくなら、横幅も抑えておくと安心です。 (400px以内なら 3カラムなどにしても概ね大丈夫かと思います。)
  • サイドバー部分では 横幅 170px程度 までOKです。 (160px や 165px のバナーなどであれば、スッキリ収まると思います。)
  • 記事に関する <ul> <ol> <dl>,<h2> <h3> <h4>,絵文字装飾,<blockquote> などには予め 基本的なスタイルを設定してあります。 お好みで変更してご利用ください。 記事タイトル は <h2> になりますので、それを基準に使ってください。 (ちなみにこの記事で使っている  この見出し色 は <h3>  です。)


エリア別の機能 及び 関連リンク,参考サイト

ここで全ては説明できませんが... エリア別の簡単な説明 と 関連リンクを示しておきます。 関連リンクは 記事下 にまとめていますので、それを参照してください。

1. トップページ <!--index_area--><!--/index_area-->

  • 敢えて 「新着記事内容」 を表示しないことで、SEOの面を配慮。 代わりに自己紹介を載せたり、自由なページとして使えます。
  • ※トップページに記事を表示したい方は... 別記事のコメント(解説) を参照してください。
  • トップページでは プラグインエリア3 が使えます。 フリーエリアなどを上手く利用してトップページを構成してみてください。

2. 個別記事ページ <!--permanent_area--><!--/permanent_area-->

  • 検索結果になるべくこのページ (固定リンク) が選ばれるように配慮してあります。 ユーザータグを設定している記事の場合、それがページのキーワードともなり、<meta> データにも反映されます。 <meta name="description" ~ /> はデフォルトでは入れていないので、この設定も追加したい場合には、関連記事 を参照してみてください。
  • コメント装飾機能 : FC2の公式スクリプトです。 若干表示が重くなるので必要ない場合は外してください。(私の軽量版 改変ソースもよかったらどうぞ。)
  • コメントのプレビュー機能 : 最近 より使いやすくなった FCafe danielさんのコメントプレビュースクリプトです。 [ 関連記事 ]
  • 管理人のコメントを区別する機能 (スタイルシートに設定を加えると機能します。) : 枠色,文字色が変わりますが、背景に画像を入れたりしてもOKです!
  • コメント投稿者のURLを別窓で開く機能 : 変数だけでは対応できないので、スクリプトを使用。 (デフォルトではスクリプトOFF環境では表示されないようになっていますが、これは敢えて...です。 同時にコメントスパム対策にもなるかなと思っています。 ) スクリプトOFF などにも対応させたい場合には 参照サイト にある <noscript>~</noscript> 部分を追加してください。

3. コメント編集ページ <!--edit_area--><!--/edit_area-->

  • コメントのプレビュー機能
  • タイトルタグの重複対策 : 通常は <title> に親記事の記事タイトルが入ってしまうので調整。 SEO対策として。

4. カテゴリー別ページ <!--category_area--><!--/category_area-->

  • 便利ナビ : 目的の記事に素早くアクセスできます。
  • タイトルタグの重複対策
  • 続きを読む(追記部分) の折りたたみ

5. 月別ページ,日別ページ <!--date_area--><!--/date_area-->

  • 便利ナビ : 未来の月などへの空リンクが表示されないような機能も追加
  • タイトルタグの重複対策
  • 続きを読む(追記部分) の折りたたみ

6. 検索結果ページ <!--search_area--><!--/search_area-->

  • KW強調ボタン + 便利ナビ
  • タイトルタグの重複対策
  • 続きを読む(追記部分) の折りたたみ
  • 検索結果が0件の場合にメッセージを表示

7. タグ検索結果ページ <!--tag_area--><!--/tag_area-->

  • このページ、実はかなり有効なページです!! このテンプレートの効果が一番発揮されるところかと思います。 無駄にしては勿体ないですよ。。。
  • KW強調ボタン + 便利ナビ
  • タイトルタグの重複対策
  • 続きを読む(追記部分) の折りたたみ
  • そのタグが存在しない場合にメッセージを表示 : ユーザータグを削除した場合への配慮。 関連記事 参照。

8. 全記事一覧ページ <!--titlelist_area--><!--/titlelist_area-->

  • 重くなりがちなページなので、余計なプラグイン部分は非表示に。
  • 全記事一覧 と 全タグリスト(ユーザータグ一覧) のみを表示して、サイトマップ (目次ページ) としての機能を強化してあります。

9. それ以外のページ ./page-0.html ./page-1.html ... [ 詳細 ]

  • 便利ナビ
  • タイトルタグの重複対策
  • 続きを読む(追記部分) の折りたたみ
  • トップページに記事を表示させない分、このページへも簡単にアクセスできるようにしてあります。
  • 新しい記事から数件まとめて順に表示される 動的ページ なので、SEOの面を配慮。 このページが検索結果に選ばれても困るので。。。 (検索エンジンでの検索結果には、個別記事ページ (固定リンク) をなるべく選んでもらえるように考えてあります。)


右の数字はその内容の主な 関連エリア(上の番号) です。

キーワード検索 : FC2ブログ  テンプレート  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-82.html

2009/09/11 ~ | Comment (19) tweet? | ↑ ページ先頭へ ↑ |
 @arinogotoku
  • paruparu (arinogotoku) on Twitter
    ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

19 Comment


こんばんは^^はじめまして。

あまりにも素晴らしいテンプレートでしたので
サイトにて紹介記事を書かせていただきました。

http://gekiyasuotoku.blog20.fc2.com/blog-entry-550.html
こちらになります。

不都合なことがあれば、削除しますので、、、。
勝手ながら、テンプレの良さに感動し、紹介させていただきました!

るじゅ |  2009/09/23 (水)  No.64


るじゅさん、テンプレートの紹介ありがとうございます!
自分の作ったテンプレートがこんな風に評価していただけると、素直に嬉しい限りです。

是非、使える部分があれば使ってみてくださいね!

それにしても... この記事いつになったら完成するんだろう。。。10日以上たって未だ未完成なんて本当に申し訳ないです。。。

paruparu |  2009/09/23 (水) [ 編集 ] No.65


すごいテンプレートですね。

共有からダウンしてちょこっとスクリプトを拝見しただけですが・・
機能性とデザイン性が見事に両立していて素晴らしいです。

デザインのかわいらしさだけでダウンしたユーザーさんは高機能すぎて使いこなせないんじゃと逆に心配してしまいます。

私もいくつか共有テンプレを公開してましたが(今は止めてます)、このテンプレに刺激を受けた職人さんも多いんじゃないかな?

denpaboy2 |  2009/09/25 (金) [ 編集 ] No.68


denpaboy2 さん、はじめまして。
以前、共有テンプレートのコメント部分で温かいコメントをいただきサイトにも訪問させていただきました。denpaboy2 さん程の実力のある方に評価していただけるとは光栄です!

共有テンプレートは初めてで、最初は特に「自分の使い方」が基準だったので、公開当初のものでは使い方によって表示が崩れたりという状態を見かけ、(現在の9/18以降のものでは概ねそのあたりを修正してみましたが)想定外の手直しにかなり時間がかかりました。

公開してみて気付いたのは、ごく一部ですが「こんなサイトでこんな雑に使わないで...」 というケースも見かけてしまうとことです。denpaboy2 さんもこれと似たようなこと書かれていましたよね。。。

現在はメインブログを変更されたそうですが、またよかったら遊びに来てくださいね!

paruparu |  2009/09/25 (金) [ 編集 ] No.69


管理人のみ閲覧できます

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

- |  2009/10/18 (日)  No.85


管理人のみ閲覧できます

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

- |  2009/10/18 (日)  No.86


No.85, No.86さんへ

> [最新の記事一覧]で記事をクリックしたあとに出てくる記事のタイトルの位置

とは、FC2ブログ共有テンプレート ari_seo ・・・【 ありのごとくあつまりて 】 となっている部分のことでしょうか? それであれば、<h1></h1>部分です。

/* Heading's
------------------------------------- */

(中略)

h1 {
clear:left;
width:660px;
margin:0;
padding:5px;

text-align:right;
font-size:125%;
color:#ffcc99;
}

スタイルシートの↑赤文字部分 辺りを変更すれば、調整できます。
padding (内余白) の方が、安全かも? (バグの危険も少ない...? 云々。。)

padding:10px; なら 文書の周りに上右下左10pxずつ余白をとれます。
padding:10px auto 5px 5px; なら 上10px 右オート 下5px 左5px になります。

paruparu |  2009/10/18 (日) [ 編集 ] No.87


管理人のみ閲覧できます

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

- |  2009/10/19 (月)  No.88


<h1></h1> 部分は、ページ内に1つだけ入れられる 大見出し になるので、
本来はページに1つ入れておくものかと思います。
でも、削除したらエラーになる などということはないので、後は使い方にもよるかなと思います。SEOの面を重視するならば、必ず入れた方が良いでしょうが、内輪だけのブログなどであれば、別に必要ないかもしれません。。。
<h1>の文字を極端に小さくしたり、見えない状態にしたりすると、スパムとみなされることが無いとも言えませんので...その辺をふまえてご判断ください。

> サイト内検索後に出てくる 『~を強調表示する』 のボタンの位置
<h1></h1> の下に置いてあり、特に何も設定していません。スタイルシートの ↓Heading's あたりに

/* Heading's
------------------------------------- */
#header input {
margin-top:○○px;
}

と設定すれば変更できると思います。

> 『この記事に含まれるタグ (Keyword) : FC2 ブログ テンプレート』
> 『FC2ブログ共有テンプレート ari_seo シリーズ # ReadMe #』 の部分

/* Structure (構造)
------------------------------------- */

(中略)

#content {
position:relative;
top:-40px;
float:left;
margin:auto 5px 10px 20px;
padding:0;
width:610px;
line-height:1.7;
}

テンプレートによって多少異なりますが、↑上の赤文字部分 を変更してみてください。

※画像 (このブログでいう虹の画像部分) を差し替えて使用している方が多いようなので、 本日ari_seoシリーズ3作の一部を変更し、再登録しておきました。
ページ上部の 差し替えた背景画像 にリンクが被っても文字が読みやすいように リンクの文字背景に白色(#fefefe) を設定しておきました。 テンプレート,CSS それぞれに手を加えたので、必要な方はご検討ください。

また、サポート専用窓口も作りました!
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-89.html

paruparu |  2009/10/19 (月) [ 編集 ] No.89


大体の問題は解決しました。
また分からないところが出てきたときは、どうかよろしくお願いします。
ありがとうございました!

抹茶そふと |  2009/10/19 (月) [ 編集 ] No.90


DLさせていただきました!

ありのごとくあつまりてさんのテンプレートをDLさせていただきました。
DLして適用した直後ぐらいから、一気にアクセス数が増えたので、SEOの面でもしっかり考えられているんだな~と思いました!
素晴らしいテンプレートありがとうございます。
機能の面でも、申し分なく使わせていただいてます!
トップページに記事以外の文が表示できるので、バンドのライブ告知などもしやすく、使いやすいと思いました!

パトリック |  2010/02/02 (火) [ 編集 ] No.270


1日で作ったとは!!

パトリックさん、はじめまして! ブログとホームページ,拝見させていただきました。
まず、「凄い! 随分頑張ってカスタマイズしてくれたんだなぁ」 と思ったら、「1日でほぼ完成させた」 というような内容を見つけもう一度驚きました。。。
ホームページの雰囲気ともリンクした、個性的でカッコイイデザインになっていますね!

先日、テンプレユーザーさんのリンク集 を作ったのですが、是非そこで紹介させてください。 ちょっと掲載まで時間がかかってしまうかもしれませんが、「ベスト」 の方で紹介させていただこうかなと考えています。

paruparu |  2010/02/02 (火) [ 編集 ] No.271


初めまして!! テンプレートを使わせて頂きたいのですが・・・

初めまして、今晩は(^▽^)
fc2ブログでこちらを拝見致しまして、是非使わせて頂きたいと思うのですが
編集の仕方がよくわからないので教えて下さい。

『このテンプレートについて』と『プレビュー用リンク』の削除はどうすれば出来ますか?
それと、『記事内の設定見本』という部分は、どのように活用するのでしょうか。
ここは削除してしまうと、SEOに影響するのですか?

初歩的な事でスイマセンが、宜しくお願い致します(^人^;)

フゥ |  2010/05/19 (水)  No.509


フゥさん、はじめまして

『このテンプレートについて』と『プレビュー用リンク』
削除してOKな場所は、テンプレート内の 以下の赤文字部分 2箇所になります。 ただの説明文なので、削除してもSEOには全く影響ありません。

1.
<!-- ▼トップページ▼ -->
<!-- ************************************ -->
<div class="entry_title"><h2>Welcome to My Blog!</h2></div>
<div class="entry_m">

<h3>このテンプレートについて</h3>
<p>※この部分は公開前には削除してOKです。</p>
(中略)
<h4>記事内 &lt;h4&gt; ~ &lt;/h4&gt; の設定見本</h4>



</div><!--/class=entry_m-->
<!-- ************************************ -->
(中略)
<!-- ▲トップページ▲ -->


2.
<!-- ▼ プレビュー用 公開する際にはここから下を削除 ▼ -->
(中略)
<!-- ▲ プレビュー用 公開する際にはここから上を削除 ▲ -->



>『記事内の設定見本』という部分は、どのように活用するのでしょうか。
説明が難しいですが...記事をタグ打ちしている方 の参考までに載せている ものなので、記事を 高機能テキストエディタのみで書いている方には あまり関係ない...という感じでしょうか。。。中級者以上向けのものです。

ソースを表示する機能 などは使ったことがありますか?
もし使えるなら 「フゥさん の 87番の記事」 の 記事内容部分のソース を 1. の赤文字部分 に貼りつけると、それらしいトップページが作れると思います。

共有テンプレートのサポート は サポート専用窓口 を用意していますので、
次回からは ↓以下のページ をご利用ください。
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-117.html

paruparu |  2010/05/19 (水) [ 編集 ] No.510


失礼しました(^0^;)

丁寧なお返事、有難うございます(^人^)

質問場所を間違えてたんですね~!!
大変失礼致しました(=人=;)

後で教えて頂いた事をやってみます!!

フゥ |  2010/05/19 (水)  No.511


御礼!

はじめまして。

中々ご挨拶できずで(汗)
こちらでよろしいのでしょうか?
FC2登録のほとんどのテンプレートを拝見しましたが、paruparuさんのテンプレートが大変気に入りまして、ari_seo2Mを使用させていただいております。
全体デザインから文字間など字配り等細かなトコまで全てお気に入りです!!
ホント素晴らしいですね!!

専門的なことはさっぱりわかりませんが、paruparuさんのセンスを崩さないよう、大切に使わせていただきたいと思います。
よろしければ勉強の為、ちょこちょこお邪魔させてください(*^ー^*)

取り急ぎ御礼まで(^人^)

sakestyle |  2010/05/21 (金)  No.516


sakestyleさん、はじめまして!

テンプレートのご利用ありがとうございます。
色々探して、その上で選んでいただけたというのは やっぱり嬉しいです♪
>専門的なことはさっぱり...
と書いてありますが、上手にカスタマイズされていますよね。 カレンダーのスタイル設定は入れていないのですが、以下の記事にCSS を載せていますので、よかったら使ってください。
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-100.html

paruparu |  2010/05/21 (金) [ 編集 ] No.517


テンプレート使用させて頂きます!

はじめまして♪

ディズニーパークの休園中にブログのメンテナンスをしようと思い、検索して辿りついたparuparuさんのブログが素晴らしかったので、いくつかカスタマイズを導入させて頂きました。
せっかくなので、テンプレートも使用させて頂こうと思い、今日からカスタマイズを始めているのですが、いくつかお聞きしたいことがあってコメントさせて頂きました。

まず、私のブログは写真を重視するブログなので、どうしても横幅をかなり広くとらざるを得ないのですが、paruparuさんのテンプレートで1050pxまで変更した場合に、不具合が生じる可能性がある個所はありますか?
ブログをチェックしながらひとつひとつ幅に合わせたカスタマイズをしていますが、今まで扱ってきたものよりも高度なテンプレートなので、根本的な不具合とかこのページは機能しなくなるというようなものがあればアドバイスして頂けると助かります。

あともうひとつは、サイドバーを左に置きたいのですが、右から左に変更した場合でもSEO対策の面では特に変わりはないでしょうか?

初見にも関わらず質問ばかりで申し訳ありません。
よろしければご回答お願い致します。
なお、モバイル版テンプレートはすでに導入させて頂きまして、
今までデフォルトを少しカスタマイズしていただけだったので、
非常に気に入ってます☆

クロロ |  2011/03/25 (金) [ 編集 ] No.979


クロロさん、はじめまして

ディズニーパークの休園。。 ホント残念ですよね。。
何とか 国と東電さんに頑張ってもらうしかないですよね (;_:)

質問の件ですが、1050px に変えるとすると、
外枠の画像 はそのままだと使えないので 画像を差し替えるか 画像ではなく 枠(border) に変更するかの必要はあると思います。

後は、スタイルシート の構造部分を変更すればサイズの変更は可能かと思います。
上部のナビゲーション部分は右が少し余る見た目になりますが、そのままでも使えると思います。

/* Structure (構造)
------------------------------------- */
#container {
margin-left:auto;
margin-right:auto;
padding:0;
width:900px;
}
#content {
position:relative;
top:-100px;
float:left;
margin:auto 5px 10px 20px;
padding:0;
width:610px;
}
#sidebar {
position:relative;
top:-150px;
float:right;
margin:0 10px 10px 5px;
padding:0;
width:200px;
}

サイドバーを左にするのも、左右を逆にするだけで出来ますので、SEOには影響しません。
margin:auto 5px 10px 20px;
は、外余白: 上オート 右5px 下10px 左20px;
という設定ですので、この左右の設定を逆にして 微調整すれば良いかと思います。

#container {
margin-left:auto;
margin-right:auto;
padding:0;
width:1050px;
}
#content {
position:relative;
top:-100px;
float:right;
margin:auto 5px 10px 0px;
padding:0;
width:840px;
}
#sidebar {
position:relative;
top:-150px;
float:left;
margin:0 5px 10px 0px;
padding:0;
width:200px;
}

今のクロロさんの記事や画像の感じだと こんな感じで大丈夫かなと思います。
可能なら、サイドバーの横幅は 200pxより少し小さくする と良いかもしれません。
(※幅をギリギリにすると、IE6では もしかしたらカラム落ちを起こすかもしれないので (テスト未ですが)、可能なら多少余裕をもたせた方が安心です。)

あと、次回からはカスタマイズ関する質問は サポート窓口 に入れてもらえると助かります。
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-174.html
↑ 共有テンプレート サポート専用窓口 (3) へお願いします。
あと、以下のページ↓ も参考になると思うので 載せておきますね。

テンプレユーザーさんリンク集
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-107.html
テンプレート(CSS内) 背景画像を抽出
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-87.html

paruparu |  2011/03/26 (土) [ 編集 ] No.981

コメントを投稿する 記事: FC2ブログ共有テンプレート ari_seo シリーズ # ReadMe #


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback


この記事にトラックバックする (FC2ブログユーザー限定)

見やすい!テンプレートを変えました

ブログを始めて2ヶ月ほど。 以前のテンプレートも気にっていて、いろいろカスタマイズしたのですが、FC2の共有テンプレートでこれは!とい...

日々の出来事をゆるーく考えて見ました 2009/11/08