2020年4月25日土曜日

2020-04-25T06:52:52Z , 、 Mb空き

Bloggerテーマの作り方、必須初期設定などまとめ

画像引用元：　https://www.blogger.com/about/favicon/apple-touch-icon-180x180.png

ClassicMacOS９のplatinumなBloggerテーマを作成している当ブログ。私流のブロガーテーマ作成方法を記事にしました。



Blogger公式情報

困ったときや、Blogger記法の情報を知りたいときは上記を参照。歯を食いしばって熟読。



元となるBlogerテーマを探す

私はClassicMacOSの外観がすごい好きだったので、BloggerのこちらのテーマRetroMacThemeというを見つけてこれを元にテーマカスタマイズから始めました。リンク先のレトロマックThemeも、もとはWordPressのテーマをBlogger向けへエクスポートしたもの。

このように自分が作りたいテーマのイメージに近いテンプレを探して手を入れていきます。Blogger TemplatesでBloggerのテーマを探せます。Bloggerの初期テーマもかなりシャレオツなのでこの辺をいじるのがいいかもですね。



ブログパーツの作り方

例えば、目次とかメニューとかサイドバーのアクセサリっぽいやつとかは、プロトタイプになるものをWeb Makerを使用し個別先に作る。
このスクショでは、記事の目次パーツをSheepShaverのスクショを並べて見ながら作成している。WebMakerはWYSIWYGなWebエディタで、html/css/jsを記述したそばから反映結果を表示してくれる。素人のトライアンドエラーでもストレス無く？作業できるのが魅力なcodepenのオフライン版のようなChrome拡張機能＆アプリ


htmlエディタへコピペ

WebMakerである程度満足いくまで完成したらBloggerのhtmlエディタへコピペ。これ特にめんどくさいのは、cssは<b:skin></b:skin>内に、JSは<script></script>に記述する必要があり毎度大量のスクロールで編集箇所へ移動しないといけないこと。

cssはhtml最上部、scriptはhtml最下部なので、

「Webmakerではleft: 10pxでよかったけど、Bloggerで表示させたらleft: 20pxのほうがいいわ」
とか
「セレクタの記述が間違っていたのでJS書き直さなきゃ」
なんて微調整がしんどい。

更新ボタンを押したときに強制的にエディタ上部に移動させられて編集地点を見失うのはなんとか改善したかったので、HTMLエディタ下部のツールバーを上部へ持ってきて、ウィジェット間ジャンプでショートカットするようにしています。
ツールバーを上部へ持ってくる方法はこちらの記事をご覧ください。BloggerThemeを自作する: BloggerのHTMLエディタが使いづらいのを工夫する





テーマの微調整はChromeDevToolを使用

画像引用元：　https://1.bp.blogspot.com/-vkF7AFJOwBk/VkQxeAGi1mI/AAAAAAAARYo/57denvsQ8zA/s1600-r/logo_chromium.png

Bloggerのhtmlエディタへのデプロイが完了し、実際にChromeでページを表示してみると

「もっと記事のwidthを増やしたい！」
など改善点や、他見栄えを良くするアイディアなどがいろいろ出てくると思います。そういうときは、右クリック＞検証かctrl shift i でChromeDevtoolを使用する。ElementタブでCssを修正すると、即時に結果が反映される。詳しい使用法はこちらのブログさまをご覧ください 初心者向け！Chromeの検証機能（デベロッパーツール）の使い方

死ぬほどわかりやすいです。

注意点はページをリロードしたときにDevToolを閉じておくこと。キャッシュが残っていると変更点が正しく表示されません。また、修正箇所はリロードすると消えてしまい、

「差分だけリストアップしてくれないかな」
とかできないみたいなので、そういうときはCrome拡張機能のLive editor for CSS, Less & Sass - Magic CSS - Chrome ウェブストアを使用しています。
ChromeDevToolかこの拡張機能かは使用場面によって使いやすいほうを選択。





自身のアクセスをカウントしないようにする

Bloggerは、設定で自アクセスをカウントしないに🗹チェックをいれても、自アクセスを他所からアクセスがあったとカウントする。

「えぇ！？ブログを開設して間もないのに、もうこんなにアクセスが来てるの！？」
と驚かれるかもしれないが







模写引用元：　ジョジョ４部
これは世界グローバルサービスなBloggerの仕様のようで、chromeのcookiesを以下のように手打ちで設定する必要があるそうな。めんどくさいけど以下のようにする。ChromeDevTool の Consoleで以下を実行。
document.cookie = "_ns=2; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
参考URL:　Blogger 「自分のビューを追跡しない」が機能しない（保存されない）原因と対策


素材となるpngやsvgイメージを作成する

ドローエディタは、最近グラデーションメッシュが使用できるようになったオープンソースなInkscapeが使いやすいんだけど、当方環境はChromeOS/ChromiumOSなのでChromeネイティブアプリなSVGBoxを使用する。SVGBoxは、ChromeOSファミリならライセンスフリーのはず。



記事まとめ




0 コメント: コメントを投稿