メモ取り！

2015/10/09

画像の背景を簡単に透明にできるフリーソフト「手軽に透明png」

更新日：2017年10月3日(火)

前回、ページの「先頭へ戻るボタン」を自作しましたが、ペイントで作った画像をそのままブログに貼ってしまうと、

周りが白く縁取りされてしまいます。
ペイントだと画像の「透過処理」ができないんです(^_^;)

もっと機能の多いソフトを使えば良いのですが、操作が難しかったり、ソフトが重かったりと使いづらいこともありますよね。
そんな方には「手軽に透明png」がおすすめ！
透過画像が手軽に作れちゃうフリーソフトです。
操作も簡単なので、すぐに使いこなせますよ♪

使い方

1．読み込んだ画像ファイルの透明にしたいところをクリックします。

2．クリックした部分が透過され透明になります。

3．続けて透明にしたい部分をクリック！

さらにクリック！

4．今回は３回クリックしただけで背景の透明化が完了しました。
「保存」をして終了すればOKです！

手順はたったこれだけ。
めちゃくちゃ簡単ですね！

ソフトはポータブル版とインストーラー版の２種類

「手軽に透明png」はポータブル版とインストーラー版の２種類があり、Windows10にも対応しています。
管理人はインストール不要のポータブル版を入手しました。
USBで持ち歩けるのがいいですね！

「手軽に透明png」のダウンロードはこちらから↓
http://www.officedaytime.com/toumei/

以上、「手軽に透明png」の紹介でした。
本当に手軽で簡単なので、一度お試しください♪
最後までお付き合いいただき、ありがとうございます。

2015/10/08

コピペで簡単！「ページの先頭へ戻るボタン」を設置する方法

更新日：2016年10月9日(日)

ずっと設置したいと思ってた「ページの先頭へ戻るボタン（スクロールアップボタン）」。
調べてみると、jQueryの設置が必要だったりと難しすぎて自分には無理…と思ってました。
でも、しつこく調べてみるものです。
コードをコピペするだけで簡単に設置できる方法を発見！
早速設置してみました♪＼(^o^)／

※HTMLをいじるので、テンプレートを保存してから作業してください。

1．設置方法

1-1．設定画面→レイアウト→ガジェットを追加で「HTML/JavaScript 」を追加します。

1-2．HTML/JavaScriptに下記のコードをコピペするだけです。ボタン画像のURL、画像の高さ、画像の幅は後ほど設定します。

1-3．ボタン画像を入手します。以下のようなフリー素材サイトで見つけることができます。

EC design（デザイン）

商用利用可のWEB素材が無料な素材屋

管理人は他の方のデザインを参考に、ペイントで自作してみました。（現在は別の画像を使用しています）

「top」の文字はchipheadさん作の「しねきゃぷしょん」を使わせていただきました。
洋画字幕のようなおしゃれなフォントです。
画像の透過処理は手軽に透明pngを使いました。

画像サイズは正方形なら48×48がスマホなどの携帯端末でも使いやすくおすすめとのこと。縦長の画像は" height="auto" で設定します。設定方法は以下です。

画像に合わせてサイズ調節してくださいね。

2．ボタン画像のURL取得方法

2-1．使いたい画像をBloggerにアップロードします。

2-2．アップロードした画像を右クリックして、メニューから「新しいタブで開く」を選択します。

2-3．新しくタブが開くので、アドレスバーを右クリックして画像のURLをコピーします。

２-4．取得した画像のURLをコード部分に差し替えれば完了です。

ボタン画像の高さ（height）と幅（width）は画像に合わせて調節してください。

3．Blogger以外のブログに設置する方法

他の無料ブログに設置する場合も超簡単です。
HTMLの<head>～</head>の間にコードを貼り付けるだけ！
</head>の直前に貼り付ければわかりやすいと思います。

それでは今回はこの辺で。
最後までお付き合いいただき、ありがとうございます。