はてなブログ一括置換ツール
注意事項（必読!!） 必ずバックアップは取って下さい。「設定」→「詳細設定」のエクスポートでバックアップデータをダウンロードして下さい。 テスト用のサブブログを作ってエクスポートしておけば、何かあった時に役立ちます。 はてな側で設定している編集モード（みたままモード、はてな記法、Markdown）以外で作成された記事の置換はできません。 はてな側で設定している編集モード（みたままモード、はてな記法、Markdown）以外で作成された記事を置換したい場合は、はてな側の編集モードの設定を変更し、再度ログインして下さい。 非公開のブログには利用できません。 トラブルが発生した場合の責任は負いかねますので、ご了承ください。 詳しくはコチラの記事をご覧ください。 はてなID ブログURL APIキー 設定している編集方法 見たままモード はてな記法モード Markdownモード 必ず、はてな側で設定
Pocket数をJavaScriptとYQLを使って取得する方法 | q-Az
「後で読む」の 代表サービス Pocket。書いた記事がどれだけ Pocket に登録されているかを JavaScript だけで取得したいのですが、公式には Pocket 数取得のための API がないということで JavaScript の力だけでは無理です。ですので米 Yahoo! が提供している YQL というサービスと併用して Pocket 数を取得したいと思います。 YQL は特に登録せずとも使えるサービスなのでこちら側がすることは JavaScript コードを書くだけです。パッと見「Pocket 数を JavaScript だけで取得する方法」に見えるかと思います。 追記：Pocket 公式ボタンの仕様変更があったため色々変更しています。2016/12/4 YQL とは 参考：YQL YQL はものすごく簡単に、雑に言うと「指定した URL の内容を JSON 化して送ってく
httpsサイトでSNSカウンタがぐるぐるする
わいひらさん、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
はてなブログ用の一括置換ツールを作りました
どーもです。 先日、こんな記事を書きました。 はてなブログがSSL化（HTTPS化）するまでに準備しておくべきこと | SHIROMAG はてながHTTPS化するということで、それの準備について書きました。 しかし、やることが多い。何か便利なツールはないものか。 ・・・ ならば自分で作ってしまおう！！ ということで作りました。 一括置換ツール | Customize Tools はてなブログ記事内の文字やコードを検索して、一括で置き換えてくれるツールです。 使い方の注意 サイトの指示通りやっていけば良いので、使い方の説明は省きます。 ただ、間違った使い方をするとかなり危険なので、注意点だけ説明しておきます。 いきなりhttp→httpsやhttp://→https://というような置換はNG なんでかと言うと、http→httpsの置換をしちゃうと、httpsがhttpssになっちゃうから
8ステップで完成！CSS3で「斜めのストライプ」を作る方法
各ブラウザの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対応について、レンタルブログサービスならでは制約もあるので、それらを中心に紹介していきます。 設定編はてなブログでAMP対応するのはすごく簡単です！ 有料プランの「はてなブログPro」を利用している方が対象ですが、「設定→詳細設定」にある「Accelerated Mobile Pages (AMP) を配信する」にチェックを入れて変更するボタンを押したら完了です。 注意事項はてなブログでAMPに対応させる場合、注意事項がたくさんあるのでまずはそちらから紹介します。 はてなブログのデザインテーマは反映されないサイドバーモジュールや、HTMLの自由記述（記事上下、ヘッタ、フッタなど）が配信されないstyle属性（CSS）が反映されない記事中のJavaScriptが反映されないはてなスターが反映されないはてなカウンターは非対応（カウントされない）ざっくり説明すると、
【CSS3】影を付けるbox-shadowとtext-shadowの使い方まとめ - TASK NOTES
最近の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種類 - FOXISM
cssで作るシェアボタンのデザインパターンをたくさん考えてみました。とりあえずシェア数の表示がない、単純なボタンとして36種類あります。（色違いなども若干含みます。） 記述するhtmlはどれも同じようなものですが、一部微妙に異なるものもあります。基本的にはcssだけでデザインを決めています。アイコンフォントに関してもcssだけでほとんどやっていますが、そのコードは省略していますのでソースを見てください。 コピペでもだいたい使えると思いますが、それぞれ微調整が必要なものもあると思います。なのでコピペだけでなく自分のサイトに合わせて調整できるcss中級者以上向けですね。スマホ表示も考えてないし。（スマホで見ると崩れてるやんwと思う人はこの記事の対象外です。） というか、ローカルなhtmlで作っていたものをここにコピペしたらうまく動かないものやフォントが反映されていないものがありました。面倒なの
CSSで作る！押したくなるボタンデザイン100（Web用）
.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;/*線を消す*/ }
【スマホ版】はてなブログのヘッダー部分のカスタマイズ方法まとめ（グローバルナビ・フォント変更・デフォルト表示削除など） - Awesome
狭間純平@junpei_hazamaです。 最近いろんなサイトを参考にさせていただきながら、当ブログのカスタマイズをいじいじしまくっています。先人の知恵ってすごい！ というわけで今回ははてなブログのスマホ表示のヘッダー部分についてのカスタマイズを説明していきます。これからカスタマイズを考えている人はぜひ参考にしてみてください〜 はじめに注意！ ・基本的に無料版ではなく、有料版のProの方向けの記事です。 ・この記事ではPC版とは別にコードを記入していくため、レスポンシブ設定は解除しておいて下さい。解除の仕方ははてなブログ管理画面から「デザイン」→「スマートフォン」→「詳細設定」でチェックをはずせば完了です。 ・また、スマホの設定画面ではCSSデザインを書き込むスペースがありませんが、「スマートフォン」→「ヘッダ」→「タイトル下」に以下のコードを書き込むことでCSSコードが反映されるようにな
はてなブログのヘッダー、タイトル画像の設定について - Minimal Green
ヘッダー、タイトル画像の設定について説明します。他のデザインテーマのカスタマイズにも応用できます。 タイトル画像の設定（はてなブログのタイトル画像機能を使う場合） タイトル画像の上下の余白を取る タイトル名の文字の色変更、中央寄せ cssで直接指定する ヘッダーの背景に横幅いっぱいに画像を設定する #blog-titleに横幅いっぱいに背景画像を指定する スマートフォンでもヘッダーが見切れないよう調整する 【追記】Media Queriesで画面サイズによってタイトル背景画像を切り替える はてなグローバルヘッダの変更 タイトル画像の設定（はてなブログのタイトル画像機能を使う場合） はてなの管理画面＞デザイン＞カスタマイズ＞ヘッダ＞よりタイトル画像を設定する. このように1000x200pxで表示されます。 タイトル画像の上下の余白を取る タイトル画像の上下の余白が気になる場合は、デザインC
必見！はてなブログのカスタマイズを一気に紹介する
最終更新：7月25日 カードリンクが重かったのでテキストリンクに変更しました。 はてなブログのカスタマイズ方法まとめ 今回ははてなブログユーザー向けに、はてなブログのカスタマイズ方法を紹介した記事をまとめました。 もしかしたらあなたの知らないカスタマイズがあるかもしれませんので、ぜひぜひご覧ください。おそらく、この手の記事で一番カスタマイズを網羅したんじゃないかと思ってます。 目次を見れば、はてなブログでどんなカスタマイズができるか把握できますね。 カスタマイズの前に注意事項 カスタマイズを行う前に頭に入れておいて欲しいことがありますので、それを先に読んでおいていただくと、非常に助かります。 動作チェックを必ずする カスタマイズをする上で、とても重要なことがあります。それは、かならずPCとスマホで動作確認をすることです。 PCではちゃんと表示されていても、手違いでスマホだと表示されていない
サイドバーの記事一覧モジュールで、変数を用いた高度なカスタマイズをできるようにしました - はてなブログ開発ブログ
はてなブログでは、サイドバーに追加できる「最新記事」「関連記事」「注目記事」の各記事一覧モジュールにおいて、変数を用いた高度なカスタマイズをできるようにしました。タイトルや投稿日時などの表示順を変更したり、任意のHTMLを記述したりできます。 ※高度なカスタマイズは、HTMLやCSSの知識を持っており、デフォルトの記事一覧のスタイルがわかる方を対象としています。はてなブログでは、デザインやレイアウトのカスタマイズに関してサポート対象としておりませんのでご了承ください。 記事一覧モジュールで高度なカスタマイズを利用するには デザイン設定画面の「カスタマイズ」ページで、「サイドバー」の項目から「最新記事」「関連記事」「注目記事」の各モジュールの設定ウィンドウを開き、「高度なカスタマイズを使う」のチェックボックスをチェックします。 それぞれのモジュール編集画面で「高度なカスタマイズ」にチェックを
吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 - SHIROMAG
2016年10月2日17：53に追記： コード修正したのでそれ以前にコードを貼り付けたかたは貼り直しお願いします。お手数おかけいたします。 2019年12月23日17：20に追記： デザイン、CSSを微調整しました。 CSSとChrome拡張を使って会話形式の記事を書く 今回は、はてなブログで簡単に会話形式の記事を作る方法を紹介します。 吹き出しと画像を使って会話形式にする方法は他の記事でも紹介されているのですが、すごく面倒なのです。 「会話形式の記事書くの面倒」「シロマどうにかしろ」という意見があったので、楽に実装できる方法を頑張って作りました。 最初の設定は少し面倒です。ただ、一度設定してしまえば、後はめちゃ楽ちんになると思います。 見た目はこんな感じ↓↓ 先生、今日は吹き出しを簡単に実装する方法を紹介します。 運動と瞑想の習慣がない者の末路はいつも悲惨だ。恐ろしい恐ろしい。 ・・・
Facebookのソーシャルボタンのくるくるが止まらない場合の解決方法（2016年9月時点）
更新：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が未
【はてなブログ】記事のカテゴリーによってオススメ記事を切り替える方法 Ver.2
先日作ったカテゴリごとにおすすめ記事を切り替える方法がめちゃめちゃ好評だったので、もっと簡単に導入できるようにコードを改良しました。 カテゴリごとにおすすめしたい記事を選んで、それを表示させる方法です。 【はてなブログ】記事のカテゴリーによってオススメ記事を切り替える方法 | SHIROMAG jQueryを使っているので上記記事より少し重くなりますが、それでも導入しておく価値はあると思います。 例えば、以下の記事に飛ぶとサイドバーでおすすめされている記事が変わります。（スマホだと記事上） ダウンロードしておきたい最新おすすめ洋楽【2016年版】 貧困女子高生のヤラセと貧困は別問題 このように、記事のカテゴリによってオススメの記事を切り替えることができます。 ニーズに合わせて前回とちょっとデザインを変えてみました。 ちなみにこんな感じに表示されます。 「カスタマイズ」というカテゴリには、カ
誰でもコピペで簡単に吹き出しで会話形式のブログが書けるCSS - 急がば 急いでまわれ！
2017.5月更新 こんにちは！いつの間にか14回目のカスタム記事！今回はブログでよく見かける『会話形式』の記事を簡単に実現させるCSSを作りました！ぜひご覧あれ！ 知らなきゃ損！いつでもAmazonで90%オフの商品を探す方法！ はじめに 完成系 まずはCSSをコピペしよう！ ブログでの使い方 簡単解説（飛ばして良し！） まとめ 【追記】この記事のCSSをもとにさらに手を加えてくれた素敵な記事があるので紹介します！ありがたい。 こんな記事も書いてるよん。 はじめに 参考記事としてこちらの記事を参考にいたしました。 akiueo (id:akiueos)さんのCSSも素晴らしいデザインですが、レスポンシブに未対応というのと、会話のアイコン画像が正方形の画像を使用しないと丸く表示されないので、この2点を改良して今回制作しました。 上記の記事内に「どなたか改良版をお願いします。」と書かれている
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
travelbanana.net
はてなブログのスマホ版でプロフィールや余計な項目を非表示にする - LifeCrack