ファンブログ カスタマイズ　ぽあろの休日

ちょっと複雑なカスタマイズをする場合、ファンブログに
アップロードする前に出来栄えを確認したいことがありますよね？
そんな時、自分のPCにファンブログの環境を構築すると便利です。

今回は、バックアップの意味も込めて、ローカル（PC)に
ファンブログの環境を構築してみましょう。

１．ローカル環境を構築する意味

　フォントサイズの修正や、ファビコンの追加くらいのカスタマイズなら、
　直に修正内容をファンブログにアップロードしてから確認しても、
　さほど影響はありません。

　しかし、レイアウトやアイコン、あるいはスタイルシートを大幅に修正した場合、
　いきなりアップロードするのは、大変危険です。

　ファンブログの管理ツール自体、プレビュー機能があって、一応のイメージは
　確認できます。
　しかし、タグのチェックをしてくれないのです。
　万が一タグを閉じてない場合、こんな感じにレイアウトがグチャグチャになってしまいます。



　



　そうならないためにも、ローカルでファンブログの環境を構築し、
　修正内容をfixさせてしまいましょう。
　そして、万全の体制でファンブログにアップロードするのです。

２．まずはHTMLをローカル環境にコピーする

　まずは、ローカル環境に持ってきたいページのHTMLコードをコピーしましょう。
　ここでは、本ブログのTOPページを例にしています。


　

　１）TOPページのHTMLコードを表示する

　　こちらの記事を参考に、TOPページのHTMLコードを表示させてください。

　　【関連記事】 記事とHTMLの関係をイメージしよう


　

　２）HTMLコードを全文コピーし、エディタに貼り付ける

　　「Ctrl+A」で表示されているコードを全選択し、コピーします。
　　そして、その内容をエディタ（メモ帳等）に貼り付けてください。



　　



　　ファイル名は「top.html」というように、拡張子をhtmlとして保存します。

３．表示させてみよう

　では、２．で作成したhtmlファイルを実行してみましょう。
　ブラウザが立ち上がり、TOPベージが表示されるはずです。

　

　おそらくこんな感じで、一部表示がおかしかったのではないでしょうか？
　私のブログではあまり参考にならないので、ニコ さんのブログをお借りしてます。



　



　画像関係がおかしいみたいですね。
　何故こうなったかを理解するためには、絶対パスと相対パスの関係を知る必要があります。

　ちょっとややっこしい話になるので、ファンブログで使用されている画像やアイコンを
　カスタマイズしない場合は、次の章を飛ばしちゃってください。

４．何故画像が表示されなかったのか？

　まずは、現状認識ということで、画像が表示されていない箇所のコードを見てみましょう。

　ここですね。

　真ん中のimgタグで画像を表示しています。
　これに何が問題があるのでしょう？
　試しに、この「/jp_mind_body_spirit/file/46/MjAxMTA2MjGO-A.jpg」というアドレスを
　ブラウザで表示してみてください。

　表示されませんよね？

　どうやら、ここの指定方法に問題がありそうです。

　何故、この指定方法に問題があるかというと、ファンブログのサーバー内における
　絶対パスで画像を指定しているからです。

　ローカル環境で画像を正しく表示させるためには、２つの方法があります。

　　１）ファンブログのサーバーと同様の環境を構築する

　　２）画像の指定を絶対パスにする

　ちょっと複雑な話になるんですが、２）の場合、ここが相対パスで指定されていたのなら、
　「だから駄目なんだよね〜」と話が続けやすいのです。

　　　相対パス　→　絶対パス

　にすれば良いよね。という感じに。

　でも、今回は、

　　　絶対パス　→　絶対パス

　というような修正をしなければなりません。

　何故、絶対パスから絶対パスに変える必要があるのかというと、
　「閉じた絶対パス」と「開いた絶対パス」（命名：私）の２種類があるためです。

　では、次の章でこの絶対パスと相対パスの関係について解説します。
　・・・と思ったのですが、この話自体長くなりそうなので、別記事として
　こちらで解説＆解決法を紹介します。

　【関連記事】 絶対パスと相対パスという考え方　

５．スタイルシートのダウンロード

　カスタマイズにおいて、かなりの部分を担うことになるスタイルシートも
　ローカル環境に持ってきましょう。

　ファンブログの管理画面より、スタイルシートを表示し、全文をコピー。
　HTMLと同様に、テキストエディタに貼り付け、ファイル名を「style.css」として、
　保存してください。

　さて、ここで問題になるのが、このファイルの置き場所です。
　現状、HTMLでどのようにこのスタイルシートが読み込まれているか確認します。
　"style.css"でHTMLを検索してみてください。

　本ブログの場合、このようになっています。

　つまり、このままでは、ファンブログにあるスタイルシートを読み込んでしまうのです。
　ここを先程作成したスタイルシートを読み込むように変更しましょう。

　この修正も、ある程度絶対パスと相対パスの関係を理解しておく必要があります。
　とりあえずは、２．で作成したhtmlファイルと同じ場所に置いておきましょう。
　このようになります。



　

　これで、HTMLとスタイルシートをローカル環境に持ってくることができました。
　今後、ファンブログにアップロードせず、自由にカスタマイズをすることが出来ます。

６．カスタマイズをしてみよう

　では、ちょっとスタイルシートをカスタマイズしてみましょう。
　こちらで紹介したフォントサイズ・行間の変更をしてみてください。


　【関連記事】 フォントサイズ・行間を変更して読みやすくしよう


　もちろん、修正は５．で作成したスタイルシートに対して行います。
　修正後、２．で作成したhtmlファイルを実行すると、修正内容が反映されているはずです。

７．アップロード時の注意点

　最後に修正したファイルをアップロードする際の注意点を書いておきます。

　１）カスタマイズの対象

　　今回紹介したローカル環境の構築においては、主にスタイルシートのカスタマイズが
　　対象となります。
　　メインやプロフィール等、テンプレートのカスタマイズについては、説明していません。

　　何故かというと、テンプレートのカスタマイズには、また別の理解が必要に
　　なってくるからです。
　　機会があれば、今回作成したローカルのHTMLと、ファンブログのメインのテンプレートを
　　比較してみてください。
　　記述内容が全く違うことが解るはずです。



　　



　　この理由は、こちらで紹介したファンブログのオリジナルタグと関係してきます。


　　【関連記事】
　　　　 ファンブログで使えるタグを確認しよう
　　　　 記事とHTMLの関係をイメージしよう


　　テンプレートのカスタマイズにおける注意点は、いずれ解説します。（多分…）

　　以上の理由により、今回作成したHTMLの内容は、ファンブログにアップロードしないように
　　してください。

　２）スタイルシートのカスタマイズ

　　上記にも書いていますが、スタイルシート上で指定されている画像・ファイルを
　　カスタマイズする時は、細心の注意を払ってください。

　　普通にローカル環境にある画像・ファイルを指定してしまうと、アップロード後、
　　その画像は表示されません。ファイルの場合は、読み込まれません。
　　これは、テンプレートのカスタマイズでも言えることです。

　　絶対パスと相対パスの関係を理解した上でカスタマイズすることをお薦めします。


以上、何気なく書いた記事のつもりでしたが、過去最高に時間がかかった記事に
なってしまいました。
そして、内容的にもちょっと専門的にならざる得ませんでした。
申し訳ないです。

ただ、今回の内容を知っておけば、今後のカスタマイズにプラスになる事はお約束します。
是非、ローカル環境の構築にチャレンジしてみてください。





【スポンサード リンク】