今回はPC版Canva（キャンバ）の「はじめ方」「使い方」「ショートカットなどのテクニック」を解説していきます。Canvaを使えば、誰でも簡単にプロっぽいデザインを作ることができるようになります。是非活用してみください。

Google Chromeの拡張機能をひたすら試して、おすすめのものを32個厳選しました。目的に応じて、使えそうなものを探して頂ければと思います。 最後のセクションでは、ブログなどでよく取り上げられているものの「これはいらないんじゃないか」という拡張機能をまとめています。参考になれば幸いです。

最近では、SEO対策として「良い記事を書こう」「良質なコンテンツを作ろう」とよく言われます。しかし、多くの場合、その具体的な定義や目安は説明されません。 明確な答えはGoogleの中の人でさえ分かっていないのかもしれませんが、仮説であっても自分なりの答えを持っておくことは重要なはずです。今回は、当サイトが考える「良質なコンテンツの定義」を14点紹介します。※ あくまでも当サイト管理人の意見であることにご注意ください。 良質なコンテンツ：14の定義 1. 主題が明確であること 1つの記事では、1つのテーマについて書きます。言うまでもなく「美味しいご飯のお供」の話と「アメリカの大統領」の話は、1つの記事に書くべきではありません。 SEOを強化したいのであれば「何というキーワードで、検索ユーザーに訪れてきてもらうか」まで考えると、記事が書きやすくなります。 2. ユーザーが探している答えを、すぐ

今回はCSSのコピペで使える引用ボックスデザインのサンプルを30個作ってみました。引用タグ（blockquote）のデザインをサクッと変えることができます。どれも画像は使わず、HTMLとCSSだけで表示することができます。ブログやWebサイト運営者の方は、是非ご利用くださいませ。 使い方 デザインを紹介する前に、使い方を簡単に説明しておきます。 CSSをコピーして貼付け

使い方 HTMLとCSSの編集方法をご存知の方は読み飛ばしてくださいませ。 スキップ 手順1：CSSをコピペ のちほど紹介するボックスデザインのうち、気に入ったものがあればCSSをコピーします。これをブログやWebサイトのCSSファイルに貼り付けます。貼付け先はブログサービス別に以下のようになります。 link rel〜を貼る場所 WordPress[ダッシュボード][外観][テーマエディター]右側のバーの[style.css]※もちろんFTPソフトを使ってもOK はてなブログ[デザイン][][デザインCSS]スマホ用はの[フッタ]に<style></style>と入力、この中に貼付け アメブロ[マイページ][デザインの変更][CSSの編集] Livedoorブログ[ブログ設定][PC][カスタマイズ][CSS] FC2ブログ[設定][テンプレートの設定][スタイルシートの編集] Blog

画像を使わなくても、立派なリボンをWebサイト上に表示することができます。この記事では様々な形のリボンの作り方を使用サンプルとともに紹介していきます。どれもHTMLとCSSのコピペで使うことができます。 はじめに リボンのテキストはサンプルでは「Welocome to My Blog!」や「NEW」などとしていますが、お好みのテキストに変えてご利用ください。ただし、複数行にわたるような長文にするとデザインが崩れてしまうことがあります。なるべく、短めのテキストを入れて頂くのがおすすめです。 また、HTMLコードでは例としてh3タグを使っていますが、この部分をh1~h5やpタグ、div、spanタグに置き換えてそのまま使うことができます。

最近「サルワカの更新や運営にどんなツールを使っているのか」と聞かれることが増えてきたのでまとめておきます。今まで試してきた無数のツールの中の生き残った心からおすすめできるツールたちです。参考になれば幸いです。 おすすめのブログ運営ツール 1. 記事執筆スピードが劇的に上げる Mars Edit 最強の記事執筆用のMacアプリです。このアプリを使いはじめてから執筆スピードが2倍くらい上がりました。 このアプリのスゴイところは、編集画面に打ち込んだ内容がリアルタイムでプレビュー画面に表示・反映される点です。つまり、実際の表示を見ながら編集することができるのです。また、画像のアップロードのラクさや、操作の軽さ、落ちてしまったときのバックアップ保存機能なども充実しており、本当に快適に執筆を進めることができます。ちなみにWordPressだけでなく、はてなブログ等にも対応しています。 2017年末に

マテリアルデザインでは、Googleにより作り方のガイドラインがしっかりと決められています。しかし、ルールがかなり多いため、どうしても間違った表現をしてしまいがちです。今回はマテリアルデザインでやってしまいがちな間違いを淡々と紹介していきます。WEB制作、アプリ制作時のチェックリストとしてご活用ください。 Google I/O 2018でのガイドラインのアップデートを反映しました。 重要なルール 1 マテリアルから文字をはみ出してはいけない

.btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }

Easily find the best Material color for your projects. Here is 30 color combination based on material design color palette. By clicking color sample bar, You can check usage example in material design UI. Each of color combinations consists of following three kinds of colors. (1) Main (2) Optional (3) Accent For details, see Google Guideline. Contents

配色の使用例を確認しよう 気になる配色があれば、見本をクリック/タップしてみましょう。その配色の使用イメージを確認することができます。気に入った色の組み合わせはコピペして使って頂いて構いません。 万人受けする配色 まずはシーン問わず使いやすい色の組み合わせを紹介します。青や橙色などは老若男女問わず受け入れやすい色ですね。

今回はおしゃれなデザインのチラシ（フライヤー）をサクッと作成する方法を解説します。どれも特別なテクニックや技術は必要なく、すぐに実践できるものです。

今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。