どうも！フジグチです！
当ブログでは以前LSSさん(id:little_strange)のネタを勝手にパクって拝借して「コメントを書く」の文字を「コメントくださいね♪」にするカスタマイズの記事を書きました。
このカスタマイズは元々の文字の上に、別の文字を被せて隠すことでまったく別の文字を表示するようにしています。
これを応用したカスタマイズを思いついたので、サブブログとして運営している当ブログの悩みと合わせて紹介します。
サブブログの悩み
当ブログは妻が運営する【うとうとさらのテンパり育児】のサブブログとして運営しているのですが、「同一人物が運営するサブブログ」ではなく「別人が運営するサブブログ」であるが故の不自由さもあります。
読者登録できない
サブブログは気に入ったブログを見つけても読者登録することが出来ません。
正確には読者登録してもメインブログのIDが表示されるので、相手には自分だと気付いてもらえません。
この悩みは最近ではtwitterをやっている方が多いので、フォローすれば投稿のお知らせがされるのでさほど気にならなくなりました。
はてなスターを付けられない
こちらも正確にはスターは付けられるがメインのIDが表示されるので、付けたとしても相手には自分だと気付かれません。
今は非表示にしましたが、自分の記事にスターを付けてもらうことは出来ます。
「スターを付けてもらったら返しに行く」というはてな特有の気遣いをする方は返せないことに心苦しく感じるかもしれません。
twitterを連携できない
記事の予約投稿時にtwitterと連携してツイートするということも出来ません。twitterのアカウントを紐付けられるのは１つまでです。
これはtwitter自体に「予約ツイート」という機能が追加されたので解決しました。（１回しか使ってないですが）
予約ツイートの記事はこちら▽
【Twitter便利機能】予約ツイートの使い方
コメントできない
気になる記事があってもコメント出来ません。
共感したり質問したり、教えてあげたいことがあっても自分としてコメントすることは出来ません。
こちらもtwitterで代用することができるので大丈夫です。
シャイでコメント出来ませんが。自分、不器用なんで。
コメントに返信できない
自分の記事にコメントが来ても返信するとメインIDが表示されるので、コメントしてくれる方は理解していても、知らずに記事を読んだ方がコメント欄を見て混乱することがあるかもしれません。
しかし、コメントを無効にしてしまうと閉鎖的に感じてしまうのがイヤだったので
みたいな照れ隠しをしながら返信していました。
きょうはこの照れ隠しの必要がなくなるカスタマイズが出来たのでご紹介します。
サブブログで返信するCSS
LSSさんのこの記事でコメント欄の構造が分かりやすくまとめられています。
HTMLで書いて作られたんでしょうね。すごいです。
この記事を読んでコメント欄の中にspan comment-nicknameというクラスがあることに気付きます。
もしやと思い自分のコメント欄を検証してみるとdata-user-name="utoutosara"というユーザー個別に指定している「データ属性」を見つけました。
指定するセレクタさえ見つけてしまえばあとは簡単です。
これにコメントボタンをカスタマイズした時のように::beforeと::afterの疑似要素を使い、名前とアイコンを隠すように配置してあげればいいだけです。
使用したコードはこちら
.comment-nickname[data-user-name="utoutosara"]::before {
content: "";
background-image: url(https://cdn-ak.f.st-hatena.com/images/fotolife/u/utoutosara/20200517/20200517232343.png);
width: 50px;
height: 50px;
background-size: contain;
position: absolute;
left: 10px;
border-radius: 3px;
}
.comment-nickname[data-user-name="utoutosara"]::after {
content: "フジグチ(id:fujiguchi)";
width: 220px;
position: absolute;
left: 70px;
background: #fffbd6;
}実際にカスタマイズした状態がこちらです。
before
after
簡単に説明すると、::beforeの部分で画像を表示して、元々の画像と同じ位置に配置して隠しています。
当ブログので使用しているテーマのコメント欄は50pxで表示されていますが、同じサイズの画像を準備出来なかったので、サイズを変えるために背景画像として表示して幅と高さを調整しています。
::afterの部分は新しく表示したい名前とIDを入れ、メインの名前とIDを隠しています。
メインのほうが名前が長かったので幅を伸ばし、同じ背景色にして下の表示が隠れるようにしています。
こうなってくると「うさぎのキグルミを着て」の照れ隠しが裏目に出てしまいました（笑）
※追記
応用して自分以外のコメントしてくれた方の名前に「様」と付けるCSSも考えたので紹介します。
.comment-nickname:not([data-user-name="自分のid"])::after {
content: "様";
margin-left: .3em;
}自分のidの部分（私の場合はfujiguchi）をご自身のidに変えれば、自分以外のコメントしてくれた方の名前の後に「様」と表示されます。
「様」の文字は他の文字にも変えられますが、あまり長いとスマホ画面などでデザインが崩れるかもしれませんので、注意してください。
まとめ
今回ご紹介したコードはUnderShirtのコメント欄で当ブログに合わせたコードなのでそのまま使用することは出来ません。
カスタマイズして同じように使用したい方はなかなかいないと思いますが、くれぐれもなりすましなどには使わないようにしてください。
…とは言っても、アイコンや名前をクリックすればメインのブログに飛びますし、相手に届く通知はメインアカウントなのでなりすませないんですけどね。
あくまで記事内で返信者が誰か分かりやすくする為のカスタマイズです。
「サブブログの悩み」なんて書きましたが実際は「サブブログだから」なんて都合良く言って気ままにやっています。マイペースな自分にはちょうどいいんです。(笑)
それでは、今回も最後までお読み頂きありがとうございました。