はてなブログ記事上スペースがいじれる様になった！ 2014/02/05に「はてなブログ開発ブログ」の記事で記事上スペースがブロガーに遂に解禁されました！ ブログをカスタマイズしよう！ 記事ページのタイトルと本文の間（記事上）にもソーシャルパーツなどを配置できるようにしました - はてなブログ開発ブログ これは今までに多くのはてなブロガーが望んでいた改変で、大変歓迎されるべきものです！ 色々な方が、この記事上スペースを何に使おうか試行錯誤されています。 SNSボタンを貼り付けたり、自分の人気記事へのリンクを貼り付けたり色々されているみたいですねー。 そんな中、Google Adsenseの広告を貼り付けている方をまだあまりお見掛けしないので、 先頭切ってやってみるか！ と思った次第で、やってみました！ GoogleAdsenseを記事上に表示する時の問題点 Googleアドセンスは色々なサイ

はてなブログでは、記事ページの「記事上」部分をカスタマイズできる機能を追加しました。記事タイトルと本文の間にソーシャルパーツなどを表示できます。 「記事上」設定画面と記事ページのプレビュー「記事上」は、これまでに提供してきた「記事下」と同様に、デザイン設定の「カスタマイズ」タブにある「記事」で設定できます。「記事上」欄に任意のHTMLコードおよびスクリプトを記述でき、はてなブログが標準で提供していないソーシャルパーツや、広告を掲載できます。どうぞご利用ください。 参考：2012-07-18 記事下部分をカスタマイズできるようにしました - はてなブログ開発ブログ なお、広告の掲載に際しては、はてなブログ「ガイドライン」の「広告ポリシー」や「禁止事項」をご覧のうえご利用ください。 ガイドライン - ヘルプ - はてなブログ 記事上の設定に関する注意点 - 記事ページとは 記事ページ（または記

本スクリプトは利用不可となりました はてなブログにトラックバック機能を拡張するウィジット はてなブログにトラックバック機能を実装する方法について考えていたのですが、サーバーサイド処理を『Pipes: Rewire the web』に代行させることで実現できました。『Pipes: Rewire the web』はWeb上の情報を変換する処理をグラフィティカルに行える環境であり、基本無料です。仮想サーバーを自前で用意する方式は負担が大きかった。 特徴 表示エントリへの言及を含んだ「はてなダイアリー」または「はてなブログ」のエントリを表示します 表示形式は『僕の考えた最強の「あわせて読みたい」はてなブログパーツ - 太陽がまぶしかったから』に準拠します スマートフォンでも綺麗に表示できます はてなブックマークの機能に依存しているため、表示エントリにはブックマークが必要となります*1 自身のブログ

はてなブログの「最新記事」を画像付きにするコード「はてなブログの「最新記事」を画像付きにする」で必要なコードを簡単に作れます。 続きの作業等は元記事を参考にしてください。 HTML & JS & CSS デフォルト画像には「http:」または「https:」から始まる、jpg / gif / pngの画像URLを入力して下さい。 タイトルには、サイドバーで表示させるタイトルを入力して下さい。 HTTPS配信に対応させる場合 URLはhttps:で指定して下さい ブログURL* デフォルト画像* タイトル* 表示件数* 1件 3件 5件 10件 15件 HTML & JS CSS CSSについて（追記：2014年3月20日） テーマによって、スタイルが崩れる場合があります。 上のようにタイトルの背景が途中で切れている場合は、CSSの修正が必要です。 .htbl_new_entry_text

たまに使うので自分用にメモします。 css3のtext-shadow等を使用した テキスト装飾のサンプルコードの 備忘録です。工夫すればいろいろ と作れるんでしょうけど、とりあえず よく使うものをピックアップします。 自分用のコピペ用サンプルです。用途は限られますけど、iPhone用サイトなどでも使えるので覚えておいて損は無いかなと思います。テキストだけだと管理が楽でいいですよね。 CSS3 text-shadow sample いろいろ。フォントはGoogle font APIを使用しています。付けてるネーミングは無いと不自然だから付けた的なものですので気にしないで下さい。 Default

Updated 2013.11.05 / Published 2007.02.02 font-familyプロパティは要素内の文字の表示書体となるフォントを指定します。値にはフォント名、または総称ファミリ名を指定します。総称ファミリ名が指定された場合は、UA の環境設定に指定されているフォントが自動的に選ばれて、そのフォントで表示されます。 値 <フォント> <総称ファミリ> inherit 初期値 UA の設定に依存 適用対象 すべての要素 継承 する メディア visual フォント名の指定は複数指定が可能で、各フォント名をカンマ（,）区切りで指定します。複数指定した場合は、ユーザの利用している環境（コンピュータ）にインストールされているフォントが指定順に優先して反映されます。また、"ＭＳ Ｐゴシック" のようにフォント名にスペースを含む場合は、フォント名の前後をシングルクォーテーショ

border-style と border-***-style は、境界線のスタイルを指定するプロパティです。 border-style … 上下左右の境界線のスタイルを一括で指定 border-***-style … 上下左右の境界線のスタイルを個別に指定 （*** の部分には、top、right、bottom、left が入ります） 上記のように、上下左右をまとめて指定する方法と、それぞれを個別に指定する方法があります。 div.example1 { border-width: thick; border-color: #ff0000; border-style: solid; } div.example2 { border-width: medium; border-color: #ff0000; border-top-style: solid; border-right-style

W3Cで「モジュール背景とボーダー」について2011年2月15日付けで更新されてますね。 CSS3では、背景画像の幅・高さを拡大・縮小するプロパティが追加されていますので、あらためてまとめてみます。 拡大・縮小による画像劣化が気になるところですが、許容できるかどうかの判断は個人差があると思います。近頃のブラウザは優秀で、いい感じでスムージングされるので「OK！」とぼくは判断しました。 さすがにIE6の拡大・縮小したときのジャキジャキ感は堪えられませんが、そもそも「background-size」は適用されず無視されるので、IE6では背景画像は拡大・縮小されません。 Safari、Google Chrome、Operaですでに実装されています。 Firefoxもプリフィックス「-moz-」で適用されます。 IE8では残念ながら未実装でした。。。この辺はプログレッシブエンハンスメントで乗り切り

2014-01-10 はてなブログのカスタマイズが楽しい(・∀・) はてなブログ 夜の庭からコンバンワ。年末年始からカスタマイズに精を出していたミィア猫(ΦωΦ)です。一応は一段落したかな？ はてなブログは、他社ブログに較べて不足している機能が多々あります。ですが、自分で手を入れるのもなかなか楽しいものですね。今回はカスタマイズ方法の紹介と変更箇所の覚書です。 最大の進化はTrackBackの導入！ はてなブログがユニークかつ、ブログらしくない最大のポイントはTrackBack機能がないこと。Zenback等でも対応が可能ですが、これを導入するサイトはスマホ読み込みがなかなか終わらないんです(´-ω-｀)ﾌﾑﾑ　しかも、読み込みが終了しないと「はてなスター」もつけられないんですよ……。そのために、スターをつけたくてもスルーしているブログもあります。 で、今回はid:bulldraさんが作成

2014-01-04 はてなブログデザインカスタマイズの解説。WEBデザインのノウハウも詳しく解説。 WEB ライフ こんにちはnasustです。今回は、はてなブログのデザインのカスタマイズが完了したので、どうやってカスタマイズしたのかをノウハウ含めて詳しく解説します。 始めに 今回のはてなブログのデザインカスタマイズは「よりiOSに近づいたOS Xのコンセプトデザイン : ギズモード・ジャパン」で紹介されているフラットデザイン風MAC OS Xデザインをモチーフに行いました。 このデザインに近づける為にカスタマイズしたポイントを解説します。 はてなブログのデザインテンプレートを選ぶ はてなブログのデザインのカスタマイズとは「ブログのテーマ」のCSSを修正するという作業のことです。 何故、CSSの修正かというとHTMLの修正ができないので「ブログのテーマ」の元から設定してあるCSSのスタ