Warning: Constant POST_PLUGIN_LIBRARY already defined in /home/pasora/pasona-sp.com/public_html/wp-content/plugins/similar-posts/similar-posts.php on line 27
WordPressのタイトルロゴPCにあるソフトで作るwebで透過 | 思いだし にっき
サイトアイコン 思いだし にっき

WordPressのタイトルロゴ PCにあるソフトで作るwebで透過も

<p><img class&equals;"aligncenter size-full wp-image-10900" src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;4a332f05ade4ac7bb3c46c472cb5eac8&period;png" alt&equals;"" width&equals;"374" height&equals;"113" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p style&equals;"text-align&colon; left&semi;"><a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1291&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener">前回の記事<&sol;a>でCool Textで簡単にロゴを作る方法を試してみました。<&sol;p>&NewLine;<p style&equals;"text-align&colon; left&semi;">Webでの作成でしたが、自分のPCにある普段使っているソフトで作ることもできますね。<&sol;p>&NewLine;<p style&equals;"text-align&colon; left&semi;">実際にタイトルにするロゴは別の方法で作成してみました。<&sol;p>&NewLine;<p>それらをご紹介します。<&sol;p>&NewLine;<p><&excl;--more--><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>タイトルロゴをPCにあるソフトで作る<&sol;h2>&NewLine;<p>一般的にパソコンにあるソフトというと、WordやExcelが考えられますね。<&sol;p>&NewLine;<p>画像をあつかうにはペイント。<&sol;p>&NewLine;<p>これらのソフトの機能を活かすことで簡単にタイトルロゴを作ることができます。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h3>Wordの機能とペイントで作る<&sol;h3>&NewLine;<p>①まずMicrosoft Wordを起動します(ExcelでもPower PointでもOK)<&sol;p>&NewLine;<p>挿入タブからワードアートを選択。<br &sol;>&NewLine;好みのデザインを選び文字を入力してロゴを作ります<&sol;p>&NewLine;<p>「ホーム」タブで書体とサイズを指定&lpar;例は24pt&rpar;<&sol;p>&NewLine;<p>作成したワードアートを選択した状態だと「描画ツール」タブ表示されます。<&sol;p>&NewLine;<p>そのタブをクリックしていろいろ編集できます。<br &sol;>&NewLine;影をつけたり色をグラデーションにしたり、変形したり・・・<&sol;p>&NewLine;<p>好みでいろいろやってみましょう。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"size-full wp-image-1315 aligncenter" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;gh1&period;png" alt&equals;"wordアートで作る" width&equals;"520" height&equals;"356" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>②出来上がったワードアートを選択して、コピーします。<&sol;p>&NewLine;<p>ペイントを起動して、そこに貼りつけます。<br &sol;>&NewLine;これでペイントで編集できます。<&sol;p>&NewLine;<p>文字は余計な装飾はしなかったので、横に猫の足跡をいれてみました(^^)<&sol;p>&NewLine;<p>サイズを調整をしてみました。<&sol;p>&NewLine;<p>サイズの変更は四角のハンドルをドラッグして調整します。<&sol;p>&NewLine;<p>画面下のステータスバーでサイズを確認しながら調整すると楽にできます。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1316" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;gh2&period;png" alt&equals;"サイズ調整" width&equals;"524" height&equals;"283" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>ロゴ画像のサイズは公式サイトの指定で320px以下となっていたので<&sol;p>&NewLine;<p>320px(ピクセル)×70pxで作りました。<&sol;p>&NewLine;<p>高さはもっとあってもいいようです。<&sol;p>&NewLine;<p>早速<a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1325&period;html">タイトルをロゴに変更<&sol;a>してみたら<&sol;p>&NewLine;<p>・・・あらら、背景を透過していなかったので元のタイトルのあった背景(グレー)に白く浮き出てしまいました。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1317" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;tr8&period;png" alt&equals;"背景透過していない" width&equals;"542" height&equals;"151" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;&NewLine;<&excl;-- WP QUADS v&period; 2&period;0&period;92 Shortcode Ad -->&NewLine;<div class&equals;"quads-location quads-ad" id&equals;"quads-ad" style&equals;"">&NewLine;<&sol;div>&NewLine;&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>画像の背景を透明にする<&sol;h2>&NewLine;<p>手持ちのグラフィックソフトで操作すればできますが、Web上でなにかないかと探してみました。<&sol;p>&NewLine;<p>丁度よいのがみつかりました。<&sol;p>&NewLine;<p>いくつかありましたが、こちらを使わせてもらいました。<&sol;p>&NewLine;<p>サイトはこちら&Implies;<a href&equals;"http&colon;&sol;&sol;pcrice&period;web&period;fc2&period;com&sol;alpha&sol;">画像背景透過処理<&sol;a><&sol;p>&NewLine;<p>web上で透過できるので使い方は簡単。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>①ページを開いて背景を透明にしたい画像をドラッグ&amp&semi;ドロップします<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1318" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;gh3&period;png" alt&equals;"画像をドラッグ" width&equals;"522" height&equals;"313" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>②画像の中で透明にしたい色をクリックします<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1319" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;11&sol;gh4&period;png" alt&equals;"透過する色をクリック" width&equals;"519" height&equals;"262" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>③完成 右クリックのメニューから「名前をつけて画像を保存」を選択して保存します。<&sol;p>&NewLine;<p>Wordなどでもこの機能はあるけど、他のソフトにコピーしたときに背景が白くなってしまうこともあるので、これは超便利!<&sol;p>&NewLine;<p>きれいにできるのでヘッダーにいれる画像の処理もしてみました<&sol;p>&NewLine;<p>こちらのサイト<a href&equals;"http&colon;&sol;&sol;agmhs&period;web&period;fc2&period;com&sol;tools&sol;transparent&sol;transpanret&period;html">(画像を透過するツール)<&sol;a>でもできますが、画像の取り込みはドラッグではなくファイルの場所をして開く形になります。<&sol;p>&NewLine;<p>画像のファイル形式はGIF&comma;PNG&comma;JPEG&comma;BMPなどできるようです。<&sol;p>&NewLine;<p>JPGの場合は周囲にすこし、けばのように残る部分があります。<&sol;p>&NewLine;<p>PNGがいいようですね-<&sol;p>&NewLine;<p>困ったり、不便に思ったりすると、こういったツールを見つけられることがあるので、PCがより楽しくなってきます(^^)<&sol;p>&NewLine;<div class&equals;"sb-type-drop">&NewLine;&Tab;<div class&equals;"sb-subtype-b">&NewLine;&Tab;&Tab;<div class&equals;"sb-speaker">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;&Tab;<img src&equals;"https&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;plugins&sol;speech-bubble&sol;img&sol;icon&lowbar;n2&period;png" class&equals;"sb-icon">&NewLine;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-name"> <&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;<div class&equals;"sb-content">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"sb-speech-bubble"> ã§ã¯ã€æ¬¡ã¯ã„よいよタイトルをロゴ画像にしてみますね。 <&sol;div>&NewLine;&Tab;&Tab;<&sol;div>&NewLine;&Tab;<&sol;div>&NewLine;<&sol;div>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1291&period;html">Cool Textの使い方<&sol;a> へ     <a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1325&period;html">タイトルをロゴ画像にする<&sol;a> へ<&sol;p>&NewLine;<p style&equals;"text-align&colon; right&semi;"><a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;page-1472&period;html"><span style&equals;"color&colon; &num;0066cc&semi;">WordPress一覧へ<&sol;span><&sol;a><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><a href&equals;"&sol;&sol;diary&period;blogmura&period;com&sol;ranking&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener"><img src&equals;"&sol;&sol;diary&period;blogmura&period;com&sol;img&sol;diary88&lowbar;31&period;gif" alt&equals;"" width&equals;"88" height&equals;"31" border&equals;"0" &sol;><&sol;a><br &sol;>&NewLine;<a href&equals;"&sol;&sol;diary&period;blogmura&period;com&sol;ranking&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener">にほんブログ村<&sol;a><&sol;p>&NewLine;<p><a title&equals;"日々の出来事 ブログランキングへ" href&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;link&period;php&quest;1839199&colon;9200"><img src&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;img&sol;banner&sol;c&sol;banner&lowbar;1&sol;br&lowbar;c&lowbar;9200&lowbar;1&period;gif" width&equals;"110" height&equals;"31" border&equals;"0" &sol;><&sol;a><br &sol;>&NewLine;<a style&equals;"font-size&colon; 12px&semi;" href&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;link&period;php&quest;1839199&colon;9200">日々の出来事 ブログランキングへ<&sol;a> <&sol;p>&NewLine;&NewLine;

モバイルバージョンを終了