「デザイン」の記事一覧

Photoscape X のインストール!無料で簡単な画像ソフトは断然これがおすすめ

photoscape

ブログの記事に画像が貼りたい。その画像を簡単にトリミングしたり文字入れする場合がありますね。 こうした画像編集では無料で簡単なソフト Photoscape がありますが、以前の ver3.7はずいぶん昔に開発が終わったようで、今では「Photoscape X」というアプリに生まれ変わってます。 Windows版、Mac版ともにありますが、こ ...

画面キャプチャ無料ソフトFastStone Capture|ダウンロードと使い方

Windowsで画面キャプチャといえば附属の「Snipping Tool」がありますが、一旦キャプチャした後に、もう少し端を削っておきたいなど、より綺麗に切り取りたい場合には、ここで紹介する「FastStone Capture」が超おすすめです。 私も以前から愛用の無料ソフトで(最新のものは動画の機能もついた有料版。ここでは無料版ver5.3 ...

【ヘッダタイトル】文字だけのロゴ画像の作り方!背景を透明にする方法(PhotoScape編)

ブログのヘッダー画像を設定すると、テーマによってはそのヘッダー画像の上にサイトタイトルやキャッチフレーズが表示されるものがあります。(Cocoonなど) 背景の画像の上にタイトルの文字が乗るため、背景の画像に溶け込んだりしてタイトルの文字が見づらくなる場合がありますが、こうした時には文字だけのロゴ画像を作 ...

【CSS】ふわふわドキドキ動くボタンの作り方!上下や拡大縮小アニメーション

ふわふわ動くボタン、ドキドキ動くボタンの作り方をご紹介。 上下にさり気なくフワフワしたり、拡大縮小を使って浮かび上がったり沈んだりと、CSSを使えば、ちょっと目を引くアニメーションボタンが簡単にできますね。 【ドキドキ動くボタン1】 【ポン!と動くボタン2】 【ゆったりフワフワ浮遊ボタン】 【ツンと動くボタ ...

【CSS】光るボタンアニメーションの作り方!カスタマイズまで手順を詳しく解説

コクーン(cocoon)などのテーマで「キラッと光が横切るアニメーション付きのボタン」があったりしますが、何気にカッコいいし、目立ってクリック率も上がりそうですよね。 ということで、ここではHTML, CSSを使って「自作で光るボタンの作り方」をご紹介。 できあがりは、ほぼコクーンの光るボタンと同等になったと思いま ...

画像リサイズで容量圧縮!フリーソフトPhotoScapeを使えば簡単にできる

photoscape

ブログに貼る画像の容量を圧縮したい!などで縦横サイズを変更したい(リサイズしたい)場合、フリーソフトのPhotoScape(PhotoScape X)を使えば一瞬で簡単にできます。 以下早速 PhotoScape を使ってリサイズする方法を見て行きましょう。 PhotoScapeをまだ使ったことがない、という場合には、今後も絶対活用できるのでお ...

画像の縦サイズを縮める!いらない部分をカットする加工編集の方法(PhotoScape編)

photoscape

ブログに画像を貼りつける場合、最近は特にスマホで撮影した画像を使うことが多いことから、縦長の画像になる場合も多いと思います。 縦長は縦長で良いですが、アドセンスの審査段階では、アドセンスのポリシー違反にならないよう、上下の余分なところはカット(トリミング)しておくと良いですね。 ここでは無料のおすすめ ...

ブログ記事一覧のサムネイル画像をマウスオーバーで拡大させる!CSSで簡単カスタマイズ

ブログの記事一覧表示にアイキャッチ画像(サムネイル画像)を表示している場合が多いですが、その画像にカーソルを乗せる(マウスホバーさせる)と、「画像がふわっと拡大表示される」という場合がありますね。 この「画像がふわっと拡大表示」は実はCSSを使って簡単に実現できますので、是非試してみてください。(私が使 ...

無料の画像編集ソフトは「PhotoScape」で決まり!

photoscape

サイトでもブログでも、画像を使用する場合に「ちょっとした編集や加工」が必要となる場合があります。 ヘッダー画像を作る!という場合では、画像の縦や横のサイズを変えたり切り取ったり(トリミング)、ブログの名称やキャッチフレーズを画像に書き込んだり、といった事をして、より見た目を盛り上げます。 また記事に貼 ...

フォントを調べる方法!Webサイトやブログはグーグルクロームのツールを使えばすぐ分かる

サイトやブログを見ていて、このフォントは何だろう、と調べたくなる場合がありますが、これはツールを使えば簡単に分かります。 ツールには2つあり、1つはグーグルクロームの拡張機能「WhatFont」、もう1つは、グーグルクロームの開発者ツール(デベロッパーツール)。 簡単に調べるには1つ目の方法(WhatFont)、サイ ...

サイドバーを切り替えて表示する!トップページだけ、カテゴリ毎など専用サイドバーを作るプラグイン「Content Aware Sidebars」

サイドバーを「ホーム(トップページ)だけ別にしたい」とか「カテゴリーによって分けたい」、「特定のページや記事だけ別の内容を表示したい」など、サイドバーを切り替えて表示したい、という場合がありますね。 テーマのファイルを編集して専用サイドバーを追加する、とやっても良いですが、場合分けなどがあって結構面 ...

トップページだけサイドバーを変えたい!プラグインを使わずにデザインも揃ったサイドバーを簡単に追加する方法

ブログを進めていると、ホームはホーム、記事は記事のサイドバー、といった感じで、別々に表示できれば嬉しい、と思う時がありますね! こうした、個別のサイドバーを表示したい、という場合には、プラグインを使えばサクッと解決しますが、プラグインは「いつ更新が停止するか分からない」、「ブログの動作が遅くなりそう ...

人気記事を表示するプラグイン!TOP10を使った設定法(「WordPress Popular Posts」の代わり)

ワードプレスのブログで人気記事を表示する、となると定番は「Wordpress Popular Posts」。でもこれがたまにアクセス集計がうまく行かなくなって「Sorry. No data so far」とか表示される場合があります。(なんじゃそりゃー、みたいな感じで涙) どうしてもデータが表示されない、となると別の代わりになるプラグインを探 ...

WordPressの人気記事表示プラグインはコレだ!サムネイル表示を変幻自在に使いこなす

WordPressでブログを運営する上で、なくてはならないものの1つが人気記事の表示です。まだプログに慣れてないと”いいなー、人気記事。どうやって表示するんだろう”なんて考えているかもしれませんね。(私がそうでしたし ^◇^)ゞ ) そんな心配は全然ご無用。プラグインを使えば自動でやってくれるので気にする必要はないん ...

ヘッダー画像、アイキャッチ、説明画像の簡単な作り方(パソコン編)!画像編集ソフト以外で自由にサクッと作成する方法

テキスト

ブログで個性を放つには欠かせない、といったら何といっても画像。 特に「ヘッダー画像」「アイキャッチ画像」(サムネイル画像)、「説明用の画像」ですが、文字入れしたり(更に縁取り入れたり)するのに画像編集ソフトを使う場合も多いと思います。(youtubeのアイキャッチ画像も同様) でも実は、パソコンに入っている ...