マニュアル

テーマ「Material Blog」の特長と使い方

記事のサムネイル画像をきれいに見せるテーマ「Material Blog」

テーマ「Material Blog」は、直感的な操作性を重視したテーマとなっており、ブログやメディアのサムネイル画像を大きく、きれいにみせることができます。また、Googleの「Material Design Lite」をベースとしており、実装が難しいアニメーションも、Google側で公開されているコンポーネントを使うことで実現しやすいところも特長です。

Material Blog

■特長

  • ウェブページや、記事のカテゴリを作成すると、自動的にメニューに追加されるため、テンプレートを編集する必要がありません。
  • 記事を作成すると自動的に月別アーカイブに追加され、記事を月別に表示させることができます。
  • 記事の中で1番最初にアップした画像がサムネイル画像として自動的に表示されます。もちろんカスタムフィールドを使うことで、サムネイル用の画像を指定することも可能です。

テーマ「Material Blog」の使い方

■記事のサムネイル画像について

Material_Blog.jpg
記事のサムネイル画像は記事内に最初にアップロードした画像が自動的に表示されます。もしも任意に指定したい場合は、カスタムフィールドで実現する方法があります。詳細は以下の記事でご紹介しています。

記事内に1つも画像が含まれていない場合は、テーマの中にデフォルトで設定されている画像が表示されます。この画像を独自のものに変更する場合は[デザイン] - [ファイルマネージャ] ページの「images」ディレクトリ内に入っている

  • common_banner.jpg」(個別ページで利用)
  • common_banner_s.jpg」(一覧ページで利用)

を差し替える必要があります。上記2つと同じ名前で画像をアップロードすると上書きされるため、テンプレートをさわらずに画像を差し替えることができます。

■imageフォルダ内の画像を置き換える

imagesフォルダ内にはサンプルの画像が挿入されていますので、必要に応じてそれぞれオリジナルのものに置き換えてください。サムネイル画像と同様に、サンプル画像と同じ名前で画像をアップロードすると上書きされるため、テンプレートをさわらずに画像を差し替えることができます。

  • author.jpg・・・投稿者のプロフィール画像がない場合にかわりに表示される
  • apple-touch-icon-precomposed.png・・・iOS端末でホーム画面に登録されるときのアイコン画像
  • chrome-touch-icon-192x192.png・・・Android端末でホーム画面に登録されるときのアイコン画像
  • ms-touch-icon-144x144-precomposed.png・・・Windows8のタイル表示で利用されるアイコン画像
  • favicon.ico・・・ブックマーク時やブラウザのタブに表示されるファビコン画像
  • bg.jpg・・・全体の背景画像
  • ogimage.png・・・facebookなどでシェアされるときの共通のogimage

■フッターのソーシャルメディアへのリンクを変更する。

フッターのソーシャルメディアへのリンクは、テンプレート・モジュール「config」で変更することができます。

sns.jpg

テンプレートやスタイルをカスタマイズをするとき場合は、Material Design Liteの公式サイトの以下のページを参考にしてみてください。

また、IE9以下に対応する場合にはソースを追加する必要があるので以下の情報をご覧ください。

■configモジュールで色やソーシャルボタンをコントロールする

デザイン>テンプレート>テンプレート・モジュールのconfigモジュールでは、以下の変更が可能です。

  • 全ページ共通 meta keywords
    全ページのhead部分のmeta情報として表示される共通のキーワードを指定します。
  • 1ページの表示件数
    記事一覧ページなどで1ページに何件ずつ表示するかを指定します。
  • ソーシャルサービスへのリンク
    Facebook、Twitter、Google+のページがあれば入力します。なければ削除するとボタン自体が非表示になります。
  • ソーシャルシェアボタンの設定
    Facebook の AppID やツイートに含める Twitter のアカウント情報の設定や、各種ソーシャルボタンを表示するかを設置可能です。

Movable Type.net は無料トライアルが可能です。
Web制作者の方で、デモや評価利用をご希望の場合は、制作者向け評価ライセンスをご利用ください。

無料トライアル 資料ダウンロード 制作者向け評価ライセンス