Ante:PokemonEden

3匹のロトムとゆく!ポケモン好きのためのポケモンブログ!

ポケモン勢に贈る『はてなブログをさらに活用する方法』

f:id:smcn616:20190302125313j:plain

f:id:smcn616:20190302125313j:plain

こんにちは、しゅんくり~む(すんく)です

今回は「はてなブログ」を使っているポケ勢の方々に向けて、レイアウトや詳細設定について詳しく書いて行こうと思います。

はてなブログで構築記事やコラム記事を投稿しているけど、デザイン等があまり上手くいかない…」という人にもぜひ見て頂きたいです。

 

①~⑩で、初歩的な事から発展的な事まで幅広く紹介していくので、自分に必要な部分だけ拾って見ていただければと思います。

 

①プロフィールアイコンの設定

f:id:smcn616:20190227115955p:plain

初歩から順番に解説していきます。
スマホ版で下にスクロールしていくと現れる「プロフィール画像」の設定についてです。

Twitterなどでアイコンを設定していても、はてなブログではデフォルト画像のままだという人も多いのではないでしょうか?

スマホ向け

f:id:smcn616:20190227122606j:plain
はてなブログ使用時に現れる画面右上のアイコンをクリックすると、「ダッシュボード」と呼ばれるブログの管理画面に着くので、そのページの「アカウント設定」の部分をタッチします。

f:id:smcn616:20190227122634j:plain
アカウント設定のページから、好きな画像を選んでプロフィール画像に設定することができます。

PC向け

f:id:smcn616:20190227123652j:plain

スマホ向けと同じくダッシュボードを開き、画面左のリンク集から「アカウント設定」をクリックすると、プロフィール画像を設定できるページに着きます。

 

②ブログアイコンの設定

f:id:smcn616:20190227122923j:plain

スマホ版でブログの最上部に表示されている丸いアイコンの設定方法です。
これが設定されているだけでブログの印象が大きく変わるので、設定しておくことをお勧めします!

スマホ向け

f:id:smcn616:20190227123220j:plain

ダッシュボードからブログをタッチすると、左のブログ管理画面に移ります。
そこから「設定」を開くとブログの説明などが編集できる画面に着き、そこでブログアイコンも設定することができます。

PC向け

f:id:smcn616:20190227123725j:plain

ダッシュボードを開き、画面左のリンク集から「設定」をクリックすると、ブログアイコンを設定できるページに着きます。

 

③ブログヘッダ画像の設定

f:id:smcn616:20190227124002j:plain

先述のブログアイコンから少し発展した編集です。
ブログの最上部に、そのブログに近いイメージの画像を入れることができます。

スマホ向け

f:id:smcn616:20190227125017j:plain

ダッシュボードからブログをタッチするとブログの管理画面に移るので、そこから「デザイン」をタッチするとヘッダ画像を設定する画面に着きます。

PC向け

f:id:smcn616:20190227125329j:plain

ダッシュボード左のリンク集から「デザイン」をクリックすると、ブログのデザイン編集画面に移ります。
そこで上の画像のようにクリックしていくと、ヘッダ画像を設定することができます。

 

④記事に使える文字デザイン

f:id:smcn616:20190227130408j:plain

記事を書く時に使用できる様々な文字デザインについてです。
ちなみに余談ですが、記事編集画面の一番左のアイコンを押すと画像を張り付けることができたりもします。

スマホ向け

f:id:smcn616:20190227133438j:plain

スマホ版では、文字を選択することで「ボールド(太字)」「イタリック(斜文字)」「アンダーライン」の装飾を付けることができます。
ただ、スマホ版のままでは着色や文字サイズの変更をすることはできません

そこで活用するのが、「PC版のサイトを表示」する機能です。

f:id:smcn616:20190227134057j:plain

iPhoneは画面下、Androidは画面右上の画像のマークを押すと「PC版のサイトを表示」といった旨の箇所が見つかるので、そこからPC版の記事編集画面に移ることができます。
ただし「PC版のサイトを表示」は、記事の編集内容を下書き保存で一度保存してから行ってください
保存しなくても問題ない場合もありますが、はてなブログ側のバックアップがうまくいかなかった場合は、最悪今まで書いてきた内容が全て消えてしまいます…

PC版

f:id:smcn616:20190227134744j:plain

PC版はかなり分かり易いですね。
効果を付けたい部分の文字をドラッグで選択し、画面左上のアイコンから自由に文字デザインを変えられます。

通常のデザインに戻したい場合は、着色の部分の「リセット」を押すと普通に戻ります。

 

⑤見やすい表を作る

f:id:smcn616:20190227135507j:plain

記事を書いていると欲しくなる「表」を作る方法です。
規模にもよりますが、表を作る場合はPC推奨になります。

スマホ向け

f:id:smcn616:20190227140024j:plain

iPhoneの場合は「メモ」アプリで表を作り、それをコピーして記事に張り付けることで表を組むことができます。
張り付けるだけだと文字がかなり大きいですが、一度文字を全て消してからもう一度文字を打つと通常サイズで打てます。
見出し等は、先述の太字を使うと見やすいでしょう。

Androidは…私はiPhoneしか持っていないのでよくわかりませんが、表作成アプリなどからコピーしてくれば恐らくできると思います。

PC向け

f:id:smcn616:20190227141002j:plain

最も原始的で基本的な方法ではHTML編集に切り替え、上記のように通常セルは「<td>~</td>」見出しセルは「<th>~</th>」一行のセル群を「<tr>~~</tr>」で挟み、表自体を「<table><tbody>~</tbody></table>」で挟む方法になります。

しかしこの方法は面倒くさいので、まずExcelで表を作ってその後に<>を付け足したり、ウェブ上の表変換ツールを使うと良いでしょう。

表変換ツールは「表 エクセル HTML」等で検索すれば見つかると思います。

f:id:smcn616:20190227142057j:plain

 

⑥記事に見出しを付ける

f:id:smcn616:20190227143019j:plain

記事に見出しを付ける方法を紹介しますが、紹介の前に一つ言いたいことがあります。
構築記事の各ポケモンの紹介欄は、絶対に見出しを使った方がいいです

見出しを使う利点はいくつかあります。

記事に見出しを付ける利点

見やすくなる

見出しを使うと、読み手に「ここは~の紹介スペースです」ということが伝わりやすくなり、どうしても情報量が多くなりがちな構築記事を整理して理解しやすくなります。

検索に有利になる

私が見出しの使用を推す一番の理由はこれです。
見出しに「メガミミロップ」という単語を使うと、「メガミミロップ」等の単語で検索した時にその単語が記事タイトルに入っていなくても上位に表示されやすくなります

だから、太字にしたり文字を大きくしたりして「見出しっぽく」するのではなく、しっかりと「見出し」を使ってほしいのです。

目次が作れる

少し発展的な内容ですが、はてなブログでは編集画面右上のアイコンからその記事の目次を作ることができます。
しかしこの目次機能は各見出しを参考にしているので、見出し機能を使用していないと目次機能も使うことができません。
本記事でも使用していますが、長い記事になるとどうしても内容が煩雑になってくるので、こういう記事では目次や見出しがかなり効力を発揮するようになってきます。

f:id:smcn616:20190227144446j:plain

見出しを使う利点はざっと説明できたので、本題である見出しの付け方を説明していきたいと思います。

スマホ

f:id:smcn616:20190227134057j:plain

スマホ版での編集では、残念ながら見出しを付けることができません。

そのため④の項で説明したように、一度下書き保存してから「PC版のサイトを表示」して編集する必要があります。

PC版

f:id:smcn616:20190227152638j:plain

PC版は、見出しにしたい行を選択して画面左上の「見出し」のアイコンをクリックすることで見出しを作ることができます。

三種類の見出しサイズがありますが、大きい見出しに使った単語ほど検索で優位になりやすいので大見出しから順番に使います。

 

⑦見出しのデザインを変更する

f:id:smcn616:20190227142156j:plain

見出しのデザインを変更する方法を紹介します。

文字の色などは記事編集で逐一変更しても良いのですが、今回はCSSを使って各見出しのデザインを作成する方法を紹介します。

スマホ向け

スマホではCSSを記述して見出しデザインを設定することができません。
しかし、一度パソコンで設定してしまえば⑥で紹介した方法で見出しを付けるだけで、設定したデザインが反映されるので、パソコンを使った機会に設定してみてください。

PC向けの見出し設定

f:id:smcn616:20190227154328j:plain

ダッシュボード左のリンク集の「デザイン」をクリックするとブログのデザイン編集ページに着きます。
そこで上図のように進めて現れる「デザインCSS」の部分に記述することで、見出しのデザインを設定することができます。

 h3{
font-size: 25px ;
color: #000000 ;
background-color: #d0d0d0 ;
border-left: 6px solid ;
border-right: 0px solid ;
border-top: 0px solid ;
border-bottom: 2px solid ;
padding-left: 3px ;
padding-right: 0px ;
padding-top: 3px ;
padding-bottom: 0px ;
}

基本的なCSSを書いてみました。
font-sizeは文字の大きさcolorは文字色background-colorは文字の背景色border-は各辺の線padding-は文字と線の間の距離を表しています。

各数字を書き換えることで色々な見出しが作れるので、コピーして使ってみてください。
#??????は「カラーコード」で検索すると様々な色のコード出てくるので、個人で置換してください。
borderのsolidは一本線という意味で、二本線ならdouble、破線ならdashed、点線ならdottedに置き換えることで適用させられます。

また、CSS 見出し」で検索すると様々な見出しが見つかるので、その「h?」の部分を大見出しならh3、中見出しならh4、小見出しならh5 に替えて使うことができます。

PC版の見出しをスマホ版に反映させる

f:id:smcn616:20190227163648j:plain

PC版の見出しデザインをスマホ版に適用させる方法です。
煩雑になるので以下箇条書き。

  1. ダッシュボード左のリンク集から「デザイン」のページを開く
  2. 左図のようにして開いた「記事上」の部分に、先程CSSの部分に張り付けた文字列をそのままコピーして貼り付ける
  3. 記事上の文字列全体を「<style type="text/css">~~~</style>」で挟む
  4. 右図のようにスマホ版の記事編集ページを開く
  5. 記事上下カスタマイズの「PCと同じHTMLを表示する」にチェックを入れる

以上で「変更を保存する」をクリックすれば終了です。

正直あまり良い方法ではなく、若干ページが重くなる可能性があります。

PC版のデザインをそのままスマホ版で使用する

f:id:smcn616:20190227165516j:plain

ここまではスマホ版に見出しデザインを適用させる方法について話してきましたが、スマホ版をPC版と同じデザインにしてしまう裏技もあります。

ダッシュボード左のリンク集から「デザイン」のページに飛ぶと、様々なPC向けブログデザインテーマを選ぶことができるのですが、それらのデザインテーマの中にはスマホ版で表示しても問題なく表示されるテーマがあります。

そういったテーマを使うことでスマホ版でも問題なくデザインされた見出しを使うことができるようになるのです!

右図のように開いた詳細設定の「レスポンシブデザイン」の欄にチェックを打つことで、スマホ版のテーマをPC版準拠に切り替えて設定完了になります。

また、この方法を用いた場合は「サイドバー」なども自由に設定することができるので、個人で色々試してみてください!

 

⑧記事の詳細設定をする

f:id:smcn616:20190227170830j:plain

記事のサムネイル画像カテゴリーなど、詳細設定についてです。

スマホ向け

f:id:smcn616:20190227171837j:plain

スマホのブラウザ版では記事編集ページの下部にある「オプション」で、記事の予約投稿をすることができます。
活用方法は様々ですが、スマホが触れない時間帯での投稿や指定時間ピッタリの投稿ができるようになります。

また「はてなブログ」のアプリを活用すると、予約投稿はもちろん記事のカテゴリー設定記事URLの編集もできるようになります。

ただやはり、これ以上のことをする場合は④の項で説明したようにPC版の記事編集ページに切り替える必要があります。

PC版

f:id:smcn616:20190227182257j:plain

PC版では、編集画面右のアイコンから記事の詳細設定へ移ります。
そこでアイキャッチ画像(サムネイル)の設定もすることができるのですが、ここを活用すれば記事の一番上以外の画像はもちろん、記事に存在しない画像をサムネイルに設定することもできるのです!

やり方は簡単、サムネイル用画像を一度記事に張り付け、サムネイル画像に設定した後で記事上のサムネイル用画像を消去するだけです。
これで、記事最上部にサムネイル用の画像を載せておく必要がなくなりますね。

 

⑨記事のサムネイル画像を作る

f:id:smcn616:20200102003238j:plain

構築記事の場合はswitchのスクリーンショットで撮影した画像を使う場合が多いと思いますが、そのswitchで撮影した画像をさらに加工したい場合や、単体考察記事などのサムネイル画像が欲しい場合についてです。

記事をTwitterなどで公開する場合は、サムネイル画像次第でその記事の目に付きやすさ読まれやすさが大きく変わってくると思うので、余裕があれば工夫してみるといいでしょう。以下の記事にまとめたので、良かったら参考にしてみてください。

pokemon-eden-siaf.hatenablog.com

 

 

ポケモンのアイコンを使う

f:id:smcn616:20200102004049j:plain

構築記事でよく使われているポケモンイコン画像の入手方法・使用方法について解説します。

 

ポケモンアイコンの入手元

「ひこちゃんず」様

www.hikochans.com

7世代までのポケモンドット絵や、アイテムのドット絵が公開されています。

「PokéWiki」様

www.pokewiki.de

7世代までのポケモンに加えて、8世代のポケモンのドット絵も入手することができます。画像の余白が少し大きいので、気になる場合はトリミングしてから使うと良いでしょう。

 

ポケモンアイコンの使い方

  1. 先ほど紹介したサイトで目当ての画像を見つけて「保存」します
  2. 画像サイズが気に入らない場合は不要部をトリミングします
  3. 記事を開き、④の冒頭で紹介した方法で写真を張り付けます

いたって簡単な3ステップです。
ただ、間違っても先ほど紹介したサイトの画像を「コピー」して記事に「貼り付け」ることはしないでください! 画像提供サイトのサーバに負荷がかかり、最悪サイト閉鎖にまで追い込まれてしまうこともあります。

正しい手順で画像を張り付けるようにしましょう!

 

私が執筆中に意識していること

さて、記事を見やすくするためのデザイン設定を中心に「はてなブログをさらに活用する方法」を紹介してきましたが、どうでしたか?

記事の見やすさ云々と言っておきながら、今回の私の記事はめちゃくちゃ見辛いです…
申し訳ありません。

できる限り工夫はしましたが、機能面の説明をする場合はどうしても文字数がかさんでしまうので、目をつぶっていただけると助かります…

私は普段記事を書く時は、『熟読』と『速読』両方に対応することを目指して執筆しています。

  • 『熟読』に対応できない記事は内容の無い薄い記事になる
  • 『速読』に対応できない記事は一部の人にしか見てもらえない

ということを常に考えています。
『熟読』に対応するために内容の濃い記事にしつつ、ここだけ拾えば内容が分かる部分を目立たせることで流し読みをし易くし、『速読』に対応しています。

補足:編集機器について

本記事では「記事を見やすくするための技」を中心に書いてきましたが、一つだけ訊いておきたいことがあります。

皆さんは何を使って記事を執筆していますか?

スマホsafarichromeから記事を書いている人も多いと思いますが、スマホでは使用可能なレイアウトがかなり制限されてます

本記事ではスマホでもできる編集方法も紹介してきましたが、可能であれば、スマホでは不可能な様々なレイアウトが使用できる「パソコン」からログインして記事を書くことをお勧めします。

 

本記事の執筆に至った経緯

最後になりましたが、本記事の執筆に至った経緯をお話ししたいと思います。

私は7年ほど前から「はてなブログ」で活動しているのですが、ポケモンのレート対戦に触れるようになり、様々なポケ勢の方の記事を見るようになってからずっと気になっていたことがありました。
それは、「少し見づらい記事」が散見されることです。

私など足元にも及ばないほど良い記事を書かれている方がポケモン界隈にはたくさんいるのですが、文字がギチギチに詰まっているなど、「読みやすさ」という観点のみで初心者や中級者が敬遠してしまっているのではないかと感じていました。

内容は素晴らしいのに、「少し見にくい」という理由で読み飛ばされたり最悪読まずにブラウザバックされてしまうという現実は、非常にもったいないと常々思っていました。

そういう経緯で、この現実を微力ながらも改善したい素晴らしい記事をもっと幅広い層に読んでほしいと思い、私が持っている最低限のノウハウをポケ勢の方々に知ってもらいたく、この記事の執筆に至りました。

 

最後に…

7年間ブログを替えつつ「はてなブログ」で活動し続けてきましたが、やっと現在のブログは検索流入だけで7万pv/月程度まで成長させることができました。
収益化しているブロガーに比べたらかなり少ないですが、40記事という記事数を鑑みればそれなりの数だとは思います。

私程度の記事がこれだけ見られているのに、強い方の素晴らしい記事が初心者や中級者に見られないのは本当にもったいないんです!

 

新作が発売され、もともと対戦に興味があった人たちが多く剣盾ランクバトルに参戦しています。7世代終盤のような「半過疎&レート差マッチ連発」の状態を回避するためには、この契機を逃す手はありません!

ポケモン対戦勢全体で、たくさんの人がランクバトルを続けてくれるように界隈を盛り上げていきましょう!!


…というのが今の私の意見です。

はてなブログを活用しているポケモン勢の方々の一助になれば幸いです。

 

no-img2

今回は一部しか紹介しませんでしたがブログデザインはとても奥が深いので、興味を持った方は色々試してみてください!

質問等は本記事のコメント欄やTwitterなどでどうぞ。
ということで、最後まで読んでいただきありがとうございました!