はてなブログの記事編集画面で、スマートフォンでの表示をプレビューできるようにしました【レスポンシブデザインに関する追記あり】

はてなブログでは、PC版の記事編集画面でも、スマートフォンでどのように表示されるかをプレビューできるようにしました。これまでプレビューできた「PC」の表示に加えて「スマートフォン」を選択できます。

はてなブログ全体でもスマートフォンからの閲覧が伸びており、PCで記事を書く際にもスマートフォンでの読みやすさを考慮できるようプレビューを追加しました。どうぞご利用ください。

PCの記事編集画面でスマートフォンの表示をプレビューするには

PC版の記事編集画面で「プレビュー」タブを選択すると、さらに「PC」「スマートフォン」のタブが表示され、プレビューを切り替えることができます。

PCの記事編集画面でスマートフォンの表示をプレビュー

スマートフォン表示のプレビューにおける注意点

スマートフォン表示のプレビューにおいては以下の注意点があります。

• スマートフォンにはさまざまな画面解像度が存在しますが、プレビュー画面では横幅を320ピクセルで固定して表示しています
• レスポンシブデザインには対応していません。確認できるのは、はてなブログのデフォルトのスマートフォン表示です

【2016年2月19日追記】レスポンシブデザインに対応しました。はてなブログでレスポンシブデザインを使用する際には、ヘルプ「ブログのデザインを変更する（スマートフォン）」の「レスポンシブデザイン」を参照してください。

なお、スマートフォンで記事を執筆する際、スマートフォンのブラウザで利用できる記事編集画面にはプレビューがありませんが、公式アプリではスマートフォンでの表示をプレビューできます。どうぞご利用ください。

アプリ - はてなブログ

スマートフォンから「お題スロット」を利用できるなど、ブログを書く「お題」に回答しやすくしました

はてなブログでは、10月に追加した「お題スロット」機能をスマートフォンでも利用できるようにしました。

また、同じお題で書かれた記事の一覧ページから、直接そのお題で記事を投稿することが可能になりました。気になるお題を見つけたときに、どうぞご利用ください。

スマートフォンから「お題スロット」を利用できるようにしました

これまでPC版の編集画面のお知らせ枠で提供してきた「お題スロット」を、スマートフォンのブラウザ版・iOSアプリ・Androidアプリでも利用できるようにしました。

スマートフォンで「お題スロット」を利用するには

次の手順で「今週のお題」画面を開き、「お題スロットを開く ＞」を選択してください。

• iOSアプリ …… 下書き一覧の「お題」タブをタップ
• Androidアプリ …… テキスト入力エリアの下にある「埋め込み」をタップして、ツールバー右端の「（今週のお題）」ボタンをタップ
• ブラウザで開く編集画面 ……テキスト入力エリアの上にあるツールバー右端の「（今週のお題）」ボタンをタップ

お題スロットの画面にある「スロットを回す」ボタンをクリックするたびに、お題の内容が変わります。書きたいお題が見つかったら「お題の記事を書く」ボタンをクリックしてください。選択したお題が編集画面の本文に挿入されます。

iOSアプリのお題スロット画面

記事一覧ページから直接お題を投稿できるようにしました

同じお題で書かれた記事の一覧ページから、そのお題で記事を投稿できるようにしました。記事の一覧ページにある「このお題で記事を書く」をクリックすると、編集画面が立ち上がり、そのお題が本文に挿入されます。投稿した記事は同じ一覧ページに追加されます。

※お題スロットで出題しているお題は不定期に入れ替えており、どんなお題があるかの一覧ページは現在提供しておりません。購読しているブログやお気に入りのブログがお題投稿に参加していたら、一期一会の機会としてぜひ同じお題に回答してみてください。

関連ヘルプ

詳細はヘルプ「お題」と「お題スロット」を参照してください。

2016年、いまブログの伝説がはじまる……！ 新機能「ブログチャレンジ」で、新春特別企画に挑戦しよう！

みなさま、明けましておめでとうございます。はてなブログより謹んで新春のお慶びを申し上げます。

はてなブログでは2016年1月1日、新年の幕開けにふさわしい新機能として「ブログチャレンジ」をリリースいたしました。初春を飾る7日間の限定ミッション「新春 お正月限定チャレンジ」をクリアし、伝説のブログマスターへの一歩を踏み出してください。

ブログチャレンジでは、「記事を公開する」「読者になる」「はてなスターをつける」など、はてなブログをどれくらい使いこなしているかを、チェックリストの形式で確認できます。自己申告システムを採用しており、完了した（あるいはすでに完了していた）実績を、リストをチェックするだけの かんたん1クリック で解除できます。

今回のリリースでは、ブログを始めたばかりの初心者がまず挑戦したい「初級」から、応用タスクを集めた「中級」、さらに一筋縄ではいかない試練が待ちかまえる「上級」までの3つのチャレンジに加えて、1月7日まで期間限定の「新春」に挑戦できます。新年の抱負や初詣、お雑煮などお正月にちなんだタスクをクリアしてください。

「今年こそブログをがんばりたい……！ でも、どうやって続けたらいいの？」という方は、ぜひ初級チャレンジからタスクを1つずつクリアしてみてください。すべてのタスクを達成したとき、ブログの歴史に新たな1ページが刻まれることでしょう。

あなたも、ブログチャレンジに挑んで伝説を残してみませんか？

blog.hatena.ne.jp

ブログチャレンジの機能と特徴

はてなブログを使いこなしてタスクを達成し、実績を解除してブログマスターを目指しましょう！ 新機能「ブログチャレンジ」では次のようなことができます。

• 1つのチャレンジには、数十のタスクがあります
• クリアしたタスクにチェックを入れて実績を解除しましょう
• タスクの難易度に応じて、ポイントをゲットできます
• ポイントに応じて レベルアップ します
• クリア状況に応じて、ナイスな称号（二つ名）が付与されます
• 同じチャレンジに取り組むブログの仲間をチェックできます

タスクのクリアは自己申告制ですが、真のブロガーならば富や権力のためでなく自らの物語を穏やかに紡いでいくものと信じます。

レベルアップしたブロガーにはナイスな称号が付与される！

はてなブログでは、本年もみなさまがブログを楽しめるよう、さまざまな機能改善、新たな取り組みを進めてまいります。

2016年も、はてなブログをどうぞご利用ください。

blog.hatena.ne.jp

スマートフォンでも、コメントを管理・承認できるようにしました。ほか1件

はてなブログでは、書き込まれたコメントをスマートフォンでも管理できるようにしました。また、Google Analytics埋め込み機能についても改善を行いました。

スマートフォンでもコメントを管理・承認できるようにしました

これまでPC版のダッシュボード（ブログ管理画面）で提供してきた「コメント」ページを、スマートフォンのブラウザ版でも利用できるようにしました。これによりスマートフォンでも迷惑コメントの非表示や、基本設定ページで設定できる「コメント承認」を利用できます。

スマートフォンでもコメントを管理

あわせて「コメント拒否ユーザー」ページもスマートフォンに対応しました。「コメント」ページで、ユーザーIDの右に表示される × をタップすると、迷惑なコメントをするユーザーをはてなIDまたは接続元IPアドレスで拒否設定できます。どうぞご利用ください。

コメント拒否ユーザーを追加

はてなブログでは本年、PCがない環境でもスマートフォンからブログを運用できるよう、スマートフォンのブラウザ版で利用できる管理画面を整備してきました。2016年も引き続きスマートフォン環境の改善を進めてまいります。

• 2015-11-06 スマートフォンでも、ブログのヘッダのタイトル画像を変更できるようにしました
• 2015-08-28 スマートフォンでも、ブログの公開範囲やTwitter連携を設定・変更できるようにしました
• 2015-08-06 スマートフォンでも、ブログアイコンやブログの説明を設定・変更できるようにしました

コメント管理に関する関連記事（はてなブログ開発ブログ）

• 2013-11-13 コメント管理を強化！ ゲストのコメントを接続元（IPアドレス）で拒否できるようにしました
• 2013-09-18 ブログのコメントを、はてなIDを指定して拒否できるようにしました
• 2012-04-19 コメント承認機能など、コメント機能を強化しました

§

「Google Analytics埋め込み」をユニバーサル アナリティクスに対応しました

詳細設定の「Google Analytics埋め込み」による解析コードを、ユニバーサル アナリティクスのanalytics.jsに変更しました。

なお、埋め込まれる解析コードは、以前のga.jsのときと同様にシンプルにアクセスを記録するものです。カスタマイズした解析コードを利用したい場合には、詳細設定ページの「headに要素を追加」欄、またはデザイン設定のカスタマイズページにある「フッタ」欄や「タイトル下」欄に、スニペットそのものを貼り付けてください。

ユニバーサル アナリティクスについては、Googleのヘルプを参照してください。

ユニバーサル アナリティクス（UA） - アナリティクス ヘルプ

ga.jaから移行したときの変更点等については次のドキュメントを参照してください（英語）。

Reference - Complete Web Upgrade: ga.js / dc.js to analytics.js | Universal Analytics Upgrade Center | Google Developers

スマートフォンでも、ブログのヘッダのタイトル画像を変更できるようにしました

はてなブログでは、これまでPC版*1の管理画面で提供してきたデザイン設定のうち、ブログのヘッダに表示するタイトル画像を、スマートフォンのブラウザからでも設定できるようにしました。

デフォルトのスマートフォン表示*2において、自分のブログらしい画像をタイトル部分に表示できます。どうぞご利用ください。

スマートフォンでタイトル画像を表示した例

スマートフォンでタイトル画像を変更するには

スマートフォンのブラウザ版ダッシュボードでマイブログをタップし、ブログの管理画面を開きます。メニューに追加された「デザイン」をタップします。

スマートフォンの管理画面に「デザイン」を追加しました

デザイン設定画面が開き、タイトル画像を設定できます。デフォルトでは「スマートフォン用に画像を設定する」が選択されており、「画像をアップロード」から画像ファイルを設定できます。

スマートフォン用のタイトル画像を設定できます

※タイトル画像は、端末の画面幅によって表示サイズが変わります。横幅640px以上の画像を用意するとよいでしょう。

「PCと同じ画像を表示する」にチェックを入れると、PC版のデザインで設定した画像と同じ画像をスマートフォンでも表示します。

※PCとスマートフォンではタイトル画像の表示領域が異なるため、同じ画像を使っても同じように表示されるとは限りません。

関連記事

PC版のデザイン設定画面では、「スマートフォン」ページでタイトル画像のほかアクセントカラーを設定したり、ブログ上下や記事上下にブログパーツや広告を掲載するHTMLコードを記載できます（はてなブログProのみ）。詳細は下記のヘルプを参照してください。

ブログのデザインを変更する（スマートフォン） - はてなブログ ヘルプ

とくに、PC版のデザイン設定画面でスマートフォンのタイトル画像を設定する詳細に関しては、下記の記事を参照してください。

スマートフォン表示でも、タイトル画像を自由にカスタマイズできるようにしました - はてなブログ開発ブログ

*1:この「PC」とは「スマートフォン」ではない環境のことで、具体的にはWindowsおよびMacを想定しています。

*2:この「デフォルト」とは、デザイン設定でレスポンシブデザインを有効にしていない場合に、はてなブログが初期状態で用意しているスマートフォン用の表示スタイルのことです。

ブログを書くお題をランダムに提案する「お題スロット」機能を追加しました

はてなブログでは、ブログを書くお題をランダムに提案する「お題スロット」機能を追加しました。ブログのネタ探しや、ブログを書くきっかけに、どうぞご利用ください。

※お題スロットは、スマートフォンおよびアプリでは現状まだ提供していません。

お題スロットの使い方

お題スロットの画面は、編集画面のお知らせ枠にある「お題スロット」から開くことができます。「スロットを回す 」ボタンをクリックするたびに、お題の内容が変わります。書きたいお題が見つかったら「お題の記事を書く」ボタンをクリックしてください。選択したお題が編集画面の本文に挿入されます。

スロットを回している様子

同じお題で書かれたブログの記事を読むには

自分が投稿した記事と同じお題で書かれたブログを読むができます。自分の記事に挿入されているお題をクリックすると、同じお題に関するエントリーが集まった一覧ページに遷移します。

お題スロットに関する注意事項

お題スロットを利用するにあたり、お題と関係のない記事を投稿することはご遠慮ください。自身のブログへの誘導を目的としているとみなし、注意勧告などの対応を取ることがありますのでご了承ください。

スマートフォンでも「引用ストック」ボタンを表示するようにしました

はてなブログでは、8月に追加した「引用ストック」ボタンを、スマートフォンの記事ページでも表示するようにしました。閲覧中に気になった文章を、後で記事執筆時に引用できるようストックしておくことができます。

ストックした文章は、記事編集画面（PC版*1）の編集サイドバーにある「引用貼り付け」タブから、執筆中の記事に引用として貼り付けることができます。どうぞご利用ください。

※記事編集画面の「引用貼り付け」機能は現在のところPC版でのみ利用でき、スマートフォンでは引用のストックのみが可能です。

スマートフォンで引用をストックするには

以下の手順で、スマートフォンで閲覧中に気になった文章をストックできます

1. 文字列を長押しして範囲選択します
2. 9月に追加した引用ボックスが表示されます
3. ☆（引用スターをつける）ボタンのとなりに、引用符（“）の「引用ストック」ボタンが追加されています
4. 引用ストックボタンをタップすると、選択範囲がストックされます

スマートフォンでも引用スターと引用ストックの両方が利用できる

スマートフォン版引用ストック機能では、8月にリリースしたPC版と同様の制限事項があります。詳細は下記の告知記事を参照してください。

他のブログの文章を簡単に「引用」できる機能を追加しました - はてなブログ開発ブログ

また、はてなにログインしてない状態で範囲選択した場合には、引用ボックスとあわせてログイン用のリンクを表示します。

*1:ここでの「PC」とは「スマートフォン」ではない環境であり、具体的なOSとしてはWindowsおよびOS X（Mac）を想定しています。