タグ : CSS

MTOSサイトで携帯対応まとめ(4)~アーカイブテンプレート

前回から続いています。

さて、アーカイブページの設定についてです。

ブログにしてあるものについては、『必要項目をカスタムフィールドで用意』⇒『それらを呼び出して組み合わせるテンプレートを作成』⇒『同じ形式の記事ページが複数出来る』という形のため、テンプレートをPC用と携帯用の二種類用意し、どちらも基本同じ内容だけれどレイアウトを変えて出力する、という形をとりました。

PCの方はCSSは基本すべて外部ファイルに記述しており、classやidを駆使してデザインを決めています。特に、CSS3では角丸やシャドウ、グラデーションなど表現の幅が広がっているので、CSSだけでかなりいろいろなことができます。

でも、携帯ではドコモのおかげで外部CSSが使えないため、CSSの記述もインラインで(各タグの中に「style=””」という形で)入れる必要があり、内容の並べ方も変わってきます。対応していないプロパティもありますので、なるべくシンプルに記述していく必要があります。

なので、新しいアーカイブテンプレートを作り、マッピングのパスを「m/%-f」としました。当然、優先はPC用です。(私が指定したPC用のアーカイブマッピングパスは「%-f」です。ちなみに、%-fの意味は、「出力ファイル名.拡張子」です。詳しくはこちら参照)

なお、リンクを張る時、<$mt:EntryPermalink$>は優先されるテンプレートに割り当てられますので、携帯のページURLは「<$mt:BlogArchiveURL$><$mt:FileTemplate format=”m/%-f”$>」となります。

それとは別に、ウェブページを数ページ用意していました。

これは、単独で完結する内容で、あまり動きのないもの、という認識なのですが、mtevalモディファイアのおかげで、ページ本文にMTタグが普通に使えるようになったこともあり、昔だったらインデックステンプレートにしてしまうような内容を個別ページに出来るようになりました。

なので、このウェブページはウェブサイト直下に置いたのですが、「規約」のような独立のページ以外は、結構各ブログからパーツを引っ張ってきて作っており、本文と言いながら一部の内容は『記事テンプレート』状態になっていました。

これでは、CSSの縛りもあり、同じ内容からテンプレートだけを変えて2種類出力する、というのも無理がありました。

なので、携帯用ページは別に作ることにしました。

その際、フォルダを「携帯用」として作成し(フォルダ名は「m」)、それぞれ内容を携帯用に特化させて保存しました。

もちろん、テンプレートそのものも分けないといけません。パーツもすべて変わってしまうので。ただ、ウェブページテンプレートを複数作るのは違います。何しろ、一記事に対して一ページできれば良いのですから。

そこで、ウェブページテンプレートの内容はすべてモジュールにしてしまい(PC用ウェブページ・携帯用ウェブページ)、携帯用フォルダに入っているかどうかで条件分岐して呼び出す形にしました。

ちなみにウェブページテンプレートの内容です。
たったこれだけです。

<mt:IfFolder name=”携帯用”>
<$MTInclude module=”携帯用ウェブページ”$>
<mt:Else>
<$MTInclude module=”PC用ウェブページ”$>
</mt:IfFolder>

まぁ、これは構造が単純でページ数が少ないからできたことではあります。

とりあえず、これで携帯用ページを生成する準備ができました。

ブログランキング・にほんブログ村へ
にほんブログ村

Twitt

CSSでドロップダウンメニュー

MTOSでのサイト作りがなかなか進みません。

ライセンス版のMT4では、デフォルトでトップ画像下にナビゲーションバーのあるウェブサイトテーマが入っていたのですが、MTOS5にはありません。

無料テーマをいろいろ探しているのですが、ウェブサイト用テーマとなると、なかなか「これ」というものが見つからず、良いものはそれなりの価格だったりして、悩ましいです。

何しろ、お金の取れないサイト作りなので…。労力はある程度かけても、あまりお金はかけたくないんですよねぇ。(時間がかかる方が実はコストが高いのかもしれませんが。)

こうなったら、自分でガシガシとHTMLやCSSを書いていくしかないんでしょうねぇ。

幸い、ありがたいことにサンプルソースを公開してくださっている方がWeb上にたくさんいらっしゃいますので、自分の希望に近いものを拝借して、あとはカスタマイズしていくのが良いのかな、と思っています。

とりあえず、今ほしいのはドロップダウンメニューつきナビゲーションバー
できればCSSだけで実装したいと思っています。

検索するといろいろ出てきますが、こちらの解説がわかりやすかったので参考にさせていただきます。

 ezorisu-web » CSSでドロップダウンメニュー

ただひとつだけ、これがなかなか見つからないのですが、該当ページにいるときはそのメニューの色が変わるようにしたいんですよね。

ライセンス版MT4では、条件分岐でクラスに”on”と”off”をつけることで実装していたのですが、今ソースを見てもかなりややこしくて解読に苦労しています。

うまく解読できたら、今度のサイトでも実装してみたいと思います。

ブログランキング・にほんブログ村へ
にほんブログ村

Twitt

CSSをいじると…

さっそくテーマを「neutral」に変更してみたのですが、見た目の細かいところを修正したくて「WP Live CSS Editor」というプラグインを入れてみました。

実際の記事を見ながら微調整ができて便利! と思ったのもつかの間、saveしてリロードすると、レイアウトが崩れてしまいます(泣)。

いじったのはタイトル下のmarginとか、右サイドバーのタイトルと中身を多少メリハリつけようとサイズとmarginをちょこっとなんだけど…。

結局テーマを削除して再インストールという強引なことをやってみました。

まぁ、このプラグインは最新ver.ではテストされていないそうなので、不具合かも。

そんなこんなでいきなり出鼻をくじかれてしまったのでした。前途多難。

 

ブログランキング・にほんブログ村へ
にほんブログ村

Twitt