そらいろくらげが浮き輪で海に浮いているイラスト

FC2ブログでフリーページを作る

ブログデザインのリニューアルとともに、新しくプロフィールページを作りました。

このプロフィールページを作った理由は、経歴に伴うエピソードや関係者のことを書くときにいちいち説明から始めるのが面倒だからです。
まずはプロフィールページを読んでもらえれば、説明しなくても済むかなという面倒くさがりなくらげらしい理由です。

しかしこのFC2ブログでプロフィールを作るにあたって、困ったのがプロフィールページを作る場所です。楽天ブログのフリーページや、WordPressの固定ページにあたる場所がFC2ブログにはありません。

グーグル先生に聞いてみたところ、方法としては過去記事か未来記事にして残すのが一番簡単なようです。
あとは、htmlファイルもアップロードできるので、HTMLで記述したプロフィールをアップし、フリーエリアでリンクを貼るという方法もありました。

よし、それでいこう。
ということで、HTMLで記述したプロフィールをアップし、フリーエリアでリンクを貼るという方法で作成してみることにしました。

まずは、htmlファイルを作る

3a9822cda5ea097849711034f62c188f_s
htmlファイルとは、その名の通りhtmlタグの入っているファイルです。

ふだん見慣れない人にとっては暗号のように見えますが、グーグル先生に聞きながらもっと簡単に記述することも可能です。

CSSでつまずく

internet-594148_640
今度は、スタイルシート、CSSで装飾していきます。CSSがどんなものかは、ブログテンプレートの設定を見ればわかります。簡単な記述なら、調べればちょちょいのちょいで完成します。
くらげの場合はブログ自体とトーンマナーを合わせるためにごにょごにょ小難しく書くことにしたのですが、これがかなり大変でした。

CSSは、外部CSSといってCSSファイルを読み込む場合と、htmlファイルのタグ内に書く場合と、個別に装飾するためにhtmlタグに付け足す形で書く場合があります。くらげは、面倒なので内に書き換えてみました。

ところが。

何度ブラウザで確認しても、CSSが反映してくれないのです。ブラウザはChrome使っています。
けっきょく、地道にhtml要素に付け足していくことにしました。

そして、やっと完成

children-593313_640

疲れたー。

反映されない原因がわからず、半日を要しました。さらに、FC2ファイルマネージャーで修正したhtmlファイルをアップロードし直しても、修正が反映されていないのです。前のままの状態です。仕方ないので、何度も別のファイル名でアップし直しました。

Profile_css

締めくくり

FC2のフリーページは、過去記事か未来記事で作ったほうが早くて楽です。プラグインでフリーエリアを追加して、リンクが記事に飛ぶようにしておくとよいです。
その後試しにもう一度内で書き直してみたら、ちゃんとCSSが反映されました。

あんなにtableのstyle書き込むのに苦労したというのに。なんだよもー。

Massage
  1. kenzo より:

    SECRET: 0
    PASS: 74be16979710d4c4e7c6647856088456
    お疲れ様でしたー
    body,h2,h3に苦労の後が伺えますね^^;;
    でも反映されて何よりです
    反映されないって何でだったんですかね??
    絶対パスではなく相対パスで指定はされてますよね?(失礼)
    html5だったら6~8行目は省略出来るんじゃなかったでしたっけ?
    非対応ブラウザ用なのかしらん

  2. そらいろくらげ より:

    SECRET: 0
    PASS: 74be16979710d4c4e7c6647856088456
    kenzoさん
    いらっしゃいませー。まだまだ勉強中なので、遠慮なく突っ込んでください。
    <head>内には、 <style type="text/css">という記述で書きました。検証したブラウザはChromeです。
    html5で書いてもよかったのですが、テンプレートの記述がhtml4だったので合わせることにしました。このあたり、Google的にどうなんでしょうね。テンプレに合わせたほうがいいのか、1ページだけhtm5でも大丈夫なのか。。今度調べてみます。

コメントを残す


This site uses Akismet to reduce spam. Learn how your comment data is processed.

goToTop