スポンサーサイト

--年--月--日 --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブログを書くツールとかあれこれまとめ

2012年04月14日 01:33

ブログを効率的に更新するツールまとめ
という記事を見たら自分がやっていることとさほど変わりませんでした。
でも人の使っているものって興味があるかも…と思ったので自分なりにまとめてみました。

テキストエディタ


ブラウザに直接ものを書くのはリスクが高いので基本的にやりません。
だからといっていちいちオンラインエディタを使うまでもないので軽くて適当なテキストエディタを使います。
私が使っているのはサクラエディタ。整形作業に使う冗長な動作はマクロを登録。
オリジナルcssやlightboxなどのよく使うタグはIMEの辞書に登録。
そんなかんじでカタカタ書いています。

写真


スマホで撮影した写真はUSB経由でPCに取り込んで、
そのままだと画像がデカすぎるので適当にリサイズしてからアップロード。
スマホからpicasaにアップロードして、picasaの画像をブログに直リンさせるという方法をとっていた時期もありました。
picasaは1枚の画像で3サイズくらい作ってくれるので、小さい画像に大きい画像をリンクさせるという使い方。
しかしあっという間に無料で使える容量がいっぱいになってしまいました。
いい作戦だと思ったのだけどな…
余談ですが、サムネクリックで大きな画像表示するのにはlightboxをガシガシ使っています。
導入が簡単なのに表現がリッチになるjquery、すばらしい。

キャプチャ


キャプチャに使っているのはfirefoxのPageSaverというアドオン。
PageSaverのいいところは表示しきれない箇所も撮ってくれるというところと、ファイル名を勝手に付けてくれるところ。
ワンアクションで保存できるのはとてもべんりです。
しかしそろそろブラウザはchromeに移行したほうがいいかなー。たまに使いますがchrome、起動が早いし動作が軽い。
firefoxの気に入っているアドオン相当のchromeプラグインがきちんと揃っていれば…

画像の加工


リサイズや切抜き、モザイク処理くらいの作業であればJtrimがお気に入り、軽い。
しかし最近では撮影した画像はとても大きいので、ほぼ必ず小さくする処理をするようになりました。
一括リサイズする方法をそろそろ模索したい。

情報収集


基本的にネタに困ることはないのと、趣味や興味のあることなど私の脳内垂れ流しブログなので特に情報収集はしません。
書きたいことは色々ありますが、ただただ時間がない…。
「今日のランチはパスタでしたー^^おいしかったー^^おわり」のような、
一般人のどうでもいい食生活をお知らせするようなうすっぺらい内容は書きたくないなー。

twitter


最近はtwitterに流れてブログの更新頻度が落ちたーという人も多いようですが、
そもそもこの二つの見られ方は全く違うと思っています。
twitterはリアルタイム性が強くログが流れるものなので過去の情報は掘り出しにくい。
ブログはストック性が高く長い期間に渡り参照されるもの。
「twitterに書いたからそちらを見てください」なんて書かれてもそれが1年前の話だったら困るよねということ。
なので自分のブログに自分のツイートを埋め込みタグを使って貼り付けてもいいし、
自分のツイートを見返して要点をまとめても記事にしてもいいし、
要するに同じ事を書いても全然OKだよなーと閲覧側としては思うので、わたしもぜんぜん同じネタを書きますし、
みんなも書いたらいいじゃないのーというか書いてほしい。


そういえば、国立情報学研究所(NII)と丸善出版が『ウェブらしさを考える本』の内容を無料公開しているそうです。すごい!
ちらっとみてみたらとても読みやすい文章で主観的すぎずわかりやすそう。
これだけのボリュームを無料公開するなんて…
ひとつぜいたくを言えば、スマホなどで読みやすい電子書籍みたいな形にすると、もっと話題になって読む人が増えそう。
twitterやらブログやらも含めてwebのことが好きな人はぜひ読んでみたらいかがでしょうか。
わたしも時間を見つけて読んでみよう。

ソーシャルメディア炎上事件簿ソーシャルメディア炎上事件簿
(2011/08/25)
小林 直樹

商品詳細を見る
スポンサーサイト

【超かんたんcss】外部リンクにだけアイコンを表示する

2012年03月28日 23:20

タイトルそのままです。外部リンクの右側にアイコンをつけるようにcssをいじりました。
こんなかんじです↓
 Google

jqueryでcssを付与するつもりでしたが、cssだけでできたのでらくちんです。

ポイントはふたつあります。
ひとつめのポイントは、私のブログの場合右カラムに色々埋め込んでいて、
それら各リンクにいちいちアイコン付けられたら困るため、エントリー内のみを対象にする点。
ブログを使っているかたはエントリーのくくりになんというクラスが定義されているかテンプレを見て確認するといいと思います。
ちなみに私が現在使用しているテンプレでのエントリークラスは.entryというクラス名でした。

もうひとつのポイントは、外部リンクにだけアイコンをつける=自分のURLは除外するという点。
たとえばわたしのブログはhttp://ruicosweets.blog116.fc2.com/ですが、
FC2は画像のURLが違うようなので、 http://blog-imgs-48.fc2.com/の2つを除外することにします。

リンクのカラーがhoverとactiveのとき変わるので、アイコンもhover&active用を用意しました。
ということでやっつけですが以下cssソースです。


/*エントリー内のリンクにアイコン付与(通常)*/
.entry a[href^="http"] {
background:url("アイコンのURL") no-repeat right center;
padding-right:15px;
margin-right:5px;
}

/*エントリー内のリンクにアイコン付与(hover&active用)*/
.entry a[href^="http"]:hover,
.entry a[href^="http"]:active {
background:url("アイコンのURL") no-repeat right center;
padding-right:15px;
margin-right:5px;
}

/*自分のサーバはアイコン付けないよ*/
.entry a[href^="自分のサーバURL"],
.entry a[href^="自分のサーバURL"]:hover,
.entry a[href^="自分のサーバURL"]:active,
.entry a[href^="自分の画像サーバURL"],
.entry a[href^="自分の画像サーバURL"]:hover,
.entry a[href^="自分の画像サーバURL"]:active{
background:none;
padding-right:0px;
margin-right:0px;
}


複雑な条件の場合はjqueryを併用するのがいちばんだと思います。
そういえば以前、ソースをきれいに整形するなんたらっていうプラグインを試みたんだけど、
どうもうまく表示できないので(FC2のエスケープ処理の問題かと)放置していたのを思い出しました。
あいもかわらず放置しますよ。


CSS3デザインブック 仕事で絶対に使うプロのテクニックCSS3デザインブック 仕事で絶対に使うプロのテクニック
(2012/03/21)
MdN編集部

商品詳細を見る

twitter公式がツイート埋め込みコードを出してくれるようになったよ

2012年01月14日 02:51

ツイートの引用にblackbirdpieというサービスを使っておりました。
twitterのdevelopersページで公開されているサービスです。
ツイートのURLからHTML+CSSを生成してくれるので、
サイトなどに貼り付けるだけでキレイに形成されたツイートを表示できるという便利サービス。
ブックマークレットも公開しているのでfirefoxに入れたらもっと便利になりちょいちょい使っていました。

昨日またblackbirdpieを使おうと思ったら、なんと使えない…サイトもPage not foundだし…
何事かと思ったら、さいきんついに公式が貼り付けコードを吐いてくれるようになったみたいで使ってみました。
まだ知らない人も多そうなので、かんたんですが以下解説です。

1.貼りたいツイートをクリックします


twitter01

2.ツイートがパカッと分離したら『詳細』をクリックします


twitter02

3.『このツイートをサイトに埋め込む』をクリックします


twitter03


4.貼りたいコードの種類を選んでサイトなどにコピペするだけ


4-1.キャプチャみたいに装飾した状態で貼りたい場合はHTMLを。
ちなみにひとつの画面に複数ツイートを貼る場合、
最後の1行(scriptタグ)はどこかにひとつあればいいとおもいます。
twitter04


4-2.ショートコードはwordpressくらいでしか使えないみたい。
twitter05


4-3.リンクはその名の通りただのリンク。
このページのURLがまさにそのリンクなので、わざわざここで表示する必要はないよね…
twitter06


…といった説明はこちらに書いてありました。
twitter08


というわけで、HTMLのコードをサイトに貼ります。


twitter04


ブラウザで表示するとこんなかんじ。





ちなみに従来使っていたblackbirdpieのコードはこんなかんじ。


twitter07


ブラウザで表示するとこんなかんじ。

うわああああああああんんんんSun Jul 03 15:52:06 via Twitter for iPhone





貼り付けソースは新しい方が少なくていい。うれしいです。
しかしblackbirdpieはCSSもいっしょに貰えていたので、私はたまに直接フォントやサイズ調整しており、
今回の昨日は、そういった表示まわりがすべてtwitterにおまかせという形になってしまいいじれなくなった…その点が残念。
正直このフォント見づらい…ダサいし…

本当ならblackbirdpieのブックマークレットも復活してほしいけれど、
公式のページで埋め込みコードが出てくるのはやってくれたね!という感じです。

しかしtwitterはjavascript好きね。

一応web上でのコード生成してくれるblackbirdpieページを見つけましたのでどうぞ。
blackbirdpie






Twitpicがブログパーツに対応した(^o^)!

2011年07月16日 00:17

画像UPサービスについての葛藤


ちょっとした画像をupするのに、私は昔からつなビィというサービスを使っております。
こちらにPCからアクセスするとサイドバーにflash風に表示されるあの画像たちです。

つなビィは一応ブログサービスなのですが大してテンプレは充実していなくて、
ただブログパーツとしては大変優れているので(自分がブログなのに!)
つなビィに画像をupしてブログパーツとしてメインのブログに貼る、という使い方をする人が殆どな感じです。

しかし最近はみなさん画像のupにtwitter公式連携しているサービスを使っている人が多いですね、
私もTwitpicを少しだけ使っていた時があったのですが、
画像UP先として以前からつなビィを使っていたこともあって、
あちこちにUPするのも気持ち悪いし…と、頑なにつなビィの利用を継続しておりました。
一応UPするとtwitterに自動投稿するよう設定してはいるのですが、
Twitpicに比べるとやっぱりつなビィはtwitter向きじゃないんですね。
Twitpicとつなビィそれぞれに長所短所があるんです。

つなビィの長所
・ブログパーツとして使える(サムネ一覧、flash風など選択可)
・画像をたんまりUPしている

つなビィの短所
・twitter公式連携をしていないのでtwitterクライアント内で画像表示できない(閲覧にブラウザ必須)
・画像サイズは2Mまで
・閲覧者的に「一応ブログだしtwitterで晒しにくいよね…」な気がする(私は構わないが)

Twitpicの長所
・twitterやらの連携色が強い
・twitter公式連携をしているのでtwitterクライアント内で画像表示可能
・たぶん画像サイズ制限無し(ふとっぱら)
・引用しやすい(貼り付けHTMLコードがある→ブログに引用しやすいな…)
・閲覧者的に晒しやすい(私はどんどん見てもらって構わないので!)

Twitpicの短所
・ブログパーツがない、RSSから自力で作ればいいけどゴチャゴチャかまう時間がない

要するに、Twitpicがつなビィのようにいい感じのブログパーツを作ってくれたら完全乗換えを考えてもいい
そんな風に思っていたのです。
すると、ようやくTwitpicがブログパーツ化に対応したらしいじゃないですか。


ということで私は乗り換えることにしました。
従来の画像はつなビィ、今後画像はTwitpicにUPしていきます。
色々なtwitterクライアントで閲覧している人は、
今後私の画像ツイートはほぼそのクライアントの中で閲覧できるかと。思います。
サイドバーにはしばらく二つ置いたままで、しばらーくしたらつなビィはリンクのみにさせようかな。
ただでさえFC2は重いしな!

そんな感じでTwitpicのブログパーツ化の方法。



(1)こちらにアクセスする
http://twitpic.com/widgets/designer?theme=standard

(2)Widget Themeでウィジェットのタイプを選ぶ
Standard Vertical:サムネ+コメント(ツイート)のレイアウト
Thumbnail Grid(Vertical):サムネのみのレイアウト


ちなみにこちらがStandard Vertical
ツイート内容が表示されるので私はこちらの方が好きです。
Twitpic1.jpg


こちらはThumbnail Grid(Vertical)
画像にマウスオンしてもツイート内容はツールチップ風に表示してくれません。
せめてimgのtitleにツイートを入れてくれたらいいんじゃないかな。
Twitpic2.jpg


(3)いろいろと好きなように設定する
色とかお好きなように…
割と重要っぽいのは、
Number of Images (max 20) でブログパーツに表示する画像のMAX値を入れる


(4)コードをサイトに貼る
Widget Codeをコピってサイトなどに貼るだけでおわり。
ただ、貼り付けた後ブラウザで表示すると文字化けする事があるようです。
少なくともFC2ではバケバケでしたのでその回避方法。
scriptタグにcharset="utf-8"を追加するだけ。
例:<script type="text/javascript" charset="utf-8" src="(略)"></script>



かんたん。かんたん。


ランチャちゃんマジ便利

2010年11月12日 00:52


Orchisというランチャを使い始めてしばらく経ちますが、本当に便利です。

ディスプレイ狭い…


私のディスプレイ解像度は1024×768で、最近ではちょっと小さい方。
しかし世の中ではまだまだいちばん主流な解像度なのです。
なので、サイト設計者の方は横幅をギリ広くしたとしても900pxにすべきだと思うんですね、
ウェブデザインの本や解説サイトなどでも書いてありますしね。


そんなせませまディスプレイを使い続けておるわけですが、
私はPCで色々な作業をするので、色々なソフトウェアをたくさん入れています。
インストールしたソフトウェアはスタートメニューの「すべてのプログラム」の中に表示される事が多いですが、
その「すべてのプログラム」が大変カオスな状態なのです。

すべてのプログラム


\せ、狭いよ!/


あ、モザイクを入れているのは、P2P的なものを入れているとかではなくてですね、
「こんなの使うヤツは情弱」みたいにpgrされるのが怖いのと、
アレなゲームのタイトルを隠したいというそんな恥じらいです。

ランチャ最強説


この「すべてのプログラム」に入っていないフリーソフトもたくさん入れている上、
これって結構表示されるのが遅いし、ソフトウェアを実行するまでのアクションが多いのが煩わしいので、
スタートメニュー上に良く使うものを入れていたのですが、
768という高さ制限に耐え切れず、Orchisを取り入れたという経緯があるわけです。

初めはよく使うプログラムをグループ化して入れていたのですが、
最近もっと便利になるよう設定してみました。

・特殊機能を追加してみた
・表示方法をキー連打(ctrl)にしてみた
・よく使うフォルダを入れてみた
 →子階層を開かないよう設定
 →開く時はエクスプローラとして開く



Orchis


いやー便利!
特に任意のフォルダのエクスプローラを表示するのに、
Orchis呼び出し→クリックの2アクションで開くのが素晴しいですね
そしてOrchis起動直後はシャットダウンにフォーカスが当たっているので、
Orchis呼び出し→enterの2アクションで電源OFF。

ランチャマジ便利。使っていない人は人生を損している。


Windowsフリーソフト大全集 2010年度版 (100%ムックシリーズ)Windowsフリーソフト大全集 2010年度版 (100%ムックシリーズ)
(2009/12/10)
不明

商品詳細を見る


最近の記事


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。