記事一覧
Blogger テンプレート引っ越し計画開始＃01
最近、ラズパイで遊びすぎてて、Blogger記事もnoteもあまり更新ができてなかったです。そんなことしてる間に、Google Adsenseに合格したりしましたので、また、Bloggerのほうにちょっと手をいれていこうかなと思ってます。
広告が入るようになると、やっぱり、全体バランスが大きく崩れてしまいますよね。ふじやんさんとか、Fumaさんとか、「Adsense通っててもデザイン重視で広告な
![[Blogger #032] OGP とか Twitter card とか metaタグを整備する](https://assets.st-note.com/production/uploads/images/47989172/rectangle_large_type_2_3cb95d6f3b8dbc202aba474f3f546348.png?width=800)
[Blogger #032] OGP とか Twitter card とか metaタグを整備する
記事を書いたら、ツィッターに張り付けたい。で、やってみると、中身がすっかすか。ちゃんと、設定を確認しておきましょう。
と、いう件に関しては、かなり前にやってたんですが、それ以外にも色々あるので、備忘録として記事化しました。
絵が出ないのは、Bloggerのアイキャッチ画像の認識問題。ブログカード上でのDescription がでないのは、記事投稿時に設定してないから、なので、metaタグで追加
![[Blogger #031] OpenLiveWriter での編集画面カスタマイズ](https://assets.st-note.com/production/uploads/images/47861185/rectangle_large_type_2_e408fceb1774ebde09cba4c046f60919.jpg?width=800)
[Blogger #031] OpenLiveWriter での編集画面カスタマイズ
OpenLiveWritterでの編集画面、実際のページの見た目と凄くちがうんですよね。そりゃ、何も設定してないので仕方ないです。Previewも、標準のテンプレなら、そこそこだけど、QooQをつかってるせいか、カスタマイズしたくってるせいなのか、全く反映されません。そこで、直接CSSを合わせちゃう、という作戦をとりました。
詳しい記事は、こちらで。
見た目だけを合わせられると、記事もより書き
![[Blogger #030] 引用、囲み、箇条書き部分のCSS整備しました](https://assets.st-note.com/production/uploads/images/47476096/rectangle_large_type_2_74a276997253380049d6a2ef6c9bed78.jpg?width=800)
[Blogger #030] 引用、囲み、箇条書き部分のCSS整備しました
#029でSVGアイコンをHTMLやCSSの疑似要素に使う記事を紹介しました 。これを使って、引用したり、箇条書きだったりの部分に使おうとCSSをいじりました。記事はこちら。
これが、一筋縄ではいきませんでした。
たかが、箇条書きの前のチェックマークですよ。これ、SVGなんか使わなくたって、HTML・CSSだけの組み合わせでも、そこそこなものがあって、サンプルのCSSも、ググればすぐでてきます。
![[Blogger #029] SVGアイコンをCSSの疑似要素に使う](https://assets.st-note.com/production/uploads/images/47181945/rectangle_large_type_2_29c48b734309ac308d60949ad878818d.jpg?width=800)
[Blogger #029] SVGアイコンをCSSの疑似要素に使う
SVGアイコン埋め込みを2回分に分けてBlogger 側に記事かきました。
SVG埋め込みは、以前 note で書いたんですが、CSSへはやっていなかった。HTML埋め込みはnote、CSS埋め込みはBlogger って分かれちゃうのもなんだなってんで、note 記事を焼き直しし、セットでBlogger 記事にしておきました。
何故、CSS疑似要素にSVGアイコンが必要になったのか？記事書いて
![[Blogger #028] Open Live Writer ＆ Dynamic Template でオリジナルブログカード](https://assets.st-note.com/production/uploads/images/46996108/rectangle_large_type_2_2deaea065b0948d24298b3cb3f3e2079.png?width=800)
[Blogger #028] Open Live Writer ＆ Dynamic Template でオリジナルブログカード
ブログカードをどうするかっていうのが、悩みの種でした。note だと、簡単に、ブログカードのリンクを埋め込めますが、Bloggerだとそうはいきません。詳細記事は以下です。
様々なブログカードそもそも、なんで悩むかというと選択肢が多いから。ググっていけば、たいてい、次のものにたどり着くのではないだろうか。
はてぶのブログカードを<iframe>タグで埋め込む
Embedly を使う
ブックマー
![[Blogger #027] Open Live Writer へ Dynamic Template を導入](https://assets.st-note.com/production/uploads/images/46929513/rectangle_large_type_2_191e75c7af8727b929cea7435ac97189.png?width=800)
[Blogger #027] Open Live Writer へ Dynamic Template を導入
Windows Live Writer 時代には様々な Plug-in があったようですが、もちろん、Open Live Writer も、Pluginが使えます。
今回は、Dynamic Template を導入しました。詳しい記事はこちらに書きました。このプラグイン、むちゃくちゃ高機能なので、使いこなせれば、ほとんどこれ一本で出来てしまうのではないかと思います。
なんと、このテンプレート、
![[Blogger #026] コード引用の見た目をよくする](https://assets.st-note.com/production/uploads/images/46791187/rectangle_large_type_2_f4d14c495286dce0ca5ecaf7af60daf3.png?width=800)
[Blogger #026] コード引用の見た目をよくする
Blogger 側に直接記事を書くようになってしまって、note のほうが後になった。できた記事はここ。
とはいうものの、今回もふじろじっくさんところの記事を実行しましたってだけです。出来栄えは、こんな感じ。凄くいいね。
オリジナルでいじくってるのは、テーマをStackoverflow-darkにしたのと、行番号部分の境界をドットにしたりとか。
あとは、Powershellやら、C#やら、今
![[Blogger #025] Bundle.css のインライン化と画像遅延読み込み](https://assets.st-note.com/production/uploads/images/46519064/rectangle_large_type_2_efc70e096491c2c225452355c443f91a.png?width=800)
[Blogger #025] Bundle.css のインライン化と画像遅延読み込み
Page Speed Insight でみた時に改善しろよ指令がでてくる、２件対応しました。まあ、点数低いのはモバイル側だけみたいなので、適当にやって次にすすみます。
今回から、Open Live Writer でBlogger 側に記事を書いてみているので、中身はそちらで。
じゃあ、note には何を書くのだ！？
とりあえず、書いたよ紹介と、実際にやった時の苦労話とか書こうと思います。記事
![[Blogger #024] note は終了！？ Open Live Writer で Blogger 記事を書く](https://assets.st-note.com/production/uploads/images/46448509/rectangle_large_type_2_9357372520a0107adce45a5f81a5f8c3.png?width=800)
[Blogger #024] note は終了！？ Open Live Writer で Blogger 記事を書く
これまで、こちら note で、Blogger のカスタマイズ記事を連載してきました。というのも、Blogger の中だと、お気楽に記事を書きにくかったからです。しかし、それもこの”Open Live Writer” が使えるようになって一変しました。
Open Live Writer とは？元々、Windows Live Writer という、ブログへのアップロードなどがお手軽にできるワードラ
![[Blogger #022] ナビゲーションバー、モバイル切り替え対応](https://assets.st-note.com/production/uploads/images/45420687/rectangle_large_type_2_783d82663977a09dbe0cf6e5469c8ab6.jpeg?width=800)
[Blogger #022] ナビゲーションバー、モバイル切り替え対応
ふじやん様より、ご指摘頂きましたので、表題の件、早速対応しました。といっても、記事公開時点だと、既に数日すぎてるかもしれません。
そもそも、まさに、教えて頂いたところ、【ナビバー部分にガジェットの二つ目が追加できないという件】で詰まってしまってて、そのうち調べよって、放置してました。ふじやんさん、ありがとうございます！！
さて、この設定で上手くいき、無事、二つ目のページを追加できました。
さ
[Blogger #021] IE対応…を、真面目にやらずに済ます方法
先日、ふじやんさんから、ご指摘頂きました。なんと、Internet Explorer でみると、真っ白でした。こんな感じ。
こいつは、CSSのカスタムプロパティにIE側が対応できてないからです。色関係の設定を調整するのに、カスタムプロパティをつかったので、こうなりました。WebサイトのIE対応は、世間でもWebデザイナーなかせのようですね。
ぶっちゃけ、ちょっとググっただけでも、様々な問題点が
![[Blogger #020] 最新コメントページ導入](https://assets.st-note.com/production/uploads/images/45337421/rectangle_large_type_2_50a7389d61774db565463c5be67820ea.jpeg?width=800)
[Blogger #020] 最新コメントページ導入
ふじろじっくさんところのフッターを真似たので、左下のPAGES エリアはこんな感じ。
全記事リストは、#016サイトマップのところで作成しました。プライバシーポリシーは記事だけなので、すでにページ作成してあります。今日は、最新コメントページをつくります。ページってところで、新しいページ、”最新コメント”ってのをつくります。
その後、ふじろじっくさんとこの記事を参考にHTMLを貼り付けました。
![[Blogger #019] 記事の見出し調整、編集マーク削除](https://assets.st-note.com/production/uploads/images/45257111/rectangle_large_type_2_7f05719ef5e1ac2a4ed63ac5306252e7.png?width=800)
[Blogger #019] 記事の見出し調整、編集マーク削除
記事内の見出しデザイン、全くいじってなかったので、調整していきます。
さあ最初は、タイトル部分だ！と、取り掛かったら、気になってしまう鉛筆マーク。出鼻をくじかれたので、抹消してやりましょう。
編集アイコンを消す似たようなのにクイックエディットアイコンっていうのがあります。
クイックエディットアイコンは、既に消してました。こんなやつです。
念のため、こいつの消し方は以下。CSSで見えなくしてあり