2012年01月13日

関連記事を画像つきで美しく表示 -LinkWithin

しばらく前になりますが、メインブログのほうにLinkWithinを設置しました。

関連記事を自動で取得し、下のように画像つきでオシャレに表示してくれるブログパーツです。


LinkWithin

画像つきなので、関連記事のイメージがつかみやすく、
画像を多用しているブログさんには最適だと思います♪

邪魔な広告などが表示されない、シンプルなデザインもGood!



使い方はとってもカンタンです。

まずLinkWithinのサイトへ行き、
以下のようにブログの情報を入力します。

LinkWithinコード取得

@にはメールアドレス。YahooやGmailなどのフリーメールで大丈夫です。

Aには、関連記事を表示したいブログのURL。

Bでは、BloggerやWordpressなどのブログサービスの種類を選びます。

FC2やSeesaaなどの無料ブログをお使いの場合は、「Other」を選べばOKです。

Cでは、横に並べる関連記事の数を選択します。(3〜5記事)


ブログの背景が濃色の場合にはDにチェックを入れて、
最後に「Get Widget!」ボタンをクリック!

そうすると以下のようなコードが頂けると思います。


<script>
var linkwithin_site_id = XXXXXX;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>

ブログのHTML編集画面を開いて、このコードを</body>タグの直前に貼りつけます。

すると、自動で適切な位置に関連記事を表示してくれます。

表示位置を調整したい場合は、以下のタグを表示したい位置に入れればOKです。

<div class="linkwithin_div"></div>


わたしの場合は、間違って<head>〜</head>内にコードを貼りつけたので、
IEで表示崩れが起こってしまいました(笑)

どうやら、貼りつけコード内のごく小さな画像のせいで、
ヘッダー上に空白ができてしまった様子。


みなさまはお間違えのないようにお気をつけくださいね。

</body>タグの直前と書いてありますが、<div class="linkwithin_div"></div>の後ならどこでも動作するようです。

わたしはLinkwithinで関連記事を表示させてみる | ぶろぐ.1karaPCさまの記事を参考に
コードを貼りつけさせていただきました。

「ほかにもこんな記事が読まれています」部分の変更方法についても書かれているので、
参考になります。



で、あとはCSSで文字色などをチョイチョイといじって、おしまい。

背景色などもわりと自由に変えられるようですが、
あまり必要性を感じなかったので今回はパス。


ちなみに、設置してみてやっぱり横幅を変えたいという場合には、
もう一度コードの取得をやり直してくださいね。

同じメールアドレスとURLで、何度でもコード取得できます。


コードを取得するのにはメールアドレスの入力が必須なんですが、
今のところ迷惑メールや宣伝メールが来たりはしていないのでご安心を。



最後に、参考サイトさまをまとめて載せておきますね。

ありがとうございました。



最後までお読みいただきありがとうございます♪

よろしければランキングをポチッとしてくださいな揺れるハート


posted by まちこ at 16:41 | Comment(0) | TrackBack(0) | お役立ちツール・サイト | このブログの読者になる | 更新情報をチェックする
2011年12月25日

ワンクリックでリンクタグ自動生成‐Chromeエクステンション【Create Link】

Webクリエイターボックスさんで紹介されていたのをたまたま見つけて、
Create LinkというChromeのエクステンションを最近使い始めました。

このエクステンション、名前の通りですが、
開いているページのリンクタグを、ワンクリックで簡単に生成してくれるという優れものです。


たとえば、このブログのトップページを開いているときにこのエクステンションを使うと、

<a href="http://million-per-month.seesaa.net/">アフィリエイトで100万稼ぐ!</a>

というタグを自動でクリップボードにコピーしてくれます。

あとはリンクを貼りたい場所に貼りつけるだけ!


今までは

  1. URLをコピーして、
  2. ページタイトルをコピーして、
  3. リンクタグを生成して、

と3ステップ必要だったものが、
たった1ステップで完了してしまうのでかな〜り便利ですぴかぴか(新しい)(笑)


さらに、「Configure」というところをクリックすると、
貼りつけるタグのカスタマイズができます。

わたしの場合は、

別窓 <a href="%url%" target="_blank" title="%htmlEscapedText%">%htmlEscapedText%</a>

同窓 <a href="%url%" title="%htmlEscapedText%">%htmlEscapedText%</a>

と設定してます。(+ボタンを押すと項目を増やせます)

これだと別窓リンクと同窓リンクが使い分けられて便利です☆


HTMLがわからない初心者さんでもカンタンにできるので、
Chromeユーザーのブロガーさんは是非使ってみてくださいるんるん

オススメですよかわいい


インストールはこちらから→Create Link



最後までお読みいただきありがとうございます♪

よろしければランキングをポチッとしてくださいな揺れるハート


posted by まちこ at 14:15 | Comment(0) | TrackBack(0) | お役立ちツール・サイト | このブログの読者になる | 更新情報をチェックする
2011年10月02日

異なるブラウザ間での表示比較「Expression Web SuperPreview」

つい最近まで知らなかったんですけど、IEの違うバージョンを1台のPCに共存させることってできないみたいですね。

たとえばIE9がパソコンに入っている状態で、IE6をインストールすることはできないらしい。

(IE9をアンインストールすることになってしまう。)


ウェブ制作者の方はご存知だと思いますが、IEというのは非常に厄介で、バージョンによってサイトの見え方が微妙に違ったりするんですね。

そこでわたしは、Expression Web SuperPreviewというソフトを使っています。

このソフト、実はマイクロソフトが作っていて、IE6〜9の各ブラウザでの見え方をシミュレートしたり、比較したりできる優れものなのです。


有料版だとFirefoxやChrome、Safariなど主要なブラウザとの比較もできるみたいですが、
結構お値段が高いので(笑)、わたしは無料版を使っています。

無料版でもIEどうしの比較はできるのでとても便利ですよ。

「試用版」となってますが、60日間の試用期間が過ぎてもIEどうしの比較ならできるみたいです。


AllAboutに紹介記事がありますので、詳しくはそちらをご覧ください。

インストール方法や使い方が詳しく書いてあります。


それにしても、IEでの表示崩れ、どうにかしてほしいですよねぇ・・・┐(´〜`;)┌



最後までお読みいただきありがとうございます♪

よろしければランキングをポチッとしてくださいな揺れるハート


posted by まちこ at 16:32 | Comment(0) | TrackBack(0) | お役立ちツール・サイト | このブログの読者になる | 更新情報をチェックする
2011年10月01日

コピペが楽になるフリーソフト「ToMoClip」

以前ToMoClipというフリーソフトについて紹介すると言っておきながら、すっかり忘れてましたので今日ご紹介したいと思いまするんるん

ホームページを作成する際に、よく使うタグなんかを簡単にコピペで入力できたら楽だと思いません?

そこで大活躍するのがコピペ支援ツール。

わたしは今までこういったツールの存在を知らなかったんですが、
これ、一度使うと手放せなくなる便利さですw


コピペ支援ツールがどういうものかわからない方のために、簡単にご説明します。

普通は「Ctrl+C」でコピーすると、普通は一番最後にコピーしたものだけがクリップボードに記録されて、次にまたコピーをすると前のデータは消えてしまいますよね?

でも「ToMoClip」のようなツールを使うと、コピーしたデータの履歴をすべて記録しておいてくれるんです!

そして履歴の中からペーストするものを選んで貼りつけることができます。

ワードのクリップボードみたいな感じ、というとわかりやすいでしょうか。


さらに「ToMoClip」では、履歴を取らずによく使うものだけを登録することもできるので、
たとえば<p>タグや<strong>タグみたいに、よく使うタグの一覧を登録しておいて貼りつける、といった使い方もできます。

わたしのようなブロガーにはまさにもってこいの機能ですね!

しかも自分の使いやすいショートカットキーを割り当てることもできるので、貼りつけ作業がだいぶ楽になりますひらめき


そしてかなり便利なのが、以前にも触れた「選択文字の前後に(挟む感じで)テキストを貼り付けられる」という機能。

どういうことかといいますと、たとえば

「わたしはチョコレートが大好きなんです!」

っていう文があったとします(笑)

で、後から「チョコレート」の部分を強調したいと思ったとします。


そんなとき、普通はチョコレートの前に<strong>を貼りつけ、後ろに</strong>を貼りつけなきゃいけないんでしょうけど、
「ToMoClip」ではどうなるかといいますと・・・。

まず強調したい部分をこんな感じで選択して・・・

「わたしはチョコレートが大好きなんです!」

貼りつけを押せばOK!!あ〜ら簡単!(笑)

「わたしは<strong>チョコレート</strong>が大好きなんです!」

とまぁこんな感じで選択範囲を挟み込むように貼りつけができるんですね。

これ、とっても便利でしょ?(笑)


というわけで、ToMoClipはこちらからダウンロードできますので、よろしかったら使ってみてくださいかわいい

・・・紹介記事になるとやたらテンションが高くなる私、なんでだろう?(笑)



最後までお読みいただきありがとうございます♪

よろしければランキングをポチッとしてくださいな揺れるハート


posted by まちこ at 19:41 | Comment(2) | TrackBack(0) | お役立ちツール・サイト | このブログの読者になる | 更新情報をチェックする
2011年09月08日

CSSが効いているかを確認できる!Firebug Lite for Google Chrome

ホームページを作っていると、

「CSSでちゃんと指定しているはずなのに、反映されてない・・・」

「もぉ〜なんでいうこときいてくれないの!おばか!!」(笑)

なんてこと、よくありませんか?(私だけ?)


Firefoxをお使いの方には、Firebugというのが有名(らしい)のですが、
筆者はChromeちゃんを愛用しているため、ご縁がありませんでした。

・・・が。Google Chromeのエクステンションに、
Firebug Lite for Google Chromeなるものがあるとの情報が!

(参考:FirebugをGoogle Chromeで -cles::blogさま)


このFirebug Lite for Google Chromeで何ができるのかというと、
「自分のサイトのどの部分に、どのCSSが効いているか」ということを、一覧にして表示してくれるのです。

しかも、その場でCSSを書き換えると、リアルタイムで反映してくれます。

Firebugを使ったことがないので、本家との比較はできませんが、
この機能だけでもとっても便利です。


たいてい、レイアウトが思い通りにならないときは、
どこか別の部分に書いたCSSが効いているのを忘れている場合だったりします^^;

そんなとき、Firebug Lite for Google Chromeを使うと、どこを修正すればいいのかがすぐにわかります。

これからは、「なんで思い通りになってくれないの!!ぎゃー!!」と悩むことが少なくなりそうです(笑)


ほかにも色々と機能があるみたいなので、気になる方はご自分でお調べください(汗)

Google Chromeをお使いの方は、こちらのリンク⇒Firebug Lite for Google Chromeからダウンロードできます。

cles::blogさま、貴重な情報をありがとうございました。



最後までお読みいただきありがとうございます♪

よろしければランキングをポチッとしてくださいな揺れるハート


posted by まちこ at 17:21 | Comment(0) | TrackBack(0) | お役立ちツール・サイト | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。