MENU
カテゴリー

[はてなブログ]編集サイドバーを使いこなして記事の投稿を簡単にする!編集サイドバーをカスタマイズ!

編集サイドバーを使いこなしてみる

What’s up? Lucyです。

はてなブログをカスタマイズしようと、さまざまな方法を調べてきました。

[はてなブログ・カスタマイズ]

吹き出しアイコンはとてもよく使っているのですが、吹き出しアイコン用のhtmlコードを記述するのがちょっと面倒くさいと思っていました。

Lucy

もっと簡単に、吹き出しアイコンを使いたいなぁ。

今回の疑問:はてなブログで記事を書く時に、もっと簡単にhtmlコードを使いたい!

この記事を読むと、はてなブログの記事作成をより簡単にする方法がわかります!

なんの疑いももたずに(調べもせずに)、吹き出しアイコンを使う方法として私は、吹き出しアイコン用のhtmlコードをWindowsの「メモ」に保存していました。

①メモを起動
②保存してあるファイルを開く
③コードをコピーして、はてなブログのhtml編集に貼り付ける

という今思うと、とんでもない手間を踏んでいました。

吹き出しアイコンのhtmlコードをメモとして保存していました
メモ機能に吹き出しアイコン用のコードを保存していました
スポンサーリンク
目次

編集サイドバーとは?

はてなブログに「編集サイドバー」というものがあるのはご存知ですか?記事編集画面の右側にあるサイドバーのことです。ブログに写真を貼り付ける時や、カテゴリー分けを選択したり、編集オプションの設定をする際に利用します。

はてなブログの編集サイドバーは画面右側にあります
編集サイドバーは、記事編集画面の右側にあります

初期状態の編集サイドバーは、次のメニューボタンが設定・表示されています。

タブの名前編集できる内容
サイドバー自体を開き、閉じることができます。
写真や画像を記事に貼り付ける事ができます。投稿された写真ははてなフォトライフにアップロードされます。
編集中の記事にカテゴリーを設定できます。
編集中の記事について、投稿日時・個別URL、アイキャッチ画像・概要の4つのオプションを指定することができます。
タブを整理する画面が開きます。
初期状態の編集サイドバーの設定

さまざまな機能

ブログ記事を書く時に、こんな事が出来たらいいなぁと思う事はありませんか?

  • はてなブログでAmazonや楽天市場の商品を紹介したい!
  • 自分のTwitterのツイートをブログに貼り付けたい!
  • YouTubeの動画をブログに貼り付けたい!
Lucy

私も自分のおすすめの商品をみなさんに紹介したい時があります!

そんな時に編集サイドバーの貼り付け機能を使うことによって、簡単に記事に反映させる事ができます。

はてなブログで編集できる機能一覧

タブの名前編集できる内容
 過去の記事貼り付け過去の記事を検索し、記事に貼り付ける事ができます。
 引用貼り付け記事を読んでいる時に「引用」ボタンでストックした引用を貼り付ける事ができます。
 Amazon商品紹介Amazonの紹介を検索して、商品情報を貼り付ける事ができます。
 楽天商品紹介楽天市場の商品を検索して、商品情報を貼り付ける事ができます。
 YouTube貼り付けYouTubeにある動画を検索し、貼り付ける事ができます。
 Twitter貼り付けTwitterアカウントを連携することで、ツイートを貼り付ける事ができます。
 Instagram貼り付けInstagramアカウントを連携することで、Instagramの写真や動画を貼り付ける事ができます。
 はてなブックマーク貼り付け自分がブックマークしたサイトを貼り付ける事ができます。自分がつけたブックマークコメントがある場合は、コメントも貼り付けされます。
Googleフォト貼り付けGoogleフォトから写真を貼り付ける事ができます。
 ニコニコ動画貼り付けニコニコ動画のURLを入力することで、動画ブログパーツを貼り付ける事ができます。
 pixiv貼り付けpixivアカウントを連携することで、pixiv上の作品を貼り付けることができます。
 iTunes商品紹介iTunes上にある音楽、アプリなどを検索して、商品情報を貼り付けることができます
 Evernote貼り付けEvernoteアカウントを連携することで、ブログにノートを貼り付けることができます。
 レストラン紹介ぐるなびからレストランを検索し、ブログに貼り付けることができます。
 Gist貼り付けGitHubユーザー名を入力すると、投稿したGistをブログに貼り付けることができます。
 Fliclr貼り付け自分のFlikrアカウントと連携して公開されている写真を貼り付けることができます。Flickr上のCreative Commons画像を検索し、ブログに貼り付けることができます。
 絵を描くブラウザ上で絵を描き、記事に貼り付けることができます。絵は、はてなフォトライフに保存されます。
 ミイル貼り付けカメラアプリ「ミイル(miil)」に投稿した料理写真を貼り付けることができます。
 定型文貼り付け記事編集画面で頻繁に使う文章やHTMLなどを定型文として保存して貼り付けることができます。
 DAZN貼り付け動画配信サービス「DAZN」のコンテンツのダイジェスト動画を貼り付けることができます。
たくさんの貼り付け機能がありますね!

自分がよく使う機能を編集サイドバーに設定すると、簡単に記事に反映させる事ができ、記事もより書きやすくなります。

編集サイドバーのタブを整理する

初期状態の編集サイドバーに自分がよく使う機能を追加していきます。

サイドバーにある「追加」をクリックしてください。

サイドバーにある追加ボタンをクリックします
追加をクリックします

すると追加できる機能が表示されます。この中から、自分の使いたい機能をオンにすることでその機能のタブのショートカットキーがサイドバーをメニューに追加されます。

サイドバーに追加できる機能を表示させる
自分の使いたい機能をオンにし、サイドバーにメニューに追加します

自分が使いやすい用にカスタマイズしてみる

たくさんある機能の中から私は、

機能の「定型文貼り付け」をメニューボタンを追加しました。

自分の追加したい機能のトグルを右にオン(青色)にしてください
追加したい機能のトグルを右にオン(青色)にしてください

また商品の「Amazon商品紹介」と「楽天商品紹介」も追加してみました。

自分の追加したい機能のトグルを右にオン(青色)にしてください
追加したい機能のトグルを右にオン(青色)にしてください

追加したい機能のトグルを右にオン(青色)にすると、サイドバーにメニューボタンが追加されました!

サイドバーのメニューボタンに追加されました
メニューボタンが追加されました!

定型文を作成する

今回の解決したい疑問は

今回の疑問:はてなブログで記事を書く時に、もっと簡単にhtmlコードを使いたい!

でしたので、定型文として、ふきだしアイコンのhtmlコードを作成していきます。

定型文を登録する

サイドバーに追加した「定型文の貼り付け」アイコンをクリックし、「定型文を作成する」をクリックします。

定型文を設定するボタンをクリックします
定型文貼り付けのやりかた

画面が切り替わり「定型文を作成する」という設定画面がでてきますので、登録したい吹き出しアイコンのhtmlコードを設定します。

画面が切り替わり、定型文を設定する画面がでてきました
定型文を作成する

タイトルは自分で分かりやすい言葉にします。今回は「右に吹き出しが欲しい時」と、登録し、下には「右に吹き出しアイコンが表示される為のhtmlコード」を貼り付けて、「保存する」をクリックして保存します。

定型文を設定します
吹き出しアイコン用の定型文を作成します

同じように、「左に吹き出しが欲しい時」として、同じようにhtmlコードを定型文として設定・保存します。

定型文を設定できました
左に吹き出しが欲しい時・右に吹き出しが欲しい時、2つのhtmlコードを設定しました

設定した定型文を編集したい時は、タイトルの右上にある  をクリックすると、登録した定型文の編集ができます。またここで定型文を削除することもできます。

設定した定型文の編集の仕方
作成した定型文の編集のの仕方

はてなブログで定型文を使ってみる

はてなブログで記事を書く際に、「HTML編集」をクリックし、表示させたい定型文を選択し(青枠)、「選択した定型文を貼り付け」をクリックします。

設定した定型文の使い方
登録した定型文をつかってみよう!

すると、左に吹き出しが欲しい時のhtmlコードが貼り付けられました。

クラス名と吹き出しの中の文字を変更します
定型文をHTML編集に貼り付けます

クラス名と吹き出しに表示させたい文字を変更してください

プレビュー画面に切り替えると・・・

プレビュー画面に切り替えると、吹き出しアイコンが表示されました
プレビュー画面に切り替えると、吹き出しアイコンが表示されました

編集サイドバーにある貼り付け機能を使う事によって、外部サービス機能も気軽に利用でき、自分の書きたい記事を書くことができますね。

特に定型文貼り付け機能にhtmlコードを設定しておくことをおススメします!

Lucy

この記事がどなたかのお役に立てたなら嬉しいです

よかったらシェアしてね!
目次
閉じる