ユーザーの方から「MovableType 4.2 無料テンプレート 2Column HTML5」でコンテナの幅を調整したいというご要望がありましたので、予定を変更してCSSでの調整を解説します。

コンテナやカラムの幅の調整方法

Layout部分36行め以降のheader#branding・div#content・footer#copyで全体の幅を指定し、div#mainとdiv#subでカラムの幅を調節します。＊ノーマルな状態ではメインコンテンツには468pxのバナーがぴったりと入るように設計されています。

740pxの幅を960pxに広げ、メインコンテンツに640pxが入るように調整する例

640px+20px+20px（div#main .innerの左右padding）=680px（div#main）
960px（全体の幅）-680px（上記数値）-2px（IE用調整）=278px（div#sub）

サイドバーが48px増えてるが、このままではアイテムのサムネイルが横に3つ入らずおかしな余白ができる。3つ並べるには240px必要となるのでdiv#sub .innerのpadding-leftを2px減らす。

  1. header#branding {
  2.     color: #333333;
  3.     background-color: #ffffff;
  4.     text-align: left;
  5.     margin-left: auto;
  6.     margin-right: auto;
  7.     width: 960px;
  8.     overflow: hidden;
  9. }
  10. div#content {
  11.     font-size: 100%;
  12.     color: #333333;
  13.     background-color: #ffffff;
  14.     text-align: center;
  15.     margin-left: auto;
  16.     margin-right: auto;
  17.     width: 960px;
  18. }
  19. div#main {
  20.     font-size: 80%;
  21.     color: #333333;
  22.     background-color: #ffffff;
  23.     text-align: left;
  24.     padding-bottom: 20px;
  25.     width: 680px;
  26.     float: left;
  27. }
  28. div#sub {
  29.     font-size: 100%;
  30.     color: #333333;
  31.     background-color: #ffffff;
  32.     text-align: left;
  33.     margin-bottom: 20px;
  34.     width: 278px;
  35.     float: right;
  36. }
  37. footer#copy {
  38.     font-size: 100%;
  39.     color: #333333;
  40.     background-color: #ffffff;
  41.     text-align: center;
  42.     margin-left: auto;
  43.     margin-right: auto;
  44.     width: 960px;
  45.     clear: both;
  46. }
  1. /* サイドバー余白調整 */
  2. div#sub .inner {
  3.     line-height:1.5;
  4.     padding-left: 18px;
  5.     padding-right: 20px;
  6. }
Posted

恒例、「MovableType 4.2 無料テンプレート 2Column HTML5」の簡単な解説です。

ブログ記事の概要

「HTML5のセクショニングをどうするか」が一番悩んだ。

「ブログ記事の概要」全体をarticle要素でマークアップ。＊それぞれの「ブログ記事の概要」は初回の解説のようにol要素でリスト化している。

ブログ記事のタイトルと各メタデータはheader要素。さらにsection要素で区切り、エントリータグ。「続きを読む」をfooter要素でマークアップ。

  1. <article>
  2. <header>
  3. <h2>ブログ記事のタイトル</h2>
  4. <ul>
  5. <li>メタデータ</li>
  6. </ul>
  7. </header>
  8. ブログ記事の本文
  9. <section>
  10. <h3>タグ:</h3>
  11. <ul>
  12. <li>タグ</li>
  13. </ul>
  14. </section>
  15. <footer>
  16. 続きを読む
  17. </footer>
  18. </article>

「ブログ記事」テンプレートは「トラックバック」「コメント」「コメントフォーム」があるのでさらに複雑になる。次回解説の予定。

Posted

今回もMovableType 4.2 無料テンプレート 2Column HTML5の簡単な解説です。

ブログ記事のメタデータについて

各々のデータをリスト項目として取扱い、セパレータに文字を使わずCSSの:before擬似要素で表示。IEでも表示させるためにIE9.jsが必要となる。

投稿時間をtime要素・pubdate属性・datetime属性でマークアップ。datetime属性のフォーマットをMTEntryDate format_name="iso8601"とした。

  1. <ul class="entry-meta">
  2.     <li><time pubdate="pubdate" datetime="<$MTEntryDate format_name="iso8601"$>"><$MTEntryDate format="%x"$></time> <MTIfNonEmpty tag="EntryAuthorDisplayName"><$MTEntryAuthorLink show_email="0"$></MTIfNonEmpty></li>
  3. <MTUnless name="hide_counts" eq="1">
  4.     <li><a class="permalink" href="<$MTEntryPermalink$>" title="Permalink to this entry:<$MTEntryTitle$>">個別ページ</a></li>
  5.     <MTIfCommentsActive><li><a href="<$MTEntryPermalink$>#comments" title="Comments for:<$MTEntryTitle$>"><$MTEntryCommentCount singular="コメント(1)" plural="コメント(#)"$></a></li></MTIfCommentsActive>
  6.     <MTIfPingsActive><li><a href="<$MTEntryPermalink$>#trackbacks" title="Trackback for:<$MTEntryTitle$>"><$MTEntryTrackbackCount singular="トラックバック(1)" plural="トラックバック(#)"$></a></li></MTIfPingsActive>
  7. </MTUnless>
  8. </ul>
Posted

昨日まで連絡が来ず諦めていたのですが...10時15分頃ソフトバンクのショップから電話があり、本日引取りができるということで無事iPhone 4 16GBを受け取ってきました。

iPhone 4を開封

iPhone 4

3Gよりもコンパクト、質感もアップしており、いい感じ。

動作が速い！Wi-Fiが802.11nなのでウェブの読み込み速度も全く違う。

もうiPhone 3Gには戻れない...

Posted

前回の引き続きMovableType 4.2 無料テンプレート 2Column HTML5の簡単な解説です。

今回は・・・

banner_header.mtmlのheaderについて

h1要素にはMTBlogName、副題としてh2要素にMTBlogDescriptionを利用、これらをhgroup要素でグループ化。

ブログの説明「MTBlogDescription」を記述されない方も多いことから、<mt:If tag="BlogDescription">とし、MTBlogDescriptionがある場合のみh2要素を出力。見出しをグループ化するhgroup要素だが1個以上のh1～h6要素があればよいのでh1のみでも問題はない。

  1. <header id="branding">
  2. <hgroup>
  3. <h1><a href="<$MTBlogURL$>" accesskey="1" title="<$MTBlogName encode_html="1"$>"><$MTBlogName encode_html="1"$></a></h1>
  4. <mt:If tag="BlogDescription"><h2><$MTBlogDescription$></h2></mt:If>
  5. </hgroup>
  6. </header>

メインページとブログ記事リスト

メインページとブログ記事リストはol要素でマークアップ。ブログ記事リストという位なのでリストにするのは当然かも知れない。新しい順に並ぶのでul要素ではなくol要素が適当だろう。

  1. <div id="main">
  2. <ol class="semantic-list">
  3. <MTEntries lastn="5">
  4. <li>
  5. <$mt:include module="ブログ記事の概要"$>
  6. </li>
  7. </MTEntries>
  8. </ol>
  9. </div><!-- / main -->

次回に続く（はず）

MovableType 4.2 2Column HTML5の解説

Posted

MovableType 4.2 無料テンプレート 2Column HTML5は、リリースから約1ヶ月経過し少しずつダウンロードして頂いております。

HTML5は初めてという方もいらっしゃるようなので、数回にわたって（簡単に）解説し（ていきたいと思い）ます。

まずは基本形。

  1. <!DOCTYPE html>
  2. <html lang="<$MTBlogLanguage$>">
  3. <head>
  4. <meta charset="<$MTPublishCharset$>">
  5. <!--[if lt IE 9]>
  6. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  7. <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
  8. <![endif]-->
  9. <script src="<$MTLink template="javascript"$>"></script>
  10. <link rel="stylesheet" href="<$MTLink template="Reset_Stylesheet"$>">
  11. <link rel="stylesheet" href="<$MTLink template="styles"$>">
  12. <title><$MTBlogName encode_html="1"$></title>
  13. </head>
  14. <body>
  15. <header>
  16. <hgroup>
  17. <h1><a href="<$MTBlogURL$>" accesskey="1" title="<$MTBlogName encode_html="1"$>"><$MTBlogName encode_html="1"$></a></h1>
  18. <mt:If tag="BlogDescription"><h2><$MTBlogDescription$></h2></mt:If>
  19. </hgroup>
  20. </header>
  21. <div id="content">
  22. <div id="main">
  23. <ol>
  24. <MTEntries lastn="5">
  25. <li>
  26. <$mt:include module="ブログ記事の概要"$>
  27. </li>
  28. </MTEntries>
  29. </ol>
  30. </div><!-- / main -->
  31. <div id="sub">
  32. <div class="inner">
  33. <$MTWidgetSet name="サイドバー"$>
  34. </div>
  35. </div><!-- /sub -->
  36. </div><!-- /content  -->
  37. <footer>
  38. <p><small>Copyright &copy; 2010 yourdomain, All Rights Reserved.</small></p>
  39. </footer>
  40. </body>
  41. </html>

主要なところだけ抜き出していますが、XHTMLから比べると非常にシンプル。

http://html5shiv.googlecode.com/svn/trunk/html5.jsはIEでHTML5の新要素section要素やarticle要素をブロック要素として振るまえるようにし、http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.jsでCSSを少しまともに解釈出来るようにします。IE9に期待を込めて<!--[if lt IE 9]>としました。

header要素とfooter要素でコンテンツ部分との分離を行います。今までaddress要素でマークアップしていたCopyrightはfooter内のsmall要素に変更。
＊HTML5でsmall要素は、見栄えをコントロールするプレゼンテーションモジュールからセマンティックな「細目を表す注釈」へと変更になったので注意が必要です。

次回に続く（はず）

Posted

本日（6月15日）自宅近所のソフトバンクのショップでiPhone 4を予約した。

少し早く（16時40分くらいに）ショップの中を覗いてみたら、お客さんはゼロ。お姉さんに来てみると「まだ誰も来てません」。あぁ、3Gの時と一緒、田舎だとこんな感じ。

めでたくiPhone 4 16GB Blackの予約完了。今までプラン変更しておらず、16GB+「パケットし放題フラット」なので少し安くなるかな。

気になる残債金額は13,440円。一括にするのか分割なのかは引渡しの時に確定させればいいみたいです。

Posted

もともとWindowsでFireworksを使っておりましたのでPhotoshopやIllustratorの出番はかなり少なく、非常に古いバージョンを利用しておりました。
（htmlやCSSはHTML エディタで書いておりましたので、Dreamweaverは体験版を9年くらい前に使ったきりでした...）

昨年購入したMac miniにSEEdit Proをインストールしてhtml5を書いてみた際「これとFireworksがあればWindowsはクロスブラウザチェックだけでいいじゃん！」と思っていた矢先にCS5の発表。

迷いもなくmac版のCreative Suite 4 Web Standard（無償アップグレード付き）を購入。そして日曜（6月6日）にアップグレードのCreative Suite 5 Web Premiumが届きました。

Adobe Creative Suite 5 Web Premium

こんなに盛りだくさんのツールを、どこまで使えるか心配です。

Posted

Tags