WordPressでブログじゃないWebサイトを作るときのいろいろ（サンプル付き）
とても長い記事になってしまいましたが、WordPress を使って、コーポレートサイトのサンプルを作ってみました。WordPress はブログだけじゃなくて、色んな Webサイトが作れますよね！今回は、私が WordPress でサイトを作る時にやっていることをまとめてみました。 今までこのブログの中で、いろいろな WordPress の Tips を書いてきました。でも WordPress を使った Webサイトの作り方そのものは、今まで書いた事がありませんでした。そこで今回は、 WordPress を使ってブログじゃない Webサイトをまるごとひとつ作って、私なりの作り方をまとめてみました。 今回のサンプルサイトでは、WordPress の固定ページ機能はもちろん、カスタム投稿タイプやカスタムタクソノミー（カスタム分類）を使って作っています。 ページを表示する為に使っているテンプレート
カテゴリー別配色アイデア100
2017年6月30日 色彩 配色によってそのデザインの印象は大きく変わると思います。色は大切な要素のひとつですね！ということで、色の持つ印象別に配色アイデアをずらりと並べてみます。配色はおなじみ（？）のCOLOURloversから、「これは！」と思うものを選ばせて頂きました。素敵な配色がいっぱいのこのサイト、ぜひ覗いてみてください！また、今回紹介するのはあくまで一例ですので、自分なりにアレンジしてみるのも楽しいと思います。サイトの雰囲気にあう配色を探してみてください。 ↑私が10年以上利用している会計ソフト！ 配色に関するおすすめサイト COLOURlovers 色をテーマにしたコミュニティサイト、COLOURlovers。自分の考えた配色を登録したり、お気に入りの配色を保存しておくことができます。今回はこちらから配色アイデアを選びました。iPhoneアプリは「ColorSchemer」と
コーダーの為のFireworksスライス入門 | バシャログ。
iPhone 4S遣いが身の回りに着々と増えてますが、うらやましくなんかないんだからねっhakoishiです。 今回は、「あれ、今回はデザイン？」と見せかけてやはりコーディングネタ。 スライスって、コーダーが担当することが多いですよね。 けど、デザイナーほどグラフィックソフトに通じてなくて「もっと効率いいやり方があるんじゃないかなあー」なんてもどかしく思うこと、あるんじゃないですか？ そこで、突然ですがFireworks。 馴染みのない人も多いかもしれませんが、スライス機能がスッゴイんですよ！ 以下、普段Photoshopを使用している人向けに、Fireworksの便利なスライス機能をまとめました。 最初に。 まずは基本動作。 Photoshop同様、スライスツールでドラッグします。 …でも良いのですが、もっと楽な方法があります。 スライスを切りたいオブジェクトを全て選択 ⇒右クリックで「
Macbookのメモリを増設してみたよ！PCのメモリを交換する方法(CROSSBREED クロスブリード！)
最近のメモリの安さには驚愕しますね。一般的にはメモリを増設するとパソコンの動きが速くなると言われています。 あまりにも安いので僕が普段使っている、Macbook Proのメモリを買ってみました。 どのくらい安いかというと、 シリコンパワー ノート用 DDR3 1066Mhz SO-DIMM 204pin PC3-8500(楽天) DDR3 4GBが1,580円(送料込）！！！！！！ ちょっと前だったら全くありえない価格。笑いが止まりません。 というわけで、メモリ増設について書いてみようと思います。自分でメモリ交換する方法なんかも合わせて。 詳細は以下より 交換してみました。すると なんという事でしょう。 2枚とも替えて、お陰様でmacbook proのメモリが2GB→8GB。 購入して二年近く経っているmacbookですが、超絶快適になりました。生き返りました。アプリケーションやOSの起動
Dreamweaverのスニペットを使ってショートカットを設定 - ONE PERCENT DESIGN BLOG
きっかけは、hamashunさんのブログでエディタのショートカットでコードを出力する項目を見て「これいいなー。いいなー。」と思ったのですが、「でも、今更Dreamweaverから他に移行もできないしなー」と思いながら考えた結果。 Dreamweaverのスニペット機能という物を使うことにしました。 まずは、ファイルタブのスニペットタブをクリック。下記のようなファイルが展開されるかと思われます。 まずは、自分のショートカットを構築するフォルダを作成してください。 フォルダを右クリックし、新規スニペットを作成してください。 "前に挿入"はコードブロックの前構造、"後の挿入"は後構造になります。こちらは実際ショートカットを使えば実感できるので後々。さて、ここからショートカットの作成、先ほど作成したスニペット上を右クリックし、"キーボードショートカットの作成"を押してください。さて、まずはセットを
Illustrator CS3 キーボードショートカット 50｜DTP Transit
コマンドに割り当てられているキーボードショートカットを積極的に活用すると、飛躍的に作業効率が上がります。というより業務では必要不可欠といっていいでしょう。 Illustrator CS3において、個人的に使用頻度の高い50のキーボードショートカットを、A7 (74mm×105mm)サイズの一覧表にまとめてみました。 ils13-cs3_mac.pdf ils13-cs3_win.pdf キーボードショートカット一覧を貼って仕事をしてみてはいかがでしょうか せっかくキーボードショートカットを覚えていても、少しの間アプリケーションを使用しない期間があるだけですぐ忘れてしまうのは私だけでしょうか？ 私は仕事をするときに、自分がよく使う50のキーボードショートカットの一覧表を、A7サイズ (74mm×105mm)で作成して貼っておき、思い出しながら作業をします。 講義でアプリケーションソフトの案内
フォトショップショートカットリスト PhotoshopShortcutList
アドビフォトショップショートカットリスト AdobePhotoshopShortcutList byBSCverCS6.26（ビスク式ｗ （ショートカットリストは書き出せるのに何故かスタンプとかないんで作って見ました・・・現在CS6のショートカットも追加中 このページはフォトショップのショートカットを自分なりに纏めて覚えるときために作ったフォトショップの使い方・ショートカット集のページです。 一緒にショートカットの類似系を覚えると便利なのでわざと説明を重複させてます、たった数段下でも重複させていますｗ。 見やすい・見難い・ショートカットが足りない・こうしたら見やすくなるかも・等ありましたらツイッターでリプライでもください。 できるだけ修正いたします。 見やすいようにタグを調整しました。 MACの場合はCtrlをCommandに読み替えてください。 押したキーから何のショートカットかわかるコ
時短：覚えちゃえば便利なPhotoshopショートカット 40+
Photoshopのショートカットってどれくらい使ってますか？プロの方はショートカットばかりで数えきれない...という人も多いと思いますが、私が使っていて便利だと思うショートカットをまとめてみました。いざまとめようとすると、なかなか出てこないものですね ... 普段は手が勝手に動くっていうか ... 習慣って怖い X( わりとよく使って便利だなーと思う Photoshop のショートカットをまとめてみました。私は CS5 なので、他のバージョンでは使えないものもあるかもしれませんが …。記事中 Mac のキーボードの画像を使ってますけど、Windows の人は command = Ctrl キー、option = Alt キーが対応していると思います。 Photoshop を開きながら、いろいろ試してみてくださいね！ 1. 全画面表示 tab キー 大きな写真などを扱う時、全画面で表示した
Facebookのshare(シェア)ボタンをサイトやブログに設置する方法
このブログでもFacebookの「いいね！（like）」ボタンを設置する方法は書いたことがあるし、同じように「いいね！」の解説ページは他にもたくさんあるんだけど、各種「share（シェア）」ボタンのオプション設定の解説を日本語で書いてるページはあまり見あたらない。（現在はいいね！数をカウントしている「share+カウント数ボタン」の解説ページはある。） しかも「facebook share」でGoogle検索するとトップにでてくるShare on FacebookにアクセスするとなぜかLike Buttonの方にページ移動させられて、shareボタンのヘルプページが見つかりにくいという問題もある模様。というわけで「shareボタンの設定と設置方法」を書いてみた。ブログやサイトに設置するときに参考にどうぞ。 各種sahreボタンの解説 shareボタンも「いいね！」ボタンと同じようにヘルプペ
jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種
ベースとなるhtml 今回はテキストタイプなので文字列をリストで並るだけですね。 一部spanを入れた方が動作が安定することがあったので入れてます。javascriptのコードにspanを指定していなかったら外してください。 html <ul id="nav1"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">LINK</a></li> </ul> 1.マウスオーバーでスライドするボタン 単純に横にスライドするアニメーションは「marginLeft」を変化させます。 テキストの色はcssで変えてます。 このナビゲーションに限ってはliにspanを入れると安定して動作するっぽいです。 html <li><a href="
つまづきがちなiPhoneコーディングのTips（JS多め） | バシャログ。
来月はキャプテン・アメリカ見るし、気が付いたら年中アメコミ映画を見ているminamiです。 来月にはまた大きな発表がいろいろありそうなiPhone界隈ですが、iPhoneサイトのコーディングをする際につまづいてきたポイントを挙げてみました。 [HTML] input type="file"は使えない 画像をアップするコンテンツだからフォームに input type="file" を・・・と考えがちですが、iPhone版のSafariでは使用不可です。 [HTML] <meta name="viewport" content="user-scalable=no">が効かない 最近ハマったポイントです。ユーザーに画面の拡大をさせなくすることができるviewportのuser-scalableプロパティですが、本体のアクセシビリティ設定で「ズーム機能」をオンにしているとバッチリ拡大できてしまいま
iPhoneの使い方、設定方法、便利なTipsまとめ。 | AppBank
このページではiPhoneの使い方を解説した記事をまとめています。 最新のiOS 7に関する使い方はこちらからどうぞ→【iOS 7まとめ】デザインや使い心地が一新されたiOS 7の使い方まとめ！ 最近iPhoneを購入した方に必要であろう情報はもちろん、iPhoneを2年以上使っているという方でも、「これは知らなかった！」という情報も多く紹介しています。 4つの標準アプリ(電話、メール、Safari、iPod)の徹底解説はもちろん、他の標準アプリも詳しく解説しています。さらに、iPhoneでの文字入力の基本や覚えておくと便利なTipsも多く紹介していますよ。iPhoneを使っている全ての人にチェックして欲しいですね！ iPhoneをお使いのみなさんのお力になれれば、と思います。 「はじめてのiPhone」 iPhone買ったら最初に知りたいこと。ボタンの名称、操作方法（用語）、電話、文字入
【Dreamweaver】コードビューでよく使うショートカット | バシャログ。
BMW が開発している MINI ブランドの電動スクーターが気になって仕方がない sakai です。 なんと、キーが iPhone ですよ！ 今回は、Dreamweaver の“コードビュー”でコーディングをする時に便利なショートカットをご紹介します。 タグ挿入系 Ctrl+1(～6) = 見出しタグ（h1～h6）の挿入 Ctrl+Shift+P = 段落タグ（p）の挿入 Ctrl+Alt+T = テーブル（table）の挿入 Ctrl+Alt+I = 画像（img）の挿入 Ctrl+B = 強調（strong）の挿入 Ctrl+I = やや強調（em）の挿入 Shift+Enter = 改行（br）の挿入 このあたりは基本なので、Dreamweaver でコーディングをされている方ならご存知かと思います。 Shift+Space = 半角スペースを挿入（全角モードでも半角スペースが入る）
ウェブデザインをワンランクアップさせるデザインテクニック『奥行き』の使い方
あなたのウェブデザインをワンランクアップさせる『奥行き』を使いこなすための5つのデザインテクニックを紹介します。 Creating Depth in Web Design: 5 Design Tricks [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに リアリスティックなインターフェイス ラッピングとリボン 遠近法 オーバーラッピング シャドウ おわりに はじめに デザインに『奥行き』を与えると、ウェブサイトをユニークにし、ビジターに忘れがたい印象を与えることができます。それが抽象的な方法なものであっても、奥行きがリアリズムを与えます。グラフィックデザイン、ロゴ、ウェブデザインなどこういった付加的なリアリズムはあらゆるデザインにおいて、興味を引き起こすことができます。 また、奥行きを使うことで、特定のエレメントの強調をしたり、情報の正しい階層を作ることも可能です。フラッ
少しのjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする - かちびと.net
列全体がクリック可能で、Wikipediaに飛びます。セル内にアンカータグが含まれている場合はそちらが優先されます。Webサービスの料金プランなんかに使えそうでは。 jQuery( function($) { $('tbody tr[data-href]').addClass('clickable').click( function() { window.location = $(this).attr('data-href'); }).find('a').hover( function() { $(this).parents('tr').unbind('click'); }, function() { $(this).parents('tr').click( function() { window.location = $(this).attr('data-href'); }); });
サイトやブログの運営でよく使いそうな.htaccessの設定のまとめ
ウェブサイトやブログの運営でよく使いそうな便利な.htaccessの設定を紹介します。 こういうまとめは定期的にあがってきますが、やっぱり必要なのでシェアします。 10 useful .htaccess snippets to have in your toolbox [ad#ad-2] 下記は各ポイントを意訳したものです。 URLからwwwを削除 hotlinkingの防止 feedをfeedbunnerにリダイレクト カスタムエラーページ ダウンロードファイルの処理 PHPのエラーのログ URLからファイルの拡張子を削除 ディレクトリのファイルリストを見せない ファイルを圧縮して軽量化 文字コードの指定 URLからwwwを削除 SEOなどの理由で、URLからwwwを削除して使うことがあるかもしれません。このスニペットは、あなたのウェブサイトにwww付きでアクセスしてきてもwww無しに向
使い切れないマニキュアを封筒ののり付けに使うセキュリティ＆リサイクルTIPS | ライフハッカー・ジャパン
封筒を他人にこっそり開けられないように完ぺきに封をしたい時は、マニキュアを使ってみてください。「Reader's Digest」によると、マニキュアで封をすると、跡を残さずに開封できなくなるので、防犯にもいいそうです。 それに、封筒のノリ付けを舌でなめる必要もなくなるので、舌がザラリとする嫌な感じも味わわずに済みます。 男性であればわざわざ買わなくてはいけないかもしれませんが、女性ならマニキュアの1本や2本は大抵持っています。 そもそもマニキュアは使い切らないうちに使わなくなることも多いので、他人の要らなくなったマニキュアを封筒ののり付けようにもらうのも、ナイスなリサイクルだと思います。 濃い色のマニキュアだと色が封筒から透けて見えるかもしれないので、のり付けに使うのであれば、白や薄い色のマニキュアにした方がいいかもしれません。 38 Clever Uses for Nail Polish
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
わかばマークのMacの備忘録 : プレビュー.app で PDFファイル を編集する
Macのデスクトップカスタマイズの定番！『GeekTool』を使ってMacをギークっぽくカスタマイズ！｜男子ハック
ハードディスクの容量を空けたい人はDropboxのキャッシュを削除しよう : ライフハッカー［日本版］