スポンサーサイト

 

--.--.--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!
-------- | スポンサー広告 | | | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/46-4e23381e

「スポンサーサイト」へのトラックバック

- TrackBack -


「スポンサーサイト」へのコメント

- Comment -

No title

似たような経験?どんなんだろう?
今日もあると♪さんの記事をお借りしてブログを書くつもりです(^○^)
いつもいいネタで記事を書いてますよね(^-^)どれも使えて手の届きそうなレベルなのが嬉しいです(^^)
人気記事のサムネイル表示もしたいし、今回のもいいし、自分のブログ更新もあるし、あーーいろいろしたいのに手が遅くって困ります( ;´Д`)
  • 2014-11-01 12:23
  • ひーさんさん@管理人
  • 編集

Re: No title

> ひーさんさん

いつもコメントありがとうございますヾ(≧▽≦)ノ゙

似たような経験と言うのは...w

ひーさんさんの記事「アフィリエイトの心構え!(^^)!」
http://illustrator989.blog.fc2.com/blog-entry-5.html

にあったように、実は私も過去にアフィリエイトのサイトを作って挫折した経験がありますw
当時は私も何も分からず... と言うかその頃初めて自分でパソコンを買ったばかりでした...

そんな状態だったにも関わらず、レンタルサーバーや独自ドメインの取得も行い...
サイト作成の勉強をしようと、何冊か本を買ってみたものの...

HTMLやCSSが... 何かの呪文にしか見えないし...
アクセスも全然上がらなくて...(≡ε≡;)

心がポキっと折れちゃいましたw

まぁそれも勉強と言うか、授業料と言うか...w 今となっては良い思い出です♪


って事で、ひーさんさんの今日の記事も楽しみにしてますね♪^^
  • 2014-11-01 13:24
  • あると♪さん@管理人
  • 編集

No title

えーー!!こんなにHTML CSS使いこなしてるあると♪さんにもそんな時期があったんですね(≧∇≦)FC2ブログ10周年の文字を見るたびに当時のことを思い出します( ;´Д`)
  • 2014-11-01 14:15
  • ひーさんさん@管理人
  • 編集

Re: No title

> ひーさんさん

まだまだ色々勉強中ですが、最初の頃はホントひどかったです...w

あと、時期もひーさんさんと同じ頃なのでより共感しちゃいましたw
  • 2014-11-01 16:49
  • あると♪さん@管理人
  • 編集

お世話になってます。

あると♪さん
実はこの記事は何度と無く読んでます。笑
何しろ、私のブログのトップページのウサギのイラストがいる場所はこの記事の全面的コピーです。笑
色々お世話になってます。
そして、昨日はブログのheadの部分のご指摘ありがとうございました。
修正しました。って、修正出来てるつもりです。笑
これからも宜しくお願い致します。
  • 2014-12-09 02:19
  • girigiri26さん@管理人
  • 編集

Re: お世話になってます。

> girigiri26さん

こちらこそいつもありがとうございます♪d(≧∀≦)b

色々付け足して行くとオリジナル感が出て良いかもですね♪
またhead部分も確認してきました!!バッチリですね(≧∇≦)b

そしてこちらこそ今後共よろしくお願いします♪
  • 2014-12-09 10:42
  • あると♪さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

テンプレート「basic_white」のトップページにのみ表示  ブログのトップページを編集する方法です♪ 

例えばトップページにブログ内の記事をランダムで表示したり、オススメや人気順で並べてみたり、または写真やイラストのギャラリーを載せたり等など♪工夫次第で色々出来ると思います^^
当ブログではトップページにご訪問のお礼と簡単なご案内を表示して、そこにブログの案内ページ(記事ページ)へのボタンを付けてみました♪
表示したい場所や、テンプレートによって編集する箇所が異なるので、テンプレートの「basic_white」を例に簡単に説明してみます♪

↓テンプレート「basic_white」のカスタマイズ用に作ったブログです。
FC2ブログのテンプレート「basic_white」をカスタマイズ



「basic_white」トップページの編集


  1. 1.トップページでのみ表示したい内容をHTMLに記述する
  2. 2.スタイルシートへの記述
  3. 3.応用とまとめ♪



1.トップページでのみ表示したい内容をHTMLに記述する


以下の画像のように、テンプレート「basic_white」のメインコンテンツ上部にトップページでのみ表示される部分を作るには、FC2ブログの「管理画面」から「テンプレートの設定」でHTMLを編集します。

「basic_white」のメインコンテンツ上部に表示してる内容
※サンプルとして「忍者AdMax」の広告と「忍者レコメンド」を利用して記事をランダム表示してます。


上記のように表示する為に、テンプレート「basic_white」のHTMLに以下のように記述してます。
編集箇所はHTML内の「 <div id="main_contents" style="display: none"> 」のすぐ下です。
※キーボードの「Ctrl」+「F」で検索すればすぐに見つかると思います♪

<div id="main_contents" style="display: none">

<!--index_area-->
<div class="index-only">
<p><i class="fa fa-quote-left"></i> 緑の線で囲ってる部分はトップページでのみ表示してます <i class="fa fa-quote-right"></i></p>
<br />
<p>▼ 貼るだけでブログが収入源に!?「忍者AdMax」の広告です♪ ▼</p>
<!-- admax -->
<script src="http://adm.shinobi.jp/s/e34bbe309f9decc7c15fa0f19381e1a8"></script>
<!-- admax -->
<br />
<br />
<p>▼ 「忍者レコメンド」を利用して、このブログ内の記事をランダム表示♪ ▼</p>
<div class="ninja-recommend-block" id="ca0dd7c9d44d9f677ecceab1bda8e180">
<script type="text/javascript" src="http://rcm.shinobi.jp/js/imp.js"></script>
<script type="text/javascript" src="http://rcm.shinobi.jp/r/ca0dd7c9d44d9f677ecceab1bda8e180"></script>
</div>
</div>
<!--/index_area-->

※9行の「忍者AdMax」のタグと、14行~16行目の 「忍者レコメンド」のタグは私の場合のタグなので、実際にご自分でも試される場合は、それぞれのサービスで発行されたタグを貼って下さい^^


※3行目の「<!--index_area-->」 ~ 19行目の「<!--/index_area-->」の間がトップページで表示される部分になります。また3行目の「<!--index_area-->」と19行目の「<!--/index_area-->」を削除すると全てのページで上記の内容が表示されるようになります。


※今回はトップページでのみ表示させるので「<!--index_area-->」と「<!--/index_area-->」で囲ってますが、その他にも記事ページやカテゴリページでのみ表示させたり等も可能です♪
例えば・・・
記事ページでのみ表示の場合「<!--permanent_area-->」と「<!--/permanent_area-->
カテゴリページでのみ表示の場合「<!--category_area-->」と「<!--/category_area-->
その他にも表示エリアを指定する変数はいくつも用意されてるので、詳しくはこちらをご確認下さい。



上記のソースを記述すると、FC2ブログのHTML編集画面では以下の画像のようになります。

「basic_white」のHTML編集画面




2.スタイルシートへの記述


テンプレート「basic_white」のメインコンテンツ上部に表示される内容に対して、以下のようにスタイルシートにも少しだけ記述を追加しました。

.index-only{
margin:15px;
padding:15px;
text-align:center;
border:1px #0c0 solid;
border-radius:10px;
}
.index-only p:first-child{ color:#0c0; font-size:x-large; }




3.応用とまとめ♪


上記HTMLの部分でも記載しましたが、表示させたいエリアを変える事により色々応用する事も可能です。
例えば、このブログの場合サイドメニューに表示されてる「このページの目次」は記事ページでのみ表示されるようにしてます^^

FC2ブログの場合、プラグインカテゴリが1~3まであり、その中にそれぞれ色んなプラグインを入れる事が出来るので、プラグインカテゴリ1は「全ページ共通」、プラグインカテゴリ2は「記事ページでのみ表示」、プラグインカテゴリ3は「カテゴリページや月別アーカイブページでのみ表示」と言う感じで、プラグインも表示エリア別に使い分ける事も出来ます♪

また、下記のように表示エリアを組み合わせる事も可能です。

<!--index_area-->
<!--permanent_area-->
<img src="http://~省略~.jpg" alt="○○○" />
<!--/permanent_area-->
<!--/index_area-->

※上記の場合、3行目の画像がトップページと記事ページでのみ表示されます。

上手く応用して、色々作り込むと普通のホームページみたいな作りに出来るかもですね♪w
また、色んな場所に上手に過去記事へのリンクを入れたりするのも良いですね^^

以上、簡単にでしたがブログのトップページのみ(指定したエリアのみ)に表示する方法でした♪
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!


関連記事
2014-10-31 | 「basic_white」 | コメント(6) | トラックバック(0) | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/46-4e23381e

「FC2ブログでトップページにだけ表示する方法」へのトラックバック

- TrackBack -


「FC2ブログでトップページにだけ表示する方法」へのコメント

- Comment -

No title

似たような経験?どんなんだろう?
今日もあると♪さんの記事をお借りしてブログを書くつもりです(^○^)
いつもいいネタで記事を書いてますよね(^-^)どれも使えて手の届きそうなレベルなのが嬉しいです(^^)
人気記事のサムネイル表示もしたいし、今回のもいいし、自分のブログ更新もあるし、あーーいろいろしたいのに手が遅くって困ります( ;´Д`)
  • 2014-11-01 12:23
  • ひーさんさん@管理人
  • 編集

Re: No title

> ひーさんさん

いつもコメントありがとうございますヾ(≧▽≦)ノ゙

似たような経験と言うのは...w

ひーさんさんの記事「アフィリエイトの心構え!(^^)!」
http://illustrator989.blog.fc2.com/blog-entry-5.html

にあったように、実は私も過去にアフィリエイトのサイトを作って挫折した経験がありますw
当時は私も何も分からず... と言うかその頃初めて自分でパソコンを買ったばかりでした...

そんな状態だったにも関わらず、レンタルサーバーや独自ドメインの取得も行い...
サイト作成の勉強をしようと、何冊か本を買ってみたものの...

HTMLやCSSが... 何かの呪文にしか見えないし...
アクセスも全然上がらなくて...(≡ε≡;)

心がポキっと折れちゃいましたw

まぁそれも勉強と言うか、授業料と言うか...w 今となっては良い思い出です♪


って事で、ひーさんさんの今日の記事も楽しみにしてますね♪^^
  • 2014-11-01 13:24
  • あると♪さん@管理人
  • 編集

No title

えーー!!こんなにHTML CSS使いこなしてるあると♪さんにもそんな時期があったんですね(≧∇≦)FC2ブログ10周年の文字を見るたびに当時のことを思い出します( ;´Д`)
  • 2014-11-01 14:15
  • ひーさんさん@管理人
  • 編集

Re: No title

> ひーさんさん

まだまだ色々勉強中ですが、最初の頃はホントひどかったです...w

あと、時期もひーさんさんと同じ頃なのでより共感しちゃいましたw
  • 2014-11-01 16:49
  • あると♪さん@管理人
  • 編集

お世話になってます。

あると♪さん
実はこの記事は何度と無く読んでます。笑
何しろ、私のブログのトップページのウサギのイラストがいる場所はこの記事の全面的コピーです。笑
色々お世話になってます。
そして、昨日はブログのheadの部分のご指摘ありがとうございました。
修正しました。って、修正出来てるつもりです。笑
これからも宜しくお願い致します。
  • 2014-12-09 02:19
  • girigiri26さん@管理人
  • 編集

Re: お世話になってます。

> girigiri26さん

こちらこそいつもありがとうございます♪d(≧∀≦)b

色々付け足して行くとオリジナル感が出て良いかもですね♪
またhead部分も確認してきました!!バッチリですね(≧∇≦)b

そしてこちらこそ今後共よろしくお願いします♪
  • 2014-12-09 10:42
  • あると♪さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

▼クリックすると配色が変更されます  
このボタンの設置方法は こちら♪

White
Black

プロフィールClick

プロフィール画像

Author:あると♪
ブログ開始: 日目
公開記事数:

Webサイト製作の勉強にと思ってブログのカスタマイズに挑戦してる初心者です♪その他にも気になった事、興味がある事などを気ままに書いてますっ!!

当ブログのご案内は こちら♪

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ

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