ブログで記事を書いているときにこのページはこんな感じにしたいとか、
記事のこの部分はこんな風にしたいとか思ったことはありませんか？
お使いのブログでデフォルトで備わっている機能もあると思いますが、
私がしたいのがない！と言う人にこの記事は参考になるかもしれません。
この記事はブログ記事のテクニック集です。
リンク先で詳しいやり方を説明しているので、
気になった項目があったら見てみてね。
ブログ全体のデザインやカスタマイズについては
【はてなブログ】あなたのブログをカスタマイズ！を参考にしてみてください。
www.atelier-sunko.info
導入難易度、アレンジ度、見栄え度を
三ッ星で評価してみたので導入の参考にしてみてね。
| 難易度 | 設定箇所がないか あっても少し |
設定箇所が複数あるが 決まったもののみ |
設定箇所があり、 自分で調整する必要がある |
| アレンジ度 | そのままでしか 使えない |
少しだけ 変更できる |
変更できるところが たくさんある |
| 見栄え度 | 他でも よく見かけるもの |
あると他と差を つけられそうなもの |
あるとすごいと 思われそうなもの |
評価基準はこんな感じです。
あくまで私の個人的見解なので実際の評価とは異なる場合があります。
- 同じ記事内で特定の場所にジャンプさせたい
- 別のページの特定の場所にジャンプさせたい
- URLをそのまま表示したい
- 記事に表を作りたい
- 画像をスライダー表示したい
- マウスカーソルを合わせて画像を切り替えたい
- ネットショップみたいな商品検索を作りたい
- 文章を枠で囲んで強調したい
- 文章を枠で囲んでさらにその枠にタイトルを付けたい
- 枠の大きさは固定で中の文字をスクロールさせたい
- 枠だけでなく文字や画像を点滅させたい
- 文章をクリックして表示させたい
- 電光掲示板のような横に流れるテキストを作りたい
- アイコンフォントで記事にアイコンを設置したい
- アイコンフォントをアニメーションさせたい
- 画像を重ねて表示したい
- 画像の特定の場所だけリンクにしたい
- まとめ
同じ記事内で特定の場所にジャンプさせたい
| 難易度 | アレンジ度 | 見栄え度 |
例えば、初心者用の記事で次の項目は初心者以外の人は読まなくても大丈夫な時に
ここをクリック等で必要な項目まで一気にスキップできるテクニックです。
必要な項目にすぐにたどり着けるので読者に利便性がある反面、
多用しすぎると読者も意味が分からなくなるので注意が必要です。
別のページの特定の場所にジャンプさせたい
| 難易度 | アレンジ度 | 見栄え度 |
こちらは別のページの特定の場所にジャンプさせる方法です。
普通のリンクではリンク先の一番上にジャンプするのに対し、
この方法ではリンク先の好きな場所にジャンプさせることができます。
例えば、違うページの３項目目を読ませたいとかですね。
普通にリンクを貼ってその場所まで読者に行ってもらう手間が省けるので
見てもらいやすくなります。
これも多用するとうざいだけなので注意が必要です。
URLをそのまま表示したい
| 難易度 | アレンジ度 | 見栄え度 |
他のブログにあるのかわかりませんが、
はてなブログではURLを入力すると自動でリンクにしてくれる
自動リンク機能が備わっています。
この自動リンク機能、普段記事を書いているときにはとても便利なのですが、
URLをそのまま表示したいときに困るんです。
そんなことはほとんどないと思いますが、同じように困った人向けですね。
また、コード等もそのまま入力してしまうとコードとして機能してしまうので
その対策も紹介しています。
記事に表を作りたい
| 難易度 | アレンジ度 | 見栄え度 |
データの比較などをしたいときに
表で説明すると見やすくてわかりやすいですよね。
実ははてなブログでは簡単に表を作れる独自機能があるのですが、
記事作成時のツールバーにはそのアイコンはなく、
マニュアルを読んで自分でするしかありません。
さらにマニュアルには表を作るためのコマンドしか表記されていないので
それをどう使っていいのかわからないかもしれません。
そこで、そのコマンドの具体的な使い方と作成例を記事にしました。
はてなブログの独自機能だけでなく、コードとして表を作る方法も記載しています。
画像をスライダー表示したい
| 難易度 | アレンジ度 | 見栄え度 |
ブログなどを見ているときに
画像が自動的にスライドして切り替わっていくあれです。
手動でスライドさせることも、リンクを貼ることもできますよ。
画像のサイズを調整する必要がありますが、
簡単に任意の場所にスライダーを設置することができます。
マウスカーソルを合わせて画像を切り替えたい
| 難易度 | アレンジ度 | 見栄え度 |
マウスカーソルを合わせると、違う画像になるやつです。
応用して、カーソルを合わせるとキャラが飛び出して来たり、
逃げ出したりさせることもできます。
説明文を表示させることもできますよ。
マウスオーバーなのでスマホではあまりうまく機能しないのが残念です。
ネットショップみたいな商品検索を作りたい
| 難易度 | アレンジ度 | 見栄え度 |
アマゾンや楽天など、ネットショップで買い物をしている人は多いと思います。
その時にメーカーはこれ、価格帯は～円以内とか絞り込んで
買いたいものを探していませんか？
その絞り込み検索の機能を自分のブログに設置することができます。
ショップみたいに絞り込み検索して商品を見つけやすくし、
その商品ページにアクセスしてもらいやすくすることもできますし、
カテゴリ検索のように特定のカテゴリの記事だけを表示させたりもできます。
カテゴリ検索の場合は普通に機能としてあるカテゴリを使った方がいいですけど。
作業することが多く、設置するまでは大変ですが、
一度設置してしまえば後は追加項目のみの作業だけで済みます。
文章を枠で囲んで強調したい
| 難易度 | アレンジ度 | 見栄え度 |
箇条書きの部分とか重要な部分とかを枠で囲んで強調すると
読者の目に留まって見やすくなりますよね。
枠と言っても一本線や二本線、点線など様々なものがあります。
それらの基本的な枠の作り方を説明しています。
文章を枠で囲んでさらにその枠にタイトルを付けたい
| 難易度 | アレンジ度 | 見栄え度 |
文章を枠で囲うだけじゃ満足できない人へ。
枠にタイトルを付けて、その枠で表しているものをわかりやすくしましょう。
枠の大きさは固定で中の文字をスクロールさせたい
| 難易度 | アレンジ度 | 見栄え度 |
文字の長さで枠の大きさを決めるのではなく、
枠の大きさを決めて、その枠の中にテキストを表示したい場合に。
枠の大きさを越えたテキストは越えた部分に応じて
上下左右にスクロールして表示します。
枠だけでなく文字や画像を点滅させたい
| 難易度 | アレンジ度 | 見栄え度 |
枠などを点滅させてより目立つように！
枠だけ、テキストだけ、両方ともといろんなパターンがあります。
でも、ちょっとうざいかな…
文章をクリックして表示させたい
| 難易度 | アレンジ度 | 見栄え度 |
続きを読むみたいに普段は隠れているけど、
クリックしたら表示されるやつです。
ネタバレや答え合わせ、読む人が限られている項目などに。
電光掲示板のような横に流れるテキストを作りたい
| 難易度 | アレンジ度 | 見栄え度 |
右から左にテキストが流れていきます。
複数設定でき、後から追加するのも楽です。
テキストだけではなく画像も設定でき、リンクにすることもできます。
更新履歴やお知らせなどに使えます。
アイコンフォントで記事にアイコンを設置したい
| 難易度 | アレンジ度 | 見栄え度 |
アイコンフォントFont Awesomeを設置して、
画像を用意することなくアイコンを記事に設置することができます。
無料で使用でき、SNSのアイコンだけでなく様々なアイコンがたくさんあります。
アイコンフォントをアニメーションさせたい
| 難易度 | アレンジ度 | 見栄え度 |
Font Awesomeを簡単にアニメーションさせる方法です。
やっぱり動きがあった方が目立っていいですよね。
画像を重ねて表示したい
| 難易度 | アレンジ度 | 見栄え度 |
意外と難しい画像を重ねる方法。
その方法だけでなく、重ねた画像をリンクにする方法も紹介します。
画像の特定の場所だけリンクにしたい
| 難易度 | アレンジ度 | 見栄え度 |
一枚の画像の一部分をリンクにする方法です。
一枚の画像に違うリンクを複数貼ることもできます。
トップページに大きな画像を表示して、複数のリンクを貼り、
メニューにしたりできそうですね。
まとめ
やりだすと止まらないカスタマイズ。
こんなことも出来るんだと楽しくなっちゃいますよね。
まだまだ勉強中なのでこれからも増やしていきたいと思います。
でも、記事の見栄えは大事ですが、一番大事なのは記事の中身です。
カスタマイズに没頭しすぎて
記事の内容を疎かにしないように注意してくださいね。
私の事か！(笑)
