searchカテゴリー選択
chevron_left

カテゴリーを選択しなおす

cancel
プロフィール
PROFILE

yuka-kさんのプロフィール

住所
未設定
出身
未設定

自由文未設定

ブログタイトル
ユカのサイト制作備忘録|Yuka-K's knowledge base
ブログURL
https://kabeto.net/
ブログ紹介文
Webデザイン、コーディング、WPカスタマイズなどウェブ系のお仕事と、DTPのお仕事をしています。その他にもいろんなことをしていますが、このサイトではウェブとデザインについて備忘を兼ねて情報まとめます。
更新頻度(1年)

34回 / 365日(平均0.7回/週)

ブログ村参加:2019/09/02

本日のランキング(IN)
読者になる

新機能の「ブログリーダー」を活用して、yuka-kさんの読者になりませんか?

ハンドル名
yuka-kさん
ブログタイトル
ユカのサイト制作備忘録|Yuka-K's knowledge base
更新頻度
34回 / 365日(平均0.7回/週)
読者になる
ユカのサイト制作備忘録|Yuka-K's knowledge base

yuka-kさんの新着記事

1件〜30件

  • Twitter:個別のツイートをサイトに埋め込もう

    Twitterの個別ツイートをサイトに埋め込む方法について、ステップごとに説明しますね。Twitterのタイムラインを埋め込むコードの取得方法は、こちらにまとめてあります。事前準備埋め込みコードを取得するTwitter ツイートのURLを用

  • Twitter:タイムラインをサイトに埋め込もう

    Twitterのタイムラインをサイトに埋め込む方法について、ステップごとに説明しますね。事前準備埋込コードを取得するTwitterのURLまたはTwitterユーザ名を用意しておきましょう。Twitter URLは、ココ↓Twitterユー

  • WordPress:TOPへ戻るボタンがreCAPTCHAとかぶっちゃった…を解決するプラグイン

    TOPへ戻るボタンがreCAPTCHAと重なっちゃった…を解決する 問題は、コレです。 reCAPTCHA v3 を導入するとセキュリティ シールとページ上部に戻るための「トップへ戻る」ボタンが重なってしまいます。 WordPressサイトなら、テーマ デフォルトの「トップへ戻る」を利用せず、「トップに戻る」ボタンをコントロールできるプラグインを使うことでこの問題が解決できますよ~。 TOPへ戻る

  • DreamWeaver:サイト バージョン管理のヒント♪【初心者向け DreamWeaver のいろは】

    初心者向け、【DreamWeaverのいろは】シリーズ第2回目。最初の2歩は、サイト データのバージョン管理について説明します。 公開中のウェブサイトにページを追加したり、過去にアップしたページの内容を更新したりする際は、現在公開中のウェブサイトデータを保存(アーカイブ)しておくことをおすすめします。 「更新したファイルをアップロードしたらウェブサイトの表示が崩れてしまった!」 ということは比較的

  • DreamWeaver:サイト情報を登録しよう!【初心者向け DreamWeaver のいろは】

    初心者向け、【DreamWeaverのいろは】シリーズ第1回目。最初の1歩は、DreamWeaver にサイト情報を登録しよう!です。 DreamWeaverとは DreamWeaverは、Adobe社が提供するHTML編集等に特化したオーサリング ソフトウェア(編集ソフト)です。htmlのタグや構文を熟知していれば特にDreamWeaverを使わなくてもtextエディタでガシガシ書いていくことも

  • Photoshop:画像の一部を自然にぼかす「グラデーション」と「ぼかし(レンズ)」の使い方

    自然なぼかしで奥行き感のある写真に加工してみよう ビフォーアフターは、これ。 もともときれいな写真ですが、写真の特定の部分に注目を集めたいときなど、カンタンな操作で奥行き感のある仕上がりに加工できますよ! 今回の加工は、「元画像の上にぼかし加工を加えた画像を重ねる」という方法です。 STEP 1: 画像を開き、レイヤーのコピーを作成する 画像を開いて、「背景」レイヤーの上で右クリックし、「レイヤー

  • Photoshop:斜めの面に画像をはめ込む!「遠近法ワープ」の使い方

    正面ではない面に画像やテキストをはめ込んでみるよ! ビフォー アフターはこれ↓ 使った素材写真はこれ。 白紙のノートと砂浜のボトルのきれいな写真。 STEP 1: 画像を張り付けて、遠近法ワープで変形する 貼り付け元の画像を開いて、はめ込む画像を貼り付けます。はめ込む画像のサイズを大まかに調整します。 はめ込む画像のレイヤーを選択した状態で、画面上部の[編集] > [遠近法ワープ] を選択します。

  • Photoshop:フォトショップでカンタンに曲面に画像を貼る!「ワープ」の使い方

    ノンブランドのビアグラスにロゴを貼ってみよう ビフォー アフターはこれ↓ STEP 1: ロゴのイラストレーターをフォトショップ画像に貼り付ける ロゴのaiデータをコピーして、フォトショップ画像にペーストします。 ペースト形式は「ピクセル」を選びます。 貼り付け後はサイズを調整しましょう。 下のサンプル画像では、ペーストしただけでも違和感は無いかもしれませんが、ちょっと工夫をしてみたいと思います。

  • コーディング:cssだけできれいな見出しを作る!シンプル編~

    画像無しでcssだけでキレイな見出しを作る! サンプル1:見出しの両端にシングルラインを配置する 見出しの両端に1本線を入れる。見出し文が長くなると、両端の線は見出し文の縦位置中央配置される 見出し文が短い場合の例: 見出しの両端にシングルラインを配置する 見出し文が長い場合の例: 見出しの両端にシングルラインを配置する 見出し文が長い場合 見出しの両端にシングルラインを配置する 見出し文が長い場

  • text-decoration : underline に不満足!下線にpaddingを設定したい!

    テキストに下線を付ける場合、css の text-decoration: underline を使うと文字と下線がくっついてしまって不満。 例えば、こんな感じ。 文字と下線の距離を調整するために、border-bottom を使おう! 仕上がりは、こんな感じ。 cssコードは以下の通り。 p_underline というクラスを設定し、 .p_underline { border-bottom:2p

  • vimeo動画をサイトやブログに埋め込むときのメモ ループ再生とかもね

    vimeo側の設定 vimeo動画の公開設定 vimeo動画をサイトやブログに埋め込む前にvimeo側で動画の公開設定をしましょう。 無料で利用できるベーシックメンバーシップの画面を示しながら説明します。 設定する項目は、「試聴できる人」、「動画の埋め込み場所」、「コメントできる人の範囲」の3項目です。 vimeo「ホーム」からサイトやブログに埋め込む動画を選択すると下の画面が表示されます。 左メ

  • 動画を圧縮する無料オンラインサイト VimeoやYouTubeにアップする前に使おう!

    動画圧縮: Online Video Converter サイトにアクセスして動画をアップロードしよう Online Video Converter V3.0 このサイトにアクセスすると下図の画面が表示されます。 右上(下図でEnglishと表示されている箇所)から、日本語を選択することもできます。 圧縮する動画をアップロードするには、下図赤枠の[CONVERT A VIDEO FILE]をクリッ

  • jpgをカンタンに高品質・高圧縮!クォリティもコントロール可

    JPEG圧縮:カンタンで高品質・高圧縮!しかも無料 使い方はカンタン 1. サイトにアクセスして画像をアップロード 画像のアップロード方法は2つ。 [アップロード]ボタンをクリックして、パソコンからファイルを選択します。 あるいは、「ファイルをここにドラッグ&ドロップしてください。」部分にパソコンのファイルをドラッグ&ドロップします。どちらでも同じなので、やりやすい方法で。 2. アップロード中と

  • ピクセルとミリを変換する

    画像サイズを正確に変換できる便利サイト:amanaimagesヘルプサイト ストックフォト老舗の(株)アマナさんのヘルプページが超便利なのでご紹介(というか備忘) できること ピクセルと解像度から使用サイズ(mm)を求める サイズ(mm)と解像度から必要なピクセル数を求める 紙サイズのpixcel / mm 早見表 使用用途別解像度の目安 新聞サイズの目安 以上

  • パソコンでスマホ画面表示を一括チェック!レスポンシブ デザイン チェック ツール

    スマホなど複数のモバイル端末のレスポンシブ表示を一括チェックできるChrome拡張機能「Responsive Viewer」の使い方です。同時スクロール、同時クリックなど便利な機能あり。ユーザーエージェントの追加も可能。レスポンシブ デザインのフロントエンドチェック作業時間を大幅ンに短縮できます。

  • Googleアカウント:複数のアカウントを切り替えて使おう!

    Googleアカウントを複数もっているかたは少なくないですよね。 仕事用とプライベート用を分けていたり。 スマートフォン取得時に、メインで使っているGoogleアカウントとは別に新規でGoogleアカウントを取得してしまったり。 すでに持っている複数のアカウントをPCやスマホに追加して、アカウントを切り替えれば、さらに便利に使うことができます。 ここではPC(ブラウザ)に複数のGoogleアカウン

  • Gmail:スマホの Gmailアプリで独自ドメインのメールを送受信する

    独自ドメインのメールアドレスやGmail、その他のフリーメールを併用していらっしゃいますか? 複数のメールアドレスをそれぞれにチェックするのは面倒ではありませんか? Gmailアプリで全部のメールを確認できて、しかも、それぞれのメールアドレスで返信できたら、便利ですよね? こんなふうにGmailアプリを使ってみてはいかがでしょう? [ad] GmailアプリでPOPメールを送受信する方法 Gmai

  • WordPress:カテゴリーを追加・管理する ~設定方法と使い方~

    WordPressのカテゴリーを整理して、情報がまとまったサイト、見やすいサイトにしましょう。 [ad] ワードプレスのカテゴリー 新規追加と管理 [ダッシュボード] > [投稿] >[カテゴリー] と進みます。 カテゴリーを新規追加する 下図はワードプレスのカテゴリー管理画面です。 新たにカテゴリーを追加するには、画面左側の[新規カテゴリーを追加]に必要事項を入力し、[新規カテゴリーを追加]をク

  • WordPress:カンタンにカテゴリーを並べ替えたい!【便利プラグイン】

    WordPressのカテゴリーが増えてきて、しかもカテゴリーに親子関係を設定していると、デフォルトのカテゴリー管理が使いにくいなぁと感じますよね? ドラッグするだけでカテゴリーの順番をカンタンに並べ替えることができるプラグインをご紹介します! ちなみに、taxonomy は「分類学」「分類法」という意味の英語で「タクソノミー」と読みます。 [ad] Category Order and Taxon

  • WordPress:初心者向け ブログの始め方 その2~初期設定 一般~

    WordPressをインストールしたらすぐに[設定]メニューを初期設定しましょう。 あとから変更もできますが、投稿の数が増えてしまってから設定を変更すると訪問者を混乱させてしまったり、SEOやアクセス解析の観点からも不都合がでる可能性が高いです。 最初にしっかりとプランを立てて初期設定を行いましょう! [ad] WordPress管理画面にログインしよう WordPressのログインURLは、基本

  • WordPress:初心者向け ブログの始め方

    WordPressではじめてサイトを構築するかたは、こちらの記事を参考にしてください。独自ドメインの取得方法、使い勝手の良いレンタルサーバからWordPressをカンタンにインストールする方法も説明しています。WordPress初心者向けのファーストステップです。

  • Photoshop:2ステップでピンボケ写真をシャープにするよ!【レタッチの基礎】

    あまりにもカンタンすぎで、レタッチとは言えないかな(笑) 友人との会食で撮ったごちそうのスマホ写真。後で見返したら、ピントが甘かった…残念…。 フォトショを使ってわずか3ステップでシャープな写真にしちゃいましょう。 カンタンすぎて、これをレタッチと呼んでいいのかなぁと思ったりしています。 作業時間は1分くらい? 大まかな作業の流れは、以下の通りです。 Step 1 [フィルター]から[ぶれの軽減]

  • Excel:印刷時の文字欠けを解消!セル幅をささっと調整する【超図解!】

    セル幅を適切に調整してエクセル印刷時の文字切れを解消しよう エクセルを印刷したら文字の一部が切れちゃった!ってことありますよね?モニタではきちんと収まっているのに… この問題、ささっと解決しちゃいましょう。 ちなみに、セルの高さも自動調節できますよ。この説明の「幅」を「高さ」変えてトライしてみてね。 Step 1 シート全体のセル幅を最適化する Step 2 基準にするセルを選択して[列の幅の自動

  • Photoshop:通りすがりの人を消すよ!【レタッチの基礎】

    人やモノなど不要な要素を消したい 観光地で撮影した写真に通りすがりの人が入ってしまった…。これを消したい! これが今回やりたいこと。 背景がシンプルか複雑かによって作業時間は異なりますし、不要な被写体を消す方法はいくつかありますが、私がこのサンプル画像をレタッチした簡単にできる方法を説明しますね。 大まかな作業の流れは以下の通り。 Step 1 消したい被写体を選択する Step 2 パッチツール

  • Photoshop:3ステップで着物の色を置き換えるよ!【レタッチの基礎】

    柄や質感を変えずに着物の地色だけを変える やりたいことは、これ。 もとは、水色の地色に鮮やかな花柄の着物です。 しわや陰影が付いた箇所もあり、地色だけを変えるのは面倒かな?と思うかもしれません。 が、カンタンです。 色の置き換えも、慣れてしまえば作業の所要時間は5分程度です。 大まかな作業の流れは、以下の通り Step 1 色を置き換える範囲を選択する Step 2 置き換える色と新しい色を設定す

  • YouTube:音がでない…小さすぎ…なぜ?

    いつもChromeを使っていて、時折、YouTubeをBGMに作業したりしているのですが、ある日突然、YouTubeの音が小さくなってしまいました! YouTubeのボリュームは最大で、 パソコンのスピーカーを確認しても 最大なのに… 問題はブラウザの音量設定でした Windows10ではアプリごとに音量が設定できます。 何らかの原因でブラウザの音量がミュートになってしまうと、当然そのブラウザで再

  • Photoshop:そばかす消すよ!【レタッチの基礎】

    ナチュラルな肌の質感を保ってレタッチする やりたいことは、これ。あくまでも自然にね。 今回は、著作権フリーのサイトで見つけたかわいらしいお嬢さんの写真を使います。 大まかな作業の流れは以下の通り。慣れてしまえば作業時間は5分程度です。 Step 1 肌補正用のレイヤーを作る Step 2 肌全体を滑らかに加工する(ぼかしと画像操作) Step 3 補正箇所はクイックマスクで選択 Step 4 補正

  • Photoshop:そばかす消すよ!【レタッチの基礎】

    ナチュラルな肌の質感を保ってレタッチする やりたいことは、これ。あくまでも自然にね。 今回は、著作権フリーのサイトで見つけたかわいらしいお嬢さんの写真を使います。 大まかな作業の流れは以下の通り。慣れてしまえば作業時間は5分程度です。 Step 1 肌補正用のレイヤーを作る Step 2 肌全体を滑らかに加工する(ぼかしと画像操作) Step 3 補正箇所はクイックマスクで選択 Step 4 補正

  • WordPress:メディア ライブラリを整理したい!!!

    画像が多くなってくると、そう思いませんか? メディア ライブラリ アシスタント(Media Library Assistant) プラグインでメディアをカテゴリ分けしてはどうでしょうか? Media Library Assistant でメディア ライブラリを整理する! 有効インストール数 60,000+でWordPress バージョン 3.5.0 またはそれ以上に対応している無料のプラグインです

  • Design:Webサイト デザイン カラーを決める HTMLカラーコードと配色を調べる【超便利サイト5選】

    サイトデザインの配色に困ったら参考にしてください。 超便利な5サイトの使い方をまとめます。 PALETTABLE:数百万人のデザイナの英知を結集~美しいカラーパレット 数百万人ものデザイナの英知を結集して、自分だけのカラーパレットが作れるサイトです。 メイン カラーを決めたら、2つめからは好きか嫌いかで選択していくだけ。 最大5色までの配色を決めたら、htmlカラーコードをエクスポートできます。

カテゴリー一覧
商用