さらにQooQのカスタマイズ。Shareボタンを丸くする他いろいろ

気になるところが色々とあって、さらにQooQのテンプレートを弄ってみました。さらにピンク色成分を強化できたと思います😀💓この配色への拘りは、以前に使っていた Ms. Moto (Pinky Lee variation) というBlogger純正として提供されていたクラシック・テンプレートへのリスペクトです。もはや入手できないのかも知れませんが３カラムに改造した「Mr. Moto, Ms. Moto, Son of Moto 3 Column XML Templates」というのを見かけました。元は２カラムなのでこの３カラム版の左端カラムをを削った感じですね。

とりあえず今回、QooQのテンプレートを弄ったところを綴っていきます。

SHAREボタンを丸く加工

この記事のタイトルにもしていますが、QooQのSNS向けShareボタンを円形にしました。外部FONTを使わず、画像も使わず、HTMLとCSSだけでなんとか出来ないかとなぁと。普通にブロック要素へのradius設定では元の要素である文字が"t"やら"L"やら"B!"など大きさがバラバラなのでうまく行かず、かといって等幅のフォントにしたところで２文字構成の物もあるのでうまく合わないし２文字分の横幅に合わせて高さを合わせると、文字の上下位置が変わってしまってこれまた不格好に・・・。でもなんとかできました～。コピペするだけなのでソースを見てください。

・ボタンの全体をdisplay: tableにする
・各要素はdispaly: table-cellにしてセル毎の幅と高さを指定
・各要素は縦横とも中央寄せ

具体的には次の部分を書き換えています。
検索で「SNSボタン」の文字列位置を参照してください。

記事本体を切り離した見た目に

記事本体を切り離して関連記事、コメント部、それぞれ独立した見た目にしてみました。
せっかく背景画像付きのレイアウトにしているのだから背景の露出部分を多くする事と、何処までが記事なのか分かりにくい気がするので分けてスッキリ♪

・これは本文のsingle部分のdivタグの対応を変えるだけで実現できますよ～

コメント部のコメント本文を吹き出し風の装飾に加工

これは、下記のサイト様の記事を参照して、ほぼまるごと使いました。色々なバージョンがあるようでしたが同じQooQということと常時コメント部は展開という使い方なので、一番上に書かれているパターンを使いました。

ちょっとだけ変更したところ
・同サイトを真似て少しだけ画像サイズを拡大して表示
・デフォルトのアバター画像をgoogleuserの初期画像を直接指定
・若干、上下間隔の変更

【QooQ 他】コメント欄のデザインカスタマイズ | ふじろじっく

前後記事へのページャーボタンの位置を変える

もうひとつ、同じサイト様の記事を参照して、ページの前後のボタンの表示位置を変えました。現状ではBlogger純正のテンプレートであっても記事の下にページ遷移のボタン用途が無いレイアウトもあるので、確かにデザイン的には一覧表示や検索結果の表示と同じ位置に個別記事でもページボタンが表示されるというのは好ましいと思うところもあります。しかしながらBloggerでは昔のクラシックテンプレートからの流れにおいては「記事の一番下に前後ページへの遷移ボタンがある」というＵＩになっているので慣例的にそこの位置にある方がBloggerらしいと思います。
このように飾り付けしようかとも考えたけれど没に・・・

前の投稿

丸い感じの方が簡単だしね。

ボタンの位置だけでなく見た目も少し変えてみました。
・Table化して文字部分の前後に文字追加
・Table化して文字数分での固定幅にした

【QooQ】前後記事リンクの位置を変える | ふじろじっく