110000 カスタマイズ

MTタグの「ルールがいいかげん」と知って、やっと理解!

20170325movabletypepro_r

今日「【MT東京−33】はじめようMovable Type.テンプレート編(再演)」に参加してきました。

わたし、実は十年くらいMT使っていて、山のように解説書を買ってきて、テンプレートをいじってきたのに、いつになってもわからない。

そこでちゃんと基礎を学ぼうと今日参加したのですが……参加してよかったあ。

自分でいろいろテンプレートをいじっているので、今日、できあがった結果だけで言えば、そのくらいのことは自分でもできます。

でも基本を学んだことで随分理解が進みました。

続きを読む "MTタグの「ルールがいいかげん」と知って、やっと理解!" »

最強のMTカスタマイズ本を求めて「Movable Type 5 Webサイト制作ガイド Volume 1」に行きついた

これまでにMovable Typeの本を何冊買ったか、わからない。

TypePadやココログからMovable Typeに移行しようと、Movable Typeを初めてサーバにアップしたのはまたMovable Type3の時代。
だが、HTML手書きで作っていたシンプルなサイトでやっていたていどのことさえできない。Movable Typeのデフォルトのテンプレートを少しいじろうとしても、まるで歯が立たない。いつまで経っても、トップページに最新記事が並ぶブログスタイルから抜け出せない。
さりとて、HTMLを手書きしていた頃にはもう戻れない。

結局、昨年知人に少し古いバージョンのMovable Typeで作成したテンプレートを見せてもらい、それを手本にようやく自分がやりたかった形を作れるようになりかかっている。

ただし、わたしはMovable Type5を使っているので、参考にしているテンプレートとのバージョンのちがいなどもあり。まだ全部は思い通りにできていない。

トップページと個別記事のテンプレートは作成したのに、カテゴリ一覧やカテゴリアーカイブはデフォルトのテンプレートのままゆえ、デザインが崩れて表示されていたり、問い合わせページなどができていなかったり…。
かなり情けない状態。

Movable Type5の本も2冊購入、首っ引きでやっているが、まだまだわからないことだらけ。
今日も今日とて、ページ分割について調べていたら、ぶち当たったのが
「Movable Type 5 Webサイト制作ガイド Volume 1」

「Movable Typeと言えばこの人!」のひとり、藤本壱さんが販売しているPDF本です。
サイトにサンプルがあります。このサンプルを見たところ、これがわかりやすい。
「この節で行うこと」として最初に目的地を具体例で見せてくれるので、その節で何ができるのか、よくわかります。

たくさんの本を出してきた藤本さんが、なぜ既成の出版社などからの出版ではなく、PDF本を自ら販売することにしたのか…それをわたしは勝手に察しました。
わたしはこれまでに三十数冊の本を書き、十数年の間、年に2~3冊の本を書いてきたのに、数年、本を書いていません。
出版不況も行くところまで行った感があるからです。

紙に刷って書店に並べる…この流通に載せて、利益を出すには、最低一万冊売れなければなりません。
しかし一万冊売れる本となると、かなりターゲットを広くしなければならず、求める人は強く求めている濃い内容の本はもう作れません。

MTの本を山のように買ってきたわたしは、どの本も前半はインストールや記事作成など同じことばかり書いてあるのに、うんざりしてきました。
そこを飛ばした中級者のためのカスタマイズ本を欲しいと思いましたが、それが一万冊売れるか?と言われれば、難しいと言わざるを得ません。

「Movable Type 5 Webサイト制作ガイド Volume 1」も話はインストールから始まっていますが、ただのインストールではなく、ローカル環境へのインストールなど、特殊な話が満載で読み応えありそう。

四百数十ページのボリュームと、濃い内容で、わたしが持っているMovable Type本の中で決して高くない価格です。

Movable Type 5 Webサイト作成ガイドVolume 1

続きを読む "最強のMTカスタマイズ本を求めて「Movable Type 5 Webサイト制作ガイド Volume 1」に行きついた" »

MTカスタマイズ:本日の失敗:覚えたこと:記事データ取得のタグの位置

いま、MTのカスタマイズを行っていますが、いくつか失敗をしています。
※MT=Movable Type (ムーバブル・タイプ)

今後のためにメモ

<mt:Entries>~</mt:Entries>
これはブロックタグで、囲まれた間に、最新の記事と記事に関するデータを取得するタグ。

よくあるトップページに、指定した数の記事を表示させるやりかたは以下のような感じ。
今日、これを書いて(書いたつもりで)、それからスタイルシートでdiv「post」に対して、スタイルを指定したのですが、表示させると、5つの記事の内の1つめの記事だけにしか、スタイルが指定されませんでした。
見直すと、<div class="post">が<mt:Entries Lastn="5">の前に書かれていました。

1つずつの記事を囲む<div>は、<mt:Entries>~</mt:Entries>の間に書かなきゃダメ!

今日の失敗と覚えたことでした。

<!-- 最新記事のデータを取得 -->
<mt:Entries Lastn="5">
<!-- 記事 -->
<div class="post">
<!-- 記事タイトル出力タグ<$mt:EntryTitle$>で記事タイトルを表示 -->
<!-- 記事個別ページへのリンクを設定 -->
<h2><a href="<$mt:EntryPermaLink$>"><$mt:EntryTitle$></a></h2>
<div class="body">
<$mt:EntryBody$>
</div>

MTでカテゴリーごとのナビゲーションバー作成

■現在位置のタブだけ色を変えたい!

MTタグで作る方法を見たが、それだとホームのタブをうまく入れられず、小粋空間の単純にカテゴリーページのURLを手入力する方式を検討。

これまでHTMLで作成したサイトでは、現在いる位置がわかるよう、現在のカテゴリのタブだけ色を変えるようにしていました。
しかし、MTだとどうやればいいのか?

小粋空間に掲載されていた方法は、「クリックしたメニューのロールオーバーを保持する」やりかたです。

検索エンジンなどから来た場合、メニューをクリックしてないと、維持すべきロールオーバーがないので、どうなるのか、一抹不安。

また、さっと読んだだけでは、自分の場合はどこをどういじくればいいのかがよくわからなかったことと、JavaScriptを使うようなので、他の方法を探しました。

●IF 命令プラグイン利用ですっきり指示

そうして見つけた方法が、drk7.jpで紹介されていた方法です。

カテゴリ IF 命令プラグイン - MTIfCategoryが必要ですが、現在いるカテゴリだけ、指示した装飾(強調文字にするとか、色を変えるとか)を施すという、わかりやすい方法です。

●現在位置のタブだけリンクを外すことも!

このプラグインを手に入れた後、調べてみると、このプラグインがあると、あれこれやりたいことができることが判明。

まず他のカテゴリーを開くタブはリンクさせておきたいですが、現在開いているカテゴリーページは見た目を変えるだけでなく、リンクもはずしておきたいですよね。
このプラグインによって、それも実現します。

さらに調べていく内に、いろいろ役立つことがわかったので、ともかく、このプラグインは採用!

さて、まずはカテゴリーアーカイブのテンプレート作成を始めなきゃ…。

タイトル周りの要素を整理

タイトル回りを考えるにあたり、まず、入れるべき要素の整理が欠かせませんね。

まずは入れたいものをピックアップ。

1)サイトバナー
内容を伝えるグラフィック要素を持たせつつ、文字もはっきり。小さくてもOK。
MTの一般的なデザインとして、一見、サイトバナーに見えるものでも、2通りあります。

1.背景画像を使って、上に文字を載せる方法
2.1枚の画像にする方法

※SEO的に考えた場合、わたしのサイトの場合、ビッグキーワードで狙うのではなく、ロングテール的に細かいワードで狙うタイプなので、トップページ以外は、サイトの名前より、記事のタイトルやカテゴリーのタイトルが立ったほうがいい。
そうすると、サイトバナーは1枚の画像にして、サイトタイトルは、不要な場合にはHTMLソースの中で目立たせない方法も取れるほうが便利そうです。

2)検索窓
わたしの作っているサイトの多くは、キーワードで検索して来た訪問者が、同種の記事や自分が探している商品などの記事を見つけて、何ページもめぐることが少なくありません。ひとつのサイトの記事数も数百が一般的。
従って、検索窓が目立つ場所に必要です。

3)パン屑リスト
細かいサイトがたくさんあっても、同種のサイトをまとめる親サイトがあり、そこへはパン屑リストでつなげています。これも上部のタイトル回りに必要です。

4)サイトマップ
対検索エンジンでいえば、上部に越したことはありません。
また対訪問者を考えた場合、サイト内で導くために重要なサイドバーのトップにサイトマップを置くのはもったいない。
ということで、上部に見ればわかるけど、さりげなく置くのがベスト。ということで、これもタイトル回りに必要。

5)サイト説明
サイトのタイトルや説明はどこまで立たせるか悩むところですが、一瞬で「ここはなんのサイト?」を知ってもらう一助として、やはり入れておいたほうがよさそうです。

その他、自己紹介や関連サイトへのリンクなどは、サイドバーやフッターで済むと思うので、この5つを納めるタイトル回りデザインを考慮中。

拡張子htmlのままPHP化(さくらインターネットの場合)2:フォルダ移動で成功!

小粋空間の「Movable Type の PHP化(その2:.html のままPHPを有効にする) 」を参考に拡張子をHTMLのままPHP化することにチャレンジしたものの、エラーが出てストップ。
仕事が忙しくて、触れるひまがなくて、何週間も立ってしまいましたが、ようやく時間ができて、情報を検索、試ししたら、解決しました!

小粋空間Movable Type の PHP化(その1) の記事につけられたコメントで、やはりうまくいかなかった方が「MTフォルダの下に、PHP化したいブログのフォルダを移動したところ成功」した旨、書かれていたので、わたしもフォルダを移動してみたところ、無事、成功!

test.htmlにアクセスして、以下の画面が無事見られたときのうれしさ!

20070709_01_1 

拡張子htmlのままPHP化(さくらインターネットの場合)1:挫折

■PHP化

小粋空間の「Movable Type の PHP化(その2:.html のままPHPを有効にする) 」を参考にチャレンジしました。

しかし、ブログにアクセスすると、ページが404エラーになってしまいます。
他はそのまま.htaccessを削除すると、ページが表示されます。
何が問題なのか、検討したいのですが…今回はあきらめて、季節もの新サイトはPHP化を後回しにするほかないかも…。

MTのカスタマイズを開始

TypePadやココログからMT(MovableType)に移行しようと、模索中です。いま、テストブログを立ち上げ、そこで試行錯誤しながら、カスタマイズをしています。

MTの先輩たちからおすすめ本を聞いて、それを読み、まず、目指す仕様を次のように決めました。

【最優先】
<後々の変更のための準備>
●PHP化(拡張子はHTMLのまま。さくらインターネットの場合、特殊)
MTカスタマイズの大御所のブログ「小粋空間」を参考に。


<アーカイブページ>
●同一カテゴリー内の前後の記事へのリンク表示
 ※紫本「Movable Typeでつくる!最強のブログサイト プラグイン&カスタマイズ編」P135

●カテゴリーアーカイブページの分割
 ※紫本「Movable Typeでつくる!最強のブログサイト プラグイン&カスタマイズ編」P206



<サイドバー>
●カテゴリー並べ替え
 ※紫本「Movable Typeでつくる!最強のブログサイト プラグイン&カスタマイズ編」2-01)

●カテゴリー一覧ツリー表示
 ※紫本「Movable Typeでつくる!最強のブログサイト プラグイン&カスタマイズ編」2-02

●サイドバー各項目の折り畳み
 ※紫本「Movable Typeでつくる!最強のブログサイト プラグイン&カスタマイズ編」2-01

●自己紹介、ブログ紹介項目追加
 ※水色帯本「Movable Type標準ハンドブック Movable Typeで今すぐできるウェブログ入門 改訂版」P180



<エントリー>
●エントリー内に属するカテゴリーのリスト表示
 ※青本「Movable Typeスタイル&コンテンツデザインガイド―コンテンツ管理システム(CMS)ツールとしてのMovable Type活用術&実践サイトデザイン術」P67

●「パーマリンク」の名称書き換え?



【余裕ができたら…】

<後々の変更のための準備>
●パーツ入替プラグイン装備(WidgetManager利用)
※紫本「Movable Typeでつくる!最強のブログサイト プラグイン&カスタマイズ編」1-02)

●エントリーのプレビューのプラグイン装備
 ※紫本「Movable Typeでつくる!最強のブログサイト プラグイン&カスタマイズ編」P174)

●特定カテゴリーの除外表示
 ※紫本「Movable Typeでつくる!最強のブログサイト プラグイン&カスタマイズ編」P152)

●カテゴリー一覧のモジュール化
 ※紫本「Movable Typeでつくる!最強のブログサイト プラグイン&カスタマイズ編」P201)

●最近の投稿のモジュール化
 ※紫本「Movable Typeでつくる!最強のブログサイト プラグイン&カスタマイズ編」P205



<サイドバー>(移行サイトの追加仕様)

●カテゴリー並べ替え
 ※紫本「Movable Typeでつくる!最強のブログサイト プラグイン&カスタマイズ編」2-01
 ※TypePadからの移行の場合は、出力ファイル名指定(WidgetManager:紫本「Movable Typeでつくる!最強のブログサイト プラグイン&カスタマイズ編」P5

●レビューや日記ブログに関しては、最近の画像表示
 EntryImagesプラグインをインストール
 ※紫本「Movable Typeでつくる!最強のブログサイト プラグイン&カスタマイズ編」P82応用

●複数のブログを組み合わせてページ出力

 ※紫本「Movable Typeでつくる!最強のブログサイト プラグイン&カスタマイズ編」P147
 ※Mixi連動の総合日記用に

●トラックバックの重複を防ぐ
 ※紫本「Movable Typeでつくる!最強のブログサイト プラグイン&カスタマイズ編」P252



メモ(将来使いたくなりそうなカスタマイズ)
●コメントに返信したときメールで通知
 ※紫本「Movable Typeでつくる!最強のブログサイト プラグイン&カスタマイズ編」P107

●エントリー内に地図を表示
 ※紫本「Movable Typeでつくる!最強のブログサイト プラグイン&カスタマイズ編」P125

●QRコードを表示
 ※「Movable Typeでつくる!最強のブログサイト プラグイン&カスタマイズ編」P129

●正規表現で検索や置換を行う
 ※紫本「Movable Typeでつくる!最強のブログサイト プラグイン&カスタマイズ編」P142

●カテゴリーごとにスタイルシート変更
 ※紫本「Movable Typeでつくる!最強のブログサイト プラグイン&カスタマイズ編」P156

●秘密のコメント機能の追加
 ※紫本「Movable Typeでつくる!最強のブログサイト プラグイン&カスタマイズ編」P255

その他のカテゴリー

100000 MovableType | 100100 1つのMTで、複数のブログを、複数の独自ドメイン(マルチドメイン)で運営するためのシンボリックリンク設定 | 101000 TypePad | 110000 カスタマイズ | 111000 ナビゲーションバー | 112000 独自ドメイン | 113100 CORESERVER | 113200 XRER | 113300 さくら(サーバ) | 120000 プラグイン | 130000 PHP化 | 141000 タイトル回り | 142000 背景デザイン | 210000 ECのセミナー | 310000 ヨガ | 410000 動画 | 510000 モバイル | 511000 ネットブック(モバイルノート) | 520000 セキュリティ | 521000 ノートン | 610000 アクセス解析 | 611000 Google Analytics | 611100 Googleのアクセス解析「Google Analytics」の使い方:申し込みかた | 700100 通販 | 701100 ソニー | API | GALAXY S II SC-02C | Google+ | GoogleAdsense | Googleウェブマスターツール | Lenovo | NEC LaVie Z・NEC LaVie HZ | SCANSNAP | ValueDomain | windows8 | Xdomain | XSERVER | おもしろ商品 | お名前.com | お得情報 | ウェブログ・ココログ関連 | ウエラブルアイテム | ウルトラブック | サイト作成 | スマートフォン | セミナー | タブレット | テーブルゲーム | デジカメ | パソコン・インターネット | ビジネス小物 | ライフハック | レビュー | 使わなくなったパソコンの処分 | 出張用ノートPC・タブレット診断チャート | 出張用パソコン・タブレット | 大人の社会科見学 | 家具 | 展覧会 | 廃車 | 手帳・文具 | 携帯・デジカメ | 書籍・雑誌 | 楽天カード | 独自ドメインでTypePad系ブログ | 画像加工ソフト | 電源

便利ツール

  • キャリアアップ.biz >ブロガーズブログ

カテゴリー

広告

  • ソフマップ・ドットコム

マイチャンネル