Photoshop CS6.0のデフォルトの黒い背景色をショートカットキーでグレーにする方法 Shift + F2キーで背景色黒色からグレー色に明るくできます。キーを押すたびに明るくなります。 Shift + F1キーで逆に暗くして行けます。 Illustrator CS6.0のデフォルトの背…

Alt+Ctrl+Shiftキーを同時に押しながら、Photoshopの起動アイコンを右クリックする。 ウインドウの一番上にある「開く」をクリック。 以上です。

もっと簡単にCSS3だけでステッチ画像を作り背景装飾する ちょっとした見出し程度でしたらPhotoshopを使わずともCSSで指定する方が簡単で早いです。 こんな感じになります。 手順 背景色を指定する 線を表示するためにborderを使わずにoutlineを使う outline…

デニム生地に文字アップリケ風の画像を作り、Wordpressのタイトルにする（使用ツール：Photoshop) このような感じの画像を作ります。 まず、デニム風の生地を作ります新規レイヤーを塗りつぶし-パターン-カスタムパターン-パターン2（デニム生地風）を選択 …

Photoshopでデニムを切りっ放し風にした画像を作る方法こういうのを作ります。 まず最初の手順：新規レイヤーを作り、編集-パターンで塗りつぶす。Photoshopに元々入っているパターンの中からデニム風を選ぶか、フリーのPhotoshop用パターンファイル（デニム…

少し余裕ができたのでWordpressにFaviconを設置します 作成手順 Favicon用画像を作成します。IllustratorかPhotoshopで16px×16px、32px×32px、48px×48pxサイズのpng透過ファイルにして保存します。今回はPhotoshopの「Cute Bear Photoshop Brush」ブラシでク…

Illustratorで正円から涙型を描きます 1.Shift＋楕円ツールで正円を描きます。 2.ツールからアンカーポイントの切り替えツールを出し、円の上の白い点、涙の先端になる部分をクリック 3.ダイレクト選択ツール（白矢印）でその点を涙を伸ばしたい方にプレスド…

Illustratorで描いた図形をパターンブラシ登録してさらに図形の描線状に配置します。 1. 円、角丸長方形、涙型、★など好みの図形を描きます。描いたらウインドウからブラシウインドウを開き、描いた図形をドラッグします。種類はパターンブラシ登録を選びま…

Facebookいいねボタンやその他もろもろSNSへのブックマークボタンを表示したくなりましたので、プラグインを入れてみました。 手順 プラグインの新規追加でWP Social Bookmarking Lightをインストール ダッシュボードの設定からWP Social Bookmarking Light…

content-single.phpを修正します。 content-single.php修正作業手順 content-single.phpの修正前のコード if ( '' != $tag_list ) { $utility_text = __( 'This entry was posted in %1$s and tagged %2$s by <a href="%6$s">%5$s</a>. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 'twentyeleven'…

Twenty Elevenではh1 class="entry-title"と指定されているタイトルが固定ページ、投稿ページ、カテゴリーページに表示されます トップページには「ホーム」というタイトルが表示されています。トップページに「ホーム」というタイトルが表示されている状態…

デフォルトのページャーは「→古い記事」で、総ページ数もわからないし、前後にどのくらい記事があるかもわからず不親切です。 これを解決するためにプラグインのWp-PageNaviを導入します。 Twenty ElevenへのWP-PageNavi導入手順 新規プラグイン検索してWp-P…

「→古い記事」「→新しい記事」の表示を消す 「→古い記事」「→新しい記事」の表示が残っていると何か変なので消します。function.phpから下記の記述を削除します。 すると消えます。削除するコード <h3 class="assistive-text"></h3> <div class="nav-previous">&larr;</span> Older posts', 'twentyeleve…

CSSを自分で書かずともWP PageNavi Styleを導入するとWp-PageNaviがスタイリッシュに表示されます。 WP PageNavi Style導入手順 新規プラグイン検索でWP PageNavi Styleを検索、有効化 ダッシュボードのPageNavi Styleでオプションを指定して設定を保存 Page…

content.phpから下記の記述を削除します。 <span class="sep"> | </span> <span class="comments-link">' . __( 'Leave a reply', 'twentyeleven' ) . '</span>', __( '<b>1<…</b>

デフォルトでは大きすぎるTwenty Elevenのh1のサイズデフォルトではなんと36pxに指定されていました。line-heightも48pxと非常に広いです。Twenty Elevenのh1のサイズ変更方法style.cssで.singular .entry-title {を見つけてfont-size、line-heightを変更し…

Twenty Elevenではデフォルトではカテゴリー別投稿記事ページは全文表示になります。これでは最初の記事を見ただけで力尽きて、その先の記事まで見てもらえない心配があります。 そこで、左側にサムネイル画像（小さい画像）、記事は途中までの省略表示で、…

meta情報の背景色をstyle.cssで変更します薄い背景色に薄い色のa色が重なるので読みにくいので変更したいと考えました。footerの背景色を変更するだけです。変更前 変更後 style.css footer{ background-color:#003366; /*#bbbから変更*/ この「だけ」に辿り…

wordpressプラグインのMeta SliderをTwenty Elevenテーマにインストール Meta Slider操作画面でスライドしたい画像を複数枚登録 Slide種類を選ぶ（Flex,Responsive,Nivo,Coinから選ぶ）今回はCoinが一番きれいに動くように見えたのでこちらを採用しました。 …

4/19(金）時点での進捗まとめ4月に入ってからWordpressでのポートフォリオ作りに取り組んできましたが、四苦八苦です。 まだ先生とみんなにレビューもしていません。（本来は一週間前の金曜にレビューするスケジュールだったが・・。） とてもお見せできる段…

さくらば整骨院のWEBサイトを公開しました花小金井・田無タワー近くのスポーツ外傷に強い整骨院 | さくらば整骨院

「HTML5+CSS3で作るiPhoneサイト」書籍のサンプルに沿って習作を作成しました。 ポイントはHTML5の正しい文書構造と、CSSおよびCSS3のアドバンストな使用法の実践です。 角丸 グラデーション 透過および擬似クラスによるclear:both的効果 Positionレイアウト…

忍者ホームページでのお名前ドットコム取得の独自ドメイン設定手順を書いておきます。 ※忍者側でもお名前側でもそれほど丁寧に説明されていないので、私は苦労しました。手順 お名前.comで独自ドメインを取得 忍者ホームページで独自ドメインを設定するため…

引き続き「スマートフォンサイトのためのHTML+CSS3(エ・ビスコム・テック・ラボ著）」に沿って習作です。 Chapter2のサンプルC、可変レイアウト＋固定レイアウトによるレスポンシブWEBデザインを作りました。 htmlはhtml5式で書いています。Ｌサイズ画面 Ｍ…

「スマートフォンサイトのためのHTML+CSS3(エ・ビスコム・テック・ラボ著）」に沿って習作しました Chapter2可変レイアウトによるレスポンシブWEBデザインhtml5+CSS3で可能になる表現 フォントにGoogle Web Fontが使える→英文フォントは使える幅が広がる met…

「スマートフォンサイトのためのHTML+CSS3(エ・ビスコム・テック・ラボ著）」に沿って習作しました Chapter2固定レイアウトによるレスポンシブWEBデザイン htmlからhtml5に書き換えにチャレンジしました。 div id="header"をheaderに書き換えた後、CSS側の#h…

レスポンシブデザインが登場した理由それはandroidの登場。あまりにも端末種類が多すぎるので、全てに対応するように分岐を書くことが不可能になったから。レスポンシブに取り組む際のポイントプロトタイプを作ること。 使いまわしできる「プロトタイプ」を…

HTML5リファレンス

HTML5とCSS3の技法を使うことで、表現、装飾の幅は拡がります。しかしブラウザによって対応状況に差があるため、使うポイントについては注意が必要です。意図したとおりに見えない状況でも重要な情報は伝わるように使いどころを工夫しないといけません。 属…

HTML5とCSS3を使うことで実現できる事 画像を使わずに背景に角丸を作れる 背景をグラデーションにできる 背景を透過にできる 背景の角度を調整できる before、afterの指定ができて、指定の前に（後に）何か置く事ができる 奇数番目、偶数番目に対して指定が…