a-blog cms用のVicunaのテーマを公開しました

Vicunaというのは、ソースコードはXHTML1.0 StrictのDTDに準拠して書かれており、無駄なく表示も軽い作りになっています。また、XHTMLとCSSの両方でカスタマイズを考えた構成になっています。

現在、以下のような9つのブログやCMSで使われているテンプレートファイルで、今回10個目の対応という事で、a-blog cms 用をアップルップルが用意しました。

カスタマイズには、bodyのところのidを修正するだけで、いろいろなレイアウトに変更する事ができるように作られおり、今回のa-blog cmsでは、ブログのカスタムフィールドでブラウザ上でレイアウトを変更できるようにしてみました。

Vicunaのレイアウト変更のページをご覧頂くと、いろいろなレイアウトが用意されているのが確認できます。CSSファイルも MTテーマ vicuna - スキンにある4つについては読み込むCSSファイルとして設定する事で簡単に切り替える事ができます。

a-blog cms.Vicuna | a-blog cms

style-vega / style-mono / style-galaxy / style-flat 以外にも、スキンがあるようなので、そちらについてもテストしてみようと思っています。

管理ページでの設定

lp@simple2016 2.7対応版を用意しました

2016年末に「ランディングページ用のテーマ lp@simple2016 を作りました」というエントリーを書きましたが、a-blog cms がバージョンアップしたことでインストールが簡単になったので再度ご紹介しておきます。どんなものかを紹介 1つのエントリーをランディングページにすることを可能にするテーマです。サブカラムを消したり、グローバルナビを消したりとかも可能で、simple2016 で表示しているように見えなくなるくらいレイアウトを変更することができます。エントリーのカスタムフィールドエントリーのカスタムフィールドで以下のような指定が可能です。パララックスユニット jquery.imageScroll.js を同梱しており、普通に画像を貼るように利用が可能です。文字をのせることもできますが、あまりいい感じには出来てないです。改良した人がいたら私にください。アイコンユニット Font Awesome のアイコンを選択できるようにしています。すべてのアイコンを選択できるようにしていませんので Class を書く事で指定も可能です。丸い画像ユニット（画像ユニットの拡張）長方形の画像もトリミングして丸い画像を表示ができるようにしているだけのユニットですが、これも便利かと思ってます。こんな感じの表示に simple2016 には見えないページになります。テーマ全体ということでもなく、特定のエントリー単体について指示できるように作られているので便利に使えるんじゃないでしょうか。インストール simple2016 を継承したテーマとなっています。子ブログ用ということでもないので、新規にインストールしたところにインポートして、お試しください。 private/import/lp@simple2016_blog-import.zip については、private ディレクトリに import ディレクトリを作成し、 zip ファイルのままファイルをアップロードしてください。また、themes/lp@simple2016 ディレクトリーについては themes ディレクトリにアップロードしてください。 2.7.x では管理ページ＞ブログに、エクスポート・インポートというタブが増えています。ここから「カテゴリー・エントリー・タグ・モジュールID・コンフィグ・レイアウト・ルール・ダッシュボード・カスタムフィールド」をインポートが可能です。トップページのスライダーのリンク先に lp201609.html にリンクしています。うまくリンクで移動できない場合には、管理ページのエントリーから探してみてください。

2017年 8月 1日

ランディングページ用のテーマ lp@simple2016 を作りました

a-blog cms Advent Calendar 2016 の1日目が始まりました。このところ a-blog cms のことはココに書かないでいましたが、Advent Calendar だしね。自分のところに書いておきます。「ブログ型」か「ページ型」の2つに分けることになった場合、a-blog cms って名前だし「ブログ型」ってことになる。そんなブログ型は、一般的にはレイアウトの自由度が低く、同じようなページを量産するのが得意なのかもしれない。でも、「テンプレートをちょっと書いてやるだけで、自由度をアップすることができる！」ってことを勉強会で言いたいばっかりに、特製テーマ「lp@simple2016」を9月に一部の人たちにのみ公開していました。 10数人しか知らないテーマで終わらしてしまうのももったいないし、Advent Calendar 2016 で公開したものですので、使い方やカスタマイズについては公式サポートはありません。よろしくお願いします。どんなものかを紹介 1つのエントリーをランディングページにすることを可能にするテーマです。サブカラムを消したり、グローバルナビを消したりとかも可能で、simple2016 で表示しているように見えなくなるくらいレイアウトを変更することができます。エントリーのカスタムフィールドエントリーのカスタムフィールドで以下のような指定が可能です。パララックスユニット jquery.imageScroll.js を同梱しており、普通に画像を貼るように利用が可能です。文字をのせることもできますが、あまりいい感じには出来てないです。改良した人がいたら私にください。アイコンユニット Font Awesome のアイコンを選択できるようにしています。すべてのアイコンを選択できるようにしていませんので Class を書く事で指定も可能です。丸い画像ユニット（画像ユニットの拡張）長方形の画像もトリミングして丸い画像を表示ができるようにしているだけのユニットですが、これも便利かと思ってます。こんな感じの表示に simple2016 には見えないページになります。テーマ全体ということでもなく、特定のエントリー単体について指示できるように作られているので便利に使えるんじゃないでしょうか。インストール simple2016 を継承したテーマとなっていますが、いろいろなコンフィグの設定が有効になっていないと何もできないかと思いますのでブログのインポート機能を利用して設定も自動で行います。themes ディレクトリ内に lp@simple2016 をアップロードし、bin は setup ディレクトリの中の bin にアップロードしてください。そして、ブラウザでアクセスすると「メンテナンス画面」が表示され、管理者IDでログインを要求されます。ログインすると上記の画面になりますので、ブログ毎のインポート画面に移動してください。 2つのラジオボタンにチェックと、最後のチェックボックスにチェックをつけて実行すると、インポート作業が完了します。最後に、setup ディレクトリを削除すれば完了です。トップページのスライダーのリンク先に lp201609.html にリンクしています。うまくリンクで移動できない場合には、管理ページのエントリーから探してみてください。 a-blog cms Advent Calendar 2016 なんとか今年も25日分がアイコンで埋まってくれています。明日は、森田さん ( http://mkasumi.com/ ) になります。このブログ a-blog cms で AMP対応できてるんですよねー。いいなぁー。 a-blog cms Advent Calendar 2016 a-blog cms Advent Calendar 2015 a-blog cms Advent Calendar 2014 a-blog cms Advent Calendar 2013

2016年 12月 1日

a-blog cms 2.5 で3つのテーマが新しくなりました

毎年新しいバージョンのテーマを用意しています。2015年っぽいってどんなだ？って悩みつつ、2015年版の site2015 , blog2015 を用意しています。さらに今回は2015年シリーズで bootsrarp2015 というテーマも新しく追加。 site2015 site2014 から site2015 で一番大きな変化はグローバルナビゲーション部分ですね。メインのスライダーについても bxslider から slick に変更されています。あと、ログインするとわかるのですが、TITLEタグがどう設定されているかとか、description がどう書かれているのかを確認できる管理用の表示が出るようになっていたりもしています。画像とかを用意するだけで、それっぽくサイトを1つ立ち上げる事が可能です。 bootstrap2015 これまでは bootstarp のサンプルサイトを再現しているテーマが同梱されていましたが、今回は bootstrap を利用した縦長のスクロールしてみるようなサイトが簡単にできている感じのものを用意しています。 blog2015 2014年版はエントリーが枠に囲まれているデザインでしたが、2015年版は白ベースな感じに変更されています。エントリーリストも写真付きのリストになりました。これからのサイト制作はモジュール単位で site2015 と bootstrap2015 では、layout.html というファイルが用意されており、2.5 の新しいレイアウト機能を体験できるようになっています。自由にレイアウトのグリッドを設置し、そこにモジュールを配置してページを作成していく事ができます。この機能をどのように、制作者の皆さんが活用されるのかが楽しみなところだし、弊社も見本になるような事例を作らないといけない！と思っています。デモサイトで体験してみる

2015年 4月 29日

site2014のテーマをマルチブログ化する際に大事なのはテーマの継承とモジュールIDのグローバル化

site2014 では、1つのブログと複数のカテゴリーでサイトを作っていますが、a-blog cms でのサイト制作を学ぶ際には、マルチブログとテーマの継承は必須になる知識になります。今回は、その方法を解説したいと思います。何のためにするのか？子ブログ化する事で、そこにユーザーを作り権限を分ける事ができるようになります。例えば、お知らせ(news)のみ管理ができるユーザーを作りたいという事であれば、この子ブログにユーザーを作る事により、このお知らせ(news)のみが管理が可能になります。テンプレートの活用についても、カテゴリーと子ブログで違ってきます。カテゴリーの際には一覧(index.html)と詳細(entry.html)の2つのテンプレートを使う事になりますが、子ブログとして運用する際には、子ブログのトップページ(top.html)も活用できるようになります。一覧ページとトップページを分ける事ができるようになる事で、コンテンツの表現の幅が増える事になります。カテゴリーをブログに変更するカテゴリーで利用されているカテゴリーコードで、子ブログを作成する事はできません。ですので、この段階では news を news_c と名前を変更します。その後、ブログの管理ページからコードネームに news を作ります。今回は、お知らせのみを子ブログにしますが、必要に応じて他のカテゴリーも子ブログ化する作業を行ってみてください。テーマを設定するこの段階で http://localhost/news/ にアクセスすると、blog2014 のテーマが設定されているハズです。ここに新しいテーマを設定します。メインのテーマが /themes/site2014 を利用していますので、お知らせ(news)のテーマは news@site2014 というテーマ名にします。 /themes/news@site2014 という空のフォルダを用意してください。その後、管理ページのコンフィグ＞テーマ設定で news@site2014 を選択して保存してください。テーマは news@site2014 で設定されていますが、まだまだ正常に表示させる事もできていない状態です。表示中のテンプレートは /themes/site2014/top.html という表示になっています。 news@site2014 のフォルダ内は空ですので、親テーマ側の site2014 のファイルが利用されます。モジュールID のグローバル化モジュールID については、基本は設定されているブログの中でのみ利用ができるようになっていますが、グローバル化する事で、下の階層のブログでも利用する事ができるようになります。まずは、以下の2つの Navigation モジュールのグローバル化の設定をしてみてください。 headNavi (Navigation) globalNavi (Navigation) これでナビゲーションが表示できるようになります。サイトタイトルやフッター部分が表示できていないところを表示できるようにする事を次に対応する必要があります。 /themes/site2014/include/header.html と /themes/site2014/include/footer.html の Blog_Field については、モジュールID化されていません。そこで新しくモジュールID化して id="globalBlogField" とモジュールIDの設定を追加します。この際に、モジュール IDの条件に bid=1 を指定してください。これで、ヘッダー・フッターと共通化ができるようになりました。テンプレートを切り替え今回は top.html を利用する事なく index.html とします。テーマフォルダ内に template.yaml というファイルを用意する事で、管理ページ上に設定する事なくテーマを選択するだけで各種テンプレートファイルを指定できますが、今回はこれを利用しないのでチェックを外します。 /themes/site2014/news/index.html と /themes/site2014/news/entry.html を news@site2014 にコピーします。記事の移行エントリー管理を利用して記事をまとめて子ブログ側にデータを移行します。お知らせのカテゴリーで検索し、移行すべき記事にチェックをつけブログを変更します。 http://localhost/news/ で確認してみると以下のような表示になります。残り修正しないといけない点が3点見つかりました。グローバルメニューのリンクが、お知らせの時に正しいリンクになっていない。ピックアップリストが関係無いものが表示されている。お知らせの時にトピックパスに HOME が出てこない。グローバルメニューのリンクを修正 %{BASE_URL} というグローバル変数が指定してある事で、子ブログで利用する際にURLがおかしくなっています。 %{HOME_URL} に変更します。ピックアップリストを修正ナビゲーション部分を表示させる時と同様に、モジュールIDのグローバル化を行います。ここでは、ブログID(bid)の設定と、階層の設定を変更し、下層のブログも含めると指定する事で、お知らせの子ブログのエントリーにチェックがあった際にも表示されるように指示しておきます。トピックパスを修正 topicPath のモジュールIDもグローバル化し、条件設定で階層の設定を確認してください。「下階層のブログも含める」「下階層のカテゴリーも含める」と設定しておかないと、トピックパスの階層構造を表示できませんので注意して下さい。階層の数の欄を空に設定してください。階層の起点については、ちょっと何が設定できているのか分からなかった。今後、もう少し調査してみます。トップページのお知らせコンテンツを表示当初はカテゴリーがお知らせ(cid:5)と指定されていたところを、ブログをお知らせ(bid:2)に変更します。最後にここまでやって最初のカタチと一緒ですね。 a-blog cms ではカテゴリーやサブカテゴリーのようなカタチと同様にブログを階層化する事が可能です。 http://localhost/news/sample/ という孫ブログがあった時には、ブログコードには news/sample という指定をする必要があります。news/ を書くのを忘れて指定してしまう人も多いかと思いますので注意が必要です。他のカテゴリーについても、同様にブログ化していく事もできるかと思います。どこをブログにして、どこをカテゴリーのままでいいのかは、CMSの設計次第です。タグについては、ブログを跨いだ検索ができない仕様になっていますので、タグを利用する際には注意が必要かもしれません。近いうちに site2015 がリリースされ、a-blog cms でのサイト制作に変化がある可能性もあります。まだ、どうなるか決まっていないところですが楽しみですね。今年もよろしくお願いします！

2015年 1月 3日

WQHD対応のブログテーマ vgrid@blog2014

a-blog cms Training Camp 2014 Autumn の際に欲しいという話がありましたので、私の個人のブログで非公式なものとして公開します。特徴としては、WQHD 2560px までのウィンドウ幅に対応し、Entry_Body を横に3つまで jquery.vgrid.js で並べられるように blog2014 を拡張しています。エントリーの続きを読む部分・追加でエントリーを読み込む部分は Ajax で読み込む事ができる Post_include 機能を利用しています。個別ページに遷移しませんので、PV数が減る事になりますので Google Analytics のバーチャルページビュー機能を利用するためのタグも書かれています。ダウンロードこのテーマの使い方については、サポートする事はできませんが、最低限の設定は以下に書いておきました。参考にしてください。（ダウンロード回数）ダウンロードモジュールIDの設定テンプレート上、いくつかモジュールIDが設定されていますが、最低限1つだけ設定してないと正常に動作しませんので必ず設定してください。 ogpSummary Entry_Summary モジュールで ogpSummary という設定を作ってください。OGP の設定のために必要です。引数の設定のところでエントリーIDのチェックを付けてください。これ大事です。 adminLink 管理ページのダッシュボードに Google アナリティクス等のリンクを用意しておくためのモジュールIDの設定です。詳しくは「a-blog cms 2.xのダッシュボード内に管理者用リンク集を設置する」をご覧ください。ブログの設定ブログの管理ページのカスタム情報に各種設定があります。こちらも設定してください。ユーザーの設定登録したユーザーのカスタム設定にプロフィール情報を登録できるような設定があります。テーマの継承についてこのテーマでは、blog2014 を継承して作られていますので、blog2014 が /themes/ ディレクトリに存在しないと正常に動作しません。 a-blog cms では、vgird@blog2014 のようにアットマーク＋テーマ名を後ろにつける事で、そのテーマフォルダ内に存在しない時には、アットマーク以下のテーマの中のファイルを利用する事ができるようになっています。そのため子テーマや、孫テーマのように関連するテーマを簡単に作る事ができ、違う部分だけのファイルで管理が簡単にできるようになっています。テーマの継承 | テーマ | ドキュメント | a-blog cms 制作者向け情報

2014年 12月 4日

blog2014 のテーマをさらに改造し blog2560 をつくる

少し前に 2560px 対応にしたのですが、もう少し改良した点をご紹介しておきます。ちなみに、皆さんのブラウザには、どんな感じに表示されていますか？ディスプレイの解像度が高いと、上記のような横に3つのエントリーが並ぶようなレイアウトになるようになっています。エントリーの続きを読むを Ajax 読み込みする Ajax読み込みが簡単にできる a-blog cms では、Post_include という名前で呼ばれる機能として用意されています。これを使う事で、CMS のテンプレートを簡単に書くだけで画面の遷移無しに後半のエントリーが表示されます。 Entry_Body の中にある「続きを読む」のリンクのあたりに以下のフォームを追加します。「{continueName}」の続きを読むあとは、include/continue.html のファイルを準備します。この Entry_Continue のモジュールはコンフィグの一覧にも載ってないですが、今回のように続き部分を表示させるために利用します。 include/continue.html Post_Include 後に JavaScript を起動する最近、追加されたのか、私が知らなかっただけなのか、現状のバージョンでは FORMタグに onreset という属性を設定します。こうする事で vgrid の JavaScript が動くようになり、長くなったエントリー分で下にあったコンテンツが移動していきます。 Google アナリティクスにも通知するページの遷移がなく各エントリーが読まれるようになると、PVが減っていくというか、どこが読まれているのか分からない状態になります。その部分を解決するために、Google アナリティクスのバーチャルページビューという機能を使って Post include でコンテンツが呼び出された時には、そのページを見た事にする設定をします。今は新旧の書き方がありますが、新しい方のユニバーサルアナリティクスの設定で紹介しておきます。submit ボタンを以下のように onclick を追記します。波括弧 { } がテンプレート上に書いてあると、変数として扱われてしまうために、カッコと、その間に書かれた文字が処理されて消えてしまいます。そのために波括弧の前にはバックスラッシュをつけてエスケープする必要があります。オマケ： Entry_Body も Ajax 読み込みで増やすせっかくなので、古い記事を読み込む部分も Post include を利用してみるようにします。ここでのポイントは、Entry_Body の中にある forwardLink のブロック中の {forwardPage} を使って何ページ目なのかをフォームに用意するという部分かと思います。これで、トップページからアクセスした人は、なんとなく興味のあるページの続きを読むってしてアクセスできるようになりました。これで PV 増えるかと思ったのですが、現状ではあまり効果は無いようです。今、設定されている 2560px の 27インチディスプレイでフルスクリーンにした時まで考慮された blog2560 って名前のテーマにしようと思いますが、どうでしょうか？そもそも、どんな表示になってるか分からないかもしれませんね。（Chromeで表示の縮小ってすると雰囲気は分かるかもしれません。）

2014年 7月 18日

kazumich.log

この記事は公開日より年以上経過しています

Recommendation