mkasumi.com



Ver.2.6.0から新しくテンプレートの変数化という機能が追加されました。今回の記事はテンプレートの変数化の機能の1つ、「setRendered」についてです。 もしテンプレートの変数化をまだご存知ない方は公式サイトのドキュメントをご覧ください。(※この記事ではsetRenderedを使うメリットをご紹介していますが、使い方については説明していません。使い方を知りたい場合は公式ドキュメントをご覧ください)

テンプレートの変数化の機能の話を他の製作者の方にすると、setTemplateは大体理解してもらえるのですが、なかなかsetRenderedの使いどころがぱっと思いつくことが難しいようで、私もはじめて機能ができたとき、どういったときにsetRenderedを使えばいいのかわかりませんでした。

ですが、setTemplateがテンプレートを管理する機能なら、setRenderedは今まで出来なかったことを可能にしてくれる機能です。今回の記事のタイトルにも書いてありますが、変数をブロックの外でも使えるようになります。setRenderedは、私のようなノンプログラマーが歯がゆい思いをしたときにも使えるので、今は便利な機能だと思っています。今回はそんなsetRenderedの便利な使い方をお伝えします。

SetRenderedを使うと具体的にできること

具体的に言うと、例えば、Entry_Summaryのモジュールのentry:loop内で使えない変数をentry:loop内でも使えるようになります。

SetRenderedの使いどころ

もし、エントリーサマリーモジュールで、各エントリーのリンク先を一覧ページにしたいとき、きっとこのように書くことが理想的だと思います。

各エントリーのリンク先を一覧ページにしたいときの理想の書き方

<!-- BEGIN_MODULE Entry_Summary -->
  <ul>
    <!-- BEGIN entry:loop -->
    <li><a href="{indexUrl}">{title}</a></li>
    <!-- END entry:loop -->
  </ul>
<!-- END_MODULE Entry_Summary -->

「変数をブロックの外でも使えるようにできる a-blog cms のsetRenderedの使い方」のつづきを読む


Tag:a-blogcms 

Posted by 森田かすみ at 13:30  Permalink

Webアクセシビリティに対応しているサイトを制作する機会があったので、最近Webアクセシビリティについて勉強しています。今回の記事はWebアクセシビリティビギナーな私が、実際に対応してみてWebアクセシビリティについて改めて知ったことや感じたことを社内の人に共有したくて、先日行われた公開アップルップル社内勉強会用にまとめたものです。

Webアクセシビリティ対応への印象

正直、Webアクセシビリティ対応は周りの人たちが抵抗感を感じているようなので、すごく怖いイメージがありました。実際に JISの規格表を読んでみると、私が普段意識していなかったことも書かれていましたが、普段から行っているような対応方法も記述されていました。一般的に怖がられているものは、「時間依存メディアのガイドライン」であったり、コントラスト比であったり、Javascriptが関わってくる部分は対応に時間がかかるのかなという印象を受けました。

実際にJISの規格表を読んでみて、私自身納得できるような対応が紹介されていることもあり、どうマークアップするとベターまたはベストプラクティスなのか判断するヒントをもらえたような気がしています。

「Webアクセシビリティについて勉強してみて知ったことや感じたこと」のつづきを読む


Tag:HTML アクセシビリティ CSS 

Posted by 森田かすみ at 14:53  Permalink

先日、2月27日(土)に行われた、CMSMix Sapporo 〜Web制作の幅が広がる!プロジェクトの傾向から考える、2つ目・3つ目のCMS選び〜 という5つのCMSのセッションが聞ける勉強会で、a-blog cms のセッションのスピーカーとして登壇しました。


(写真)

a-blog cms セッションの風景


撮影:キタゴエスタッフ

写真は、札幌のITメディアキタゴエさんに撮影していただいたものです。

「CMSMix Sapporo でa-blog cmsセッションのスピーカーとして登壇しました」のつづきを読む


Tag:CMS セミナー 

Posted by 森田かすみ at 19:57  Permalink

デザイナーさんから、2カラムの要素が3つあったとき、最後の3つめは1カラムにしたいという要望があり、思いついた実装方法です。あまり更新しないコンテンツでしたが、要素が増えたときにCSSを書き直しが発生するのが嫌で、この書き方にたどり着きました。

HTML

<ul>
  <li>111</li>
  <li>222</li>
  <li>333</li>
</ul>

CSS

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  float: left;
  width: 50%;
  padding: 20px;
  border: 1px solid #FFF;
  background: skyblue;
  box-sizing: border-box;
}
li:nth-child(2n+1):last-child {
  width: 100%;
  background: tomato;
}

デモ(Codepen)

See the Pen Selecting last-child of odd item by using CSS Selector by Kasumi Morita (@mkasumi) on CodePen.

要素が5つ、7つになっても適用されます。

「CSSセレクタで最後の要素が奇数だったときを指定する」のつづきを読む


Tag:CSS 

Posted by 森田かすみ at 13:13  Permalink

これは、 a-blog cms Advent Calendar 2015 の1日目の記事です。

最近、CMSプロトタイピングの手法を使ってで案件を進めることが多くなってきています。そのCMSプロトタイピングを実際やってみて、コーダー(実装側)の作業がどう変わったのかご紹介したいと思います。

CMSプロトタイピングとは

CMSプロトタイピングとは、先にCMSを実装し、コンテンツを流し込み、コンテンツ量を見ながら、最適なデザインや提案をしていく考え方のことです。例えば、「思っていたよりコンテンツ量が少なくてこのデザインは使えないので修正してください」なんてことを少なくすることができます。

「コーダー目線で考えるa-blog cmsで行うCMSプロトタイピングについて」のつづきを読む


Tag:a-blogcms CMS 

Posted by 森田かすみ at 21:25  Permalink

プロフィール

森田かすみ

名古屋のWeb制作会社でマークアップエンジニアとして働いています。マークアップ勉強会名古屋という勉強会の主催もやっています。

  • はてなブックマーク

カテゴリー