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ファイル
a-blog cmsを使った企業サイトの作り方を紹介する本連載。第5回ではカスタムフィールドを使った製品情報の登録について解説しました。第6回は、a-blog cmsの機能である「動的フォーム」を使って、お問い合わせフォームを制作します。 動的フォームとは 動的フォームの解説 動的フォームの導入 動的フォームの送信先、メールの文面を設定 動的フォームの設置 「フォーム」を「お問い合わせ」ページに表示する 1.動的フォームとは 「動的フォーム」は、a-blog cms上でHTMLフォームを設置する機能です。入力項目の順番に若干の制約があり、デザインの変更はできませんが、入力フォームやラジオボタンなどを組み合わせてフォームを簡単に設置できます。ブログのエントリーを書くような感覚で使えるので、制作者に依頼しなくてもすぐにフォームを作れます。 以下のような項目をでお問い合わせフォームを作成し、「お
価格、発売日、サイズのカスタムフィールドを記述していきます。エントリーのカスタムフィールドを記述するファイルは用意されていないので、下記のように「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に、下記のようにカ
a-blog cmsを使った企業サイトの作り方を紹介する本連載。第3回では、トップページにバナーモジュールで動的コンテンツが表示できるようにしましたが、表示するカテゴリーが絞り込まれていないため、「お知らせ」や「製品一覧」に会社概要や沿革が表示されます。そこで、第4回では、「モジュールID」を使ってカテゴリーを絞り込み、適切に表示されるようにします。「モジュールID」を使ったグローバルナビゲーションの表示や、テンプレートを効率的に使い回しできる「インクルード機能」についても解説します。 動的コンテンツのカテゴリー分類 グローバルナビゲーションの表示 インクルード機能 まとめ 1.動的コンテンツのカテゴリー分類 モジュールにモジュールIDを設定すると、動的コンテンツをカテゴリー別に絞り込んで表示できます。ほかにも、エントリーの表示順や表示件数などを、各モジュールで自由に設定できます。 ヘッド
第3回では、前回作成したtop.htmlをカスタマイズして、トップページに動的コンテンツを表示します。動的コンテンツとは、エントリー本文やカテゴリーリスト、トピックパス、ナビゲーションなど、CMSで管理しているコンテンツのことで、a-blog cmsでは「モジュール」という機能を使って表示します。モジュールの種類については、a-blog cmsのリファレンスサイトを参照してください。TwitterやInstagramなどのSNSのコンテンツも表示できます。 モジュールで動的コンテンツを表示する 「バナー」の表示 「お知らせ」「製品一覧」を表示する まとめ 1.モジュールで動的コンテンツを表示する サンプルサイト「株式会社ウェブプロ」のトップページに、リンク先を設定した画像を表示する「バナー」、日付のあるニュース記事のタイトルを日付とともに表示する「お知らせ」、製品写真と該当ページのタイトル
企業サイトの構成と変更手順 今回制作する架空企業「株式会社ウェブプロ」のサイト構成は以下のとおりです。会社概要、製品情報、お知らせ、採用情報、お問い合わせの5つのコンテンツを掲載します。 下記の順番で「Blog2014テーマ（ブログ用）」を修正し、トップページ、一覧ページ、詳細ページの設定をしていきます。 「Blog2014テーマ（ブログ用）」の修正準備 企業サイトに不要なパーツを削除 テンプレートを分割／カテゴリーごとにテンプレートを設定 ページに見出しをつける 1.「Blog2014テーマ」の修正準備 カスタマイズのための下準備から始めましょう。カスタマイズのベースとなる「Blog2014テーマ（ブログ用）」を格納している「blog2014」フォルダーを複製し、「webpro」にフォルダー名を変更します。 第1回の手順どおりにインストールが済んでいれば、「blog2014」フォルダーは
OGPの設定が終わって、facebookのオブジェクトデバッガーでOGPをチェックすると・・・あれ、エラーが出るぞ。どうしてなんだ？ オブジェクトの値が無効です: プロパティ「fb:admins」に指定された値「123456789012345」はタイプ「fbid」としてパースできないため、URL「http://blog.iwashiblog.com」のオブジェクト(タイプ「article」)は無効です。 「タイプ「fbid」としてパースできないため」などと言われても何のことかさっぱりわかりませんが、要するに「おまえのIDは間違っとるわ！」ということです。 userIDの数字が抜けてたのかと思ってもう一度やり直したのですが、やっぱりエラーが出ます。 どうやら、いつの間にかfb:adminsに記載するuserIDが変更になっていたようです。 fb:adminsのuserID記載位置 さて、fb
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の記述は「セレクタ」「プロパティ」「値」の3つを使って記述します。 プロパティと値の書き方はほとんど一定ですが、セレクタに関してはたくさんの種類があり、 これをちゃんと使いこなすことができれば、余分なclassやidを減らす事ができとても便利です。 CSSのセレクタにはいろいろな種類があります。 ・IDセレクタ ・classセレクタ ・ユニーバーサルセレクタ ・疑似クラス ・疑似要素 ・属性セレクタなど様々です。 よく目にするのは「a:hover」という疑似クラスな気がします。 おそらくこの記述が書かれていないスタイルシートはないんではないかと思うくらいにとても良く使われています。 これはa要素にhover(マウスカーソルがaに乗った)した時にどのような装飾にするかということを表しています。 CSSのセレクタはとても多くあり、CSS3から導入された新しいものもあるので、使え
Password protect file (requires .htpasswd file) More info about .htaccess and .htpasswd Protection
概要 マウント（mount）とは、上がる（こと）、上げる、登る（こと）、乗る（こと）、乗っかる、乗せる、増す、取り付ける、備える、搭載する、はめ込む、取り付け具、台などの意味を持つ英単語。 ITの分野では、コンピュータ本体に接続した周辺機器をオペレーティングシステム（OS）などのソフトウェアに認識させ、操作・利用可能な状態にすることをマウントということがある。 特に、ハードディスクやSSD、USBメモリなどのストレージ（外部記憶装置）や、ドライブ装置に挿入した記録メディア（記憶媒体）を読み書き可能な状態にすることを指す場合が多い。 逆に、装置をソフトウェアの管理下から切り離したり、通電を終了するなどして安全に取り外しできる状態にすることは「アンマウント」（unmount）という。 一般の外来語としての用法 人間について用いる場合は、喧嘩や格闘技などで相手を転倒させて「馬乗り」体勢（マウント
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
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にてベンダープレフィ
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. 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 r
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
