【こぼれ話】FC2ブログのトップにフリースペース(自由欄)を作る方法
いよいよ 【D】 トップにフリースペース(自由欄)を作る方法 の解説ですが、その前に・・・
【こぼれ話】FC2ブログのサイドにフリースペース(自由欄)を作る方法の記事を参照して、ブログのトップページに表示したい内容をプラグイン3に入れておいてくださいね。
なお、プラグイン3が元々トップに位置するよう作られているテンプレート(例: [ padw-einfach ] )をお使いであれば、以下のHTMLファイルの編集作業は不要(*)です。
(* <!--index_area--> と <!--/index_area--> の加筆 or 消去が必要になる場合があります )
ご参考までに当サイトのトップは、楽天ブログのトップのフリースペース(自由欄)の内容を移植したものです。 プラグイン3のタイトルはスペースにしてあるため、見た目がブランクになっています。
呪文を唱える(=HTMLを編集する)準備はよろしいですか?(笑) まず、基本事項から・・・
テンプレートのHTMLファイルはブログの構造を定義、CSSファイルはブログの見栄えを定義するものです。 今回はレイアウトの変更ですから、HTMLを編集します。(CSSはさわりません) HTMLファイルの編集は 管理画面 ⇒ 環境設定 ⇒ テンプレートの設定 から行います。
編集を始める前に、現在のテンプレートを複製しておきましょう。 新たな編集を加える度に複製しておけば、修復不可能なほどレイアウトが崩れてしまったような場合でも、前の状態に戻すことができるので安心です。
編集画面を開いてすぐの状態は [タグのハイライト:OFF] ですが、[ハイライト:ON] にすると見やすくなります。 変更すべき個所を探す際には、ブラウザの検索機能(Ctrl+F)を使うと簡単です。 変更を加えた後は、[プレビュー] で確認します。 [更新] ボタンを押すまで、何度でもやり直せます。
では、実際にHTMLファイルを見てみると・・・
下の画像でピンクで囲っている箇所が、HTMLファイルの中でプラグイン3 (plugin_third) について記述してある部分です。 画像が少し見難いので、該当部分のタグを書き出しておきますね。
<!--plugin-->
<div class="content">
<!--plugin_third-->
(略)
<!--/plugin_third-->
<div class="pagetop"><a href="#container" title="<%template_go_top>">Pagetop</a></div>
</div><!--/content-->
<!--/plugin-->
下の画像のように、<div id="main"> と <!--not_titlelist_area--> の間に、ピンクの箇所(plugin_third)を移動させます。 さらに、<!--index_area--> と <!--/index_area--> を加筆し、ピンクの箇所(plugin_third)を挟みます。
ここまで出来たら [プレビュー] で確認してみましょう。 プラグイン3がトップにあれば成功です。 [更新] ボタンを押し、編集を終了します。 「え、これだけ?」と思われるかもしれませんが、これで終わりです。 意外と簡単だったでしょ。 ^v^
下の画像はどちらも、公式テンプレートの [ pink_3column ] を当サイトに適用したものです。 【1】はテンプレートの初期状態 (HTML 未編集)、 【2】は上述の通りにHTMLを編集してプラグイン3 (plugin_third) の位置を変更してあります。 プラグイン3の位置が 中央メイン下 ⇒ 中央メイン上 に移動しているのがお分かりいただけると思います。
【1】 HTML 未編集 (プラグイン3はボトム) 【2】 HTML 編集済 (プラグイン3はトップ)
なお、プラグイン3を使わず、表示させたい内容をHTMLファイルに直接書き込む方法もあります。 短ければそれでも構わないと思いますが、当サイトのようにボリュームがある場合は、プラグイン3を使う方が無難でしょう。 (HTMLファイルが見難くなるため)
また、<!--index_area--> と <!--/index_area--> で挟むことにより、プラグイン3はブログのトップページにのみ表示、個別記事ページのトップには非表示となっています。(楽天ブログの方式にあわせています) 全ページのトップに表示させる場合は、この二つを消去してくださいね。
そのほかのトップページの変え方については、下のサイトさんで詳しく解説されていますので、そちらをご参照くださいませ。
■参照サイト ⇒ トップページを変えたい! 初心者でもできる簡単FC2ブログの作り方
以上、FC2ブログにフリーページ・フリースペースを作る方法を、4回に分けて長々と解説してきました。 楽天ブログから移転された方には、最初は取っ付きにくいかもしれませんが、慣れればFC2ブログの多機能っぷりに驚かれることと思います。 一連の記事がお役に立ちましたら幸いです。 ^v^
■関連記事 ⇒ 【こぼれ話】楽天ブログからFC2ブログへの引越し お役立ちサイト集
【こぼれ話】FC2ブログのカスタマイズ お役立ちサイト集
【こぼれ話】FC2ブログにフリーページ・フリースペースを作る方法(まとめ)
■ FC2ブログの場合 ■
フリーページ作成はHTMLファイルをアップロード、フリースペース作成は公式プラグインのフリーエリアを使います。 お使いのテンプレートによっては、【D】 トップにフリースペース(自由欄)を作る際に、HTML編集が必要です。
【A】 フリーページを作る ◆ 関連記事はこちら ◆
■ ツール ⇒ ファイルのアップロード ⇒ 自作のHTMLファイル ≪.html≫ をアップロード
【B】 サイドにフリーページタイトルの一覧を表示する ◆ 関連記事はこちら ◆
■ 環境設定 ⇒ プラグインの設定 ⇒ 公式プラグイン追加 ⇒ 挿入先にプラグイン1 or 2
を指定 ⇒ フリーエリア ⇒ 追加
【C】 サイドにフリースペース(自由欄)を作る ◆ 関連記事はこちら ◆
■ 環境設定 ⇒ プラグインの設定 ⇒ 公式プラグイン追加 ⇒ 挿入先にプラグイン1 or 2
を指定 ⇒ フリーエリア ⇒ 追加
【D】 トップにフリースペース(自由欄)を作る ◆ 関連記事はこちら ◆
■ 環境設定 ⇒ テンプレートの設定 ⇒ HTML編集 ≪プラグイン3をトップに表示≫
■ 環境設定 ⇒ プラグインの設定 ⇒ 公式プラグイン追加 ⇒ 挿入先にプラグイン3
を指定 ⇒ フリーエリア ⇒ 追加
■ 楽天ブログの場合 ■
管理画面に予めナビが示してあります。 難しい用語は出てこないため、初心者の方でも比較的簡単に作ることができます。
【A】 フリーページを作る
■ デザインの設定 ⇒ フリーページ ⇒ ここにページを追加
【B】 サイドにフリーページタイトルの一覧を表示する
■ デザインの設定 ⇒ ブログパーツ ⇒ ブログ情報 ⇒ フリーページを表示 ⇒ 登録
【C】 サイドにフリースペース(自由欄)を作る
■ デザインの設定 ⇒ 自由欄 ⇒ サイド自由欄編集 ⇒ このHTMLを登録
【D】 トップにフリースペース(自由欄)を作る
■ デザインの設定 ⇒ 自由欄 ⇒ トップ自由欄編集 ⇒ このHTMLを登録
- 関連記事
-
- 【住友不動産】建築日記サイト集を更新(2012.02.06) (2012/02/06)
- 【こぼれ話】FC2ブログのトップにフリースペース(自由欄)を作る方法 (2012/02/05)
- 【こぼれ話】FC2ブログのサイドにフリースペース(自由欄)を作る方法 (2012/02/04)
スポンサーサイト
新館 HOME | 目次/サイトマップ | WEB内覧会 | 旧館 HOME |
J・URBAN 建築日記集 | J・URBAN 合同WEB内覧会 | WORLD DESIGN 建築日記集 | |
住友不動産ブログランキング | FC2ブログランキング |
| ホーム |