【こぼれ話】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-->

    html_1



    下の画像のように、<div id="main"><!--not_titlelist_area--> の間に、ピンクの箇所(plugin_third)を移動させます。 さらに、<!--index_area--><!--/index_area--> を加筆し、ピンクの箇所(plugin_third)を挟みます。

    ここまで出来たら [プレビュー] で確認してみましょう。 プラグイン3がトップにあれば成功です。 [更新] ボタンを押し、編集を終了します。  「え、これだけ?」と思われるかもしれませんが、これで終わりです。 意外と簡単だったでしょ。 ^v^

    HTML_11



    下の画像はどちらも、公式テンプレートの [ pink_3column ] を当サイトに適用したものです。 【1】はテンプレートの初期状態 (HTML 未編集)、 【2】は上述の通りにHTMLを編集してプラグイン3 (plugin_third) の位置を変更してあります。 プラグイン3の位置が 中央メイン下 ⇒ 中央メイン上 に移動しているのがお分かりいただけると思います。

    pink_3column_11            pink_3column_22
    【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を登録




    関連記事
    新館 HOME目次/サイトマップWEB内覧会旧館 HOME
    J・URBAN 建築日記集J・URBAN 合同WEB内覧会WORLD DESIGN 建築日記集
    にほんブログ村 住まいブログ 一戸建 住友不動産へ 住友不動産ブログランキング FC2ブログランキング

    コメント

    コメントの投稿

    トラックバック


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

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