WordとGIMPで作るファビコン講座!?

前回の記事で、ファビコンを新しくしました旨報告しました。
が、GIMPの使い方等ブン投げ。
ろくに説明していない次第でありまして。
個人的に反省しているところです。
なので今回はGIMPの使い方紹介から、
実際にやったアイコンのデザイン方法まで紹介したいと思います。
自分が会社等で会得した技術でデザイン作ったので、
デザイナーの皆様からするとアリエナイ方法を取っているかと思いますが、
その辺は温かい目で見てやってください

Wordでロゴをデザインする

まずはアイコンというかロゴのデザインから。
最近はセンスの良いロゴメーカーが多数あるみたいで。
利用するのもいいかなと思いますが、頑張って自作しました!

使ったのは、みんな一度はお世話になった事がある!
Microsoft Word !


オートシェイプで太線外枠丸の字を描いて、
中にテキストボックスで文字を入れ、
ワードアートでちょっと斜体っぽくしました!
今のWordではオートシェイプではなく、単に図形っていうんですね。

Twitterで使っている青版以外にもカラーバリエーションあるんですよ実は。

配置や線太さ等、何回か試行錯誤して今のバランスに落ち着きましたが、
多分デザイン的には黄金比とか理論的にベストなバランスがあるのかなぁと思う所。

オートシェイプ(図形)を画像データにするため、
Word上で可能な限り拡大してスクリーンショットを保存しましょう!

保存形式はPNGでいきます。
JPEGは透明背景に対応していないらしいですよ。

GIMPで背景透明化する

保存したスクリーンショットPNG画像をGIMPで読み込みます。

アイコンなので絵と円の中心を揃えて正方形にしましょう。
縦横比を1:1に固定して切り抜き。
何か手段があるのかもしれませんが、
上下左右の余白が同じ幅に見えるように切り抜きました。

次に画像背景を透明にするために
レイヤーにアルファチャンネルを追加
というのをやります。
↓のサイトを参考にしました!

GIMPで背景を透過する方法(アルファチャンネルを追加)
GIMPで背景を透過するにはアルファチャンネルの追加が必要です。初心者でも分かるように説明します。「決まった色を透過する方法」や「背景が透明の新規ファイルを作成...

上記のサイトさんでファジー選択についても触れられているので、
そっちもご覧ください。
ファジー選択ツールで周囲を消去して、背景透明化完成!
白とグレーの市松模様になっているのが、透明になっているという表示です。

完成!と思いきやロゴのキワに白いのがちょっと残ってるような。

拡大してみると、ドット単位で白やグレーの領域がありますな。
これはフチがカクカクしないようグラデーションでボカしているんですな。
アンチエイリアス・・・
聞いたことある。
グレーはともかく、白が選択から漏れてるのはなんでなんだろう。
その辺がファジー(あいまい)たる所なのかな。

この際、白黒はっきりつけましょう!
画像の色彩を白と黒のみに変換することを2値化といいます!

白黒2価(モノクロ2階調) - niming538の日記
Webページを黒インキしかない安物プリンターで印刷しようとして工夫しているのですが、文字はどうにかなるのですが、画像を白黒で印刷するのがむずかしい。グレースケー...

2値化のやり方は↑サイトを参考にしました。
ザックリやるには色ディザリングを使うのがいいのかな。
滑らかさを排除するぶん、エッジがギザギザしてしまいますが。
まぁ縮小して使用するのでOKでしょう!

ふたたび ファジー選択→消去 で背景透明化完成!!

滑らかさを排除するぶん(略

まとめ

・Microsoft Wordでロゴデザイン(Excel,PowerPointでも可)
・GIMPで背景透明化
・やり方は全部ネット上にある

手元にあるソフトを駆使して、素人なりに頑張ってロゴ作ってみました。
感想としては「GIMPすげー」というところですが、
GIMPの操作法が検索かければボコボコ見つかるところがもっとすごい。

「…2値化とかモノクロ画像じゃないと使えないし…」
「…Wordでデザインってお前Excelを方眼紙にするタイプだろ…?」
等々
心に直接語りかけてくる声が聞こえるような感じですが。
何かしら参考になれば良いんですが、どうでしょうか?!

5月14日はブログ記念日!

去る5月14日は当ブログの開設記念日だったみたいです。
開設記念日にあたって思う所をつらつら。

旧ブログざっくりレビュー

当ブログは2回移転してまして。
始めはJUGEMUブログ。

奇妙なスタラクタイト
移転しました。新アドレス→http://odstalactite.blogspot.com/

アイキャッチ画像はブログの自己紹介ページアイコン。

真面目に書いてて、過去の自分がまぶしい。
読んだ本の感想をちゃんと書いてるのが偉い。
アウトプットしたから内容おぼえてるわ!
と、言いたい所だけどそうでもなかった。
残念。
毎日更新に挑戦している時期があって。
乱読してネタをひねり出してたのも懐かしい。
この頃から「ブログとは何ぞや!」という疑問にブチ当たってた様子。
所々写真が消えてるのが惜しい。

次にGoogleのBloggerに移転。


レイアウトとフォントが超絶ダサいけど、けっこう見やすい?
JUGEMUブログのデータインポートがカンペキにできてるっぽいので、
本家JUGEMUで消えてる写真を閲覧できるところがGoodJob!昔の自分!

その後独自ドメインを取得してWordpressで運営し始めたのが今ココ。

継続はチカラなり

やっぱブログは積み重ねが大事。
書き続ける事書いた物を保持していく努力が多分大事なんだな。
最近はぜんぜん更新できてなくって本当に「お前が言うか」状態なんだけど。
バズった事はまったく無いけど、誰か記事を参考にしてくれる人もいるかもしれないし。
クズ記事ばっかりでも、書き続ければ自然とネットの海に埋もれてくれるから大丈夫かなぁと。

何はともあれ記念日なので、自分の中で祝おうと思う!
来年は笑顔でこの日を迎えられるように、
今日から少しずつでも更新していくとしよう。
いつまで続くかわからないけど(死

ブログの評価方法

続けるためには評価が必要!
何か自分のBlogを評価する体系を作らないと。
ヒット数(死語)にフォーカスすると心を病むのでやめる。
記事の質は評価しづらいし主観にすぎないのでむずかしい。
更新回数も、内容ない更新を重ねてもダメなのでダメだっ!

Blogの評価ってムズカシイ。

最後に考えられるのは
毎日執筆する
という一番面倒くさい方法。

何かに悩んでいる人は、解決策を知らないのではなく、最良の解決策を面倒でしたくないだけだ。
– 森博嗣 –

毎日更新よりは面倒ではないか。
まぁ自己満足ブログなので、書く方も自己満足でいいや。
やろう。

というわけでがんばっていきますので、
これからもよろしくおねがいしまっす。

ピンタレスト風テーマにリニューアルしました!

ピンタレスト風

心機一転、ブログの方リニューアルしました。
Surfaramaという無料テーマなんですが、投稿がザッと一覧になる感じでいいですね。
要は見た目です。
160801screenshot

ピンタレストという画像SNSをイメージした構成になっているらしいです。

ピンタレスト解説ページ

世の中には知らないSNSがたくさんあるみたいですね・・・。

カテゴリーごとにイメージカラーを指定することで、記事一覧が華やかになりました。
ナイス機能だと思います。

設定

細かい設定はこちらのサイトを参考にしました。
ありがとうございました。
設定が全部英語ですが、わりと直感的に決められるようにできているように感じます。

公式デモサイト
公式のデモンストレーションページがまたステキに出来てます。
やっぱり写真映えする感じですね。

160801Surfama_Demo
デモページのスクリーンショットで、赤線で囲んだ所。
自身のサイトだと文字出ないんですよね。
何度見回してもヘッダー下の所に文字を表示する設定が見当たらないので少々悩みました。
デモページのページソースを解析した所、ヘッダー部分に直接記述されている様子。
自分もマネしてみた結果が上の方の
「Welcome To Sta-JIVAN !!」
の所です。
まぁこんなもんでしょうか!?

まとめ

WordPress無料テーマSurfaramaでブログリニューアルしましたよっ
という話でした。
最近更新滞っているので、これが良い刺激になるとイイナと期待。
写真が映えるテーマなので、毎回アイキャッチ画像が必要ですね。
そこはかとなくダルそうだったりしますががが。

WordPress勉強開始

 

最近ブログの更新に励んでいるせいかアクセス数が増えて喜んでいる所。
毎度ご覧頂きましてありがとうございます。
昨日は書きかけの記事が消えて激昂してたけど。

せっかくなのでブログのカスタマイズを学ぼうと思い立ち、テキストを入手。
嘘でーす。
本当は1月末に買って放置してたモノ。

150406WP

WordPressレッスンブック HTML5&CSS準拠

ざっと目を通してみた所、Wordpressのテーマ(ひな形)作りが網羅されている様子。
実際に運用していて、実装したいなと思うテクニックがいくつか見られた。
自分はHTMLとCSSはわかる(書けるとはいっていない)んだけど、
Wordpressの根幹たるPHPやMySQLはサッパリなので、一通り読んだらPHPの勉強はやった方がいいかもなぁ。
ソースコード読んでると眠くなるので。

当面の課題はトップページから見ると記事のアタマにサムネイルが表示される問題の解消ですな。

150406WP2

消し方がわかんない。
テーマの設定ページで大きさの調整はできるのだけど。
こうなるとソースコードから削除するっきゃないと思われる。

表示も速くできるようにしたいし、スマホでも見やすいようにしたい。
まぁ本日初日だし、いつまで続くかわかんないけど、
ブログの更新熱があるうちにカスタマイズをがんばりたい。

WordPressアプリゆるすまじ


 

日曜日なので久々にWordpressのAndroidアプリで記事を書いてみた。
書いたんだけど、スマホメモリに保存した内容をアップロードしますか?と出たのでYesとしたら記事が消えた。
もうスマホでは記事は書かない!
やはりスマホで記事を作成する時はEvernoteやGoogle Keepで記事を作成してコピペするようにしよう。
そうしよう。

とりあえず昨日食べた刀削麺をパシャリ。

刀削麺!

じばんさん(@jivan3055)が投稿した写真 –

ドリームラッシュ情報ページ作成&告知

固定ページにドリームラッシュの紹介ページを作成。
4日前に公開済みなので今更ではあるけど!
150311tab1
トップページからはブログタイトルの下にあるタブをクリック。

いざ「ライブやるよ!」となった時
『ドリーム・・・ラッシュ・・・?誰・・?』
となるので、参照先を用意しないといかんと思ったゆえ。
いまだ活動が有るか無いかわからないようなバンドなんだけど
いつかはGoogle検索で上位に行けるようになりたいですな。

ついでに告知を一つ。
3月22日(日)に南浦和は宮内家にてオープンマイクに参加!
午後2時開場、入場無料の1オーダー制。
3曲ぐらい弾き語る予定。
バターチキンカレーが超絶美味いので、よかったら是非!

WordPressでブログ移転計画 5.プラグイン インストール編

今回は本格的にエントリーを作り始める前に、便利なプラグインをインストールしておきましょうという趣向です。

今回参考にしたのは
WordPressの優良プラグイン50選、最初にインストールすると超便利!(2013年版)

何個かチョイスしてインストールしてみました。

1.BackWPup
何は無くともバックアップは大事。
データベースからファイルから、丸々バックアップしてくれるよう。

2.Akismet
スパムコメントを弾いてくれる。
WordPressインストールするともれなく付いてくる標準プラグイン。

3.WP Multibyte Patch
米国生まれのWordPressで日本語を使うときに問題が起きないようにしてくれるらしい。

4.Google XML Sitemaps
検索エンジン向けのサイトマップを自動生成しくれるらしい。
アドセンスの申請にもサイトマップは重要らしいので、いいんじゃないでしょうか。
途中、サイトの所有権を確認するために、生成されたhtmlファイルをサーバーにアップロードするのですが、
アップロード先は”index.php”ファイルがある階層でokっぽい。

5.PuSHPress
更新情報をほぼ瞬時にGoogleに反映させるプラグイン。
仮にエントリをパクられても、自身がオリジナルであると証明できるらしい。

6.PS Auto Sitemap
人間が見る用のサイトマップを自動生成してくれる。
セッティングはこちらに詳しく。
PS Auto Sitemap (サイトマップ自動表示プラグイン)
サイトマップの表示スタイルも何種類か選べて便利。
デザインのよいサイトマップを作るプラグイン「PS Auto Sitemap」

こんなもんですか。
良さそうなプラグインがあったらガンガン追加していきます。

WordPressでブログ移転計画 4.Bloggerエントリーインポート編

ブログ移転シリーズなのですが、タイトル変更です。

「プログラミング」を外して、「WordPressで」を加えました。

実際プログラミングの知識が必要ないっぽいので。

将来的にはwebデザイン的な勉強をしたいかなぁと思うので、プログラミングはその時にまた。

バックアップを取るプラグインを入れたので、ガシガシいじっていきましょう。
プラグインについては後日。
まずは本ブログ”奇妙なスタラクタイト”を新天地にインポートしてみようと思います。
調べたら、WordPressからBloggerに引っ越す人がけっこういる様子。
意外。
今回参考にしたのがこちら
インポート用プラグインを使ったカンタン引越し術の紹介。
旧ページからWorfPressのページに自動で転送してくれるプラグインも紹介してくれていますが、
実施はしないつもり。

旧ページになじみがある読者さんもいらっしゃるかもしれないので、閲覧できるように残しておこうと思います。

SEO的には自動転送した方が有利かと思いますが。
Blogger画像はPC内の画像をPicasa経由でアップロードされています。
それらを自分のサーバー上にコピーしたうえ、旧Blog内のリンクを貼り直してくれる神ツール。
個人的にはPicasaのシステムはなかなか使いやすくてよかったのですが。これでインポートは完了。

のはずなのですが、固定ページはインポートできない様子。

読んだ本リストはブログ内リンクばっかりなので作り直すのがメンドクサイなこれ・・・。

しかたないのでサイトマップで代用しますか。

ブログ移転計画とプログラミング 3.あけましておめでとうございます編

明けまして、おめでとうございます!
本年もよろしくお願いします!

昨年執筆したエントリー数は52本。
思ったほど奮わなかったかなぁという所です。

本年、Blog的には独自ブログへの移転を目標としてがんばって行こうと思います。

その次は下世話な話になりますが、収益化を目指したいです。
サーバのレンタル代にドメイン管理代で毎月650円。
なので、月に1000円ぐらい稼げるサイトに育てていきたいと思います。
継続的にエントリーを作り続けていけるよう、がんばります。

ブログ移転計画とプログラミング 2.WordPressインストール編

まずはサーバーをレンタルして、そこにWordPress.orgからダウンロードしてきたファイルをぶっ込む所から。

実は3年前ぐらいにHPを作っていた時期があって。
その頃覚えたFTPでサーバにデータをアップロードするやり方が役に立ちました。

まずはサーバ選びから。
今回は、HPを作っていた時に利用していた、さくらインターネットにしました。
アカウントが残っていたし。
何より、今回参照したWordPress解説サイトがさくらインターネットでのインストールのやり方を例に説明してくれていたので選びました。

今回参照したサイト その1 AdminWeb:WordPressの使い方
”WordPress”と検索かけると、WordPress本家の次に出てくるサイト。
すごい。
サーバーへのインストールはほとんどこちらのクイックインストール云々及び手動インストールを参考にしました。

これまで2週間ぐらい、前回挙げたドットインストールでhtmlやCSSやMySQLを勉強してきたんですが、インストール段階ではほぼ不要だったんですね・・・。
データベースの作成もさくらインターネットのサーバー設定の所でチョチョイのチョイだったし。

さくらインターネットにはWordPressのクイックインストールという便利なサービスがあるようす。
なのですが、クイックインストールを使うと、作成したHPのアドレス末尾に、ファイルを入れたディレクトリを明記しないといけないらしい。
(*****.comではなく****.com/fileになるらしい。)
なので今回は手動インストールに挑んでみました。
手動でアップロードなので・・・そうです、ヤツの出番です。

今回参照したサイト その2 FFFTPの使い方
これも以前HPを作っていた頃に活用していたソフト。
ド定番といった所でしょうか。
懐かしい。
以前使っていたソフトということで、ここまではすんなりクリアー。

あとはファイルをサーバにアップロードするだけ、となりましたがここでちょっと立ち止まり。
「あれ?サーバーのどこにアップロードするんだっけ・・・?」

と、ここで
今回参照したサイト その3 さくらインターネット:ドメイン設定をしよう
今回参照したサイト その4 さくらインターネット:マルチドメインの設定

取得した独自ドメインの設定方法について。
”ファイルマネージャー”を使って、WordPressファイルをアップロードするディレクトリを作成して、アップロード完了!

ここで自分向け注意。
さくらインターネットの場合、データは”www”っていうフォルダにアップロードしないとダメ。
そうしないとwebサイトにファイルが反映されないから。
なんだけど、FTPでアップロードしようとすると、wwwより上の領域にもアップできてしまうのでややこしい!
3年前はコールセンターに質問して解決しました・・・。

と、サーバ上にWordPressのインストールが完了!
ファイル上げるディレクトリの設定で時間を食いましたが、まぁ何とかなりました。
結局「ファイルマネージャー」からファイルの作成・アップロードもできるから、FTP無くてもよかったんじゃね?という結論。

次はWordPressダッシュボードからいろいろ設定していきますよー。