こんにちは、うみょです！今回は私がblogのレイアウトをカスタマイズしたやり方や参考にしたサイトを記録用で紹介します。
bloggerってwordpressよりもユーザーは少なくはてなブログやアメブロよりもマイナーですがgoogle公認のblogで独自ドメインなしでgoogleアソシエイトに応募できる点がマジで強いです。しかもはてなブログみたいにうざったいプロモーション広告などが一切なく見やすい。そしてドメインを借りているだけなので無料ですｗ
しかしデメリットがありwordpressみたいに拡張性がないことと調べても情報が少ないのです....。
今記事では私が参考にした先駆者様のblogサイトなどを紹介し、レイアウトを変更したいけどやり方がわからないというお困りbloggeruserさんのお役に立てれば幸いです。一応前提としてテーマはqooqを使っております。
吹き出しとアイコンのアニメーション
会話形式の作成法
吹き出しアイコンのアニメーション
参考にしたサイト
テーマに
/* 吹き出し（左）用 */
.balloon.left .voicecomment {
transform-origin: left top;
animation: balloonAnime 3s ease-out 0s infinite normal both;
}
/* 吹き出し（右）用 */
.balloon.right .voicecomment {
transform-origin: right top;
animation: balloonAnime 3s ease-out 0s infinite normal both;
}
@keyframes balloonAnime {
0% { transform: scale(1); }
10% { transform: scale(1.05); }
20% { transform: scale(1); }
30% { transform: scale(1.02); }
40% { transform: scale(1); }
100% { transform: scale(1); }
}
をコピペ。
.balloon.left .voicecommentを.balloon.left .voicecommentleft-iconに変更し
@keyframes balloonAnime {
0% { transform: scale(1); }
10% { transform: scale(1.05); }
20% { transform: scale(1); }
30% { transform: scale(1.02); }
40% { transform: scale(1); }
100% { transform: scale(1); }
をぽよよんとさせたかったので
/* 吹き出し（左）用 */
.balloon.left .left-icon {
transform-origin: left top;
animation: balloonAnime 2.5s infinite;
opacity: 1;
}
/* 吹き出し（右）用 */
.balloon.right .voicecomment {
transform-origin: right top;
animation: balloonAnime 3s ease-out 0s infinite normal both;
}
@keyframes balloonAnime {
0%, 40% {
transform: skew(0deg, 0deg);
}
5% {
transform: skew(5deg, 5deg);
}
10% {
transform: skew(-4deg, -4deg);
}
15% {
transform: skew(3deg, 3deg);
}
20% {
transform: skew(-2deg, -2deg);
}
25% {
transform: skew(1deg, 1deg);
}
30% {
transform: skew(-0.6deg, -0.6deg);
}
35% {
transform: skew(0.3deg, 0.3deg);
}
}
と変更。
吹き出しのアニメーション
吹き出しアニメーションは
のサイトを参考に変更
テーマの
/*****会話のCSSここまで*****/の下に以下のコードを記入。
/*--------------------------------------*/
/*フェードインアニメ*/
/*--------------------------------------*/
/*左から右にフェードイン*/
.left-to-right {
opacity: 0.1;
transform: translateX(-60px);
transition: all 1s;
}
.left-to-right.scrollin {
opacity: 1;
transform: translate(0);
}
/*下から上にフェードイン*/
.down-to-top {
opacity: 0.1;
transform: translateY(60px);
transition: all 1s;
}
.down-to-top.scrollin {
opacity: 1;
transform: translateY(0);
}
/*****フェードインアニメここまで*****/
動かしたい吹き出し要素の前に<section class="left-to-right">～</section>
そうすると吹き出しがスライドされる。
ブログカード
ブログカードは下記サイトにURLを張り付ければコードを作成してくれます。
目次
目次は見出しを三つ以上設定しないといけないのでそこは注意
囲み、枠 引用 リスト
アドセンスの設定方法、自動挿入スクリプトの設定
BIOGで使える蛍光ペン
自己紹介カスタマイズ
qooqカスタマイズ全般
1カラム
１カラムにまとめるため折り畳み式サイドアイコンやメニュー、縦型ナビケーションバーを導入しました。
人気の投稿のカスタム
人気の投稿に区切り線をつけたかったので.PopularPosts li {
border-bottom :solid 1px $(other.border);}
を"border-bottom"の部分を"border"にすると区切り線が付きます。”solid”の部分を”dotted”に変えると線の種類がドット、点線になります。
”1px”の数字を大きくすると区切り線の太さが太くなります。
"$(other.border)"のところは色です。それと区切られた幅を統一するため.PopularPosts .item-thumbnail{
margin-bottom: 0;
}のコードを貼り付け。
番号付きページャー
ただしページナビを導入すると画像や動画を多量に使用したページなどは１MB以上としてGoogleが容量オーバーと判断しそのページは省かれる。（トップページ最大１MB制限がbloggerでは設けられているのでTOPの記事が減っている場合がある。）なんでもAuto Paginationという機能がGoogle側で導入したんだとか。
解決策としては記事の初めに区切り「ー」＝「続きを読む」という意味でコードでは<!--more-->に相当する文字を入れると解消されページが反映される。
階層化、タグやパンくずリストの設置
また同HARUさんのカスタマイズでブログ幅を整え見やすくするカスタムも行いました。
関連でいつか使うかわからないけど画像や記事をスライド表示できるbxsliderをコーディングしました。Blogger に画像スライダー 【 bxSlider 】 を実装する方法
アフィリエイトのカスタマイズ
一応この記事ではカエレバともしもの簡単リンクカスタマイズも紹介されています。（個人的に簡単リンクのカスタマイズが大変参考になった）
youtube(各SNSでも同じやり方かも）のリンクの貼り方は
の記事が非常に参考になりました。
カッテネ
カエレバの代替「カッテネ」お洒落なアフィリエイトのリンクが作れる「カッテネ」の使い方
またその自動作成ツール自動作成ツール
目次が崩れる時の対策
ホームの記事数が少ないときの対策
記事のバックアップと復元の方法
吹き出し画像のURL化
吹き出しに画像を貼り付けるためにURLのリンクが必要になります。スマホで画像を撮った写真を貼り付けたい場合、ネットに持っていきURL化しないといけません。twitterやインスタなどに載せてもいいのですが、その為だけにアップして再度消すのが面倒だし、他人に見られるのは嫌ですよね。
Google Photoだと誰にも見られずスマホから撮った写真をURL化できるので、画像のアドレスをコピーすればOKです。Google Photo
追記 フォトからだと削除するとアイコン画像が翌日消えてたり、ブラウザによって見えなかったりするので、ページに張り付けることにした。
記事のリスト化 関連記事カスタマイズ
サムネイル画像の変更にあたり【Blogger】QooQリスト版 トップページ記事一覧のサムネイル画像サイズを変更する方法とQooQ_LISTテンプレートの記事一覧の画像をカスタマイズ！丸型を四角にしてちょっと大きな画像でキレイにする！こちらの記事を参考にさせていただきました。
またリスト記事の大きさを均等にするためダッシュボード画面からテーマ→HTML編集、そしてctrl+Fで『.list-item-title』を検索し以下のコードを記述し保存しました。
.list-item-title{ margin-top: .5em; font-weight: bold; line-height : 20px; height : 60px; overflow:hidden; }
ヘッダーとナビケーションバーとアイキャッチ画像のカスタマイズ
またアイキャッチ画像をフェードのアニメーションを追加、参考にさせていただいた記事【CSS】ページ読み込み時にフワっとスライドフェードインするアニメーション
フッターカスタムと画像圧縮
SEO対策としてページの読み込みを高速化したほうがいいので画像圧縮ソフトtinypngが簡単でオススメ
COMMENTS