今回も GRAPHIE に合わせたのですが、少しハマったので情報共有のエントリです。
テーマを変えたらMarsEditのプレビューイメージも変えましょう
先日、ブログテーマを GRAPHIE に変えました。
ブログのテーマをGRAPHIEに変えてみました、このテーマはブログを書くことに集中したい人には良いかもしれない
ブログのテーマを変えたら MarsEdit のプレビュー画面のイメージも新しいテーマに合わせましょう。その方が見た目の調整もしながらエントリを書くことができます。
ちなみに MarsEdit とは Mac 用のブログエディタです。ブログの管理画面からエントリを書いても良いのですが、ブログエディタに色々とネタと溜めておく使い方は便利ですよ。
MarsEdit – the blog editor for WordPress, Tumblr, Blogger and more. (価格: ￥4,000)カテゴリ: ソーシャルネットワーキング
販売元: Red Sweater Software
さて、この MarsEdit はプレビュー画面のスタイルを変更することができます。
プレビュー画面の下に「Edit Template」というボタンがあるので、これを押すとテンプレート画面が立ち上がります。この画面にスタイル情報を記述するとプレビューがブログのエントリと同じイメージになります。
スタイル情報を記述すると…と書きましたが、具体的には自分のブログを表示して、その HTML ソースを表示させて CSS ファイルが指定されているところを探すことになります。
GRAPHIE の場合、HTML ソース中に次のようなリンクがあるはずなので、この2つのファイルを MarsEdit のプレビューにも追加すれば良いことになります(後述の問題がありますが…)
|
1 2 |
<link rel="stylesheet" href="http://azur256.com/wordpress/wp-content/themes/dp-graphie/css/style.css?053122" media="screen, print" /> <link rel="stylesheet" href="http://azur256.com/wordpress/wp-content/uploads/digipress/graphie/css/visual-custom.css?053122" media="screen, print" /> |
MardEditのテンプレート編集画面を開いて <head> から </head> の間に先ほどの 2 行を入れてみましょう。
実際のコードはこのようなイメージになると思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="http://azur256.com/wordpress/wp-content/themes/dp-graphie/css/style.css?053122" media="screen, print" /> <link rel="stylesheet" href="http://azur256.com/wordpress/wp-content/uploads/digipress/graphie/css/visual-custom.css?053122" media="screen, print" /> <title>#weblogName#: #title#</title> </head> <body style="margin:0; background-color:#FFF;"> <div style="padding:10px 20px; color:#DDD; background-color:#333; margin:0;"> <span style="font-size:2em;">#title#</span> </div> <div style="padding:10px 20px;"> #body# #extended# </body> </html> |
画像が表示されない
これでプレビューがブログと同じイメージを手に入れた！…はずだったのですが、残念ながらそう簡単にはいきませんでした。
本当はこのように表示して欲しいのですが
実際はこのような表示になります。画像が表示されていません。MarsEdit のプレビュー画面なので Chrome の開発者ツールなどでデバッグすることもできません。ちなみに、このようになるのは MarsEdit のプレビュー画面のみ。通常のブログではちゃんと表示されています。
仕方ないので CSS の内容で怪しそうなところをチェックしていったところ、次のスタイル設定が悪さをしていたようです。
|
1 |
.header-banner-outer .header-banner-inner.hd-img img,.header-banner-content,#loop-section.gallery .loop-flip,#loop-section.gallery .loop-flip-inner h1,#loop-section.portfolio .loop-flip footer,#loop-section.portfolio .loop-media-icon,.loop-post-thumb img,.loop-post-thumb.magazine .loop-media-icon,.entry img,#hd-slideshow{-webkit-opacity:0;-khtml-opacity:0;-moz-opacity:0;-o-opacity:0;filter:alpha(opacity=0);-ms-filter:"alpha(opacity=0)";opacity:0} |
ただ、この部分をサーバの CSS ファイルを修正してしまうわけにはいかないので、サーバの CSS ファイルの中身をそのまま MarsEdit のテンプレートに展開して該当する部分を丸々カットしました。
タイトルの下に隙間がある
もう一つ問題があることに気付きました。妙に大きな余白があるんですね。
本文の上に余白は空いてしまう部分は main-wrap のマージンが 80px あるので、ここを 0px に修正します。
|
1 |
#main-wrap.no-header{margin-top:80px} |
これでだいぶ少なくなりましたね。
これでもまだ隙間が気になる人は次の padding を 60px から 20px くらいに変えると良いでしょう
|
1 |
.container{clear:both;text-align:left;width:960px;margin:0 auto;padding:60px 20px} |
これで、思い通りのプレビューになりました。
思ってたよりもハマったのでどなたかのお役に立てればと思います。
最後まで読んでいただきありがとうございます。
左のアイコンをクリックして、このブログを Feedly に登録していただけると嬉しいですFacebook ページでも情報を発信していますのでよろしかったら「いいね！」をお願いします
RSSリーダへの登録は こちら からどうぞ。
コメントを残す