SNSに更新通知を出す設定(のテスト)

前々からブログ更新をTwitterとFacebookでお知らせしております。
今時のSNSはURLを書き込むと自動で記事のアイキャッチ画像と要約を載せてくれます。
載せてくれるのですが、当ブログは設定がちゃんとしていない為、記事公開と同時にSNSに投稿するとアイキャッチ画像が表示されません!
インターネットが(!?)画像を認識する前に、投稿しましたという話をSNSに流すので、画像が表示されるまでにタイムラグが生じる
というのが自分の理解です。
回避するには手動でSNSにお願いして画像を読み込んでもらう方法があるのですが、めんどうです。
今回、重い腰を上げて設定に取り組みました。

使用したのはAll in One SEO Packというプラグイン。
Woedpressはプラグインというツールを使うと色々なワザが使えるのです。
使い方はこちらがわかりやすいと思います。

これでリンクのアイキャッチが表示されるようになったはず。
あとはSNSに自動投稿させるわけですが、ちょっと問題が。
Jetpackプラグインが仕様変更されたのかFacebookは個人からではなく、ページからしか共有できないようになっていました。
恥ずかしながら個人のページを立ち上げましたので、気にしないようよろしくお願いします。

さてうまくいっておりますでしょうか?


追記

Twitterの方はいい感じにできてますね!
Facebookはページの方に投稿されているのですが。
いるのですが…タイムラインに流れないとしょうもないような。
最近のFacebookはタイムラインへの自動投稿が渋くなっております。
アイキャッチ画像はちゃんと出るようなので、手動で投稿することになりそうです。

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

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

Wordでロゴをデザインする

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

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


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

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

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

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

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

GIMPで背景透明化する

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

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

次に画像背景を透明にするために
レイヤーにアルファチャンネルを追加
というのをやります。
↓のサイトを参考にしました!
[blogcard url=”https://synclogue-navi.com/gimp-clear”]

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

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

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

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

[blogcard url=”http://kquoe2.hatenablog.com/entry/20140121/p1”]
2値化のやり方は↑サイトを参考にしました。
ザックリやるには色ディザリングを使うのがいいのかな。
滑らかさを排除するぶん、エッジがギザギザしてしまいますが。
まぁ縮小して使用するのでOKでしょう!

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

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

まとめ

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

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

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

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

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

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

当ブログは2回移転してまして。
始めはJUGEMUブログ。
[blogcard url=”http://odstalactite.jugem.jp/”]

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

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

次にGoogleのBloggerに移転。
[blogcard url=”http://odstalactite.blogspot.jp/”]
レイアウトとフォントが超絶ダサいけど、けっこう見やすい?
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

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

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