不器用人の地球適応記

不器用人の地球適応記

不器用人、地球適応の訓練課程を綴ります

無料版はてなブログ カスタマイズ格闘記

f:id:b_bukimi:20180523122135g:plain

 

自らの手で何かを作れば自己効力感もアップするだろうと始めたこのブログ。その作品第一号となるのが、このブログそのものです。

無料版のはてなブログでは機能も限られていますが、生まれ持ったこのケチ根性。ブログ初心者ながら先人たちの知恵を借り、無料版で果たしてどれだけブログのクオリティを上げられるのかと格闘しました。

以下では無料版はてなブログのカスタマイズ格闘記を綴りたいと思います。シロウトでも何とか形になったものを集めました。同じ無料版はてなブログをカスタマイズする同士の参考となりますように。

 

 

カスタマイズ1.ブログテーマを変更する

テーマは「ダッシュボード―デザイン」から変更することができます。公式テーマもありますが、今回はストアからお気に入りのテーマを探しました。

テーマに使用させていただいたのが様の「Creativity - テーマ ストア 」です。

 

f:id:b_bukimi:20180626142704p:plain

                                  引用元:Creativity デモサイト 

 

シンプルで洗練されながら、デザイン性も兼ね備えた美しさがあります。流行り?のカード型レイアウトに何となく憧れがあり、無料版でも導入できるカード型レイアウトを探したところ、このテーマさまに辿り着きました。また「最新記事」のサムネイル画像が丸型なのが可愛らしかったのもチョイスの一因です。

 

カスタマイズ2.ブログトップページをカード型にする

上記テーマさまでもカード型レイアウトになるのですが、画面サイズが大きくないとカード型レイアウトが活きない点と、記事概要欄に計画的に「続きを読む」ボタンを導入するバランス感覚が求められる点が、初心者の私には難しいところでした。

そんな折発見したのがWorldWorldWorld様のカスタマイズ例です。

 

blog.wackwack.net

 

WorldWorldWorld様のカスタマイズ例の良い点は、無料版でも勿論カード型レイアウトにできる上、カード枠内に自動で収まるので自分でカードのバランスを調整する手間がない点です。CSSのみで作られているので、初心者の私でも「比較的」自己流にカスタマイズしやすかったです。

ちなみに、はてな無料版ではトップページを一覧形式にすることはできませんが、抜け道もあります。WorldWorldWorld様の記事でも紹介されていますし、検索しても多くの方が方法を挙げてくださっていますので、ご参考にどうぞ。(当ブログもトップページを無理やり一覧形式にしています。)

 

カスタマイズ2-A.記事一覧の表示数を変更する

ブログトップの記事一覧ですが、大量に記事が並んでも見づらいというもの。表示数を調整したい、という点でもWorldWorldWorld様が解決方法を提示してくださっています。

 

blog.wackwack.net

 

よくサイトやブログで見かける「記事をもっと表示する」というやつです。当ブログでも上記サイトを参考に、トップページ記事下に「もっと表示する」ボタンを設置させていただきました。

 

カスタマイズ3.グローバルメニューの設置

はじめは「グローバルメニュー」の言葉の意味さえ分からなかった私。ブログカスタマイズについて調べると、嫌でも目に入ってくるので導入してみることにしました。

シンプルなグローバルメニューでも良かったのですが、欲が出て「ドロップダウンメニュー」(メニューの上にカーソルを合わせると更にメニューが出てくるやつです。)なんかかっこいいなと思ったので、下記のきなモン様のお世話になりました。

 

www.sukinamonote.com

 

カスタマイズ4.サイドバーのプロフィール欄

デフォルトのプロフィール欄では、自画像のサイズが小さかったり何かと不自由を感じたので、一から作ることにしました。

ダッシュボード―デザイン―カスタマイズ―サイドバー」と選択していき、「モジュールの追加」で「html」を選びます。(「プロフィール」ではありません。)

自画像についてはきっと四角い画像をまるく切り取るCSSがあるのでしょうが、扱いきれないと思ったので元から円状の画像(PNG透過)にしています。これなら普通に貼るだけでこれまた最近流行りの円状のプロフィール画像になります♪

SNSのフォローボタンをおしゃれに挿入したいと思ったとき、参考になったのがしきしま様のサイトです。

 

www.sikisimablog.com

 

カスタマイズ5.投稿日時のカスタマイズ

おしゃれなブログでよく見かけたのが、投稿日時がカスタマイズされていることです。日付の前には可愛らしいアイコンが並んでいて、リライト日時(再投稿日)も表示されています。

 

f:id:b_bukimi:20180629110128p:plain

(参考:当ブログの投稿日時)

 

特にリライト日時を入れることで、ブログを読む方にとっても最終更新日がいつなのか分かりやすくなります。ただ記事を再投稿する度に手動で日付を直すのは骨が折れるので、自動で日付を直してくれるようにできないかと思っておりました。

 

basanote.hatenablog.com

 

無料版でもできるのだろうか...?そんな期待に応えてくださったのが、上記のつばさ様の記事です。無料版・有料版ともに投稿日時のカスタマイズ法をご紹介してくださっています。これで私のブログもおしゃれな投稿日時に...!

ちなみに日時の前のアイコンは自分好みのものに変えられます。アイコンの種類は次章にて後述いたします。

 

カスタマイズ5-A.コピペコードが動作しなかったときは

※上記サイト様に限らず、ブログカスタマイズをするにあたってjQueryを使用する場合が多々あります。その際時たま各サイト様で紹介されているコードをコピペしても動作しない場合がありました。うまくいかなかったとき、私の経験則では、最新版のjQueryのurlに変えてあげると正常に動くことが多かったです。ご参考までに下記サイト様をご紹介させていただきます。

utautan.hatenablog.com

 

カスタマイズ6.シェアボタンのカスタマイズ

シェアボタンのカスタマイズも多くの先人が紹介してくださっています。私が参考にさせていただいたのは阿豆らいち様のサイトです。

 

azulitchi.hatenablog.jp

 

あまり縁のない話だとは思いますが、折角導入するなら「はてブ数」やFacebookのシェア数も表示させたいという、生来のおこがましさを発揮。各シェア数まで表示できるシェアボタンについても多数の方が紹介されていたのですが、うまく表示されないことがあり。阿豆らいち様が公開されているコードだとうまく表示されました。

 

カスタマイズ6ーA.アイコンの取得

SNSのフォローボタンやシェアボタンなど、アイコンを使うことでより魅力的なデザインにすることができるとよそ様のブログを拝見する中で学びました。

当ブログではアイコンを引っ張ってくるのに、主に2つの方法を使用しています。

 

(a)はてなブログに元から入っているアイコンを使う

はてなブログに元から入っているアイコンなので、導入が楽です。当ブログのサイドバー、SNSフォローボタンもこのアイコンを使用しています。他にはグローバルメニューの下三角などもこれです。

www.foxism.jp

 

(b)Font Awesomeのアイコンを使う

数多くの様々なアイコンを無料で使用することができます。使用するには「ダッシュボード―設定ー詳細設定」内の「headに要素を追加」する必要があります。が、これまた数多くのサイト様が述べてくださっている通り、簡単な手続きです。カスタマイズしていると、色々なアイコンを使用する機会もあると思うので、導入して損はありません。

 

fontawesome.com

 

※最新版のコードを常に確認することをおすすめします。他サイト様のコピペをしていると、たまに旧版のコードのままでうまく表示されないことがあります。

 

カスタマイズ7.レスポンシブデザイン

カスタマイズをはじめた当初は、レスポンシブデザイン、なんだそれは。自分には関係のない話だHAHAHAくらいに無視していたのですが、ブログのヘッダー画像がスマホではうまく表示されないことに気付き、どうしようもなく手を出してしまいました。

 

カスタマイズ7-A.ブログのヘッダー画像

で、ブログにヘッダー画像を使用されている方は、下記のサイトうぇぶじん様を参考にされると宜しいかと思います。

ちなみに下記サイト様ではヘッダー画像の表示の切り替えをmax-width: 480pxにしてありましたが、私はタブレットでの閲覧も想定したので、iPadの画面横サイズである(とどこかの受け売りで見かけた)768pxをmax-widthにしてあります。

 

affiliate-couple.hatenablog.com

 

カスタマイズ7-B.グローバルメニューをトグルメニューに

正直ここが一番対応に苦慮しました。通常のグローバルメニューではスマホでうまく表示できないので、代替案にする必要がありました。参考にさせていただいたのはゆきひー様の方法です。

 

www.yukihy.com

 

ただ問題なのは当ブログの場合、お、ドロップダウン型のメニューかっこいいじゃ~んと適当に導入したのが早速ツケが回ってきました。上記サイト様がトグルメニューに変換されているのが、ドロップダウン型のメニューでないシンプルな型の方なので、紹介されている方法そのままのコピペでうまくいかなかったことです。

グローバルメニューのレスポンシブル化を考えている方は最初からこのサイト様のをまるごと導入された方がいいかもしれません。(というかその方が確実で、絶対早い。)

一応切り張りなんとか元のドロップダウン型を殺さずにトグル化できましたが、素人考え、絶対どこか間違っている...。トグルメニュー、何か挙動おかしいですからね...ユーザビリティの欠片もなく大変申し訳ございません...。

 

 

カスタマイズ7-C.カード型レイアウト等、記事の表示について

何と皆様ご優秀なことで、上記でご紹介させていただきましたサイト様に、元よりレスポンシブルデザインまで対応してコードを公開されています。

カード型レイアウトや記事一覧の表示数など、殆どが上記サイト様のご啓示通りでうまく表示できました。

無料版はてなブログではスマホ用にhtmlを設定できないだけに、レスポンシブルデザインで作るのもいいかもしれません。

 

まとめ

ここまでご覧いただいたように、ほぼほぼほぼ他力本願です。先人の皆様、この場をお借りましてお礼を申し上げたいと思います。またこちらに取り上げていないだけでも、数多くの知恵に助けられました。誠にありがとうございました。

ただ他力本願といえども。コピペの嵐といえども。ブログのカスタマイズは、作ったものが目に見えやすいです。曲がりなりにも自分の手でサイトが作れた喜びはうきうき。うまく自分が意図した通りに作れたときは、初心者ゆえの達成感・高揚感がパないです。トライアンドエラーのハードルが低いので、失敗してもまた別の方法でチャレンジできる楽しさがあります。

時間があるだけやってしまうのが怖いですね。あとは無知ゆえの、理想に対する手の届かなさ。う~ん悔しい。でもそれが楽しい。モノづくりの楽しさです。

自己肯定感の低いお方。ブログづくり、おすすめです。