注意事項（必読!!） 必ずバックアップは取って下さい。「設定」→「詳細設定」のエクスポートでバックアップデータをダウンロードして下さい。 テスト用のサブブログを作ってエクスポートしておけば、何かあった時に役立ちます。 はてな側で設定している編集モード（みたままモード、はてな記法、Markdown）以外で作成された記事の置換はできません。 はてな側で設定している編集モード（みたままモード、はてな記法、Markdown）以外で作成された記事を置換したい場合は、はてな側の編集モードの設定を変更し、再度ログインして下さい。 非公開のブログには利用できません。 トラブルが発生した場合の責任は負いかねますので、ご了承ください。 詳しくはコチラの記事をご覧ください。 はてなID ブログURL APIキー 設定している編集方法 見たままモード はてな記法モード Markdownモード 必ず、はてな側で設定
「後で読む」の 代表サービス Pocket。書いた記事がどれだけ Pocket に登録されているかを JavaScript だけで取得したいのですが、公式には Pocket 数取得のための API がないということで JavaScript の力だけでは無理です。ですので米 Yahoo! が提供している YQL というサービスと併用して Pocket 数を取得したいと思います。 YQL は特に登録せずとも使えるサービスなのでこちら側がすることは JavaScript コードを書くだけです。パッと見「Pocket 数を JavaScript だけで取得する方法」に見えるかと思います。 追記：Pocket 公式ボタンの仕様変更があったため色々変更しています。2016/12/4 YQL とは 参考：YQL YQL はものすごく簡単に、雑に言うと「指定した URL の内容を JSON 化して送ってく
わいひらさん、simplicityありがたく使わせていただいております。ありがとうございます。 httpsサイトでSNSカウンタがぐるぐるするので報告します。twitter/google+/hatenaブックマーク/pocketで確認、facebook問題なし、ほかは確認していません。 原因はhttpsサイト内でhttpリクエストを投げているからで、一部は修正できました。ただ、次の問題は解決できず、ちょっと無理ではないかなと思っています。 google+で使用している datatables.org がSSL証明書期限切れ（0件なら表示確認） api.b.st-hatena.com がSSL証明書不正（b.st-hatena.com のもの） twitterが表示される場合とぐるぐるの時があって再現性が低い どれも外部要因と思われるので、ご報告まで。 1.7bとの差分は以下になります。htt
各ブラウザのCSS3の実装も進み、最近では画像を使わずにサイト上のブロックの背景をCSSだけでデザインすることが増えてきていると思います。特にスマホサイトなどではできるだけ画像を使わずに容量をおさえておきたいということから、その傾向が強いと思います。今回は背景パターンとしてよく使われる「斜めストライプ」をCSSのみで作る方法についてまとめてみようと思います。 まず、前準備として以下のようにdiv要素を作っておきます。このdiv要素に対してCSSを指定していきます。 <div class="div2269"></div>それから、斜めストライプを作成する上で必要なCSSは、「linear-gradient()関数」と「background-sizeプロパティ」となります。事前にご確認ください。 linear-gradient – CSS | MDNbackground-size – CSS
※記事更新から1年以上が経っているため情報が古い可能性があります 当ブログ「ひつじの雑記帳」は5月1日で運営1ヵ月目を迎えました。お陰様で5記事しか書いてないにも関わらず1ヵ月目で4万PVを達成することができました。 投稿する記事の質は当然意識してきましたが 、短期間でここまで成長できたのはブログデザインの影響も少なからずあるかなと感じています。 そこで今回は、当ブログ「ひつじの雑記帳 」で実践しているカスタマイズ・コード全てを紹介していこうと思います。 当初はこのブログのスマホデザインのカスタマイズコード全てをひとつのパックとして5000円で販売しようと思っていたんですが、いろいろと気が変わったので全て無料で公開することにしました。 デザイン完成図 使う色を落ち着いた色に統一したフラット風のデザインに仕上げています。おすすめ記事を宣伝するスペースもいくつか設けているので直帰率の改善にも貢
はてなブログのAMP対応AMP対応について、レンタルブログサービスならでは制約もあるので、それらを中心に紹介していきます。 設定編はてなブログでAMP対応するのはすごく簡単です！ 有料プランの「はてなブログPro」を利用している方が対象ですが、「設定→詳細設定」にある「Accelerated Mobile Pages (AMP) を配信する」にチェックを入れて変更するボタンを押したら完了です。 注意事項はてなブログでAMPに対応させる場合、注意事項がたくさんあるのでまずはそちらから紹介します。 はてなブログのデザインテーマは反映されないサイドバーモジュールや、HTMLの自由記述（記事上下、ヘッタ、フッタなど）が配信されないstyle属性（CSS）が反映されない記事中のJavaScriptが反映されないはてなスターが反映されないはてなカウンターは非対応（カウントされない）ざっくり説明すると、
最近のWebはフラットデザインが流行ってますが、まだまだ現役ってことで使ってて新たな発見もありましたのでまとめておきたいと思います。 基本の指定方法 box-shadowもtext-shadowも名前が違うだけで指定方法は同じで、4つの長さ、影の色、影の向きからなっています。 なので、説明はbox-shadowで書いていきますがtext-shadowも同じだと思って見てください。 box-shadow:1px 1px 1px 1px #454545; text-shadow:1px 1px 1px 1px #454545 inset; 4つの長さについては以下のとおりです。 1番目の値は横方向の長さです。正の値だと右へ、負の値だと左へ影が付きます。【必須】 2番目の値は縦方向の長さです。正の値だと下へ、負の値だと上へ影が付きます。【必須】 3番目の値はぼかし距離です。値が大きいほどぼかしが
cssで作るシェアボタンのデザインパターンをたくさん考えてみました。とりあえずシェア数の表示がない、単純なボタンとして36種類あります。（色違いなども若干含みます。） 記述するhtmlはどれも同じようなものですが、一部微妙に異なるものもあります。基本的にはcssだけでデザインを決めています。アイコンフォントに関してもcssだけでほとんどやっていますが、そのコードは省略していますのでソースを見てください。 コピペでもだいたい使えると思いますが、それぞれ微調整が必要なものもあると思います。なのでコピペだけでなく自分のサイトに合わせて調整できるcss中級者以上向けですね。スマホ表示も考えてないし。（スマホで見ると崩れてるやんwと思う人はこの記事の対象外です。） というか、ローカルなhtmlで作っていたものをここにコピペしたらうまく動かないものやフォントが反映されていないものがありました。面倒なの
.btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }
狭間純平@junpei_hazamaです。 最近いろんなサイトを参考にさせていただきながら、当ブログのカスタマイズをいじいじしまくっています。先人の知恵ってすごい！ というわけで今回ははてなブログのスマホ表示のヘッダー部分についてのカスタマイズを説明していきます。これからカスタマイズを考えている人はぜひ参考にしてみてください〜 はじめに注意！ ・基本的に無料版ではなく、有料版のProの方向けの記事です。 ・この記事ではPC版とは別にコードを記入していくため、レスポンシブ設定は解除しておいて下さい。解除の仕方ははてなブログ管理画面から「デザイン」→「スマートフォン」→「詳細設定」でチェックをはずせば完了です。 ・また、スマホの設定画面ではCSSデザインを書き込むスペースがありませんが、「スマートフォン」→「ヘッダ」→「タイトル下」に以下のコードを書き込むことでCSSコードが反映されるようにな
ヘッダー、タイトル画像の設定について説明します。他のデザインテーマのカスタマイズにも応用できます。 タイトル画像の設定（はてなブログのタイトル画像機能を使う場合） タイトル画像の上下の余白を取る タイトル名の文字の色変更、中央寄せ cssで直接指定する ヘッダーの背景に横幅いっぱいに画像を設定する #blog-titleに横幅いっぱいに背景画像を指定する スマートフォンでもヘッダーが見切れないよう調整する 【追記】Media Queriesで画面サイズによってタイトル背景画像を切り替える はてなグローバルヘッダの変更 タイトル画像の設定（はてなブログのタイトル画像機能を使う場合） はてなの管理画面＞デザイン＞カスタマイズ＞ヘッダ＞よりタイトル画像を設定する. このように1000x200pxで表示されます。 タイトル画像の上下の余白を取る タイトル画像の上下の余白が気になる場合は、デザインC
はてなブログでは、サイドバーに追加できる「最新記事」「関連記事」「注目記事」の各記事一覧モジュールにおいて、変数を用いた高度なカスタマイズをできるようにしました。タイトルや投稿日時などの表示順を変更したり、任意のHTMLを記述したりできます。 ※高度なカスタマイズは、HTMLやCSSの知識を持っており、デフォルトの記事一覧のスタイルがわかる方を対象としています。はてなブログでは、デザインやレイアウトのカスタマイズに関してサポート対象としておりませんのでご了承ください。 記事一覧モジュールで高度なカスタマイズを利用するには デザイン設定画面の「カスタマイズ」ページで、「サイドバー」の項目から「最新記事」「関連記事」「注目記事」の各モジュールの設定ウィンドウを開き、「高度なカスタマイズを使う」のチェックボックスをチェックします。 それぞれのモジュール編集画面で「高度なカスタマイズ」にチェックを
更新：2016/11/5 7月にGraph APIのv2.7がリリースになりいいね数が取得できない問題があったのは記憶に新しいです。 わたしは、Yukihy（id:ftmaccho)さんのソーシャルボタンカスタマイズを利用させていただいてるので先日修正も行いました。 当ブログのシェアボタンを使っていただいている方のFacebookボタンで不具合が生じています２！ - Yukihy Life ただ、昨日気づいたんですがくるくるが止まっていない気がします。 くるくるが止まらないのは全部の記事じゃない まず昨日書いた記事を開くと以下のエラーが出ていました。（※この記事を書き始めたタイミングです） www.weblog-life.net Uncaught TypeError: Cannot read property 'share_count' of undefined share_countが未
2017.5月更新 こんにちは！いつの間にか14回目のカスタム記事！今回はブログでよく見かける『会話形式』の記事を簡単に実現させるCSSを作りました！ぜひご覧あれ！ 知らなきゃ損！いつでもAmazonで90%オフの商品を探す方法！ はじめに 完成系 まずはCSSをコピペしよう！ ブログでの使い方 簡単解説（飛ばして良し！） まとめ 【追記】この記事のCSSをもとにさらに手を加えてくれた素敵な記事があるので紹介します！ありがたい。 こんな記事も書いてるよん。 はじめに 参考記事としてこちらの記事を参考にいたしました。 akiueo (id:akiueos)さんのCSSも素晴らしいデザインですが、レスポンシブに未対応というのと、会話のアイコン画像が正方形の画像を使用しないと丸く表示されないので、この2点を改良して今回制作しました。 上記の記事内に「どなたか改良版をお願いします。」と書かれている
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く