a-blog cmsでレスポンシブとスマホ専用サイトを作成 (1/3)
a-blog cmsを使った企業サイトの作り方を紹介する本連載。第1〜6回では、架空の企業「株式会社ウェブプロ」のサイトを作成しました。第7回では、a-blog cmsの機能を使ってサイトをスマートフォンに対応させる方法を紹介します。 acms.cssでレスポンシブWebデザイン対応 レスポンシブWebデザインのためのエントリーユニット設定 スマートフォン専用サイトの作成 1.acms.cssでレスポンシブWebデザイン対応 a-blog cmsでは、テンプレートのCSSを書き換えることでレスポンシブWebデザインに対応できます。a-blog cms Ver.2.0以降から同梱されている「acms.css」を読み込むと、レスポンシブWebデザインに対応したグリッドシステムを手軽に利用できます。 acms.cssとは、a-blog cmsの管理画面で使われているスタイルガイドのCSSファイル
コードを書かずに設置できる「お問い合わせ」フォーム (1/3)
a-blog cmsを使った企業サイトの作り方を紹介する本連載。第5回ではカスタムフィールドを使った製品情報の登録について解説しました。第6回は、a-blog cmsの機能である「動的フォーム」を使って、お問い合わせフォームを制作します。 動的フォームとは 動的フォームの解説 動的フォームの導入 動的フォームの送信先、メールの文面を設定 動的フォームの設置 「フォーム」を「お問い合わせ」ページに表示する 1.動的フォームとは 「動的フォーム」は、a-blog cms上でHTMLフォームを設置する機能です。入力項目の順番に若干の制約があり、デザインの変更はできませんが、入力フォームやラジオボタンなどを組み合わせてフォームを簡単に設置できます。ブログのエントリーを書くような感覚で使えるので、制作者に依頼しなくてもすぐにフォームを作れます。 以下のような項目をでお問い合わせフォームを作成し、「お
製品情報を簡単登録「カスタムフィールド」の使い方 (1/4)
価格、発売日、サイズのカスタムフィールドを記述していきます。エントリーのカスタムフィールドを記述するファイルは用意されていないので、下記のように「admin」フォルダーに「entry」フォルダーを作成し、その中に「field.html」を作成します。 Mac → Macintosh HD/ユーザー/（ユーザー名）/Applications/AMPPS/www/themes/webpro/admin/entry/field.html Windows → C:￥Program Files￥Ampps￥www￥themes¥webpro¥admin¥entry¥field.html 緑文字部分が作成するフォルダーとファイル 注：Windowsの場合、「C:￥Program Files」が「C:¥Program Files（x86）」の場合があります 作成したfield.htmlに、下記のようにカ
モジュールIDとインクルードで効率よくテンプレートを作成 (1/6)
a-blog cmsを使った企業サイトの作り方を紹介する本連載。第3回では、トップページにバナーモジュールで動的コンテンツが表示できるようにしましたが、表示するカテゴリーが絞り込まれていないため、「お知らせ」や「製品一覧」に会社概要や沿革が表示されます。そこで、第4回では、「モジュールID」を使ってカテゴリーを絞り込み、適切に表示されるようにします。「モジュールID」を使ったグローバルナビゲーションの表示や、テンプレートを効率的に使い回しできる「インクルード機能」についても解説します。 動的コンテンツのカテゴリー分類 グローバルナビゲーションの表示 インクルード機能 まとめ 1.動的コンテンツのカテゴリー分類 モジュールにモジュールIDを設定すると、動的コンテンツをカテゴリー別に絞り込んで表示できます。ほかにも、エントリーの表示順や表示件数などを、各モジュールで自由に設定できます。 ヘッド
モジュールの導入と動的コンテンツの表示 (1/7)
第3回では、前回作成したtop.htmlをカスタマイズして、トップページに動的コンテンツを表示します。動的コンテンツとは、エントリー本文やカテゴリーリスト、トピックパス、ナビゲーションなど、CMSで管理しているコンテンツのことで、a-blog cmsでは「モジュール」という機能を使って表示します。モジュールの種類については、a-blog cmsのリファレンスサイトを参照してください。TwitterやInstagramなどのSNSのコンテンツも表示できます。 モジュールで動的コンテンツを表示する 「バナー」の表示 「お知らせ」「製品一覧」を表示する まとめ 1.モジュールで動的コンテンツを表示する サンプルサイト「株式会社ウェブプロ」のトップページに、リンク先を設定した画像を表示する「バナー」、日付のあるニュース記事のタイトルを日付とともに表示する「お知らせ」、製品写真と該当ページのタイトル
チュートリアルで学ぶ企業サイト用テンプレートの作り方 (1/5)
企業サイトの構成と変更手順 今回制作する架空企業「株式会社ウェブプロ」のサイト構成は以下のとおりです。会社概要、製品情報、お知らせ、採用情報、お問い合わせの5つのコンテンツを掲載します。 下記の順番で「Blog2014テーマ（ブログ用）」を修正し、トップページ、一覧ページ、詳細ページの設定をしていきます。 「Blog2014テーマ（ブログ用）」の修正準備 企業サイトに不要なパーツを削除 テンプレートを分割／カテゴリーごとにテンプレートを設定 ページに見出しをつける 1.「Blog2014テーマ」の修正準備 カスタマイズのための下準備から始めましょう。カスタマイズのベースとなる「Blog2014テーマ（ブログ用）」を格納している「blog2014」フォルダーを複製し、「webpro」にフォルダー名を変更します。 第1回の手順どおりにインストールが済んでいれば、「blog2014」フォルダーは
facebookOGP設定 fb:adminsのuserIDが変更に
OGPの設定が終わって、facebookのオブジェクトデバッガーでOGPをチェックすると・・・あれ、エラーが出るぞ。どうしてなんだ？ オブジェクトの値が無効です: プロパティ「fb:admins」に指定された値「123456789012345」はタイプ「fbid」としてパースできないため、URL「http://blog.iwashiblog.com」のオブジェクト(タイプ「article」)は無効です。 「タイプ「fbid」としてパースできないため」などと言われても何のことかさっぱりわかりませんが、要するに「おまえのIDは間違っとるわ！」ということです。 userIDの数字が抜けてたのかと思ってもう一度やり直したのですが、やっぱりエラーが出ます。 どうやら、いつの間にかfb:adminsに記載するuserIDが変更になっていたようです。 fb:adminsのuserID記載位置 さて、fb
「a-blog cms」を使うべき3つの理由 (1/5)
WordPressがCMS1強時代を築きつつある中、名古屋のWeb制作会社「アップルップル」が開発しているCMS「a-blog cms（えーぶろぐ しーえむえす）」が着実に採用実績を伸ばしています。有料なのになぜ売れているのか？ その魅力は？ 実際に企業サイトを作成しながら、a-blog cmsの使い勝手を体験できる連載をお届けします。解説は開発元のアップルップルにお願いしました。（編集部） a-blog cmsはアップルップルが開発・販売している商用CMSです。Web制作会社として培ってきたノウハウを盛り込み、必要な機能を簡単・便利に使うことを目指して、2009年6月にVer. 1.0をリリースしました。2013年12月にはVer. 2.0をリリースし、1400を越えるサイト、350事業者に利用されています（2014年1月現在）。 クライアントに優しい3つの特徴 ユーザーに優しい編集画面
» 覚えておくと便利！CSSのセレクタ一覧 | isee ウェブに関するブログ
CSSの記述は「セレクタ」「プロパティ」「値」の3つを使って記述します。 プロパティと値の書き方はほとんど一定ですが、セレクタに関してはたくさんの種類があり、 これをちゃんと使いこなすことができれば、余分なclassやidを減らす事ができとても便利です。 CSSのセレクタにはいろいろな種類があります。 ・IDセレクタ ・classセレクタ ・ユニーバーサルセレクタ ・疑似クラス ・疑似要素 ・属性セレクタなど様々です。 よく目にするのは「a:hover」という疑似クラスな気がします。 おそらくこの記述が書かれていないスタイルシートはないんではないかと思うくらいにとても良く使われています。 これはa要素にhover(マウスカーソルがaに乗った)した時にどのような装飾にするかということを表しています。 CSSのセレクタはとても多くあり、CSS3から導入された新しいものもあるので、使え
ビルドツールまとめ。Gruntとかgulpとか (フロント寄り) - Qiita
はじめに そろそろ、使っていないと後ろ指をさされそうな雰囲気になってきた、ビルドツール各種ですが、業界(?)の全体像をなんとなく眺めてみたいと思います。動きとしてはRuby界隈が早く、Guardが2010年あたりから、それを参考にする形でGruntが出てくるのが2011年、gulpについてはまだ1年未満という状況ですが、特にJavaScript周りは活況です。 下記、主にGitHubの各種数値を並べています。コミュニティの盛り上がりや成熟度の判断の参考として。 名称 環境 設定ファイル 可読性 GitHub プラグイン Issues 初コミット
.htaccess Generator - Help creating your htaccess file
Password protect file (requires .htpasswd file) More info about .htaccess and .htpasswd Protection
マウントとは - IT用語辞典
概要 マウント（mount）とは、上がる（こと）、上げる、登る（こと）、乗る（こと）、乗っかる、乗せる、増す、取り付ける、備える、搭載する、はめ込む、取り付け具、台などの意味を持つ英単語。 ITの分野では、コンピュータ本体に接続した周辺機器をオペレーティングシステム（OS）などのソフトウェアに認識させ、操作・利用可能な状態にすることをマウントということがある。 特に、ハードディスクやSSD、USBメモリなどのストレージ（外部記憶装置）や、ドライブ装置に挿入した記録メディア（記憶媒体）を読み書き可能な状態にすることを指す場合が多い。 逆に、装置をソフトウェアの管理下から切り離したり、通電を終了するなどして安全に取り外しできる状態にすることは「アンマウント」（unmount）という。 一般の外来語としての用法人間について用いる場合は、喧嘩や格闘技などで相手を転倒させて「馬乗り」体勢（マウントポ
Flexbox Grid
ResponsiveResponsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths. <div class="row"> <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4"> <div class="box">Responsive</div> </div> </div> FluidPercent based widths allow fluid resizing of columns and rows. .col-xs-6 { flex-basis: 50%; }Simple SyntaxAll you need to remember is
jQuery2.1.0にて-webkit-transitionが無効になるバグ
Updated 2014.03.15 / Published 2014.03.15 jQuery2.1.0にはCSS()メソッドで指定した-webkit-transitionのスタイル情報が無効になるバグがあります。このバグはjQuery2.1.1にて改善される予定です。 jQuery2.1.0における-webkit-transitionスタイル無効の再現例 $('#test').css({ '-webkit-transition': '-webkit-transform 1s', 'transition': 'transform 1s' }); 上記のようにCSS()メソッドでChrome, Opera, Safariなどのための-webkit-transitionのスタイル情報が指定されていても、jQuery2.1.0では適用されません。これはjQuery2.1.0にてベンダープレフィ
CSS Image Replacement Museum
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! CSS image replacement is a technique of replacing a text element (usually a header tag like an <h1>) with an image (often a logo). It has its origins in the time before web fonts and SVG. For years, web developers battled against browser inconsistencies to craft image replacement techniques
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sass Color Generator
新着記事
http://saeki.me/%E3%81%8A%E5%8B%89%E5%BC%B7/299/
HTML5 & CSS3 Tools and Tutorials
ユニバーサル アナリティクスにおけるイベントトラッキングの計測方法 | Webコンサルタント.jp | 各種Webコンサル事例とサービスの紹介
