Loading...
2015年10月7日水曜日

Bloggerカスタマイズで参考にしたサイト

1007b6

うん、”また”なんだ済まない。一夜明けて冷静になったら「もしかしてクッソ見難いんじゃね?重いし」と感じて再びテンプレ探しから──

Bloggerのテンプレを弄るのも固定の箇所を注視すれば簡単なので、お世話になった所をまとめてみました。

海外テンプレートをDL、日本語化する

まず第一歩という感じ──と同時にCSSを修正する箇所を知ることにより、全体レイアウトの変更をするのも…そう難しくないと思い始めるきっかけにはなります。

 

記事下、タイトル下に広告を貼る方法(ブログ本体のコード確認)

『広告を貼る=画像や文章も入れれる』というわけで、ブログ本体のパーマリンクコードを確認して、そこから上か下になんらかの追加要素を入れることができるきっかけになる。

つまり、オリジナルのSNSシェアボタンをそこに置くことも可能になるわけです。

 

Bloggerをモバイル端末用にカスタマイズする方法

一番苦戦したのがモバイル表示用のフォントサイズ。

BloggerはPCとモバイルでCSSを共有しているので、あっちを弄ればこっちが立たず…って感じにいたちごっこになります。終わってみれば単純な答えですが、”モバイル専用にCSSを指定すればいい”話なわけで、ここには大変助けられました。

 

SNSシェアボタンを配置する

WordPressではCSS指定による”画像を使わない”フラットボタンが主流ですが、Bloggerだとパーマリンクの設定が元々ガバガバで、WPの例を参考にしてみたけれど、どうしても完璧にシェア記事をSNSに送ることができませんでした。

なので最も効率的な方法は、”既存のださいシェアボタンに上書きをする”のが一番。ソーシャルボタンまとめて作成がレイアウトと設定に関しては最も楽です。

 

あとは詰まったら適時AND検索(例:Blogger テンプレート カスタマイズ)すると、知りたいことが出てくるかも。

1回カスタマイズを覚えれば、あとは別のテンプレートでも汎用がきくので、htmlを知るのにもいいと思います。細かいCSSの数値指定はこちらのスタイルシートリファレンスを参考に。

ちなみにWordPressの記事はあまり参考になりません。ブログを作り上げている構造とCSSは同じ物ですが、ブログ本文やタイトル等のプログラム上での呼び出し命令文、パーマリンクの構造が違うためどちらのコードも覚えて理解している必要があるからです。

ほぼ共通するのはSEOくらいかな…。

 
TOP