プロフィール

mshp0723(旧Mikaん星人アワー)

Author:mshp0723(旧Mikaん星人アワー)
ごらんいただきありがとうございます。マルチクリエイタ・クリエイティブ起業家のmikaん星人アワーです。webコンテンツ関連お仕事をしています。

■お仕事関連サイト■
仙台スマホ対応ワードプレスサイト制作・アトリエSS


webサイト制作・運用関連事例
・食品店さま ネットショップ制作
・音楽スクールさま webサイト制作
・楽器奏者さま 再生プラグイン埋め込みサイト制作
・エクステリア施工企業さま webサイト企画
・飲食店さま webサイト制作
・支援団体さま サイト制作
・一般企業さま 会社案内サイト企画
・支援団体さま fc2ブログカスタマイズ
・その他 メディア/アフィリエイト運用ブログカスタマイズ



よろしくお願いいたします。

最近の記事

カテゴリー

fc2ブログカスタマイズねた~心援隊びわこさま・オリジナルデザインに~個別記事グローバルナビや、プラグインフリーエリアメインカラム上部表示で、webサイトのように運用

おばんです♪

年末から3件くらい、ぶろぐカスタマイズやってたmikaん星人アワーです。

まあ、このぶろぐもその間にヘッダー3回くらい変わってますが(笑)次はヴァレンタインと卒業式ですかね(笑)

というわけで、今回は、(関係者に『書いていいよー』と言われたので)ブログカスタマイズさせていただいた事例をご紹介。

東日本大震災・被災地支援チーム・心援隊びわこさま、団体情報ブログを、fc2ブログ利用でオリジナルデザインにカスタマイズです。

ぶろぐアドレスはこちら
http://shinentaibiwakoweb.blog.fc2.com/


また、スマートフォン・携帯電話などでアクセスした場合は、デバイスのディスプレイの関係上シンプルレイアウト表示するので、スクショもどうぞ。こんな感じになりました。
201301021.jpg

(長いので、トップからきた方は続きね♪)
そもそも、なぜにfc2ブログ利用?

以前はamebaブログ&フリーホームページスペース(fc2ホームページ)での運用でしたが、以下のような理由で、fc2ブログに一元化しました。

・ぶろぐ担当者が、fc2管理画面に慣れているので、一度作った後は自身でどんどん更新可能。
・無料ブログとはいえ、レイアウト変更の自由度が高く、広告による制約がない

(qmebaは無料プランだと、ヘッダー広告や、横カラムの300pxバナー広告などで、レイアウトが阻害される)


その他、(今はやらなくても将来的なオプションとして)『月300円有料プランで、独自ドメインも使える』や『携帯電話用サイト・スマートフォン用サイトも、自在にカスタマイズ可能』という点もあげられました。




どのようなカスタマイズをおこなったの?


■ヘッダーのエディット


ヘッダーは、スタイルシート編集で、例えば以下のようになっている部分で、背景を変更します。

banner
{ background-image: url('画像アドレス'); }

だいたいはcss上で『banner』みたいな表記になってるでしょう。ブログに作った画像をアップして、画像アドレスをcssに書きます。




■専用の個別記事やカテゴリを用意し、グローバルナビに

通常webサイト同様に使えるよう、グローバルナビゲーションを用意。

201301022.jpg
横並びリストタグでメニューにして、項目を作ります。1ページで間に合う場合は
個別記事(アドレス形式:http://○○.fc2.com/blog-entry-○○.html)』で、

同系統の記事が複数ある場合は、
カテゴリ(アドレス形式:http://○○.fc2.com/blog-category-○○.html)
というように、リンク先URLを指定します。


もちろん、(今回はやりませんでしたが)cssをエディットして、『全部個別記事アドレス・ドロップダウンメニューのように』でもOKです。




■記事でなく、団体概要をトップに。プラグインフリーエリアで。

通常は、『最新記事がブログトップにあがる』ようにできているため、『サイトのトップページっぽく見せられるパーツ』を用意しました。プラグイン・フリーエリア利用です。


プラグインは3まであり、何番でもいいかと思いますが、1・2がすでに左カラムにあったから、3を表示します。
画像のように、メインカラム開始部分の上に、プラグイン表示させるように記述。
2013010213.jpg

ソースは途中までですが、以下のような形に。


<div id="primary-column" class="column"><!-- primary-column -->
<!--plugin_third-->
<div class="p3column">
<p style="text-align:<%plugin_third_ialign>">
<%plugin_third_description>
</p>
<%plugin_third_content>
<p style="text-align:<%plugin_third_ialign>">
<%plugin_third_description2>
</p></div>
<!--/plugin_third-->




あとは、フリーエリアを編集して・・・
2013010214.jpg

トップページみたいに書きたい、団体概要などを記載しました。



http://shinentaibiwakoweb.blog.fc2.com/


というわけで、ブログカスタマイズ技術情報を見て、活用いただくと同時に、まだまだ震災の爪あとも深く、被災者・支援者共に、日常を取り戻すべく奮闘が続いていることも、心に留めていただければ幸いであります





○盛り上がってるときだけ乗っかってくる、絆の安売りバーゲンは終わったのさ。本物はまだ続いているっ!

と思う方は
にほんブログ村 IT技術ブログ Webサイト構築へにほんブログ村 ベンチャーブログへにほんブログ村 音楽ブログへ

↓↑クリックお願いいたします♪
関連記事
スポンサーサイト
このエントリーのタグ: webサイト制作 fc2ブログカスタマイズ
トラックバック
トラックバック送信先 :
コメント

リンク(相互大歓迎♪)

月別アーカイブ