【こぼれ話】FC2ブログにフリーページを作る方法

     
    まず、【A】 FC2ブログにフリーページを作る方法 です。 サンプルを新たに作るのは面倒なので(笑)、楽天ブログのトップのフリースペース(自由欄)の内容を、FC2ブログのフリーページへ移植する方法を例にあげてご説明します。

    なお、フリーページ用のHTMLファイルを新たに自作する場合は、【こぼれ話】FC2ブログのカスタマイズ お役立ちサイト集の記事で紹介しているサイトやエディターをご利用になるとよいでしょう。

    ■関連記事 ⇒ 【こぼれ話】楽天ブログからFC2ブログへの引越し お役立ちサイト集
               【こぼれ話】FC2ブログのカスタマイズ お役立ちサイト集
               【こぼれ話】FC2ブログにフリーページ・フリースペースを作る方法(まとめ)
     


    【楽天ブログでの操作】 トップ自由欄編集の内容をコピー ⇒ <br>タグで改行

    下の画像は、楽天ブログのトップのフリースペース(自由欄)を編集する画面(デザインの設定 ⇒ 自由欄 ⇒ トップ自由欄編集)です。 そのまま移植するのであれば、この部分を丸ごとコピーするだけでOKです。 ただし、「自動改行(初心者向け)」にしている場合は、<br>タグで改行をやり直す必要があります。

    楽天TOP_1



    【PC上での操作】 テキストエディタにペースト ⇒ HTMLファイルとして保存 ⇒ 表示を確認

    メモ帳などのテキストエディタに、先ほどコピーした内容をペーストします。 名前をつけて保存する際、最後に≪.html≫をつけHTMLファイルとして保存します。(例: 楽天top_2.html )  保存場所は、デスクトップなどの分かりやすい場所にしておきます。

    下の画像は、デスクトップに保存したHTMLファイル(例: 楽天top_2.html )をダブルクリックした時のものです。 ブラウザ(例: Firefox)が立ち上がって、WEBページが表示されています。

    楽天ブログのトップページと見比べると、文字の色や大きさが異なることがお分かりいただけると思います。 これは、楽天ブログのCSS(*)の影響下から離れたためです。 元と同じデザインにする場合は、適当なHTMLタグを追加してください。 面倒なので(笑)、今回はそのまま続行します。
    (* 楽天ブログでは、テンプレートのCSSやHTMLを、ユーザーが自由に編集することはできません)

    楽天TOP_22



    【FC2ブログでの操作】 HTMLファイルをアップロード ⇒ ページのアドレスを確認

    下の画像は、FC2ブログのファイルアップロード画面です。 参照からHTMLファイルを指定してアップロードします。(例: 楽天top_2.html )  タイトルはファイル名と同じでも、書き換えてもかまいません。 やり方は、写真をアップロードする時と同じです。

    写真をアップロードすると自動的にサムネイルが作成されますが、HTMLファイルでは作られません。 「表示」をクリックすると、先ほどブラウザ(例: Firefox)確認でしたものと同じWEBページが現れます。 そのWEBページのアドレスが、フリーページのアドレスになります。
    (例: http://blog-imgs-49.fc2.com/c/h/e/chemoya/2012020212583831d.html

    FC2ファイルアップロード


    以上の操作で、FC2ブログにフリーページを1ページ作ることができました。 複数ページを作る場合は、これを繰り返します。 ただし、この状態ではまだブログ上で見ることはできません。 閲覧できるようにするためには、サイド(*)などにリンクを表示してやる必要があります。 
    (* もちろん、サイドだけでなくトップや記事中に表示することもできます)

    【B】 サイドにフリーページタイトルの一覧を表示する方法は、【C】 サイドにフリースペース(自由欄)を作る方法と合わせて、次回の記事でご紹介しますね。 




    ■ 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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。