Blogger(テンプレートはMateriapollo)のヘッダーの挙動変更、ステータスメッセージの変更、著者情報ボタンの設置など、色々変えてみました。前提知識０、実戦経験のみでいじってます。 技術不足で出来なかった部分もあるのでまだ発展途上。
変更点
・ヘッダー、ヘッダー画像のレスポンシブ対応
・ステータスメッセージの変更
・コメント欄取り換え
・著者情報ボタンの設置
順に説明していきます。
ヘッダーのレスポンシブ対応
このテンプレートの場合、ヘッダーに画像を指定すると左寄せなうえに画像のみが縮小し、謎の空白が多くなります。
これをヘッダー画像と共にメニューバーも移動することで違和感なく画像を使えるようにしました。
直し方は次の通り。 Materiapolloの初期状態でヘッダーの画像を指している部分がこれ
<div id="header-inner">
<a href="ブログURL" style="display: block">
<img alt="てす２" id="Header1_headerimg" src="画像のURL" style="display: block;padding-left:0px;padding-top:0px;" width="横幅; " height="縦幅; ">
</a>
</div>このimgのmargin属性をautoにする、つまり
#header-inner img{
margin:auto;
}というCSSを追加すると、ヘッダー画像が中央固定で拡大縮小するようになります。 しかし謎の空白が残ったままです。これはheadのCSS
header{height: 200px; background-color: #ffffb9; overflow: hidden; color: #fff; text-align: center;}となっているところからheightの指定を消すとメニューバーが空白を埋めてくれます。 左右の空白はヘッダー画像の背景色とヘッダーの色を同じにすることで埋めます。
余談ですが、この記事を書くためだけにこのプログラムコードブロックとやらをCSSのみで実装しました。色分けはJS使って重そうなので見送り。
ステータスメッセ―ジ変更
Bloggerの初期設定のステータスメッセージはこれに似た感じです。
こちらのサイト様からコードを拝借し、メッセージ部分を編集できるようになりました。感謝。
【Blogger】ステータスメッセージをカスタマイズする方法 | IB-Note
サイト内検索やラベル検索で表示される「ステータスメッセージ」をカスタマイズする方法についてご紹介します。
itblogger-note.blogspot.comこんな感じの表示にしました。 ブログなんですからこれくらい気楽にいきたいですね。
コメント欄取り換え
Bloggerの標準コメント欄が出てきたり出てこなかったりして不安定だったので、DISQUSを導入しました。
Disqus – The #1 way to build your audience
Disqus offers the best add-on tools for websites to increase engagement. We help publishers power online discussions with comments and earn revenue with native advertising.
このプラグイン、2013~2015年ごろに流行って様々なブログで導入されたようですが、現在はほとんど見かけません。主な原因は「コメントする人の減少」と「ページへの負荷」だそうです。
前者は分かりませんが後者は明らかに事実で、本ブログの負荷原因の１０％程度を早速占めています。スマホだと遅延読み込みをしてもDISQUSだけで0.5秒くらい遅くなります。 0.5秒を侮るなかれ、他のコンテンツの読み込み速度にも影響してくるのでかなり違います。
重いとはいえコメント欄は設置しておきたいので、今は何か別の軽量なコメントプラグインがあればなぁと探索中。 コメント欄はSEO的にも第三者からの視点ということで好影響だそうです(大本営google発表)。
ちなみにDISQUSはBloggerと連携しているので、ウィジェットを貼り付けるだけで実装できます。DISQUSの存在を知るまでが一番時間かかりました。
著者情報ボタンの設置
ページの横とか下とかに「僕はこういう人間ですフォローしろ」というのを誇示すると邪魔くさいなぁと感じていたため、記事下部のボタンに格納して「興味ある人だけ見てね」なスタンスにしました。そら僕もフォローされたいんですけど、読者の人がコンテンツに集中できることを第一に、控えめにいきたい。
元からサイドバーとフッターに小さく著者情報のリンクを張っていたんですが、あまりに目立たないので設置しました。
これはMaterializeの機能を使って実装しています。 ただこれ、正方形や超細長い解像度だとレイアウトが崩れます。いずれにせよ珍しい解像度なので、まあいいかな…
ところで、最近はなかなか画像の永続リンクを手に入れられる場所がなくて苦労しています。どこがいいんでしょう？
実装手順
公式のサンプルに従います。
MaterializeのCSSをまとめた公式サイトです。
①scriptをインポートする。 (jQuary Plugin Initializationをコピペ)
②htmlを表示したい箇所に貼り付け、modal-contentの中にhtmlとCSSでコンテンツを作る。
シンプルですね。jQuery様様。１から作ると大変そう（小並感）
その他の変更点
タイトルにマウスカーソルを乗せると色が変わるようにしたり、h1がブログタイトルだけだったのを個別記事のタイトルに適用したり、h2のデザインを変えたり。
たまたまなのですが、h2のデザインが移転前のブログと色違いになりました。三つ子の魂百まで。
今後の実装目標
常に初めてのことをしていたため、とりあえずここで一区切りつけました。 ですが、まだやり残したことが沢山あります。
サイドバーに追従する目次的な何か
Qiitaにあるようなやつを作りたいなと。同じラベルの記事でもヨシ。 追従する目次のHTMLとCSSはステータスメッセージ変更で紹介したサイト様が作られているのですが、これをそのまま実装すると記事によっては目次が見切れてしまうんですよね。高さを固定してオーバーフローさせた方が見た目的に良いのでは、と思っているところです。
テンプレートには親要素にいくつかのOver-flow=hiddenなどが付いていたので、それを手動で取り外してstickyが働くようになるところまではしました。ggってもあまり出てこない、stickyが動かない理由です。
記事下部にラベル表示
現在、記事のヘッダーにラベルが表示されていますが、これをそのまま記事のフッターにコピペすると何故かテーマをアップロードできなくなります。なんでや。
これも解決できたら載せたい。
軽量なコメント欄
DISQUSより軽いプラグインがあればなぁ。Wordpressなら絶対何かしらあるんですけど、Bloggerだとシェア率ゆえ厳しい。
もしくはBloggerのコメント欄を安定化させるのでも良いのですが、全く見当がつきません。
多言語対応
今のところは誰が使うねんみたいなグーグル翻訳ウィジェットを置いています。
Skyblockの記事などはおそらく英語化しても検索に上がると踏んでいるんですが、ドメイン関係やらトップページとの兼ね合いで難しいんですよね・・・ もしやるなら
・日本語トップページと英語版トップページを切り替えられるようにする
↑ＣＳＳむっちゃいじる必要がある
・日本語記事と英語記事を完全に分離
↑言語ラベルを付ける？鬱陶しくなりそう
と、ドメイン１こでやるのは厳しそうです。
1番現実的なのは「英語ブログの新設」なんですが、そうなると本ブログのドメインパワーを活かせなくなるんですよね。
いや～しかしロマンはありますよね・・・多言語。マルチリンガル。
トップページにラベル別の投稿を表示
こちらもＣＳＳの変更が大がかりなものになるので、体力を蓄えています。このツールを使えば楽に出来るんじゃないかな、などと考えているものの、テストブログだと機能しませんでした。どうしようかなぁ・・・
Blogger Random – Recent – Specific Label Posts Widget V1.6 – All in One Post Feed Widget
Recent posts or random posts widget from all labels or specific label is now available for you Blogger Blogspot. Just check your favorite
ラベルをカテゴリー別に表示
選択したラベルのみを表示するウィジェットを複数使って実現しようとしましたが、このウィジェットが２つ以上あるとバグります。なんで？
もう少しラベルを細かく分けたいと思っているので、手書きＨＴＭＬで実装するのは面倒なんですよね。
というわけで、今回はここまでです。何か新しく実装出来たら追記したいと思います。 ご観覧ありがとうございました。
