こんにちは！霙(@xxmiz0rexx)です！ 2015年ももう終わろうとしている時に、遅ればせながらやっとデザインツールにSketchを導入してみました。 まだインストールして1週間ほどなんですが、入れて良かったという感想しかないです…。爆速で仕事が終わっていくやんけ、、、。そんなわけで今年最後の記事は、今年最後に手に入れたデザインツール『Sketch』をご紹介させてもらおうと思います。もしアプリをデザインする人でまだ使っていない人がいたら参考にしてみてください。Webデザインにも使えますが、やはりアプリデザインにこそ真価を発揮すると思います。 目次 Sketchを使って感動したこと 取り急ぎ入れたSketchプラグイン 気になっているプラグイン（未使用） これだけは覚えておきたいSketchのショートカットキー さいごに Sketchを使って感動したこと まだ使っていない人からしたら、

画像：http://girlydrop.com/girls/1315 こんにちは！みぞれ(@xxmiz0rexx)です。 WordPressが吐き出すデフォルトのRSSではSmart Newsなどのサービスできちんと表示できない場合があるようで、 自分で少しカスタマイズする必要があったので具体的に何をしたのかメモを残しておきます。 Smart Newsに限らず、WordPressのRSSをカスタマイズしたい人には参考になると思います。 やること テーマディレクトリにRSSテンプレートを作る functions.phpでRSSテンプレートを指定する RSSの中身をカスタマイズする rss要素の開始タグに追記 コピーライト・ロゴURLの設定 記事サムネイル表記 フィードの確認(SmartFormat Validator) 1.テーマディレクトリにRSSテンプレートを作る まずはRSSのテンプレ

こんにちは！相変わらずSublime Textが大好きな霙(@xxmiz0rexx)です。最近ローカルで保存したファイルを自動でアップロードできるパッケージを入れてみたので使い方をご紹介したいと思います。 便利パッケージ『SFTP』 なんともシンプルな名前ですが、こちらはプロジェクトのディレクトリにあらかじめコンフィグファイルを設定しておくだけで、ファイルを保存した瞬間にサーバーに自動アップロードしてくれるパッケージでございます。 『SFTP』導入方法 わたしが行った設定をご紹介します。普通の環境ならこれで問題ないはず。 1.Package Controlでインストール Package Controlを使って簡単にインストールできます。 ⌘+Shift+Pを押してPackage Controlの入力欄を表示させ、SFTPと入力しましょう。 ※まだPackage Controlをインストール

寒い冬が終わり、ついに花で溢れる春がやってきました！ ワクテカしながら春に関するデザインや素材を集めたので、今日はそれをまとめてご紹介したいと思います。 春デザインの参考画像 バナー・メインビジュアルなどで、春っぽいあしらいのものを集めてみました。 コードアワード コードアワード ピンクのベタ塗り背景に桜の花びらを散らしています。今をときめくフラットな感じの仕上がり。 minne 【締切りました！】「minneマルシェ in 門司港グランマーケット2015春」出展作家さま大募集！ | ハンドメイドマーケットminneお知らせブログ イラスト内に桜の木と花びらを配置したデザイン。春カラーの「グリーン×ピンク」とマルシェ（フランス）カラー「ブルー×レッド×ホワイト」が絶妙にマッチしています。 脱毛なら脱毛サロンのエピレ｜epiler【公式】 脱毛なら脱毛サロンのエピレ｜epiler【公式】 切

ログイン画面のロゴ変更 まずはおなじみのカスタマイズから。 WordPressロゴをサイトのロゴに変更します。複数のメディアを運営している時などに判別しやすいです。 functions.php内 //ログイン画面のロゴ変更 function login_logo() { echo '<style type="text/css"> #login h1 a { background: url('.get_template_directory_uri().'/images/login_logo.png) no-repeat; width: 320px; height: 70px; background-size:100% auto; } </style>'; } add_action('login_head', 'login_logo');

Webサイトにドロップダウンメニューを作る際、親メニューの横に三角(▼)アイコンなどを表示して、 サブメニューがあることがひと目で分かると便利ですよね。 さらに、そのサブメニューを表示している時は、アイコンの向きを上向き(▲)に変えたほうが矛盾がないので、 今回はそれをCSS3のアニメーションと回転を使ってクルッとさせる方法を試してみましたφ(*’д’* )ﾒﾓﾒﾓ。 矢印の向きが切り替わるドロップダウンメニューの作り方 まずはデモ画面です。こんな感じになりました。地味だし今更だけど、このクルンとした動きがやりたかったんです。 今回は勉強がてらアイコンをSVGコードで表示してみましたが、ふつうの画像でもOKです。 記述法 html <ul class="dropdown"><li>DropDown <svg id="arrow" width="16" height="16" viewBox

こんにちは！！霙(@xxmiz0rexx)です！この記事はSublime Text Advent Calendar 2014 – Adventar 4日目の記事です。 何を書こうか迷ったんですが、技術系とかおすすめパッケージとかは皆書くだろうなーと思って、私はおもいきってSublime Textのアイコンを作ってみました！ もちろん.icnsファイルも作りましたので実際にお使いいただけます。 Macの方限定になってしまいますが、是非ダウンロードして使ってください(*´∨`*) 私とSublime Text 出会ってから丸2年が経ちました。 私は皆さんのようにそんなに沢山のパッケージを使ったりはしていないのですが、 おもにSublime Textのコードの見やすさ、編集のしやすさに惚れ込んで二年間ほんとうに毎日使ってきましたｗ 仲間内の勉強会でSou-Labさん、kojika17さんに教えて

こんにちは、霙(@xxmiz0rexx)です。 字下げ（インデント、indentation）とは、文章を書く際に行頭の位置を周りの文章よりも下げることである。 （中略） 日本語を含めた多くの言語では、新しい段落を始める際に最初の行を字下げする習慣がある。 引用元：字下げ – Wikipedia この字下げ。 複数の人で運営しているサイトの場合、最初にしっかり打ち合わせておかないと、 字下げする人としない人が出てきて地獄絵図になります。 今回はWordPressの記事一覧で抜粋文を表示する場合に、 字下げしてある記事としてない記事で文章の開始位置がバラバラで死にたくなったのでPHPで何とかしてみました。 通常はこれを使って抜粋文を出力すると思います。 ただこれをこのまま使うと前述のとおり地獄絵図になったので少し手を加えました。 ちなみに<?php the_excerpt(); ?>とは、55

背景を透過したpsdやpngをIllustratorに配置し、 印刷をすると上記の画像のように背景に薄く色がついてしまう事がありますよね。 ググッてみて解決方法は分かったのですが、 毎回やるのも面倒なので、ワンクリックで解決できるようにphotoshopのアクションファイルを作成しました。 同じ症状で困ることがあったら使ってみてください:) 解決方法 まずはひととおりご説明を。 背景を透過させたいオブジェクトにクリッピングパスを作成してあげれば良いみたいです。 私はこれで解決しましたが、 解決しない場合もありえますので、ご了承ください。 以下が手順です。（一番下にアクションファイルのダウンロードがあります） ①Photoshopにて、対象の選択範囲をとる [レイヤーパレット]にてサムネイルをCtrl + クリックし、選択範囲をとります。 ②作業用パスを作成 ウィンドウ-パスで[パスパレット

世の中にはこんなに便利なアプリがあったのかと驚きを隠せない霙(@xxmiz0rexx)です。なぜ今まで知らなかったのか！！なんて非効率な日常を送っていたのか！！悔やんでも悔やみきれないです本当に。。 というわけで、今日は存在を知って以来 毎日使ってしまっている超絶神アプリをご紹介させて頂きます:) スマートフォンサイトやアプリデザインに最適なのでマカーなあなたは是非チェックしてみてください！！ 『Skala Preview』とは Photoshopで開いているキャンバスをスマートフォンでリアルタイムプレビュー出来るアプリです！ 今までスマートフォン向けのデザインをする時は、Dropboxにpngを保存し、同期させ、実機で確認していた私。 同期にいちいち時間がかかり かなりストレスだったので、このアプリを知って大歓喜なのでございます♡ 公式サイト：Skala Preview, a Mac a