サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
大阪万博
onside.com
home デザイナーズブログ web デザイン WordPress に Gutenbergがやってくるヤァ!ヤァ!ヤァ! – ACF & カスタム投稿タイプ & テキストエディターにHTML… WordPress 4.9.8がリリースされて、いよいよ Gutenberg の足音が聞こえてくる季節になりました。 Gutenberg という名の通り、WordPress においては大きな変革であることは間違いないと思う。 今までのエディターでは実現が難しかった表現が、それほどリテラシーのないユーザーでも実現できる可能性がある。 もちろん今までのエディターを使い慣れている人にとっては、ちょっと戸惑うかも知れないけど、慣れるまでにそれほど時間はかからない気がする。 で、実際どういうエディターなのかということは、使ってみないとよくわからないので、『Gutenberg』をテーマにしたイベントが Word
関西地方も梅雨明けして毎日うだるような暑さですが、まだ蝉の声を聴いていない気がする… WordCamp Kobe 2013 が終わってからは、しばらく別の CMS でチマチマとサイトを制作していたのですが、久しぶりに WordPress で更新作業をしたときに新しいプラグインを3つほどインストールしてみました。 最近といってもすでに1ヶ月ほど前から使っているプラグインもありますが… その使ってみた3つのプラグインというのは、 Custom Post Type Generator Show Current Template WP Over Network です。 Custom Post Type Generator このプラグインは、その名の通りカスタム投稿タイプとカスタム分類を�設定・管理するプラグインです。 このプラグインを作った方は、私がよく使っている『 Intuitive Custo
今回で、『concrete5 でケーキ屋さんのサイトを作ろう！』シリーズ4回目の記事です。 サンプルサイト作成方法の解説としては、順序立てたシリーズ記事になっていないかも知れませんが、『concrete5 関西ユーザーグループの勉強会』の開催にあわせた記事の公開になったりしていますので、お許しくださいませ。 また、毎度の長文になると思いますがお付き合いを…（ほとんど画像とコードで記事を占めていると思う…） で、今回は『オートナビ・ブロック』のカスタマイズについてですが、デザインのカスタマイズは難しくないと思います。 というのも『オートナビ・ブロック』のデフォルト・テンプレートを見るとわかると思うのですが、書き出される HTML のコードは <ul> タグを使ったリスト形式です。 以前解説した『ページリスト・ブロック』のデフォルト・テンプレート場合は、 <h3> や <div> タグを使って
前回の『テーマのテンプレートとページタイプのおさらい』から、いきなりページリストのカスタマイズについてです。 実は10月27日の『concrete5 関西ユーザーグループ 第22回勉強会』で、ページリストのカスタマイズについてお話させていただきました。 というわけで、ホントは『ホーム』や『ナビゲーション』あたりの解説を先にした方が順序としてはいいのかも知れませんが、今回はページリストのカスタマイズについて解説します。 その前に、concrete5のブロックをカスタマイズするには、まず 『concrete5 のファイルシステム』と『カスタムテンプレート』を理解する必要があります。 ブロック修正の仕方と カスタムテンプレート の仕組み :: concrete5 Japan 日本語公式サイトに詳しく書いてありますので、まずはご覧ください。 動画を見ると、concrete5のバージョンがちょっと古
先週、concrete5 5.7.0 Beta1がリリースされたので、早速ダウンロード&インストールしてみました。 システム条件さえ満たしていれば、インストール方法やインストール時の画面は、今までのバージョンとほとんど同じなので特に問題なくインストールできました。 ただ、サイズが大きいのでローカル環境はともかく、サーバーにアップするのはちょっと時間がかかりますよね。 正式リリース時にはできるだけ軽くして欲しいです。 で、さわってみた印象は、いい感じ 😀 ツールバーがかなり変わっていますので、慣れるまではちょっと戸惑うかも知れませんが、すぐに慣れて操作も覚えられるのではないかな。 それに、ドラッグ & ドロップでの操作が、今までの concrete5 よりも一層直感的な印象を受けます。 このあたりのことは、もっと詳しく書かれているブログがありますので、そちらをご覧くださいませ。 5.7 B
↑ まわしてみてください。 特に難しいことはなく、JavaScript ファイルと css ファイルを読み込み、下記のコードを書くだけ。（あと、必要ならばプラグインの画像ファイルもね） 画像は、『1.png、2.png、3png…』という連番ファイル。 [html] [/html] [html] [/html] [javascript] window.onload = init; var car; function init(){ hoge = $(‘.hoge’).ThreeSixty({ totalFrames: 52, // Total no. of image you have for 360 slider endFrame: 52, // end frame for the auto spin animation currentFrame: 1, // This the star
home デザイナーズブログ concrete5 concrete5 でケーキ屋さんのサイトを作ろう！ :: テーマのテンプレートとページタイプのおさらい 先月の concrete5 関西ユーザーグループ 第21回勉強会で、デザインカスタマイズについてお話させていただきました。 その時のおさらい記事や使用したスライドは『concrete5 のデザインカスタマイズについて関西ユーザーグループ 第21回勉強会でお話しましたよー』にアップしておりますので、ご覧くださいませ。 昨年は、はじめての concrete5 というシリーズ記事で、和菓子屋さんのサイトを作りました。 で、今年はケーキ屋さんです 😀 concrete5 関西ユーザーグループ 第21回勉強会用に制作したサンプルサイトをベースに、「とりあえず、これくらいのボリュームのサイトなら私でも作れるかな？」と思ってもらえるような記事を書け
知人に「もうちょっと『Advanced Custom Fields』のことを知りたいなぁ」と、ボソッと言われてしまいました。 WordCamp Kobe 2013 の『 sneak idea show – コンテンツやデザインを実現するための事例集』で使ったスライドは、管理画面での操作や functions.php の記述での管理画面の変化を実際のサイトを見ながら解説するという前提で作ったので、スライドを公開してもよくわからないと思う。 というわけで、『 sneak idea show – コンテンツやデザインを実現するための事例集』で解説した『 Advanced Custom Fields 』を使ったコンテンツを記事にしてみます。 まず、実例として紹介したサイトは『宝塚映画祭 | かつて日本最大級の撮影所があった映画の町、兵庫県宝塚の市民映画祭。』です。 このサイトのホーム（トップページ
今回の WordCamp Kobe のテーマは『One Day School』。 朝一番のホームルームのあと、1時限目の『sneak idea show – コンテンツやデザインを実現するための事例集』でお話させていただきました。 といっても、杉山さん、額賀さんと一緒にお話させていただいたので、ちょっと慌ただしかったかも知れませんね。 時間の制約で端折ったりしたところもありますので、説明がわかり難かったということがあればお許しくださいませ。 少しでも制作のヒントなど、お役に立てるように多くの事例をご紹介できればよかったのですが… というわけで、本日の復習です。 といっても、事例の紹介ということで実際のサイトと管理画面をご覧いただきながらの説明だったので、ココでそれを再現するのはちょっと難しいです。 あくまで、本日の補足ということで、スライドでわかりづらかったと思われるプラグインの紹介やコー
Movable Type がリリースされて、2012年10月8日で11周年なんだそうな。 2004年くらいから使い始めて今でも仕事で使っていますので、7〜8年ほど使っていることになるのかな。 で、最近の仕事で気づいた事を少しだけメモ。 企業サイトのコンテンツのひとつに展示会に出展する際のイベントカレンダーのページがあり、 Movable Type を使ってクライアント側で更新作業をしたいと… まぁ、よくある話。 もちろん、それだけのために Movable Type を使うわけではないのですが、中には「ニュース（お知らせ）だけを Movable Type で制作して欲しい。」という依頼もあったりします。 まぁ、「もったいないなぁ」と思ったりするのですが、中の人が『今すぐできる超絶シンプルなMTのCMSカスタマイズテクニック』という記事を書いているくらいなのでその影響かもね 🙂 今回のイベン
前回は、concrete5 をインストールして、オリジナルテーマの『default.php』を制作するところまで書きました。 といっても html ファイルからソースをコピーして、concrete5 の『HTML ブロック』にペーストしただけの作業です。 これでは、html ファイルを concrete5 で表示しているだけのような状態なので、今回はもうちょっと細かく設定したいと思います。 そこで、前回入力したデータ（ブロック）を一旦削除して、デフォルトのテーマである『Greek Yogurt』に切り替えて、どのようにエリアを設定しているか確認してみます。 これを見ると、エリアの設定は『サイト全体の Site Name』、『サイト全体の Header Nav』、『Header Image』、『Main』、『Sidebar』となっています。 この『サイト全体〜』って何だ？ こんな時はオリジナ
前回の続き… jQuery Mobile を使ってスマートフォンサイトをリニューアルした時に『スマートフォン用の表示から PC サイト用の表示に切り替える機能も実装』しました。 このサイトは、WordPress です。 で、Multi Device Switcherというプラグインを使ってスマートフォンからアクセスがあった時に、jQuery Mobile を使ったテーマに切り替えて表示しています。 以前は、WPtap Mobile Detectorというプラグインを使っていたのですが、WordPress をデバッグモードにしているときにエラーになり、Multi Device Switcher を使ってみることにしました。（原因を教えてくださった @gatespace_k さん、ありがとうございます。） 横幅が480px までは、Media Queries（レスポンシブ Web デザイン）を
サーバーによってはこのようなエラーを表示することがあるかも知れませんが、その場合は『ヘルプ :: concrete5 Japan 日本語公式サイト』を見れば解決策が掲載されているかも知れません。 それでも解決できなければ『コミュニティー :: concrete5 Japan 日本語公式サイト』に質問すれば、丁寧に教えてくれると思います。 エラーがなければ『インストールを続ける』をクリックして『インストール作業 :: concrete5 Japan 日本語公式サイト』ページに書いてあるように淡々と作業を続けるとあっという間にインストールは完了します。 インストール時に選択するサンプルデータは、『ブログ付きサンプルデータ』を選んだ方がいいです。 最初、『空白サイト』の方がクリーンなインストールができるのかと思ってインストールしてみたのですが、その後テーマを制作している時にフォーラムに書いてある
というわけで、何となくですがレスポンシブ Web デザインのことがわかったような気になった 😛 ので、実際に制作していくことに… まず、IE8にも対応させるために css3-mediaqueries.js というスクリプトを読み込むように記述。 [html] [/html] 最近話題になってた気がする Google HTML/CSS Style Guide には [html] [/html] と、書いてあったりするので [html] [/html] のように記述する方がいいのかな… 次に Viewport の記述。 [html] [/html] Viewport をどのように記述するのがベストなのかよくわかっていない。 ただ、user-scalable を 『no』に設定する人もいるようですが、ユーザビリティの観点からするとあまりお勧めできないと思います。 Viewport に関しては、
タイトルの『今更』というのは、レスポンシブ Web デザインに最近まで手を付けなかった自分自身に対する教訓の意味を込めていますので、何も『レスポンシブ Web デザインがダメだ。』とか『レスポンシブ Web デザインは一時期の流行りで、もう過去のモノだ。』というような意味ではないです。 反対に、これからもっと活用されるべきだと思っておりますし、最近ではレスポンシブ Web デザインのことを取り上げたブログ記事なども多く見受けられますので、皆さんも同じように感じているのではないでしょか。 最初にレスポンシブ Web デザインが紹介されたのは、2010年5月25日の A List Apart: Articles: Responsive Web Design だと思いますので、もうすでに2年前の記事です。 ということを考えると、Media Queries をちょっと試しただけで、今までレスポンシ
2月の WordBench 神戸は、Web CAT Studio（株式会社リクルートエージェント）と HTML5-WEST.jp と WordBench 神戸のコラボレーションで、HTML5＋WordPress勉強会 in 神戸というカタチで、神戸市産業振興センターにて開催されました。 昨年の WordCamp Kobe の影響なのか、HTML5への関心なのか、定員120名のところ参加希望者は150名近くだったみたいです。 というわけで、普段の WordBench 神戸とは違った雰囲気でした。 個人的には、 WordPress のことを色々と知りたいというのはもちろんあるのですが、それとは別に HTML5に関しても理解しきれていないことが多々ありますので、とても興味深くお話を聞くことができました。 で、おさらいというほどではないかも知れませんが、HTML5＋WordPress勉強会 in
何で今頃 Facwbook ページの話題なのかというと、重い腰をあげてやっと Facebook のアカウントを作ったので、その流れで Facebook ページを作ったときの備忘録ということでメモ代わりに書いてみました。 web の業界に足を突っ込んでいながら今まで Facebook のアカウントがなかったのもちょっと問題あるかもしれませんが、色々とワケありということで… まぁ、お恥ずかしいハナシですが… ここから本題 🙂 簡単に説明すると、このサイトが WordPress を使っているので、『Facebook ページ用の ページテンプレートと固定ページを作って Facebook ページに表示させてみた』というわけ。 厳密にいうと Facebook ページではなくて、いわゆる Facebook ページの『Welcome ページ』ですね。 🙂 なので、Facebook と WordPres
タイトルの通り、リニューアルというわけではないのですが、ちょこっと変更・更新しました。 当サイトで、数ヶ所 Flash を使ってアニメーションを表示させているところがあります。 フッターの紙飛行機がグルグル廻っているアニメーション（これくらいなら Flash を使わなくても『GIF アニメーションでいいのでは？』という声も聞こえてきそうですが…）、ホームの ” identity ” という箇所に表示しているアニメーション、それとブログトップのサイドバーのアナログ時計です。 そのうち時計の Flash だけを残して、他のアニメーションは Flash で表示させるのをやめました。 何故かというと、iPad が発売されてから会社のお偉いさんが iPad で自社のホームページを見た時に 上司：「わが社のホームページが表示しないぞ！」 担当者：「 iPad が Flash に対応していないので、見ら
これだけ世間が「スマートフォン」「スマートフォン」といっているとやはりスマートフォンサイトは無視できないということもあり、jQuery Mobile を使って作ってみることにしました。 今ごろスマートフォンサイトを作っているのでは遅いくらいかもしれませんけど… といってもスマートフォンを持っていないので確認ができない 🙂 もちろんブラウザーの User Agent を変えれば、おおまかな確認はできる。 iPhoney というシミュレータを使う方法もあるし、Xcode and iOS SDK の iPhone Simulator.app や Android SDK を使えば問題なく確認はできると思います。 ただ、私の環境では諸事情があり iOS SDK も Android SDK もインストールしていません。 iPhoney は手軽でいいのですけど、”It’s the perfect 32
Adobe と Apple による Flash 論争などにより注目されはじめている HTML5。 その中に “Canvas” という図形を描くための仕様があります。 Canvas についての詳細はこちらへどうぞ Flash や Java のようにプラグインが必要ではありませんが、四角や丸のような簡単な図形であればまだしも、ちょっと複雑な図形になるとコードを記述するのもたいへんです。 そのうち簡単にコードを記述できるアプリケーションがリリースされるだろうと思っていたのですが、なんと Adobe Illustrator のファイルを “Canvas” のコードに変換してくれるプラグインがありました。 Ai->Canvas という Adobe Illustrator 用プラグインです。 このプラグインを Adobe Illustrator にインストールして、ファイルから書き出しフォーマットで
2ヶ月ほど前に『リニューアルというわけではありませんが、jQuery を使ったアニメーションを…』という記事で、当サイトの Flash を使ったアニメーションを jQuery のプラグインを使って作り直したと書きました。 その中で、ブログトップのサイドバーにあるブログパーツのアナログ時計だけは Flash のままで、iPad、iPhone からのアクセスだと代替画像を表示するようにしていました。 といっても、iPhone などからアクセスすると WordPress の WPtouch プラグインを使っていますのでサイドバーが表示されないと思いますが… WPtouch のスタイルを無効にする場合は、下の方に表示している『Mobile Theme』を『OFF』にすると通常のスタイルになりますので、PC のブラウザーで見たままの表示になります。 で、ちょっと空いた時間に jQuery のプラグイ
ずいぶんと前ですが、Movable Type を利用したブログとフォト・ギャラリーを Flash で作ってみたことがあります。 かれこれ3年ほど前です。 Flash 用の XML ファイルを出力するのは、やっぱり Movable Type の方がテンプレートの融通が利くので、作りやすいと思う。 でも、 Movable Type のライセンスのことなどでメインのブログを WordPress に切り替えて、ずいぶん経つ。 それに以前のコンテンツは、Flashでデザイン 差がつくBlogサイトの作り方という書籍を参考にしたり、当時のサイトを2、3参考にしたのですが、スクリプトの記述は AS2.0でした。 で、AS3.0になって XML との連携がよくなったということもあり（何を今更… 😀 ）、AS3.0で WordPress から出力した XML ファイルを読み込むコンテンツを作ってみることに
前回の続きです。 新たな問題というのは、WordPress のビジュアルエディターと ” iframe ” の問題です。 何が問題かというと、WordPress のビジュアルエディターが <iframe> タグを消してしまうこと。 私が制作に関わったサイトでは、基本的に <iframe> を使うことはほとんどありません。 ただ、例外もあって、Google map などでどうしても使う必要のある場合があります。 今回の案件も Google map が必要のなので、必然的に <iframe> を使わないといけません。 しかし、Google map のコードを貼り付け、ビジュアルエディターに切り替えた途端 <iframe> タグが消えてしまいます。 前回の記事同様、私がメンテナンスする場合にはビジュアルエディターを使わないので問題ないのですが、今回の案件はクライアントと Web のことをあまり知
キャリアのスタートはプロダクト・デザインのフリーランス・Webデザイナー。 大阪を中心に concrete5、Movable Type、WordPress などを使ってサイトを制作 !! work制作事例 webデザイン、CR-ROM、展示会用コンテンツなどの紹介。10年以上も前の制作物があったり、諸事情によりここで紹介できないものは掲載しておりませんのでご了承ください。 galleryギャラリー イラストレーション、ポストカードやキャラクターなどのパーソナル・ギャラリーです。最近の 3D CG 作品の他、手書きで描いていた時代のものもちょっと手を加えて掲載しています。 aboutこのサイトについて 以前は沿革も掲載しておりましたが、いわゆるプロフィールだけにしました。また過去の実績一覧としてお世話になったクライアントさんを掲載しております。 blogデザイナーズブログ もともと文才もなく
このページを最初にブックマークしてみませんか？
『デザインワークス・オンサイド』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
