One-time payment. Unlimited installs, technical support, and updates for life.
Webデザイナーへ向けて、Tumblrの魅力とテーマの制作方法を解説する本連載。前回は、既存のテーマを簡単にカスタマイズする方法を説明しました。今回は、いよいよオリジナルのTumblrテーマを実際に作っていきます。 Tumblrテーマの開発環境を準備しよう WordPressのようなCMSのテーマ制作では、MAMPやVagrantなどでローカル開発環境を構築して作業し、完成後に本番環境にコピーする流れが一般的です。Tumblrの場合は、ブラウザー上でテーマのHTMLを直接編集できるので、今回はHTMLファイルをデザインカスタマイズ画面に貼り付けて、保存とプレビューを繰り返しながら作っていきましょう。
Webデザイン初心者にもお薦め!TumblrとChrome & FirefoxでWebデザイン集を作ろう 2度目の投稿になります。 アメコミ好きデザイナーのジャッキーです。 暖かい日が続き、春の訪れを感じますね。 夏もすぐに迫ってくることでしょう。 そうなると腹の下?のポニョをなんとかしないといけません。 ポニョ、間食、好きー! ┐(´д`)┌ さて、ここから本題です。 デザイナーの皆様は、参考サイトやお気に入りのサイトはどのようにストックしていますか? ブックマーク?スクリーンショット若しくはWebクリップしてEvernote?Pocketに入れる?はてブに保存? 私も様々な方法を試してきましたが、最終的に辿り着いたのが「Tumblr(タンブラー)」です。 目次 Tumblrとは なぜTumblrなのか Webデザインを学んでいる初心者や独学の人にもお薦め まずはTumblrのアカウント
Tumblrテーマ、最初から作ろうと思うと結構大変です。テーマ制作に興味あるけど、Tumblrのテンプレートタグ一覧を見てウッと思う方も多いかもしれません。 そんな方のために、CSSを書くだけでTumblrテーマ作れる Tumblr Boilerplate っていうのを作りました。ダウンロードは下記のリンクから。 Boilerplateをダウンロードする Tumblr Boilerplate の特徴Tumblr Boilerplate は、CSSの書かれていない、HTMLだけのTumblrテーマです。 ZEN テーマや Apollo テーマをベースにしているので、それらのテーマの特徴である下記の要素を引き継いでいます。 全投稿タイプに対応OGP 設定済ソーシャルボタン設置済みLike & Reblog ボタン設置済みReblog の場合オリジナルの著者名を表示HTML に必要な要素が既に書
ライフハッカーのナイトスクール開講。IDEOのデザインシンキングを学ぶ。 優れたデザインとは、グラフィックや造形だけでなく、世の中の問題点や課題を明確にして、解決策を導きだすこと。ある意味では医者やコンサルの仕事にも近いのだと思います。近年、そのアプローチは「デザインシンキング(思考)」と呼ばれています。グラフィックデザイナーやクリエイティブディレクターが広告や雑誌にとどまらず幅広い分野で活躍できるのはそのスキルで社会を豊かにできるから。アップル社の初期マウスやPalmをはじめ、数々の世界的企業との仕事で知られる、デザインコンサルティングファーム IDEO(アイデオ) 。彼らが世界的に活躍しているのもデザインが社会に与える影響力の強さを物語っているのではないでしょうか。 『ライフハッカー[日本版]』が主催するナイトスクールは、いまの世の中のキーパーソンに登場いただき、その仕事術を共有する学
Tumblr、モバイルテーマがデフォルトで有効になっていて、スマートフォンで見ると専用のモバイルテーマで表示される。 このモバイルテーマは、ユーザーが自由に編集することができない。また、PC版テーマの各種設定も無視される。 ここでひとつ疑問に思ったんだけど、TumblrテーマにGoogle Analyticsを導入していても、モバイルからのアクセスではトラッキングコードが無視されるので、アクセスが記録されないのではないか? と思った。 試しにモバイルテーマを有効にしたTumblrを作って、スマホでいくつかのページにアクセスして実験したんだけど、Analyticsのリアルタイムのサマリーを見てると特に動きがないようだった。ということは、予想通り記録されてないかもしれない。雑に調査したので確証はない。 Analytics見てる人かつモバイルテーマ使ってる人、なんかわかったら教えてほしいです。
Webデザイナーへ向けて、Tumblrの魅力とテーマの制作方法を解説する本連載。前回は、テーマのコーディングから、9種類の投稿タイプをブログに表示する部分まで進めました。今回は、より細かな部分を仕上げていき、テーマを完成させます。 ページの追加とナビゲーションメニューの表示 Tumblrには、通常のブログ投稿とは別に、静的ページを作れる「ページ」機能があります。ページ機能を使うと、ブログの時系列とは関係なく固定して表示したいコンテンツを作成できます。 ページを作成しただけではサイトに表示されないので、テーマを修正し、ヘッダーのナビゲーションメニューに「アクセス」「メニュー」ページを追加します。 ページをメニューに表示するには、テンプレートタグを使います。メニュー項目をマークアップしているli要素を {block:HasPages} で囲むと、ページが1つ以上存在するときだけ、中の要素が出力
tumblrのテーマをカスタムしてもスマホ表示では無効になる原因と対策がわかった。 原因 tumblrでは、モバイル用にHTMLを自動で最適化する。このためにカスタムした部分が無効になっていた。 カスタムで追加した外部JavaScriptファイルを読み込む設定が反映されなかったので、スマホ表示ではテーマのカスタムが有効になっていないことに気づいた。 対策 スマホ表示でもカスタムを有効にする設定は以下のとおり。 ダッシュボードの上部に並んでいる歯車をクリックしセッティング画面に切り替える。 テーマを編集するをクリック。 左側にサイドバーのあるプレビュー画面が表示される。 サイドバー下部の詳細設定をクリック。 モバイルレイアウトを利用するをクリックし無効にする(デフォルトでは有効になっているため)。 保存をクリックすれば完了。 THERMOS 真空断熱タンブラー 320ml ステンレス Tum
Webデザイナーへ向けて、Tumblrの魅力とテーマの制作方法を解説する本連載。第3回と第4回では、カフェのサイトを想定したTumblrテーマを完成させました。今回は応用編として、テーマの完成度をさらに高めるためのテクニックを紹介します。 トップページとパーマリンクで異なる構造にする 前回制作した「Cafe」テーマは、トップページとパーマリンクページ(個別の記事ページ)がほとんど同じレイアウトでした。実際には、Webサイトによって、トップページとパーマリンクページをまったく別のレイアウトにしたい場合もあるでしょう。 このような場合は、{block:IndexPage}と{block:PermalinkPage}という2種類のブロックを使います。トップページ用のコンテンツは{block:IndexPage}...{/block:IndexPage}、パーマリンクページ用のコンテンツは{blo
iOS 7から搭載された新機能「iBeacon」。このiBeaconを使ってアプリを作るエンジニアも少なくないのではないでしょうか。 そこで今回はヤフーでiOSアプリを開発している羽田さんに、iBeaconに関する基礎的な部分からサービス設計、サービス事例などについて、解説していただきました。 by 馬場美由紀 (CodeIQ中の人) ちゃんと理解してますか?Appleの新技術「iBeacon」 ヤフー羽田です。 登場から時間も経ち、サービス化されたり、アプリ化されることも珍しくなくなったiBeacon。 そんな今だからこそiOSに携わる企画者・エンジニアとして「知っておかなければいけないこと」が多々あります。 今回は基礎的な部分からサービス設計を含めたiBeaconに関してエンジニアと企画者が、絶対+最低限知っておくべきことを紹介します。 この記事で学ぶこと iBeaconに関する以下の
「サイトを作成したが、思っていたよりも成果が出ていない」「どこからサイトを改善すればいいかわからない」とお悩みの担当者の方が多いのではないしょうか。 成果の出るサイトにしたい場合、まずは段階を踏んで改善をしていく必要があります。 今回はサイト改善で成果を出すためのポイント10選と、活用するべきツールを紹介します。 サイトを改善するためのポイント10選今回は貴社のサイトの成果を改善するためのポイントとして、視覚的なポイントと思考的なポイントに分けて、10のチェックポイントをご共有します。 以下の資料では、2万件以上のデータベースから最短30秒でサイト改善案を手に入れられるツールについてまとめています。無料ですので、ぜひダウンロードしてご覧ください。 サイトのコンバージョン率を改善するためのノウハウを、自動提案してくれるツール「dejam」 1. Webサイトの構成は、一般的なパターンか結論か
たくさんの和菓子店が軒を連ねる京都。さまざまな名店の中から、思わずときめく“かわいい和菓子”を集めてみました。お土産としてはもちろん、自分用にも買いたい5品です。 ■ Crochetの京あめ ▽ Crochet クロッシェ「京あめ」京都 「Crochet」は、京都のあめの技術に、ヨーロッパのあめの美しさが融合した京あめブランド。1876年創業の京あめ工房・今西製菓が製造しています。白を基調とした店内に入ると、ブルー×ピンク、オレンジ×イエローなど、あめの発色の美しさが目を引きます。 1つ1つの商品が、シンプルなデザインの箱に入っています。 京都本店(下京区)限定の「シェルブールの雨傘」は、フランス映画「シェルブールの雨傘」で主人公のカトリーヌ・ドヌーヴが着ていたドレスの配色をモチーフにしています。味は、さわやかでほどよい甘さのヨーグルト風味。かむと、サクサクとした独特の食感が楽しめます。
オライリーから出ている「ユーザーインターフェースデザインの心理学」から使えそうなものを実例を踏まえピックアップ!これでUIデザイン説明の説得力をあげよう! 情報は一度にすべて見せるのではなく、そのとき必要なものを段階的に開示させた方がよい。 デザイナーが犯しがちな失敗は一度に大量の情報をユーザーに与えてしまうことです。 情報は一度に大量に与えるのではなく、その時点で必要としている情報だけを与えるほうが様々なニーズに対応することができます。 ユーザーの中には大まかな説明でよい人もいれば、詳細を知りたがっている人もいます。 つまりどういう事? 情報は一度に見せるのではなく段階的に見せる 重要なのはクリック回数ではない。クリックのたびに必要な情報が手に入るのであればユーザーは喜んでクリックする 誰がいつ何を必要としているかを理解する。各段階で何を必要としているか的確に把握していないと、この手法は
works デザイナーのわたしがプログラミングの基礎をだいたい3日で覚えた1つの方法 Posted by Miki Ishijima on May 20, 2014. フルスタックエンジニア!フルスタックエンジニア! 最近なんでもかんでも出来る人が求められていますね。Webデザイナーの人でも簡単なプログラムに触れる機会は以前より格段に増えています。 わたしもプログラムを覚えたいと思い、勉強していました。しかしそれは、禁煙と同じようなもので触ってはやめて、触ってはやめて、飽きてしまうの繰り返しでした。 身につかない原因 プログラムの勉強会や、本、ブログなどを読んでもなぜ身につかないのか。難しいというのは理由ではありません。 むしろ、基礎の「き」くらいであればコーディングと同じくらい簡単です。 わたしが一番の原因だと考えるのは作りたいものがないというコトです。 子供向けプログラム学習アプリケー
KDDIウェブコミュニケーションズにて、中小事業者向けサービスの事業責任者。2007年よりレンタルサーバーCPIの事業本部長、2009年3月ドイツのCMS Jimdoの日本独占販売権を取得し、事業責任者に就任。2011年9月、Google、KDDIと共にみんなのビジネスオンラインを立ち上げる。2013年4月、取締役副社長就任。 まずはこの動画をご覧頂きたい。 ポケットティッシュに印刷されたカセットテープの図柄。一見なんだろう?と思ってしまうこのティッシュに面白い仕掛けが隠されている。京都・滋賀のバンド、tricotの新曲"Break"のプロモーションとして、このAR対応ポケットティッシュが5月17日、18日の二日間で梅田と渋谷の二カ所にて10,000個路上配布された。スマートフォンでダウンロードしたアプリケーションでティッシュの図柄をスキャンすると、カセットテープが擬似的に動きだし、新曲が
WordPressとPhonegapで簡単アプリ開発 Part.2【iPhone/Android対応】 | WEB制作&システム開発 flexagent WordPressとPhonegapで簡単アプリ制作 Part.2【iOS/Android対応】 どうも、フレックスエージェント・スタッフのアンドリューとテルです。 先日の沖縄旅行で完全に南の島に目覚めてしまった、私テル。 以前は海外旅行なら「誰も言ったこと無い秘境に行こうぜ!ひ・き・ょ・う!」と思ってましたが 海外旅行なら断然、南の島です。白い砂浜、真っ青な空、エメラルドの海!(笑) という訳で、今回は前回に続きWordpressとPhonegapで簡単にアプリ制作をする方法の翻訳記事Part.2をお送りします。 翻訳を快諾してくださったアレックス・バシャックさんに感謝いたします! それではどうぞ!! パート1(まだ読んでない方
WordPressとPhonegapで簡単アプリ制作 Part.3【iOS/Android対応】 | WEBデザイン&アプリ開発 flexagent どうも、フレックスエージェント・スタッフのアンドリューとテルです。 今回はまた前回に続きWordpressとPhonegapで簡単にアプリ制作をする方法の翻訳記事Part.3をお送りします。 翻訳を快諾してくださったアレックス・バシャックさんに感謝いたします! それではどうぞ!! パート1、パート2ではWordpressとPhonegapでアプリ開発するための準備について勉強しました:WordpressからJSONフォーマットされたデータを受ける方法、jQuery mobile と Phonegap boilerplateをセットアップする方法です。(まだ読んでいない人はコチラ) これから、実際にアプリを動かします。いろいろな種類の投稿
WordpressとPhonegapで簡単アプリ開発 Part.1【iPhone/Android対応】 | WEB制作&システム開発 flexagent どうも、フレックスエージェント・スタッフのアンドリューとテルです。 先日、私テルは沖縄に旅行に行ってきたのですが 芸能人の方々がお正月に、南の島へでかける理由がすごく良くわかった気がします。 また行きたいなぁ沖縄。。。 という訳で、今回はWordpressとPhonegapで簡単にアプリ開発をする方法の翻訳記事Part.1をお送りします。 翻訳を快諾してくださったアレックス・バシャックさんに感謝いたします! それではどうぞ〜。 はじめに WordPress (ワードプレス)は、素晴らしいCMS(コンテンツマネージメントシステム 英:Content Management System)である。 デベロッパー、ユーザー、作家など、ウ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く