自分でできる簡単更新!オリジナルのホームページ制作ならkayokiseki-design

  

FC2スマホ用テンプレートを編集する

皆さんはブログを書いていますか?

わたしはこのブログを立ち上げる前より趣味で書いているブログがあり、FC2ブログを使わせていただいています。他に3か所のフリーブログを触る機会がありましたが、動きが重い・時間がかかる・テンプレートがいまいち・カスタマイズ性が乏しいなどマイナス面が目立ち、もう1本趣味ブログを建てましたがやはりFC2ブログを使わせていただきました。


趣味のブログなら無料ブログをぜひ使わせていただきましょう!今回はFC2ブログのスマートフォンでの見映えを編集する手順です(やる作業自体は簡単なのですが、HTML/CSSの知識がないとつらいかもしれません)。

[広告]


実はわたくし、このブログはとっくにレスポンシブ対応していたのですが、FC2ブログ2サイトは、PCサイトのカスタマイズをしたままでスマホでの見栄えはまったく手を付けていませんでした。それは、閲覧者の数や閲覧機種が主にPCだったことが理由なのですが…


なんと!いよいよスマートフォンとタブレットでの閲覧が25%、4人にひとりになった~!!

心によぎる「マズイ…」。FC2ブログは、特に設定しない場合、真っ白でシンプルな「new_basic_white_ap」というテンプレートが自動的に適用されます。非常にシンプルで見やすく個人的に気に入っているテンプレートなのですが、問題は真っ白のため検索でアクセスした瞬間つまらぬサイトに見えてしまう可能性が高いです。


そこでこの「new_basic_white_ap」というテンプレートをそのまま生かして、PCサイトの見栄えに近くするというカスタマイズをします。


カスタマイズは、管理画面の「テンプレート管理」ページで行います。

1.スマートフォン用の「テンプレート管理」をクリックします。

2.「new_basic_white_ap」の「複製」をクリックすると、複製ができます。それをこれからカスタマイズしていきます。

3.こ複製したテンプレートの名前を分かりやすく任意でつけましょう。そして【更新】します。

(4.カスタマイズを終えたら、任意でつけた名前のテンプレートのボタンをチェックして【適用】します。)


chromeでもIEでも開発者ツールが【F12】キーで開きます。FC2ブログのカスタマイズについて書かれたブログは多くありますが、テンプレートが違えばやることも違うので、開発者ツールでモバイルサイズに表示してスマホ用テンプレートに切り替えた状態で、カスタムしたい要素のclass名を調べCSSを書き換えていく方法がいいと思います。

その際、ポイントがあります。FC2ブログの広告として一番下にオーバーレイ広告が入ります。これがずっと動いているため、開発者ツールが落ち着かず作業できませんので、これを作業中は消します。HTMLの一番下に行くとコードがチカチカしているこの部分です。クリックして青に反転させ【Delete】キーを押しましょう。

<div style="position: absolute; border: none; padding: 0px; margin: 0px;~"><iframe style="position: relative; border: none; padding: 0px; margin: 0px;~"></iframe><div style="height:22.5px;text-align:center;background-color:#000;~"><div style="vertical-align:middle;display:table-cell;~">Sponsored Link</div></div></div>

わたしが変えたところは、次のとおりです。

/*共通*/

body {background: url(***.jpg) no-repeat top center fixed;}/*背景画像*/
#header {background: none;border-bottom: none;}/*タイトルバー・罫線無し*/
#main_contents .wrapper {background-color: rgba(***,***,***,0.8);}/*記事箱透過*/
a:link,a:visited {color:#***;}/*リンク色変更*/
a:focus,a:hover,a:active {color:#***;}/*リンク色変更*/

/*トップページ*/

.entry_list .topentry_info {background: #none;}/*背景色無し*/

/*記事別ページ*/
.entry_title h1, .page_title h1 a, .entry_title h1 a { color: #***;}/*リンク色変更*/
.entry_title .entry {background: none;}/*背景色無し*/
.entry_title {border-bottom: 1px solid #***;}/*罫線色変更*/


さて、FC2ブログを無料で使用すると広告が次の場所に入ってきます。有料プランにすると非表示にできます。


自分のブログと雰囲気があわずにお嫌かもしれませんが、無料で使うにあたっては、当然ながら非表示もしくは場所を変更すると規約違反となります。ぜひちゃんと読みましょう。

FC2ブログマニュアル 広告の表示について | FC2ヘルプ

最後の<%ad_overlay>は、一部ユーザーでは削除しても問題ないと考えられているようですが、「広告の掲載位置」に明記されている通り、スマートフォンは3か所広告があるのですから、表示すべきところです。企業が無料でこういう便利で性能のよいサービスを提供するとき、やはりそこには人員を割くわけですから広告収入が欠かせませんね!


ということでぜひブログを建てている方はカスタマイズしてみてくださいね!また持っていない方は、ご趣味があればぜひ書いて、インターネットの作り手の一人になってみることをお勧めします。

[広告]

SoyCMSでお知らせラベルを実装する ブログTOP 2015年「上に戻る」ボタン4パターン
Hotentry
Blog Post
Archives
クリックして上に戻る