注意：うちのパソコン、Windowsです。
深夜2時すぎ。東京も暖房を入れないと手がかじかみ、キーボードを打つ速度も遅くなる(手がかじかんでいるから誤字脱字が多い)。
そもそも私は思い付きで文章をガーっと打って誤字脱字チェックはせずになんでもかんでも投稿してしまう。
ツイッターなどでそれをやると
(直したいんだけど・・・)
でも、自分が思っているほど他人さまは自分のことを気にしていないことは30歳で理解したので私のような日記代わりに愚痴ったり、適当な「ごっこ」遊びをしている人にはブログってちょうどいいのだと思う。
そんなことを思いながらなかなかきれいにならない自分のブログを眺めていた。
どうしても我慢ならない箇所が一か所あった・・・。
どうしても我慢ならない場所
どうしてもこのライン(震える手でペイントで書いてみた)
赤字のココ
ここのラインが気になって仕方がなくなってきた。
理想としては
- プロフィール
- アイコン(そのうち自作で絵を書いてやると思っている)
- 自己紹介文
- 読者になるボタン
- ツイッターのボタン
こんな感じにしたいの(寒いから勢いないんだけど)
そう思った。
で、仕方ないからなんとなく、ソースをいじってみようという気になった。
なにしたかというと、普通に画面上を右クリックして「ソースを表示」させてみた。
結局、なんとなく、表示のされ方はイメージがついたので
はてなブログの
ダッシュボード＞デザイン＞カスタマイズ＞サイドバー
までたどりつき、
タイトルのところに普通に「プロフィール」といれて
モードは「HTML」にして
にペコっと
以下のコードを張り付けた。
<img src="https://cdn1.www.st-hatena.com/users/ha/halynsmak/profile.gif?1483618613" alt="40歳からのブログ SWの日常"></a><b><br> <a href="http://www.makuharu.com/about">まくはる (id:halynsmak)</a></b></br> <p>40代シングルマザー。<br> ソーシャルワーカーとはなんだろう、ひとり旅、雑記・・・いろいろポツポツ書いていきます。<br><br> 登場人物：<br> ハルさん(こども)・ハルパパ(元だんなさん) <br><br> 2016年12月：はてなブログにお引越し。 </p> <iframe src="http://blog.hatena.ne.jp/halynsmak/www.makuharu.com/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe> <div class="hatena-follow-button-box btn-twitter"> <a href="https://twitter.com/halynsmak" class="twitter-follow-button" data-show-count="false" data-lang="ja"> @halynsmakをフォロー </a> </div>
理想通りに
- プロフィール
- アイコン(そのうち自作で絵を書いてやると思っている)
- 自己紹介文
- 読者になるボタン
- ツイッターのボタン
の順にHTMLのタグを並べてみた。
そうすると
こうなる。
もともと配布されているはてなブログのテンプレートで理想が実現できるものもあると思うけど、私が利用させてもらっているテンプレートでは前述どおり、
こういう丸みがでる。これをなんとかしたくて上記のHTMLを入れたら多少理想に近づけた。
やり方
こんな感じ。もし万が一私くらいのHTML理解の人で同じようなことで悩んでいる人がいたらと思ってやり方書いた。
<img src="【1】https://cdn1.www.st-hatena.com/users/ha/halynsmak/profile.gif?1483618613" alt="【2】40歳からのブログ SWの日常"></a><b><br> <a href="【3】http://www.makuharu.com/about">まくはる (id:halynsmak)</a></b></br> <p>【4】40代シングルマザー。<br> ソーシャルワーカーとはなんだろう、ひとり旅、雑記・・・いろいろポツポツ書いていきます。<br><br> 登場人物：<br> ハルさん(こども)・ハルパパ(元だんなさん) <br><br> 2016年12月：はてなブログにお引越し。 </p> <iframe src="http://blog.hatena.ne.jp/【5】halynsmak/【6】www.makuharu.com/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe> <div class="hatena-follow-button-box btn-twitter"> <a href="https://twitter.com/【7】halynsmak" class="twitter-follow-button" data-show-count="false" data-lang="ja"> @【7】halynsmakをフォロー </a> </div>
赤字のところ【1】～【7】だけ書き換えれば、あくまでも「私の理想」にはなれるはず。とりあえず私はなれた。私と同じテンプレートを使っていて同じ理想をもったなら、多分同じ表示になるはず(テストできないから自己判断でどうぞ)。
- 【1】はアイコン(画像)だから、自分のアイコンの上で右クリックしたらこんなのがでてくるので、
画像アドレスをコピー。それを【1】にいれる。 - 【2】は画像に対する説明をいれるだけなので任意。いれなくてもいい。
- 【3】自分のブログのトップページのアドレスをいれる。
- 【4】自己紹介。改行したいところで＜/br＞をいれる。
- 【5】自分のはてなID
- 【6】＝【3】＝自分のブログのトップページのアドレスもう一回いれる。
- 【7】自分のツイッターのIDをいれる(2か所あるから気をつけて)
一応、おおよそ、だいたい、私の希望通り。
ビフォー
アフター
それでも気に入らないところ
そんなかわんねーじゃんって言われそうだけど、イッコ変わってるところがあって「プロ」の文字がなくなってしまった。
私は今の今まで黒いプロってアイコンは画像だと思い込んでいた。そしたら、画像じゃなさそうなのね。表示させようと思ったんだけど、なんかclass指定があるし(そうなるともうわかんない)、手がかじかんじゃって眠いから、これ以上はできんと思って備忘録的に記録しておこうと思って必死にペイント
▼こういうヤツ
使って記録。で、ブログに記載。今に至る。
あくまでも初心者向け。
感想
HTMLをコツコツ書くよか、ペイントやらHTMLを実際に埋め込むやら、そっちのほうが時間がかかった。初めて、「はてな記述」って編集方法をしった。
見たままモードでHTMLを書いたらエライことになってどうしようかと思ったけど、何気に「はてなブログ」のヘルプをよく読めばいいんだってことを知った。
めっちゃ自己満足というか備忘録のつもりで始めたらかなりやっかいで(説明のほうが)、途中で放り出したくなったけど、ここまでの時間がもったいないので絶対にUPするんだっていう気力でここまでたどり着いた。暖房つけずにがんばった。題名だって、はじめは「寝ないで作業(HTMLをかじかんだ手でコツコツうってみた) 」だったのに、今、「サイドバーにあるプロフィールの丸さを消したかっただけ」って言葉を追記。あまりにも題名が長くなったので少し変えた。
ただ、丸みを消したかっただけなのに・・・。自爆ってこういうことをいうんだと思った。はてなブログって奥が深い。カスタマイズにはまりそうな気がします。HTMLそのものは20分で済んだんだけど、「HTML」の埋め込みを理解するのに2時間かかった。こんなどうでもいい内容をココまで読んでくれた方がいたとしたら本当に感謝します。
私どこに向かってるんだろ・・・。ブログ迷子。
