「デザイン」の記事一覧

【ヘッダタイトル】文字だけのロゴ画像の作り方!背景を透明にする方法(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つ目の方 […]

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

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

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

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

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

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

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

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

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

テキスト

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

画面キャプチャその1!おすすめはWindows付属の無料ソフト「Snipping Tool」の使い方

ブログで記事を書く、ブログで何かのテーマについて記事を書く、といった時、画面上に表示されている画像やグラフ、メニュー等、その一部を切り取って説明のために貼り付けたい!という場合が出てきます。 いわゆる「画面キャプチャ」とか「スクリーンキャプチャ」とか呼ばれるものですが、効果的に使うと俄然説 […]