WordPressにソーシャルブックマークへ追加ボタンを表示
WordPressにソーシャルブックマークへの追加ボタンの表示方法を調べました。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
■はてなブックマーク <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>"><img src="http://demo.veryposi.info/images/b_entry.gif" width="16" height="12" style="border: none;" alt="この記事をはてなブックマーク" title="この記事をはてなブックマーク" /></a> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>"><img src="http://b.hatena.ne.jp/entry/image/<?php the_permalink(); ?>" style="border: none;" alt="はてなブックマーク - <?php the_title(); ?>" title="はてなブックマーク - <?php the_title(); ?>"></a> ■Livedoor Clip <a href="http://clip.livedoor.com/redirect?link=<?php the_permalink(); ?>&title=<?php bloginfo(’name’); ?>%20-%20<?php the_title(); ?>&ie=utf-8" title="この記事をlivedoorクリップ"><img src="http://parts.blog.livedoor.jp/img/cmn/clip_16_16_w.gif" width="16" height="16" alt="この記事をlivedoorクリップ" style="border: none;vertical-align: middle;" /></a> <a href="http://clip.livedoor.com/page/<?php the_permalink(); ?>"><img src="http://image.clip.livedoor.com/counter/medium/<?php the_permalink(); ?>" style="border: none;" alt="livedoorクリップ - <?php the_title(); ?>" /></a> ■Yahoo!ブックマーク <a href="http://bookmarks.yahoo.co.jp/action/bookmark?t=<?php urlencode(the_title()) ?>&u=<?php urlencode(the_permalink()) ?>"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16" alt="この記事をYahoo!ブックマーク" style="border:none;"></a> <a href="http://bookmarks.yahoo.co.jp/url?url=<?php urlencode(the_permalink()) ?>"><img src="http://num.bookmarks.yahoo.co.jp/image/small/<?php the_permalink() ?>" style="border: none;" alt="Yahoo!ブックマーク - <?php the_title(); ?>" title="Yahoo!ブックマーク - <?php the_title(); ?>" /></a> ■del.icio.us <a href="http://delicious.com/save" onclick="window.open(‘http://delicious.com/save?v=5&noui&jump=close&url=’+encodeURIComponent(‘<?php the_permalink() ?>‘)+’&title=’+encodeURIComponent(’<?php the_title() ?>‘),’delicious’, ‘toolbar=no,width=550,height=550′); return false;"><img src="http://static.delicious.com/img/delicious.small.gif" height="10" width="10" style="border: none;" alt="この記事をdel.icio.usへ登録する" /></a> ■Googleブックマーク <a href="http://www.google.com/bookmarks/mark?op=edit&hl=ja&bkmk=<?php urlencode(the_permalink()) ?>&title=<?php urlencode(the_title()) ?>"><img src="http://www.google.co.jp/favicon.ico" style="border: none;" alt="この記事をGoogleブックマーク" title="この記事をGoogleブックマーク" /></a> |
調べたのは
はてなブックマーク、livedoorクリップ、Yahoo!ブックマーク、del.icio.us、Googleブックマークの5つです。
よかったら使ってみてください。
俺は「AddClips」っていう便利なWebサービスがあるのでそちらつかいます
ブロックレベル要素をセンタリングする方法
HTMLでインラインレベル要素をセンタリングしたい場合、「text-align:center」と記述すればセンタリングされますが、
ブロックレベル要素をセンタリングしたい場合は、「text-align:center」ではセンタリングされません。
これは、「text-alignプロパティ」がインラインレベル要素に対してのスタイルを定義するものだからです。
う～ん
こまった、ブロックレベルの要素をセンタリングしたいぞ
こんなときは、親要素に対しての左右のmarginでセンタリングを行うようにします。
こんな感じ
1 2 3 4 5 |
<div style="width: 300px;"> <div style="margin: 0px auto; width:20px; border:1px solid red;"> ○ </div> </div> |
これでブロックレベル要素のセンタリングもOK
HTMLのブロックレベル要素
HTMLでブロックレベル要素となるタグは、
- p
- h1～h6
- div
- ul
- ol
- dl
- pre
- hr
- blockquote
- address
- fieldset
- table
- form
- script
- noscript
- ins
- del
があります。
XHTML 1.0 Strict DTDで、「body」の要素の次にはブロックレベル要素がこないといけない
と定義されています。
なので、bodyタグの中には上記要素のいずれかが入ることになるのだ
WordPressのTinyMCEにTypePadの絵文字を追加したよ！！
この記事の内容は「TinyMCE Advanced」で簡単に絵文字を追加できるようになりました。
詳しくは、記事：TinyMCE AdvancedっていうプラグインにTypePad絵文字追加したよをご覧ください。
WordPressの現在のデフォルトの投稿用エディタ「TinyMCE」にTypePadを追加しました
最初は、FCKEditorを使用しようかと思ったのですが「iG:Syntax Hiliter」というプラグインとの相性が悪く記事のメンテナンス性が著しく低下した為にデフォルトのエディタTinyMCEを使用することにしました。
FCKEditorを使用していた時に、TypePadの絵文字を追加し使用していたのでTinyMCEでも同じように絵文字を追加したいなと思ってサイトにソースが落ちてない探していたのですが…ない
なので、作っちゃいました（実際は、FCKEditor用の落ちてたソースをTinyMCE用にカスタマイズしただけだけどね）
こんな感じです。
で、これがソースになります。
Download：TinyMCEでTypePadの絵文字を使う為のTinyMCE用プラグイン
設定方法：
