配色を決めるのは難しい ブロガーの皆さんはカスタマイズをとかすると思うんですが、配色ってどうやって決めていますか？いい感じの色使いって難しいんですよね。そういう仕事してるぼくでさえ、悩むポイント。ちょっと苦手です。 今日紹介するのは配色ツール。 このブログの場合は自分の好きな色でまとめた感じなんですけど、やはり見やすい色の組み合わせってあるので、好きな色をいくつも入れたら見た目がド派手になってしまった！なんてことも起こりがち。 そういうのを一気に解決してくれるやつを紹介します！ AI（人工知能）です！未来ですね。 しかも無料！（素晴らしい） Khromaっていいます！！（読めねーよ！） Khroma – The AI color tool for designers 使い方はとても簡単 サイトを開いて【Personalize】をクリック するとカラーパレットがズラッと出てくるので好きな色を

こんにちはユレオです。 はてなブログにはソーシャルパーツでシェアボタンが追加できますが、デフォルトでついているシェアボタンというのは、デザインがいまいちでレイアウト的にちぐはぐな印象を受けます。 横並びでも上下にいびつに並んでしまい、スタイリッシュとは言えません。 コードを自分で書くという方法もあるようですが、そうはいっても簡単にはできないです。 そういった時に様々なWebサービスを利用するというのも手で、そのサービスを利用すると以下のようなものが作成できます。 横一列に並び、スタイリッシュで見やすいです。 本日は非常にわかりやすく使いやすいシェアボタン作成サービスである「忍者おまとめボタン」のご紹介をしたいと思います。 設定手順１　「忍者ツールズ」のユーザー登録を行うこのサービスを受けるためには「忍者ツールズ」にユーザー登録をする必要があります。 １：以下のリンクをクリックして「忍者おま

皆さまこんにちは！今日は連日のDIYで腕がパンパンです。(元からパンパン) 皆さま、アイキャッチ画像がお洒落なBlogは思わず見てしまいますよね。私もお洒落なアイキャッチ画像を作成してみたい！と思い、試してみました！全てスマホから作成しております。(パソコンをお持ちの方はパソコンで作成するほうがやりやすいと思います。) Canva - 画像加工 & デザイン Canva写真／ビデオ無料 こちらのCanvaというアプリを使用してアイキャッチ画像を実際に作ってみました。ちなみに、私はこれが人生初めてのアイキャッチ画像作成ですよーっと。(だから何) このような感じに簡単に作成することが出来ます！ (⬆︎フリー写真素材のサイトはこちらが利用報告や会員登録無しで使用させてくれるため、非常に使いやすいです。ありがとうございます！) フリー写真素材を保存させてもらったら、Canvaを開きます。⚠︎最初に

こんにちはユレオです。 ブログを運営する上でアイキャッチとなる画像はかなり重要で、アイキャッチがある場合とない場合では記事を見ていただける確率が大きく変わります。 アイキャッチを一風変わったものにしたいとか、思わず2度見してしまうような画像を作成したいと思いませんか？ そういったブログサービスをいろいろと探していたところ、非常に面白いサービスがありましたのでご紹介したいと思います。 「PhotoFunia」というサービスなのですが、これがなかなか種類が豊富で思わず2度見してしまいそうな画像加工を施してくれます。 このような感じです。 えっ！これマジ！？　　(　ﾟдﾟ)！ (　ﾟдﾟ) ・・・ (つд⊂)ｺﾞｼｺﾞｼ (；ﾟдﾟ) ・・・ しかも1種類だけではなく、500種類以上の加工パターンがあり、本当に何でもできてしまいます。 今回は「PhotoFunia」を使って思わず2度見してしまう

iPhone X が発表されて間もなく、ディスプレイの「切り欠き」については至るところでちょっとしたイジリ合戦が始まっています。中には実際に信じてしまっている人もいるほど秀逸なものがありまして、それがこちら。 思わずクスッときてしまいますが（笑）、まあ当然こんなことにはなりません。 iPhone X にはディスプレイの上下左右に iOS の占有領域が存在し、それ以外（アプリのタッチイベントを認める領域）を Safe Area と呼ぶようです。Safe Area の外にある上部領域にはステータスバーとして時計やアンテナのインジケータなど iOS のシステムアイコン等が並び、下部の領域には iPhone X で導入された「ホームバー」が存在することになります。 では iPhone X の Safari で Web サイトを表示した場合に一体どのようになるのか？それを Web 上の情報を元にまと

「ただいま」の挨拶よりも電源スイッチONのが先な、そんな日常を綴る『ぽぽろんのパソコンつれづれ日記（ぽぽづれ）』へようこそ。

はてなブログのカスタマイズでお馴染みの、横に細長い「この記事に関するツイート」ボタンの元記事はこちらになります。 エントリを紹介してくれているツイートを一覧表示するボタンの設置方法です。 20190723更新 Twitterの仕様変更のため、コードを修正しました。 とうじょうじんぶつ 阿豆らいち： フリーランスのデザイナー。ときどきコーダー。 ATA-b（アタビイ）： 都合よく会話してくれるヒミツロボ。 たった5行ではてなブログにTwitterのエゴサボタン設置 前回の記事がコチラ azulitchi.hatenablog.jp ありがたくブコメを頂戴しました。 (c) id:kinako222 ちょうシンプルに 前回、あんな長い記事書きましたが、ブログ記事の上に「この記事に関するツイート」ボタンを設置するだけなら以下の4行を 「デザイン→カスタマイズ→記事」の「記事上」 に追加するだけで

はじめに １．まずは自らの状況を確認して見よう！ ２．筆者のブログを参考にすると ３．画面のサイズの確認と調整の方法は ４．画像の圧縮方法は 最後に 追記:Hachi32TKさんのコメントを受けて 再追記：更に画像の選定から高さも改善を加えた結果 はじめに ブログのカスタマイズに集中すると、どうしても凝ってしまい、デザイン性が上がる一方で、ページ自体が重くなりがち。 読み手に対して「読みやすいデザイン」を求めたにも関わらず、ページスピードが遅くなることで、読みづらい環境になってしまったら、本末転倒です。 そして“ページの読み込みの遅さ“はSEO対策としても、評価は低くなる傾向があり、そもそも検索上位に上がりにくくなることもしばしば。 カスタマイズの取捨選択をして、減らす箇所を見つけるのも大事だと思いますが、「まず、どこから手を付ければ？」とお悩みの方は『画像のリサイズや圧縮』から始めてみま

はじめに １．<code>とは 実際の入力方法はこちら 入力後はこうなります。 2．コードじゃなくても、活用できます。 3-1.筆者がコード以外に活用するなら 3.【8月27日追記】CSSでサンプル作成してみました。 4.<code>タグはカスタマイズでCSSで装飾も出来ます！ 最後に はじめに ブログをはじめて4カ月、WEBデザインを勉強してきた中で、最近ちらほらデザインの相談やご依頼が来ている状況で、その際「Gisthub」でコードを作成しています。 例えば、ブログ内でカスタマイズコードを紹介する際も同様に、GistHubで紹介をしているのですが、(8/11修正:不具合があった為、現在は使用しておりません。)手順を紹介する際に、今回ご紹介する<code>タグがとても使い勝手が良く、最近知ってからフル活用しております。 今回はこの<code>の入力方法と活用理由、そしてカスタマイズ例をご

はじめに 17年05月30日迄のデザイン 1．『NO TITLE』 ブログ運営者様 ここがすごい！ 2．『LITERALLY』 ブログ運営者様 ここがすごい！ 3．『Minimal Green』 ブログ運営者様 ここがすごい！ 4．『Yukihy Life』 ブログ運営者様 ここがすごい！ 5．『FOXISM』 ブログ運営者様 ここがすごい！ 6.『急がば急いでまわれ！』 ブログ運営者様 ここがすごい 7.『つばさのーと』 ブログ運営者様 ここがすごい 最後に はじめに 4月にブログをはじめて、記事を書く中で「WEBデザイン」を勉強することにハマってしまい…現在のブログデザインに至るまでに、かれこれ4回変更を加えてました。 変更理由は「飽き性」というより、皆様の反応を見ながら「改良」を行ってきた感じです。それこそ例で出すなら、ブログはじめて2か月目は、こんなデザインでした(笑) 17年05