XserverXserverSupportDomainDomainSupportMany-KingMany-King Support

カテゴリー:「ウェブデザイン」に関するアーカイブ

本サイトで採用しているウェブデザインに関する投稿記事を総括。

WordPress に最適なエディター!? Windows Live Writer

Mixi の中にある WordPress に関するコミュニティー(興味あるテーマに関しての情報を共有する仲間の掲示板のようなもの)で、「WordPress に最適なエディター」というのがありました!

私は、ほとんどのケースは、WordPress の管理画面から投稿記事を直接タイプするのですが、その他に ScribeFire という Firefox 用の拡張機能を使って、WordPress への投稿記事を公開しています。ScribeFire に関しては、「ITmedia エンタープライズ::ScribeFire でブログの更新頻度を上げる」でも詳細な解説がありますから、興味がある方は、参考にされたら如何でしょうか。

この ScribeFire は、結構愛用しているのですが、メニュー等が全て英語、英語が苦手というわけではないし、使い勝手が悪いわけではありませんが、やっぱり日本語の方が気分が良いはず!唯一、私として不便を感じているのは、何といっても作表ができない・・・当然、HTML のタグをベタ打ちすれば良いのですが、それでは技がありませんね。

そんな時に、お勧めの WordPress 用のエディターになんとなんと・・・Windows Live Writer が!しかも一個人ではなく、複数の方々が推奨しています。これにはちょっと驚き!

Windows Live Writer は、リッチ コンテンツを簡単にブログに投稿できるようにするデスクトップアプリケーションです。Windows Live スペース、SharePoint、Wordpress、Blogger など大半の主要ブログサービスに簡単に投稿できます。個人の写真、ビデオ、地図、タグなどのさまざまなコンテンツを使って人目を引くブログを簡単に作成できます。投稿する前にプレビューできます。記事をオフラインで作成し、後でオンラインになったときに投稿できます。

これまで、ScribeFire で十分と思っていましたから、他のエディターの利用を検討したことがなかったし、作表に関しても plugin で逃げようかな、とも思っていましたから。

すると、既におおよそ 1 年も前に「GIGAZINE::Windows Live Writer Beta 日本語版登場、実際に使ってみました」といった投稿記事が公開になっている!

上記の投稿記事によれば、作表もとっても簡単にできそうだし、いろいろな場面で何よりも無料というのが信じられない・・・何といっても Micorosoft ですからね!

それにしても ScribeFire でできるすべての機能が備わっていそうだし、増してや必要に応じて、拡張機能を導入することもできそうです。

こりゃ、かなり興味が湧いてきた!ちょっと気になっているのは、ローカルの PC にインストロールしなければなりませんが・・・

画像を投稿記事の中央に配置するスタイルシート

本ブログの画像は、ほとんどが左寄せになっています。好みもあるとは思いますが、私は単純に画像を左寄せにすることによって、テキストを可能な限り多くしようというのが意図なのですが。

しかし、画像が大きくなると、どうしても左寄せでは不恰好になってしまう。そこで、これまでは、画像を縮小して左寄せにしていたのですが、できることなら大きな画像を投稿記事の中央に配置できたらな~と考えていたのですが、どうもそのためのスタイルシートの構成が解りませんでした。

そんな基本的なことを・・・と考えていらっしゃる方々も多いとは思いますが・・・どうもネットを検索しても解りやすい説明が見つけられませんでした。

すると、何ともタイミングが良いことに、「小粋空間::CSS でブログ本文の画像だけをセンタリングする」という投稿記事が公開されました!な~るほど!

そこで、上記の投稿記事を参考に、本ブログの形式に合わせて、以下のコードを追加しました。

img.aligncenter, img.center {
display: block;
margin: 0 auto;
text-align: center;
border:1px solid #994400;}

これで、投稿記事の img タグに class を指定することで、画像が見事投稿記事の中央に!興味がある方は、参考までに、本ブログの投稿記事「Firefox の拡張機能をリストしてみた!」にある画像を確認してみて下さい。

どうです、見事でしょ!(って、大袈裟かな・・・)

ちょっとだけレイアウト変更:アフェリエイトを配置

A8A8 Supportあまり関心が無いアフェリエイト。以前公開していたブログやウェブには、とにかく何でもかんでも貼り付けていましたから、当然のごとくアフェリエイトも貼り付けていました。大袈裟なくらいに!

ところが、結局のところ、アフェリエイトによる成果としての臨時収入はほとんど無かったし、それで生活をしようなんてことは考えていませんでしたから、まったくの無計画・・・まったく意味も無く、レイアウトを考えることも無く、隙間という隙間に貼り付けていたわけです。

それでも 2 年前に 5,000円の臨時収入があったときは、それなりに嬉しかったし、もうちょっと工夫して臨時収入を増やそうかな、とも考えたのですが、その後まったく放置していました。

そこで、一念発起!?して、アフェリエイトを復活させようかな、と思い立って・・・それでも、本ブログで、あまりにもアフェリエイトが目立つのは嫌だし、投稿記事にあまり目立つようにアフェリエイトを貼り付けたくない!

そこで、できるだけ目立たないように、ブログのトップ(ヘッドーよりも上の部分)に、更には、サイドバーの隙間にレイアウトをちょっとだけ変更して貼り付けてみました。

もともと、テキストばっかりのブログですので、ちょっとだけアクセントになってこれもまた良いかな、なんてまたもや自己満足していますが・・・

利用しているアフェリエイトは、「エーハチネット::a8.net」A8 Text Supportです!登録は簡単だし、使えるアフェリエイト広告の数も充分(というか迷ってしまうほど)あるし、コードもまったく知識が無くても大丈夫だし。

ちょっとだけ変更したレイアウトで暫く様子見です。

ブログ制作に役立つ!?5 つの Firefox 拡張機能

ちょっと以前の投稿記事ですが、「Design Walker::WEB制作時に便利な 9 つの Firefox 拡張機能 (Add-ons)」を発見しました。私は、ウェブを制作しているわけではありませんが、本ブログを趣味で運営しています。つまり、ブログ、特に WordPress のデザイン等には、かなり興味があるわけです。

ということで、本格的にウェブ制作はしていないけど、ちょっとしたブログ制作はしている、という方々のため!?(というよりも、自分のための・・・)お役立ち Firefox 拡張機能をご紹介!

  1. Web Developer
    ウェブサイトに限らず、ブログに関しても改良や編集をサポートしてくれる・・・特に、CSS をその場で編集できたり、HTML や CSS の構文チェックもしてくれたり。その他、ウェブサイトやブログの開発を実践しているには方々には嬉しい拡張機能ですね。
  2. Screengrab
    簡単にスクリーンショットを撮ってくれる拡張機能で、ウィンドウ丸ごと、ページ全体、見えている部分等を PNG 形式で保存できる様になるそうです。
  3. MeasureIt
    CSS において区切られた幅や高さ等のサイズを計測してくれる拡張機能。ブログの CSS を改良している時に本当に欲しい機能ですよね。
  4. ColorZilla
    私にとって、この拡張機能が必須!ウェブサイトを徘徊していると「何だ、この色?」ととにかく気になる。そうした輩に、色をコードで示してくれます。
  5. ScribeFire
    とにかくブログを書いている人には、本当に便利な拡張機能!いちいち管理画面を開かなくても投稿記事を公開できます。「ITmedia エンタープライズ::ScribeFire でブログの更新頻度を上げる」にも解説されていますよ。

上記以外にも、本当に役に立つ拡張機能があるでしょうけど、私が興味を持っている拡張機能のみをリストしてみました。

Gadgets powered by Google って知らなかった!

ウェブサイトを徘徊するのは、日常の習慣になっていて、良いとは思わないものの、一日でも徘徊しないと何か出遅れ感を感じるようになって・・・もう病気ですね!

今日も朝からメール確認、そして毎日確認しているブログやウェブページを確認していると・・・ブログのサイドバーに、「gadgets powered by Google」といった表記を発見。何じゃこりゃ、とリンクをクリックすると何やら英語のページへ。

内容を確認すると、Google ユーザーによって開発された所謂「ウェブツール」とか「ブログツール」らしいのです。そこで、「Find gadgets for your webpage. 」をクリックすると・・・

うっそ~

いったいいくつのパーツがあるんでしょう。お好みのツールを見つけるのが大変ですが、いざ見つけて「自分のウェブページに追加」ボタンをクリックしてやると、コードが生成されて、そのコードを自分のウェブページやブログへ貼り付けるだけ!

こんなのあったんだ~

まだまだ、知らないことだらけだな~と変に納得している自分が面白かった・・・

Page 1 of 3123»