PARABELL LIFE

描いた「理想の暮らし」は、自分の力で組み立てる ―― そんなフリーランス・ライフ・ログ。

はてなブログで完全独自デザインを実現するために作った記事内パーツを展示するよ

自己満足ブログパーツ展

はてなブログで自分専用のクローズドなテーマを制作したので、その中でも特に記事内パーツとして作ったものだけまとめて展示します。

完全に自己満足記事ですね。

記事部分以外の全体デザインとウィジェットも、ついでに観察してやってください。

基本的にブログ内のすべてがレスポンシブ対応ですが、どうしてもPCのほうが画面に余裕があるので、見栄えという意味ではPCでの表示がベストな感じ。

なお、あまり古いブラウザ(IEなど)は考慮していません。また、記事内のパーツはサンプルなので、一部を除いてリンク設定はダミーです(ページの先頭に飛ばされます)。

目次

この記事の目次が見本です。

大見出し、中見出し、小見出しまでの表示に対応。中・小見出し(2・3段目)の丸付き数字が心配になるほど小さいですが、そこには目をつぶります。

折り畳み機能は一度実装したあとで、やっぱり必要ないかと思い直して外しました。

大見出し

大見出しは区切りとして確実に認識されるように、存在感を重視して設計。

見出し類は意外と難しいパーツだと思っていて、折に触れて微調整を続けています。

中見出し

大見出しよりは控えめで、しかし小見出しよりは目につきやすいようにという意図で、それぞれの間を取ったデザインにしています。

小見出し

小見出しは地味に厄介で、目立ちすぎても目立たなくてもいけない難易度の高いパーツですね。こいつしだいで、読者のコンテンツ認識が左右されることもあります。

テキストの装飾

太字赤字太字マーカーの3種類を組み合わせて使います。

あまり種類を増やすとやかましいし、テキスト装飾は簡単に増やせるので、この程度にしています。ちなみに、この組み合わせでの最強の装飾は赤太字マーカーです。

わりとインパクトあるかも?

シンプルなカラーボックス

あると恐ろしく便利な、シンプル志向なカラーボックスです。

カラーパターンは4種類(追加可)

カラーパターンは4種類、増やしたければいくらでも簡単に増やせます。しかし増やしすぎても使いどころがわからなくなるので、たぶんこれ以上は増やしません。

サンプルテキストです

サンプルテキストです

サンプルテキストです

サンプルテキストです

ボックス内のリスト表示でカラーが追従

丸付きリストと番号付きリストを入れると、それぞれ枠に対応した配色になります。

リストはボックスに入れるだけで格段に視認性が良くなるので、地味ながら結構重要なパーツだったりします。

  • いいね!
  • すごくいいね!
  • とてつもなくいいね!
  1. おすすめな理由
  2. すごくおすすめな理由
  3. とてつもなくおすすめな理由

タイトルとアイコン付きのカラーボックス

このボックスはタイトルとアイコンが変幻自在で、パターンは無限大です。

カラーパターンは5種類(追加可)

カラーパターンは5種類。こちらも増やしたければいくらでも増やせますが、やはり増やしすぎても使いどころが難しいでしょうね。

ボックスのタイトルは自由に変更でき、ボックスカラーとアイコンの組み合わせも自由自在です。例外として、引用だけは固定のカラーになっています。

タイトル

サンプルテキストです。

タイトル

サンプルテキストです。

タイトル

サンプルテキストです。

タイトル

サンプルテキストです。

タイトル

サンプルテキストです。

アイコンは8種類(追加可)

アイコンは8種類で、これも同じく増やしたければいくらでも増やせます。

ボックスカラーとアイコンを組み合わせた例は、こんな感じ。

タイトル

サンプルテキストです。

タイトル

サンプルテキストです。

タイトル

サンプルテキストです。

タイトル

サンプルテキストです。

タイトル

サンプルテキストです。

タイトル

サンプルテキストです。

タイトル

サンプルテキストです。

タイトル

サンプルテキストです。

ボックス内のリスト表示でカラーが追従

丸付きリストと番号付きリストを入れると、それぞれ枠に対応した配色になります。

タイトルとアイコン付きなので、配色とマッチする組み合わせにしておくと理解しやすくなります。まとまった情報や注意事項などを書くには最適です。

ここがおすすめ
  • いいところ
  • すごくいいところ
  • とてつもなくいいところ
チェックリスト
  1. 大事な項目
  2. すごく大事な項目
  3. とてつもなく大事な項目

リンクボックス

内部リンク(関連記事)と外部リンクのシンプルなボックスです。

はてなのブログカードは便利ではあるものの、融通が利かない&重すぎるので代用として作りました。が、いかんせんリンク設定が手作業なので、修正が発生すると死ねます。

アイコン部分のテキストは自由に変更でき、アイコンの種類も増やせます。

アイコントークスタイル

今や完全に定番になっている、アイコントークスタイル(チャット形式)。

ちなみに、記事の最初と最後に入れているものは一括挿入しているので、変更も一括で完了します。もちろん非表示にもできます。裏を返せば、融通が利かないともいう……。

以前は吹き出し形式にしていましたが、小さいスマホだと1行あたりの文字数が相当少なくなる問題に直面。そこが気になり、このスタイルに変更しました。

パラベル

わりと使いやすいよ。

キャプション付きの画像フレーム

アニメ紹介記事で出展元情報を入れるために必要、ということで急遽制作。

テーマ全体にマッチするように、フレームはふわっとした薄めのものにして、添える程度なキャプションをセット。

サンプル画像
キャプション
著作権情報表示などのための2行目

記事内ナビゲーションボタン

こちらもアニメ紹介記事用として制作したパーツ。

項目スキップボタン

記事が猛烈に長くなることを見越して、スキップしてもらうために配置するボタン。

離脱よりはスキップのほうがいいだろうし、ネタバレ回避策としても望ましかろう、と考えて用意しました。それが功を奏してか、ページ滞在時間は8分前後を記録。

エピソードスキップボタン

これは「あらすじだけ続けて読みたい」「見どころはネタバレだから飛ばしたい」などの需要があるに違いない、と先走って用意しました。わりと利便性が高いはず。

ヒートマップ分析をしていないので、実際の仕様頻度は不明。使われていてほしい。

アフィリエイト系のパーツ

正直、扱いが面倒なので途中で捨てようかなと思ったことも。

アフィリエイトリンクには付き物の、1pxビーコン画像。あれが微妙にレイアウトを崩してくれるので、規約違反にならないようにコードの外側から処理しています。

いわゆるCVボタン

紹介しているアニメの配信ページと登録ページ、それぞれに飛べるボタンをセットで表示します。配信終了がありえる商材向けの配置として作ったもの。

画面が狭いスマホでは縦並びで、タブレットやPCでは横並びに変形します。

単一ボタンもあります。実はですね、このボタンのリンクは生きていましてね……!

個別商品紹介ウィジェット

よくある個別の商品を紹介するウィジェットですが、これにはわりと細やかなレスポンシブ設定を施してあります。

掲載時点で商品が一切ヒットしなかった場合でも、サイトのボタンを非表示にはせずに、ボタン上のサイト名を暗くした状態で表示させています。

最後のパーツはキーワード設定済みの検索リンクボタン。サイト名のボタンを押すと結果が表示されるだけのシンプルなものです。

このサンプルの場合は「ノンオイルドレッシング」で検索されます。

とりあえずこれだけあれば対応できそう

と、こんな具合です。今のところはこれだけあれば大体対応できそうな感じですね。

新しいパーツが必要になったら、適宜増やしていくでしょう。表組が濃厚。

ちなみに、これといって専門的なデザインツールは使っていません。ブラウザの開発者ツールでHTMLとCSSを直打ちしながら見た目を確認、頭の中のイメージを納得できるレベルで落とし込めたら、完成コードを取得して組み込みます。

デザイナーからすると邪道でしょうが、頭の中のイメージを実現できれば問題なし!