タグ

ブックマーク / webimemo.com (14)

  • 備忘録:Google Chromeリモートデスクトップの使い方(Mac編)

    こんにちは。霙(@xxmiz0rexx)です。自宅に置き去りにしてきたMBPが恋しくなったので、「そうだ!リモートしよう♡」と思ったら、まだ設定をしていなかったことを思い出して詰んでます(白目)。とりあえず先にChromeリモートの接続方法を調べていたので記事にまとめます。 必要なもの Chromeリモート接続を利用するには以下の3つが必要になります。 Google アカウント Chrome ブラウザ Chrome リモート デスクトップ(Chrome拡張機能) すべて揃ったら次にいきましょう。 設定・使い方 リモート接続を行うには、前述のとおり接続したいパソコン側で設定が必要です。とはいえ、ただ使うだけならそんなに難しいことはありません。以下に簡単に説明していきます。 PCをリモート接続できるようにするには 1.拡張機能でリモート接続を有効に まずは、リモートデスクトップのページ(chr

    備忘録:Google Chromeリモートデスクトップの使い方(Mac編)
  • Sublime Text初心者向け:覚えておけばとりあえずラクできるおすすめショートカットキーまとめ

    こんにちは、霙(@xxmiz0rexx)です。 立て続けに記事を書いてしまうほど愛してやまない魅力的なエディタ『Sublime Text』。 便利な機能は星の数ほどありますが、今回はこれだけ覚えておけばSublime Textの恩恵にあずかれるはず!!という、 私のオススメショートカットキーたちをご紹介したいと思います:) ※Mac版です 覚えておきたいショートカットキー とりあえず一番オススメの3つをご紹介。とっておきの便利な子たちがいます。 私がSublime Textを使う理由の最たるものがこれで、もっと言うとこれがあるから使っていますw みぞれが選ぶ最も便利なショートカットキー3個 入力コマンド 結果

    Sublime Text初心者向け:覚えておけばとりあえずラクできるおすすめショートカットキーまとめ
  • [WordPress]稼働中のテーマに手を加えたい時に!囲った部分がログインユーザにしか見えなくなるテンプレートタグ

    こんにちは!霙(@xxmiz0rexx)です。WordPressでテーマに手を加える時、大きい変更であればテストサイトやローカルなどで試すのですが、 ほんのちょこっと軽めの変更をしたい時っていちいち面倒なんですよね。。 そんな時に私が愛用しているテンプレートタグがあるのですが、毎回記述方法をど忘れするのでいい加減記事にしますw 以前「番環境でOK!指定したレベルのログインユーザーだけにテーマを反映出来るプラグイン『Theme Test Drive』」という記事でご紹介したテスト用のテーマを表示するプラグインとは違い、 こちらは今まさに番環境で稼働しているテーマでログインユーザにしか見えないスペースを作ることが可能です。 記述方法

    [WordPress]稼働中のテーマに手を加えたい時に!囲った部分がログインユーザにしか見えなくなるテンプレートタグ
    mimosafa
    mimosafa 2014/02/13
  • クライアント向けにも自分向けにも便利。投稿画面のテキストエリア上部に思い通りの『クイックタグ』を追加する方法

    エバーノートに書いておくとかアプリを使うとかいくらでも方法はあるというのに、手打ちで書いてました。なんという無駄な時間…w 記述方法 エバーノートやアプリだとそれを起動する手間があるので、やはり投稿画面上にボタンがあるのが一番らくちん。functions.phpに以下のコードを記述すると、ワンクリックで好きなタグを好きな形式で挿入することができちゃいます。例として先ほどのdivやら何やらをクイックタグとして登録してみます。 functhions.php内 <?php //投稿画面にクイックタグを追加 function add_my_quicktag() { ?> <script type="text/javascript"> QTags.addButton('quick_code', 'コード', '<div class="code">\n<h5>テーマ内</h5>\n<pre><code

    クライアント向けにも自分向けにも便利。投稿画面のテキストエリア上部に思い通りの『クイックタグ』を追加する方法
  • [報告]Chrome即反映が魅力の快適テキストエディタ『Adobe Brackets』がなかなか良い感じだったよ

    先日、勉強会でAdobe Bracketsをはじめて触ってきました! 私はST2に恋している身なのでそこまで興味はなかったのですgげふんげふん!これ、使ってみたらなかなか良かったのですよ…! なので、今日はそこで学んできたAdobe Bracketsの魅力と、コーダー必須アイテムであるEmmet(Zen-Coding)のインストール方法を皆さんにご紹介したいと思います!! というわけで、@stocker_jpさんがオープンされた教室『Stocker.jp / Space 』にて行われた@glatyouさんのAdobe Brackets勉強会にいってきました。 こういう勉強会に参加して、アプリケーションに触れてみるのって大事ですねー。ST2の時も触るまで微塵も興味なかったなぁ…w Adobe Bracketsとは Adobeから出ている無料のテキストエディタです。CCに加入している必要はなく

    [報告]Chrome即反映が魅力の快適テキストエディタ『Adobe Brackets』がなかなか良い感じだったよ
  • ヌルヌルの秘訣はCSS!Googleスマホ版で採用されている使い心地のよいスライドメニューを再現した『jSlideMenu』

    以前『スマホサイトにおすすめ。jQueryプラグイン『PageSlide』を使ってFacebook風メニューを再現してみました 』という記事を書きましたが、今回は『Qiita [キータ] – プログラマの技術情報共有サービス 』にてGoogleでも採用されているCSS3のアニメーションを使ったスライドメニューというものを発見したのでご紹介します。 jQueryプラグイン『jSlideMenu』 なんでも作者の方はGoogle先生のソースコードを調査し、あのヌルヌル動くスライド部分のアニメーションがJSではなく実はCSS3のtranslateで行われていることを突き止めたんだとか。 CSSGoogleから学ぶ ヌルヌルサクサクなスライドメニュー – Qiita [キータ] スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきや

    ヌルヌルの秘訣はCSS!Googleスマホ版で採用されている使い心地のよいスライドメニューを再現した『jSlideMenu』
  • [素材有]CSS+画像で作るスマートフォン向けラジオボタン&チェックボックス

    こんにちは、霙(@xxmiz0rexx)です。 漂う今更感の中、スマートフォンでタップしやすい形のラジオボタンとチェックボックスを作る機会があったのでメモとして残しておきます。 ON/OFFの画像も作ったので、もし使いたい人がいたらご自由にダウンロードしてくださいませ :) 今回目指したのはこんなイメージ。 デフォルトのチェックボックス&ラジオボタンを使ってみた結果、タップ範囲が狭く選択しづらかったので iOSアプリのように押しやすいUIにしたいと思い、CSS&画像で作ってみました。 これなら横一列がタップ範囲なので不器用なわたしでも押し間違いをしたり「何これ押せない…!」なんてことが発生しにくく、非常に快適に使うことが出来ました♪ html <form id="infoForm"> <fieldset> <legend>Pray for rain</legend> <ul class="

    [素材有]CSS+画像で作るスマートフォン向けラジオボタン&チェックボックス
  • アプリデザインの参考になるギャラリーサイト+クオリティを格上げできるセンスのいい素材配布サイトの紹介

    最近、会社でも個人でもアプリの制作に関わることが徐々に増えてきた霙(@xxmiz0rexx)です。 勉強のため、そしていざ制作!となった時の強い味方をメモしておきたいと思います。 まずはインプットから。アプリのデザインはWEBデザインとはまた違うものなので、時間のある時にギャラリーサイトを眺めることは引き出しを増やすのにとても大切なことだと思います。 Mobile Patterns 画面の種類ごとに分けられているのでとても見やすいです。 アプリデザインは全体を見たいというよりはフィード画面の参考画像が欲しい!などと具体的な要望が多いのでありがたいですね。 iOS Mobile Patterns Library こちらも画面の種類ごとに分けられております。アプリのギャラリーはこういうモノなのかな。WEBデザインだとパーツごとに分けられてるのが多いですよね! こちらは拡大レンズがついているので

    アプリデザインの参考になるギャラリーサイト+クオリティを格上げできるセンスのいい素材配布サイトの紹介
  • アイコンフォントの欠点である意味不明な文字列をリガチャ(合字)で解決したWEBフォント『Ligature Symbols』

    こんにちは、霙(@xxmiz0rexx)です。 興味はあったけれどなかなか手が伸びなかったアイコンフォント。 そんな私をやっと使う気にさせてくれた素晴らしい発想のフォントに出会ったのでご紹介いたします! そもそもアイコンフォントとは アルファベット1文字1文字にアイコンが割り当てられたフォントで、例えばスマートフォンサイトの製作をする時 画像でアイコンを用意する場合は通常用とRetina対応用で2サイズ用意しなければならないところを フォントであれば読み込んでCSSを設定するだけでOKという・・・面倒くさがりの私にはRetina対応の救世主とも思える存在です!! フォント=ベクターデータなので大きさ自由自在!解像度も関係なし!なのです :) しかしそんなアイコンフォントにも欠点はあり、アイコンを表示させるためにソースに意味のないアルファベットを書かなければならないのが気になるところでした。

    アイコンフォントの欠点である意味不明な文字列をリガチャ(合字)で解決したWEBフォント『Ligature Symbols』
  • メインマシンをWindowsからMacにした時に教えてもらった「Macではこれできないの?」→「できるよ」Tips

    2011年7月にMacBook Airを購入して約1年半。 職場でもメインPCWindowsからMacにして頂けたこともあって 段々と扱いに慣れてきた霙(@xxmiz0rexx)です。 今回はそんな私の「Windowsでできたアレ、Macではできないの??」 という購入当初の疑問とその答えをまとめます。 まだMacに慣れていない人、もしくはこれから購入を考えている人はチェックしてみてください! 1.保存しますか?「はい」「いいえ」をキーボードで WindowsではYとNでできたアレ。Macではどちらのキーを押してもうんともすんとも言いません。 おまけにタブキーを押しても無反応。 解決法 Macにもショートカットキーがありました! 保存しない→⌘D キャンセル→esc 保存する→return これずっと悩んでいたので解決した時のスッキリ感がやばかったw 例えるなら「スゲーッ 爽やかな気分だ

    メインマシンをWindowsからMacにした時に教えてもらった「Macではこれできないの?」→「できるよ」Tips
    mimosafa
    mimosafa 2012/12/03
  • 恋する速度を爆速化。Sublime TextでZen-Codingを使用する際の設定メモ

    先日「恋に落ちるエディタ」Sublime Textの勉強会に参加してきた霙(@xxmiz0rexx)です。 エディタの便利さ、優雅さ、魅力などを語るのは別の機会にするとして、 今回はそのSublime Textで、爆速コーディング用プラグイン「Zen-Coding」先生を使えるようにする設定方法を学んできましたので、備忘録もかねて記事にしたいとおもいます。これから使ってみようと思っている方は是非! Sublime TextにZen-Codingプラグインを入れる手順 他のアプリみたいに設定画面で操作できないので変な感じですが、やってしまえば意外とあっさり終わります。 1.Sublime Textをダウンロードする まずはSublime Textがなくては始まりませんね。 公式サイトに行ってダウンロード、そしてパソコンにインストールしましょう! 参考:Sublime Text: The te

    恋する速度を爆速化。Sublime TextでZen-Codingを使用する際の設定メモ
    mimosafa
    mimosafa 2012/11/08
  • アプリレビューサイトとかに使えそう。カスタムフィールドに入れたURLをQRコードに変換させる方法。

    スマートフォンアプリの紹介記事などで、ダウンロード用のQRコードが表示されているとそのまま端末からアプリをダウンロードできて便利なわけですが、APIとカスタムフィールドを使ったら思っていたよりも簡単にその仕組みを作ることができました。 参考にした記事など 何だかしばらくWordPressを触っていなかったら、もはや初対面みたいな、よそよそしい感じになってしまいまして、 WordPressで何が出来るのかまったく分からない記憶喪失状態になってしまったので、まずはひたすらググるところから始めましたw そこで見つけたのが以下の記事。 お手軽WordPress Tips:URLやサイズを指定出来るQRコードをショートコードで作れるようにする – かちびと.net ご質問頂いたのでついでに記事にします。 WordPressでURLとかサイズを指定出来る QRコードをショートコードで作成したい、 とい

    アプリレビューサイトとかに使えそう。カスタムフィールドに入れたURLをQRコードに変換させる方法。
    mimosafa
    mimosafa 2012/08/29
  • WordPress管理画面にオリジナルメニューを追加した時の手順メモ

    前回もちらっとメモしたんですが、 もっと具体的な内容も覚えておきたいので改めて実際のコードとともに手順をメモしたいと思います。 オリジナルの管理画面を用意しておくと、クライアントさんがサイトの更新を行う場合に安心して更新をお任せできますw ゴールはこれ。 不要なダッシュボードウィジェット、左メニューなどをすべて非表示にし、 オリジナルで用意したヘッダー&メニューを差し込みます。 デフォルトの管理画面は高機能な分、メニューがずらーーーっと並んでおり WEBに詳しくない方にとっては何が何だか分からないものですからね。 ここは一思いにばっさりと切り捨て、クライアント専用にやさしいシンプルな見た目の管理画面を用意してあげることで 大幅に間違いが減りますし、説明の時間も短縮できると考えてます。 ちなみに、上記キャプチャに表示されているメモは『Headache With Pictures』というプラグ

    WordPress管理画面にオリジナルメニューを追加した時の手順メモ
  • Illustrator備忘録:放射状ストライプの簡単な作り方とそれをPhotoshopのカスタムシェイプに登録する方法

    前回のIllustrator備忘録を喜んでくれた方がいらっしゃったので第二弾を書いてみます。 今回は放射状ストライプ(別名サンバースト)の簡単な作り方と、作った放射状ストライプをPhotoshopのカスタムシェイプに登録する方法です。 またもやイラレ使いさんには当たり前の技かと思われます。 放射状ストライプはよく見ると三角形がまるく並んでるだけのものですので、めちゃめちゃ簡単に作ることができます。 それをカスタムシェイプに登録しておけば、使いたいときにすぐ使えるのでとても便利です♪ ①Illustratorを開き、長方形ツールを選択 ②アートボード上でクリックし、今から作る長方形の幅と高さを指定します ③ペンツールを選択します ④ペンツールで長方形の底辺の中心をクリックし、アンカーポイントを追加する ペンツールがパス上に来ると+のマークが出るので、そのタイミングでクリックするとパス上にアン

    Illustrator備忘録:放射状ストライプの簡単な作り方とそれをPhotoshopのカスタムシェイプに登録する方法
  • 1