サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
yotsuba-d.com
<?php $child_posts = query_posts( 'numberposts=-1&order=ASC&orderby=post_title&post_type=page&post_parent=' . $post->ID ); if ( $child_posts ) { foreach ( $child_posts as $child ) { $child_posttitle = apply_filters( 'the_title', $child->post_title ); $child_permalink = apply_filters( 'the_permalink', get_permalink( $child->ID ) ); $child_excerpt = apply_filters( 'the_excerpt', $child->post_excerpt
2014年4月18日に埼玉県大宮にあるコワーキングスペース7Fで「【初心者向け】フリーを歩みはじめた人たちへwith 後藤賢司&松田千尋~フリーランスの先輩が”実際”をガチで話します!~」というイベントにITかあさんこと松田さんと一緒に出演させていただきました。 僕はフリーランスの情報収集やお仕事への繋げ方というテーマでお話させていただきました。 当日発表したスライドです。 全ての人にあてはまらない事もありますが、何かのヒントになれば幸いです。 ※このまま読んだ訳ではないので話した内容はスライドと若干違ったりもしますが、その辺りは当日参加した人の特権という事で。 質問コーナーでは時間の使い方やお金のお話などかなり突っ込んだ内容がありました。 話す内容が内容だったので録画はお断りさせていただきましたが、普段あまり言わないようなところまで踏み込んだので、その部分は参加者さんにとってメリットがあ
Bootstrap Sass のグリッドカラムを変更するのはとっても簡単 ちょっと前にBootstrapのSass版が出ましたね。今まで非公式のを使ってたのでありがたい限り。 Bootstrapのグリッドシステムは12カラムなんですけど、「もう少し細かく調整出来たら良いな」と思う事も出て来ました。 パーセンテージのレイアウトしなきゃいけないかなーって思ってたらものすごく簡単に出来ました。Sassの素晴らしさを再確認。 bootstrap/_variables.scss の中の下記の数字を12から24に変えるだけでした。 $grid-columns:12 !default; ※36カラムの指定も可能です。 Bootstrapはカスタマイズして使ってます。 CSSフレームワークのBootstrapを使ってはいますが、正直グリッドシステム以外はそこまでお世話になってなかったりもします。 行間とか
お客さんのサイトをWordPressで納品した場合、更新マニュアルを作ったりしてる方も多いと思います。 お客さんによってはマニュアルを見ないまま、都度電話で聞いてくるような方もいらっしゃいます。 「画像の張り方ってどうやるの?」とか「予約投稿どうやるの?」なんて聞かれる事もあるかもしれません。 そんな方にオススメ、投稿画面の中に更新マニュアルを入れる方法を紹介します。 1.Advanced Custom Fields を使う 投稿画面にマニュアルを追加するのに「Advanced Custom Fields」というプラグインを利用します。 管理画面 > プラグイン > 新規インストール でインストールし、有効化します。 管理画面の左メニューの下のほうに「カスタムフィールド」というメニューが出ます。 2.マニュアルの内容を追加する カスタムフィールドを追加します。フィールドタイプの「メッセージ
コーポレートサイトやオンラインショップを運営していると、ちょっとしたメッセージをサイドバーなどに表示したい時があります。最初からあるテキストウィジェットでも出来るのですが、背景に色を入れたりしようとすると意外と面倒。 CSSとか書けない人でもなるべく簡単にちょっとだけ見映えの良いテキストメッセージが出せたら…。 そんな方向けのウィジェットプラグインを作りました。 https://github.com/ytbdken/Notification-Box 設定画面はこのような感じです。 メッセージ本文、背景色、文字色、padding、margin、追加用CSSを設定できます。 色ベタ部分の項目を主に使います。 上記設定だとこんな感じ 色はウィジェット上で確認可能です。 ↓こんな感じになります。 marginなどの値もウィジェット上で反映されます。 上記設定だとこんな感じ。他のウィジェットと離して
WP-D Fes #01 Megane Fes in GMO 2月1日にGMOでWP-D初のイベント「WP-D Fes(メガネ Fes)」が開催されました。 WP-Dメンバーによるセッション、パネルディスカッション、LTが中心。僕も登壇させていただきました。 主にパープルこと大串さんがひたすら喋ると書いてしまうと謎なんですが、内容は「これからのWeb制作を考える」という真面目なもの。 今後の制作における考え方や概念を突っ込んでお話してました。技術的な部分はほぼゼロというイベントってなかなか少ないですよね。 初イベントで有料にもかかわらずとても沢山の方に参加いただいて感謝しています。 メンバー全員かなり踏み込んで考え方や手法などを公開していたのではないかと思います。 発表内容は時間が限られていたので全部伝え切れてない部分もあったかもしれませんが、同じような考えをメンバーが持っているというのは
WordPressのテーマ制作はベースとなるものを自分で作って、そこからカスタマイズしてます。 テンプレートタグも非推奨のものは使わないように、Codexや書籍などを参考にしながら見直してます。(query_postsは卒業) CSSはSassで書いてるのですが、最近Bootstrapがバージョン3になったり、Font-Awesomeがバージョン4になったりしたのもあり、ベーステーマを作りなおしました。 その際、前後の記事へのリンクが結構カスタマイズ出来ると知ったのでご紹介します。
ありがたいことにWebサイトのリニューアル話なんてのを良くいただきます。 ずっとお付き合いしてる代理店さんからの依頼もあったり、知人からの紹介もあったり。 安いところにお願いしたらどうしようもなくなって助けてほしいなんて事もあります。 そんな話の時にやってる事とやらない事があります。 ※主に中小企業などにむけての場合の話です。大企業や官公庁だとやり方は変わります。 1.数値は信じすぎない 2.批判は簡単だけどやらない 3.現状(リニューアル前)のWebサイトを読む 4.否定は何も生まないのでやらない 5.サイトを読む力を鍛えて基礎力をあげておく 1.数値は信じすぎない Webサイトのリニューアル提案をいただいた場合などに、現状サイトの分析をして提案します。 僕の場合はガッチガチの数値分析中心だけでは無く、全体の印象や構成なども含めて分析します。 全部数値に頼っていくと「誰にでもいい顔をする
浅草「亀十」のどらやきはふわっふわでちょっと香ばしい皮が美味しいのでオススメです。お土産にください。 年末なのかどうなのか、興味深い記事がたくさん出ていますね。CSS Nite の影響もあるのでしょうか? 僕がデザイナーとして心がけてたり考えたりしてる事を書いてみようと思います。 1.最新技術に振り回されるのをやめる 2.基本的な事は何も変わっていない 3.自分を持ち、学び方や考え方を変える 4.限られた時間を使うという事を意識する 1.最新技術に振り回されるのをやめる Webデザイナーはたくさんの知識や技術が求められます。 新しい技術は毎週毎日のように出て来ます。 注目されたけど結局あまり使われなかったものもあります。 最近では黒い画面さわりましょうとかパッケージで管理しましょうとか良く聞きますね。 僕は技術的な部分は正直そこまで重視してません。 ※フロントエンドエンジニアよりな仕事はあ
菱川さんのブログの「CMS案件の制作フローは変化する。先にCMSを導入し、あとでデザインする」を読んで。 Facebookにシェアしようとしたら文章長いよ的な事を警告されたのでブログに書きます(笑) 制作フローを変化させていく 菱川さんのいう「先にCMSを導入し、あとでデザインする」という方向は増えていくと思う。 ただし、このフローが確立するにはクライアント(依頼者)のWebサイト制作への参加姿勢も重要。 丸投げしてた会社なんかは大きな意識改革をもとめられそう。 運営にはコストや時間がかかります。社内である程度やれる体制を作るか、外部に委託するか、どちらにしろそれなりのコストはかかってきます。 自動化もできないし、その会社を理解してる人じゃないと無理なので。 CMSって運営してなんぼなので当たり前といえば当たり前なんだけど。 でもまだWebサイトを会社案内程度に考えてるところが多いのも確か
Home 雑記帖 知らない人は今すぐ設定を。友達が利用しているFacebookアプリに自分の情報が提供されてる場合があります(スマホ版) Facebookアプリは自分だけではなく、友達の個人情報も持って行くものもあります Facebookに慣れてない人を狙う悪質なアプリは後を絶ちません。 自分自身に降りかかるものであれば「やっちゃったね」で済む事もありますが、悪質なものは本人だけでなくその友達の個人情報まで盗んでいきます。自分の問題だけで終わらないので設定は必ずやっておきましょう。 確認時に「この情報いただきますよ」って出るのですが、そういうのをちゃんと見てる人は少ないですよね。 診断アプリとか何も知らずにやってる人は特に注意が必要です。 自分の友人の個人情報を悪質な業者に献上してる状態になってるかもしれません。 迷惑かかってしまうなんて想像もしませんよね。日常で友達の連絡先を知らない人に
話しづらい内容だからこそちゃんと契約したい Web制作業界のお金の話はなかなか難しいもの。 制作工程が他の業種の人から見えにくい分、もめる事はゼロとは言い切れません。 世の中には「まったく悪気なくとりあえず値切る」人はたくさんいます。 出来上がった製品を右から左へ売ってるわけではなく、サービスとしての時間対価や付加価値を売ってるのですが、誰もが理解してくれるかはまた別の問題。 契約内容や契約時の説明や書類が大事になってきます。 Webという業種の性質上、手をいれようと思えばいくらでも手をいれられますが、その加減を明示しておかないとただの奉仕作業になってしまいます。 「なかなかしにくいお金の話」はしっかりと事前でするべきだなと強く認識しました。 この本には契約についてだけでなく、そのまわりの心構え的なところにも事例を交えて触れてるので、リアルに理解しやすいのでは無いでしょうか? デザイナーは
WordPressのテーマ作成する際は自作のベーステーマを用意しています。 ちょっと前からCSSフレームワークであるBootstrap3を導入しました。(それまではBootstrap2.3) Bootstrap導入の理由 常に各端末で検証出来ないのと、Chromeの開発ツールでは大丈夫でも実機だと表示がおかしいなんて事が起きると修正に非常に手間や時間がかかってしまいます。 Bootstrapを導入することでそこが回避できるのは個人的には非常に大きいです。 Bootstrap導入のメリットとデメリット 導入によって良い事もありますが、悪い事ももちろんあります。
海外のサービスやらアプリやらプラグイン買ったりとかでPaypalはすごく便利。 iPhone用のアプリもあるので設定してます。 ある日身に覚えの無い請求が来ました。 Facebook名義で連続で請求が。(※画像は取り消し後のもの。) あびるさんのこの記事の事がふと浮かんであわてて確認。 facebookから50万円くらい不正請求がきた場合の対応まとめ どうやら違うケースのようでしたが怖いのでパスワードなどの再設定。 メールアカウントのパスワード自体も念のため変更。 この請求は身に覚えないよーって設定したらすぐに払い戻しもしてくれました。 変更後もアカウント制限中のままだったのでサポートに電話しました。 サポートは日本語でとっても丁寧。 ログインしてからキーコードみたいなもので照合したりするので、本題に行くまでも非常にスムーズ。 接続元が怪しいと認定されてたようでそれも無事回復。 こんな事も
管理画面でも表面でも使えるTo Do リスト シンプルなタスクリストが使えるプラグイン。 管理画面内での利用に限らず、ショートコードで表画面でも表示可能です。 ログインユーザーにのみ表示したり、一般ユーザーにも表示したりも可能です。 カテゴリーで管理する事も可能です。 タスク追加・表示も簡単 管理画面もシンプルです。 アクティブになってるリストのチェックボックスをチェックすると完了となります。 下の入力欄ですぐに追加できます。 設定画面はこのような感じ。 カテゴリー使う?期限表示する?をはい・いいえで選ぶ方式。 誰が書き込み・削除できるかなんて設定も出来ます。 表面に表示 固定ページに下記のショートコードで記述してみました。 [todoadmin title="My To-Do List" deadline=1 categories=1] サイドバーのウィジェットに設定・表示した場合はこの
Windows8のメトロUIあたりから「フラットデザイン」という言葉を良く耳にするようになった人も多いと思います。 iOS7にも取り入れられるのでWeb制作界隈では聞かない日が無いぐらいですね。 影付ボタンや立体的なボタンが求められてた時代 Webデザインの世界では長い間、影付ボタンが主流でした。あまりPCとか触ってない人でもすぐに認識できるからです。 (ヘビーユーザーが2chみたいなUIでも普通に使えるのは慣れているから) 誰にでもわかりやすいナビゲーションを考える上で、リアリティのある立体的な表現は不可欠でした。 スマホやタブレットの出現により、Webサイトなどの閲覧環境が大きく変化しています。 Windowsなんたらでインターネット利用者が爆発的に増えたような重要な出来事だと思っています。 そしてここ1〜2年でWeb制作は大きく変わると思っています。 一般ユーザーがWebサイトを閲覧
お客さんに納品する際に管理画面にマニュアルなど埋め込みたい事ってありますよね。 functions.phpに記述する事で、独自のダッシュボードウィジェットの追加が可能です。 ; html-script: false ] //オリジナルダッシュボードウィジェットを追加する function example_dashboard_widget_function() { echo '<iframe width="640" height="480" src="http://www.youtube.com/embed/2axsFn5o4as?rel=0" frameborder="0" allowfullscreen></iframe><br /> 更新方法は<a hre
2016年2月17日追記 現在はMisocaに完全移行しました。 MIsocaには請求書作成に必要な一通りの機能があり、どんどん便利にもなってるのでオススメです。 定期的な請求などを自動で作成出来るため、請求し忘れなどがなくなるのがありがたいところです。 正直、請求書とかの管理発行はあまり得意ではありません。 Windows時代はExcel、Macに移行してからはNumbersを使ってました。 この手のアプリをちゃんと使った事は無かったのですが、「Totals」というアプリが良い感じだったのでご紹介。 「Totals」はMac用の単体アプリです。 インターフェースはこのような感じ。 取引先や件名を設定し、ドラッグ&ドロップで商品項目などを追加していきます。 出来上がったらプレビュー(demo用なので取引先など入力してません) どのように表示されるのかが確認できます。デフォルトでもシンプルで
素のPDFデータはとんでもなく重くなる場合がある イラストレーターなどで印刷用のデータをそのままPDF保存すると簡単に数十MBのデータサイズになってしまいます。 変換後、容量をチェック。 上記だと71MB。 Web上でとても公開出来るようなデータ容量じゃないですね。 Adobe Acrobatを使って簡単に圧縮が可能です。 やり方はとても簡単です。
WindowsではXAMPPを使ってました。Macに移行してからはMAMPを利用してます。 ローカルにインストールしたWordPressの更新やプラグインインストールの際にFTP情報の入力を求められて困ってました。 下記の方法で回避できました。 WordPressをインストールしたディレクトリのwp-congfig.phpファイルの末尾に下記を追加。
Facebook上で人の名前などでリンク付きで返信したりする方法はすごく簡単で、半角の@の後に名前を入れるだけです。 図のように候補が出てきます。漢字でも可能です。 本人にも通知が行くのでちゃんと返信として読んでもらえます(設定次第ですが) リンクがうまくいかない場合は半角スペースを入れてあげればうまくいきます。 名前だけでなくページにもリンクできます。 苗字だけでリンクさせたい人は、一回フルネームで入れた後に名前部分を削除するだけです。 Facebook
Sublime Text 2 でWordPressのテーマ制作してます。 CSSは Codekit を利用してSCSS(Sass)で書いています。 SCSSの設定(config.rb)は初期だと下記のようになってます。 http_path = "/" css_dir = "css" sass_dir = "sass" images_dir = "img" javascripts_dir = "js" output_style = :nested environment = :development color_output = false
KDDIウェブコミュニケーションさんで行われたCSS Nite「After Dark」、 Coda 2 と Sublime Text 2 のお話。 Web制作の工程を大きく変えてくれそうなアプリのお話なのでとても楽しみにしてました。 たにぐちさんのお話、いつもながらとてもわかりやすいです。 デモも入るとよりわかりやすくて良いですね〜。 次にこもりさんのお話。 パッケージでカスタマイズされたSublime Text 2 はとても快適そう。 こもりさんもデモを交えながらでとってもイメージがつかみやすいです。 以前たにぐちさんのお話を聞いて制作環境を変える決意をしながらCoda2を導入し、さらにSublime Textも導入という流れ。現在はSublime Text 2をメインで使いながらCoda2やDreamweaverを補助的に使う感じです。 そういえばWindowsで作業してた時にNote
レスポンシブWebデザインのサイトが多くなってきましたね。 テーマ作れる人には問題ないのですが、テーマ触れない人にとってはAdSenseなどのバナーをPCとモバイルで分けたりするのがやりにくい。 てなわけで PCとスマホで表示を別々にするウィジェットプラグイン作ってみました。 ダウンロードしてプラグインの新規追加>アップロード>有効化するとウィジェットを使えるようになります。 ウィジェットエリアに下記のウィジェットが表示されます。 サイドバーウィジェットエリアなどにドラッグすると下記のように表示されます。 後はバナーのソースコードなんかを貼り付ければOK 実際はこんな感じに表示されます。 PCにだけ表示したいなんて場合はスマホ表示用に入力しなければOKです。 ※仕様上iPadもスマホとして認識されますのでその辺はご了承ください。 WordPressのウィジェット間の余白を調整できるウィジェ
ウィジェットに画像バナーを貼れるプラグイン(Image Widget)が便利で使ってるのですが、バナーを複数貼る際にウィジェット間の余白を一部だけ調整したい時がちょいちょいあります。 今まではテキストウィジェットに直接タグを書いて対応してましたがクライアント用に用意するのであればタグを書かなくても良いようにしたい。 お勉強もかねてウィジェットを自作してみました。 margin-bottomを挿入するだけ(数値のみ自分で入力)というシンプルなものです。 ▼プラグインを有効化 ▼ウィジェットが現れます。 ▼サイドバーなどに配置するとこのような感じになります。 数字を入力するだけ。 タグを書かなくて良いってのは大きいんですよね。 ショートコードも素人から見ればタグみたいなものなので。 数字以外は入力させないようにしたり、px以外のemなんかも選べるようになれば良いなと思う人は改造お願いします。
ページのテンプレートファイルをフォルダにまとめられるようです。 ※下記でも紹介されてます。 What’s New in WordPress 3.4 Better Organization for Page Templates If you ever worked on a complex site, you will find yourself creating a lot of custom page templates. Up until now, all page template files had to stay inside the theme folder along with all other files. This can get really clunky. For the sake of organization, you can now have a /pages
CPIのシェアードプラン(共用サーバー)でWordPressをインストールする際に気をつけたい事。 WordPressを手動インストールしたら日本語入力が保存されませんでした。 MySQLの文字コードもutf-8なのに何でだろうと思ってましたが、どうにも原因がわかりません。 全て削除してコントロールパネルのCMSインストーラーからインストールしたら一発でOK。 以前は第一階層にインストール出来なかったような…?変わったのかな? .htaccessとwp-config.php意外に php.iniを置いておかなきゃダメなようです。 CPIの共用サーバーは、メディアアップロードの可能サイズが2MBしかありません。 これではちょっと不便すぎるのでphp.iniでファイルアップロードの容量を増やします。 php.iniのデフォルトはこれ 下記を付けたして保存します。
8月1日にKDDIウェブコミュニケーションズさんで行われた Web制作を効率化して、クリエイティブに専念しよう~WordPress編~のスライドを下記にアップしました。 セッション: WordPressを使ったWeb制作効率化のためのTips&Tools 後藤賢司氏 よつばデザイン WordPressでのSmartRelease活用法 阿部正幸氏 KDDIウェブコミュニケーションズ SmartReleaseプロダクトマネージャー
コワーキングスペース恵比寿さんの場所をお借りして、「結果を出すWebデザインの考え方」勉強会を開催しました。 ※タイトルは中畑さんに名付けていただきました。 技術的なノウハウは共有されてますが、デザインの考え方や俯瞰で見ながらのサイトの作り方などの情報はあまり見かけないのでやってみました。 専門的な技術もあるにこした事はありませんが、デザインに大事な「考え方」をしっかりと意識していただければ誰しもある程度のデザインは出来るようになると思っています。 上記のスライドについてお話した後に、打ち合わせで実際に行われるようなやりとりと、実際にデザイナーや制作会社はどう考えて提案しているかを解説しながらその場でサムネイル(絵コンテ)を描かせていただきました。 個人的に改善策を一度に数サイトに対しておこなうような事はなかったので、とても良い刺激になりました(疲れました)。 ご参加いただいた皆さん、あり
次のページ
このページを最初にブックマークしてみませんか?
『yotsuba-d.com – yotsuba-d.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く