mkasumi.com


今日というか昨日のことになってしまいました。
昨日は前作ったレスポンシブのサイトにa-blog cmsのモジュールを追加しました。

覚えたこと

  • サイトのほうの編集ボタンの表示
  • MODULEの追加
  • MODULEを追加してからの編集のしかた
  • MODULEにはidがつけれる

今思えばどれも簡単だった。

サイトの編集ボタンの表示は、CSS,Javascript,admin.htmlをhtmlに追加するだけで、
MODULEの使い方はスニペットをコピペするだけで、
MODULEを追加してからの編集は、管理ページに行ってコンフィグから追加するだけでした。

なにがそんなに難しかったかっていうと、多分、編集ボタンは元からあるもんだと思ってたっていう思い込み。(自分で編集ボタンを足すっていう発想が無かった)
MODULEの追加が難しかったって言うより、MODULEを追加してからの編集が難しかった。
MODULEをhtmlに追加してから、管理ページからコンフィグに行って、文字を打って更新するっていう発想がなかった。
htmlに書くだけじゃなかった、これcmsだった!っていう盲点でした。

一番難しかったのは、あんだけ情報がかかれてるサイトの中で自分が欲しい情報を見つけること。
マニュアルにも書いてありそうだし、リファレンスにも書いてありそう。とかおもってたら
チュートリアルに書いてあった!とか、よくある話。

まとめ

a-blog cmsの場合は本家のサイトが説明書になっているので、根気よくサイトと仲良くなることがコツだと思いました。
明日はフォームと戦います!


Tag:a-blogcms モジュール 

Posted by 森田かすみ at 00:02  Permalink


最近、学校の卒業制作をメインにしているせいで勉強ができず、ブログの更新ができていませんでした…。ちょっと反省して、少し前から勉強しているbootstrapについて書いてしまおうかと思います。

bootstrapとは、twitter bootstrapのことです。
ほかの学生さんにbootstrapのお話をしたところ、意外と知られていないことに気づきました。

twitter bootstrap

CSSのフレームワークで、twitterや、ドットインストールに使われています。

CSSのフレームワークっていうのは、自分でCSSを書かなくても、HTMLとクラスだけ書いていけばなんとなくかっこいいデザインになってくれる便利なもののことです。

私はbootstrapと、a-blogcmsを一緒に使って勉強しているので、結構早くに大体の形ができてきました。そのため、ほんとに、ほぼクラスしか書いていない状態です。bootstrapというか、a-blogcmsの勉強みたいな感じになってるときもあるくらいです。

それでもきっと、bootstrapをやっていって、自分の中でbootstrapやa-blogcms以外のの基本的なことの引き出しが増えていってると思うんです。
bootstrapを勉強しながら、CSSでできることを学んだり、ドロップダウンとかの名称を覚えたり、html5の勉強にもなりました。

私が実際にbootstrapを使って感じたこと

  • グリッドシステムが使われていて、便利
  • あんまりCSS書けなくても大丈夫
  • 簡単にレスポンシブ対応にできる
  • すばやくカッコイイデザインが作れる

■グリッドシステム

新しくグリッドシステムのことも学びました。普段のサイト作りでは使わないので、「そんなものがあるのか」から始まりました。
あんまり詳しくは理解していませんが、とりあえず、幅を指定するときに便利です。

「twitter bootstrap」のつづきを読む


Tag:Bootstrap a-blogcms 

Posted by 森田かすみ at 20:37  Permalink

◆ height

やっと、以前からablogcmsさんのテーマを使って、やっている答え合わせが終わりました。

clearhidden、clearfix、とか、

ベンダープレフィックスとか、

cssでのhoverの仕方とか、

heightを指定しないで作っていく方法とか、

borderの使い方とか、

tableとか、

たくさん学びました!
他の方が作ったサイトを作ってみて、とても勉強になりました。

◆ table

この中で一番苦戦したのはtableでした。
(結局、サイト内ではtableを使っていなくて、borderが使われていたのですが…)
前期にあったウェブデザインの授業では、ドリームウィーバーの機能をつかってテーブルを作ったことがあり、実際にhtmlでは作ったことがなかったからです。(それにtableを作ったのも一度でした)
tableの枠線を消したりできるのを知らなかったので勘違いといえど、とても勉強になりました。
tableに関しては、サイトを探しても、欲しい情報が書かれていないことが多く、
いろんなサイトを探しました。

「答え合わせが終わりました!」のつづきを読む


Tag:a-blogcms 

Posted by 森田かすみ at 20:36  Permalink

少し前に、11月にあった色彩検定の結果がきました。
なんとか、無事に合格できました〜!
いきなり2級を受けるという荒技を実行したのですが、
無事に合格できて安心です。



さて、実は前からa-blog cmsさんのテーマを使わせてもらって、HTMLとCSSを書いていました。
ある程度できてきたので、今日、実際の物と答え合わせをしました!
・・・まあ、間違っていますよね。
そんな中、合っているところがあると嬉しくなるもんですね。

答え合わせをしていて疑問に思った物がありました。
text-align:-webkit-match-parent
なんだこれ、と思って調べても出てこない・・・。
CSSリファレンスのサイトをみてもtext-alignのところにない・・・。
ちょうど話しかけてくれたウェブデザイン学科の先生に聞くことで解決できました。(ほんとにタイミングよく話しかけてくれて助かりました)

-webkit-

match-parent
は別々のようで、

-webkit-は、ベンダープレフィックスというもので、
safariやgooglechromeに使われる物です。

webkit以外にも種類があり、

moz : firefox
o : opera
ms : IE
これらはCSS3を使うときに適用します。
それぞれのブラウザ向けのベンダープレフィックスをつける必要があるのです。

ですが、すでにgooglechromeやfirefoxなどのブラウザでは、ベンダープレフィックス無しでも
動作できるようになっています。
そのため、ベンダープレフィックス無しのものも一緒に書いておくと良いみたいです!

ちなみに、もうひとつのmatch-parentというものは、CSS3の一つでした。
CSS3だったため、いつも使っているCSSのリファレンスサイトにはなく、ドリームウィバーにもなかったみたいです。


ベンダープレフィックスは、ドットインストールなどでよく単語を聞いていたんですが、
実際になるときちんと理解できていなかったことが分かりました。
CSS3も、どんどん覚えていかないといけないですね。
既にあるサイトを作ることで、自分がもっと勉強するべきところが発見できて、ためになりました。


では、これから土曜日に参加予定のWCANのために名刺を作ります!
それでは〜


Tag:a-blogcms 

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

プロフィール

森田かすみ

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

  • はてなブックマーク

カテゴリー