制作者を支える機能

このテーマは、プロの制作者のためのテーマです。作者の実際の経験をもとに、開発者を支える様々な配慮を行っています。とても細かい話ですがご笑覧ください。

モジュールの詳細設定

エントリー一覧などの「モジュール>カスタム情報>詳細設定」では、外観以外に以下の設定が可能です。これにより、セクションごとに正確かつ詳細なカスタマイズができます。

  • 見出しのタグ(デフォルトはh2ですが、h3やpに変更できます)
  • セクションを包括しているdivの追加クラス
  • セクションを包括しているdivの追加属性(id・インラインスタイルを追加できます)

ビルドツール対応

Sass・Gulpに対応しています。カスタマイズがカラーリングや使用フォントの変更のみであれば、Sassファイル内の変数を変更し、CSSを書き出し直すだけで変更できます。

また、以下のフォントすべてのフォント名とウェイトが別変数となっており、ウェブフォントを個別に指定できます。

  • 和文の本文
  • 和文の見出し
  • 英文の見出し
  • メインビジュアルのスライドショー
  • 日付などのフォント

多くの配布テーマは、ヘッダのロゴマークを管理画面からアップロードできますが、このテーマでは意図的に対応していません。これは、本格的なウェブ制作では以下のような状況となっており、結果的にHTML直書きとなるためです。

  • 公開後に差し替えることがまずない
  • レスポンシブイメージが採用されるケースがある
  • ほぼ100%、カスタムフィールドで管理しにくいSVGが採用されている

アイコンフォントを採用していない理由

このテーマには、Font Awesomeなどの便利なアイコンフォントは含まれていません。アイコンはサイトデザインに大きく影響するもので、デザイナーの腕の見せどころです。このため、どのアイコンフォントを採用するか、ゼロから制作するかは、このテーマを利用する皆さんにお任せしています。

帯状デザインへの配慮

ウィンドウ幅全体に背景色が敷かれる「帯状デザイン」は、現在のウェブデザインのトップページのトレンドとなっています。しかし、一般の配布テーマでは初心者のカスタマイズが難しくなるなどの理由から、ページ全体の幅を固定しているケースが多く、これがプロの制作者のカスタマイズを困難にしています。

このテーマでは、トップページの各セクションの幅を制限せず、CSSのみで帯状に背景色を変えることができるよう制作しています。トップページ以外では、ページタイトル・トピックパス・本文の3パートに色分けをすることができます。

a-blog cms独特の仕様を考慮したテーマ設計

a-blog cmsはテーマ内のディレクトリ名・ファイル名がそのままテーマの表示結果に影響します。このテーマでは、子ブログが増えてサイト構造が複雑になっても混乱しないよう、徹底した命名規則を設けています。

「モジュール全体」と「エントリーの繰り返し部分」の分離

同じブログの新着でも、表示する場所によって体裁を変えたいというケースが、実際の制作現場では頻繁に求められます。このテーマではモジュール内の「エントリーを繰り返している部分」をインクルードで別ファイルとしています。

これにより、モジュールテンプレートの構造をわかりやすく、かつ、切り離しやIFブロックによる体裁の変更をしやすくしています。

コメントでの補足

テーマ内のMETAタグの定義と出力に関するテンプレートは、a-blog cmsの「変数」を活用しているため、かなり上級者向けとなっています。編集は基本的にお勧めしませんが、コメントを記載して、役割・処理を解説しています。

Stop the Bokettchの実装 New

WordPressには「検索エンジンがサイトをインデックスできないようにする」という制作者向けの機能があります。しかし、サイト公開時にこのチェックを外し忘れるというミスが多く、有志が注意文を強調する「Stop the Bokettch」というプラグインを公開しています。
同様の機能を持つこのテーマも、検索エンジンを拒否しているときは全ページ冒頭に注意文が表示されます。