今回は「はてなブログ」のデザインカスタマイズと近況報告の記事となります。
- はじめに
- カスタマイズの目標
- ブログテーマの変更
- 完成した画面 (PC/タブレット)
- 完成した画面 (スマホ)
- ヘッダー画像の準備
- 今回のカスタマイズ箇所詳細
- 記事一覧カスタマイズ -PC
- 記事一覧カスタマイズ -スマホ
- 記事見出しデザインの変更
- 記事要点は囲い込み
- 記事一覧のはてなスター消去
- 「上へ戻る」ボタンの設置
- グローバルメニューの設置
- プルダウンカテゴリー選択設置
- ヘッダー画像を美しく表示
- ヘッダー&フッター部品非表示
- フッターにコピーライト表示
- 自己紹介の内容充実
- プライバシーポリシー設置
- 一部は固定ページで作成
- 記事内に目次を設置
- 広告表示 (配置)
- 広告表示 (広告除外)
- カスタマイズ完了！
- 最後に近況報告
- 是非併せてご覧ください
はじめに
まずは私が偉そうに「カスタマイズ」と申しましても、既存の公開された有能なソースを好きに選んで自分のブログに組み込むのみです。そこにテクニカルな作業は一切ありません。
そして今回は先輩様達のカスタマイズ方法を参考にさせていただきましたこと、まずは厚く御礼申し上げます。
カスタマイズの目標
今回のデザインは以下の目標を掲げました。
・PC/タブレット版はトップページをカード型とし、制限なく自由にカスタマイズをする
・スマホ版はユーザビリティ向上を最優先とし、シンプルデザインとする
PC版は見た目を重視し、スマホ版は機能性を重視します。
※今回のカスタマイズには「はてなブログPro」への加入が前提条件となります。
ブログテーマの変更
まず「はてなブログテーマストア」より、カード型対応のテーマ「Under Shirt」を適用させて頂きました。
こんなにも素晴らしい作品が無料なのが更に素晴らしいですね。
「UnderShirt」はレスポンシブデザインに対応をしていますが、今回のカスタマイズで内部HTMLはPC版とスマホ版で別途作成をしました。
こちらの作者様のテーマはいつも私好みの上、仕様の不明点をご相談した際には、解決ソースまでご教示下さいました。
完成した画面 (PC/タブレット)
当ブログをご覧下さる方々の環境は圧倒的にスマホからとなっておりますが、PC版画面は自分なりに結構気合いを入れました。
・PC版
・タブレット版
・サイズが大きくて美しいヘッダー画像
・記事一覧は画像サイズの大きなカード表示
・グローバルメニューにショートカット配置
・「上に戻る」ボタンで画面最上部へ遷移
完成した画面 (スマホ)
狭いスマホ画面をシンプルに広く見せる事に注力をしましたが、PC版と同等の機能性を持たせました。
・サイズが大きいヘッダー画像
・記事一覧はタイトルのみのシンプル表示
・グローバルメニューにショートカット配置
・プルダウンにて記事ジャンルが選択可能
・「上に戻る」ボタンで画面最上部へ遷移
・標準表示のブログパーツを最大限非表示化
ヘッダー画像の準備
カスタマイズの前準備として、まずはブログの顔でもあるヘッダー画像を作成しました。
今回はiPad上で無料アプリを使用して作成しました。PCが無くともiPadやiPhoneからでも作成は可能です。
・ヘッダー画像の仕様
PC版ヘッダー画像は「1500×400pix」、スマホ向け画像は「640x310pix」と大型サイズで作成し、画質劣化のない「PNGファイル」形式にて保存をしました。
・絵デザインは「Photoshop Mix」を使用
まず背景などのイラスト部分は、画質調整が可能でレイヤーも扱える「Photoshop Mix」を使用して写真とイラストを重ねます。
・文字デザインは「Canva」を使用
完成した画像にタイトル等の文字追加はフォントが豊富なアプリ「Canva」を使用します。
・完成
わずかこれだけの手順で完成となります。テクニックよりアイデアでお互い頑張りましょう。
※実際ブログへの適用につきましては後述いたします
今回のカスタマイズ箇所詳細
これより今回の当ブログカスタマイズにて適用をさせて頂いた、素晴らしい技術の数々を紹介させていただきます。
記事一覧カスタマイズ -PC
(PC/タブレット向)
カード内のブログ説明文を消去し、表示されるカテゴリも1カテゴリのみに設定しました。
記事一覧カスタマイズ -スマホ
(スマホ向)
タイトル文字を調節し、記事本文を全て非表示にしました。更に日付にインパクトをつけた結果、なかなかスッキリとした表示になりました。
以下は参考記事となります。ありがとうございました。
記事見出しデザインの変更
(PC/タブレット/スマホ向)
かなり細かくカスタマイズできるんですね。
以下は参考記事となります。ありがとうございました。
記事要点は囲い込み
(PC/タブレット/スマホ向)
記事本文中、端的に箇条書きで要点をまとめる時に使用します。
以下は参考記事となります。ありがとうございました。
記事一覧のはてなスター消去
(PC/タブレット向)
スッキリとした見た目で決めました。
以下は参考記事となります。ありがとうございました。
「上へ戻る」ボタンの設置
(PC/タブレット/スマホ向)
聖地巡礼記事はどうしても縦長となるので、必ず欲しいと思っていました。画像は透過PNG形式としてあります。
・PC/タブレット版
・スマホ版
今回ボタンデザインは「漆うしる様」にご依頼し、岐阜県が舞台のアニメ「氷菓」の千反田える嬢をかわいく描いていただきました。
当ブログ滅亡の日まで使用いたします。
グローバルメニューの設置
(PC/タブレット/スマホ向)
ブログには必須装備らしいので・・・運用中のメニュー内容にはPCとスマホで若干の差異があります。
・PC/タブレット版
・スマホ版
以下は参考記事となります。ありがとうございました。
プルダウンカテゴリー選択設置
(スマホ向)
画面の広くないスマホには最適なな省スペースな上、実用性もかなり高いです。
以下は参考記事となります。ありがとうございました。
ヘッダー画像を美しく表示
(PC/タブレット向)
やはりフチなしの無圧縮原寸画像は見た目が良いですね。
以下は参考記事となります。ありがとうございました。
tukinasikotonoha.hatenablog.com
ヘッダー&フッター部品非表示
(スマホ向)
色々と余計なパーツの多いスマホ版画面がすっきりとします。
・ヘッダー部分
・フッター部分
以下は参考記事となります。ありがとうございました。
フッターにコピーライト表示
(PC/タブレット/スマホ向)
運営ブログの著作権を明示する大切な表記の様なので早速導入をしました。
・PC/タブレット版
以下はPC版参考記事となります。ありがとうございました。
・スマホ版
以下はスマホ版参考記事となります。ありがとうございました。
自己紹介の内容充実
結構自己紹介欄は参照をしていただけるため、色々内容を追加して設置をしました。
プライバシーポリシー設置
広告設置の際必要とのことなので作成をしました。
一部は固定ページで作成
一般記事と違い固定ページ記事はブログ上の記事一覧には表示されません。広告表示やカテゴリー設定なども非対応のため、使い方によっては非常に便利です。私は自己紹介やプライバシーポリシー、一部まとめ記事にて利用しています。
記事内に目次を設置
目次と最初の見出しの間に広告表示をするためにも目次が必須となりました。
広告表示 (配置)
広告配置では「配置場所」「広告サイズ」「広告種類」など、先輩様達の貴重な経験を参考に、一応は自分なりに考えて配置を行いました。
広告は記事内にのみ配置し、トップ、プロフィール、プライバシーポリシーのページに広告は一切ありません。
・記事目次下(最初の見出上)にリンク広告
・記事中数カ所にレスポンシブ広告
(記事の長さにより最大5まで増加)
・記事最後に関連コンテンツ広告
上記で設定した全ての広告が表示されるのは長編記事となります。
広告表示 (広告除外)
Googleアドセンス広告を表示したくない記事に以下の設定をします。
今回はこちらのリンク先ソースをメインで使用させていただきました。ありがとうございました。
また以下も参考記事となります。ありがとうございました。
カスタマイズ完了！
これで大規模なカスタマイズは2回目となりましたが、まったく成長しとらんね。
記事中の「上へ戻る」アイコンの表示に失敗するため、イラストを描いてくださった漆うしる様に「サポート願い」をご依頼する始末です。
・・・もうね、当分カスタマイズはせえへんよ！
最後に近況報告
①ブログ内広告撤去を悩む
近頃当ブログでは複数箇所で新規記事の宣伝をしています。
開設当時はもっとノンビリ運営を目指していたのですが、偶然にも当ブログの方向性と似た集まりを複数箇所発見し編入までしてしまったのです。
結果、以前の当ブログはgoogle検索からのアクセス一強状態でしたが、現在は様々な箇所より平均的割合にてアクセスいただいている様です。(はてなブログの「アクセス解析」参照)
広告収入について以前は度々申しましたが、個人的には期待もしなければ興味も然程ありません。
しかも現状は私からブログ記事を複数の別箇所に発信し、その広がりからアクセスを頂いている訳なので、個人的には更に「広告表示」が気になってしまうのです。
しかし、まったく広告がクリックされていない訳でもないため悩んでしまうのです。
(当ブログに限っての意見であり、ブログ広告自体には肯定的です)
②当ブログがメディア紹介された
(数日前の記事にて同内容を記載しましたが、当該記事は消去したために引っ越してきました)
去る4/5にFM岐阜様の番組「MORNING SPLASH」内にて、「『令和』におススメしたい岐阜県の場所」コーナーに私が電話出演をさせていただきました。
5分程大垣を暑苦しく語らせていただいた上に、当ブログの宣伝までしていただき、なんとありがたいことでしょう。
番組HPにも当ブログへのリンクが。
・・・少し岐阜県民に近づけた気がしました。
今回は以上となります。
是非併せてご覧ください
当ブログにブログ関連記事はあまりないのです。
