MovableType 小技集 【更新】ソーシャルメディアに共有するボタンの設置方法（Twitter, facebook, mixi, GREE, Evernote, Google+, Tumblr, Pinterest, はてブ） ソーシャルメディアの各サービスがこぞって「いいね！」などの共有ボタンをリリースしています。ブログやニュースメディアでも頻繁に目にする昨今ですが、色々なソーシャルボタンの設置方法をまとめて紹介したいと思います。 目次（兼ショートカット） Twitter「Twitterボタン」 Facebook「Share」「Like（いいね！）」 mixi「mixiチェック」 GREE「Social Feedback（いいね！）」 Evernote「Site Memory（Clip）」 Google+「＋１」 Tumblr「Share on Tumblr」 Pinterest「

モニターを見つめる目に優しいメガネがZoffからも出る！しかも度付きOK、フレームも選べる！気になってます。hakoishiです。 さて、今回は実は便利なcssのセレクタ指定方法をちょっとだけ掘り起こしてご紹介。 直下にある要素だけ、とかセレクタ名が部分一致したら、はたまたリンク先パスによって、とか実はかなり便利です！ 特定の要素の直下の要素だけに一括でマージンを設定 特定の文言を含むセレクタ、及びその位置で対象を絞り込み指定 リンク先のパス次第でスタイルを切り分ける 特定の要素・セレクタを例外とする 特定の要素の直下の要素だけに一括でマージンを設定 #container>* { margin: 0 10px; } IE7以上対応。 親>子で、直下要素のみを対象指定。 上記例ではid="container"の直下の要素すべてにマージンが設定されます。 ユニバーサルセレクタには正直不安を感じ

僕のところに、毎月１，２件必ず寄せられる質問があります。 それは、「wwwあり」のURLと「wwwなし」のURLに関する質問です。 もう少し正確に言うと、「wwwあり」と「wwwなし」の統合です。 同じコンテンツを示すURLが、「http://www.example.com/」と「http://example.com/」のように、２つに分かれてしまっている場合があります。 人間にとっては同じでも、検索エンジンにとってはまったく別のページになります。 被リンクが両方に張られていたら分散してしまうし、それよりもなによりも異なるURLで同じコンテンツなので、複製コンテンツとしてマークされてしまう危険も付きまといます。 本来ならサイトの構築を始める前に、「wwwあり」で運用するのか、「wwwなし」で運用するのか決めるべきですが、何らかの事情で分かれてしまっていることもあるでしょう。 そこで、「ww

Updated 2013.10.15 / Published 2006.05.06 HTML文書の head要素内で meta要素のhttp-equiv属性の値に"refresh" を記述し、content属性にUAが文書を読み込んでから何秒後に指定の URI文書を表示するように働きかける設定であるクライアントプルと呼ばれる技術があります。 <meta http-equiv="refresh" content="10;url=/new/"> この設定によって、別のリソース（情報資源）へと移動させるリダイレクト（ある URI から他の URI に転送させること）が可能になりますが、この方法は移動を通知するページ数が多い場合には手間がかかり、実用的ではありません。そこで、ファイルが多数あるディレクトリごと移動した場合であっても、ユーザが移動前のリソースのURI へアクセスすると自動的に移動後の

CSS3を使い始めていくと、ぶつかる壁に「三角形みたいに尖った角」をどう表現するかというのがあります。三角形って思ったより難しいです。 まぁ無理しないで、イメージで作ればいいんですけど、ちょっとした装飾だったりすると、ちょこっとCSSで作れると楽な時もあります。 そこで、CSS3で「三角形みたいに鋭角を作る方法」を３つ紹介します。ここで紹介する方法には、メリットとデメリットがありますので、使い分けれるようになるといいと思います。 1. グラデーションを使う こちらの記事でも紹介しましたが、背景を background-size と background-position で4分割して、斜めのグラデーションを使うことで角を落とすことができます。 コード 4分割して、4つのグラデーションでそれぞれを塗ります。この方法では、塗りを使っているので、カスタマイズ性が高いですが、グラデーションを使って

以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度

Documentation You can add and customize the +1 button to meet the needs of your website, such as modifying the button size and load technique. By adding the +1 button to your website, you allow your users to recommend your content to their circles and drive traffic to your site. The +1 button can also improve the time spent on your site by providing recommendations for further reading. Use of the

TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue

一定期間更新がないため広告を表示しています

Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp

WordPressのサイドバーウィジェットについての覚書。2.5をベースに書いた記事です。 テーマへの適用方法、オリジナルウィジェットの作り方、オプション設定追加方法などをまとめた。 参考：Widgets API テーマにサイドバーウィジェットの機能を有効にするには、以下2つの手順が必要。 sidebar.phpに以下のPHPソースを入れる。 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?> この間にサイドバーウィジェットが入る <?php endif; ?> 冒頭のifはこっちでもいい。 <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?> ifの条件が違うだけで内容は同じ。 サイ