バナナのBloggerカスタマイズ日記

CSSだけで要素をふわっと表示させるようなアニメーションを実装する方法

noreply@blogger.com (Unknown) — Sat, 09 Nov 2019 01:27:00 +0000

アニメーションはScriptだと簡単に実装できるのですが、CSSの方が動作が軽く、一般的にはCSSで実装した方が良いらしいので方法を解説。
方法は簡単で@keyframesを記述するだけです。

1.@keyframes

まずは、@keyframesでアニメーション効果を設定しましょう。

CSS

@keyframes test {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

要素を透過させるopacityの0から始まり、要素を透過なく表示させる1に向かって進むといった内容なので、要素がふわっと表示されます。
testの部分は任意の文字を記述してください。

2.アニメーション効果を与えたい要素に@keyframesを付与

アニメーション効果を与えたい要素に@keyframesの任意のネーム（上記の場合はtest）を付与してあげれば完成です。

完成版CSS

@keyframes test {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.anime-test{
animation-name: test;
    animation-duration: 1s;
}

animation-durationは遅延時間設の定なので、要素が完全に表示されるまでの秒数です。

最後に、記事トップの「こんな風なアニメーション」のサンプルは以下のようになっています。

@keyframes test-banana {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.sample-banana{
animation-name: test-banana;
    animation-duration: 5s;
background-color:#42dee1;
height:200px;
width:100%;
}

【Blogger】コメント欄をカスタマイズ！コメントを新しい順番で表示させ、「コメントを投稿」の表示位置を移動してみた

noreply@blogger.com (Unknown) — Fri, 25 Oct 2019 17:26:00 +0000

別ブログでコメントの表示方法などに不満を感じてアレンジしたため記載。
「コメントの場所」は「埋め込み」で、他の形式の場合機能するかは不明です。
また、jqueryを使用するので、導入がまだの方は以下のコードを<head> ～ </head>の中に記述してください。

jquery

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

やったことを簡単にまとめると、コメントはlist形式で出力されているため、flexの下から順に表示させるcolumn-reverseを用いてコメントを新しい順番で表示させる。
また、「コメントを投稿」の表示位置をコメント部分の一番上に移動させました。

Bloggerのコメントを新しい順番で表示させる

Bloggerの場合、コメント部分のソースコードは以下のようになっています。

<ol id="top-ra">
<li class="comment" id="xxxxx"></li>
<li class="comment" id="xxxxx"></li>
<li class="comment" id="xxxxx"></li>
</ol>

CSSの方でこのtop-raにflexのcolumn-reverseを付与すれば、下から順に表示されるのでコメントが新しい順番で表示されるようになります。

こんな感じ

#top-ra { display: -webkit-flex;
   display: flex;
-webkit-flex-direction: column-reverse !important;
   flex-direction: column-reverse !important;}

デフォルトの古い順番で表示させる場合はこちら

#top-ra { display: -webkit-flex;
   display: flex;
-webkit-flex-direction: column !important;
   flex-direction: column !important;}

Bloggerの「コメントを投稿」の表示位置を移動する

「コメントを投稿」部分はid="top-ce"が付与されているので、これをjqueryを用いて移動させます。
自分はコメントの始まるid="top-ra"の前に移動させたので、こういったコードを追加しました。

<script>
$(function() {
        $(&quot;#top-ce&quot;).insertBefore(&quot;#top-ra&quot;);
});
</script>

insertBeforeでid="top-ra"の前に移動させています。

以上です。
あまり使用頻度は高くないかもしれませんが、参考になる方がいれば嬉しいです。

【Blogger】ブログ検索・ラベル検索の結果に合わせてメッセージの表示を分岐させる方法

noreply@blogger.com (Unknown) — Fri, 25 Oct 2019 16:17:00 +0000

Bloggerでは検索をすると、自動でメッセージが表示されますが、それをアレンジして該当記事数が0だった場合と、1以上あった場合で、メッセージ分岐させてみたいと思います。

以下のコードを<data:navMessage/>に上書きすれば実現できます。

HTML

<b:if cond='data:numPosts == 0'>
    <b:if cond='data:blog.searchLabel'>
        <b expr:data-search="data:blog.searchLabel"/> の検索結果は0件です。 <!-- ラベル検索の表示結果が0件だった場合 -->
    <b:elseif cond='data:blog.searchQuery'/>
        <b expr:data-search="data:blog.searchQuery"/> の検索結果は0件です。 <!-- ブログ検索の表示結果が0件だった場合 -->
   
    </b:if>
<b:else/>
    <b:if cond='data:blog.searchLabel'>
        <b expr:data-search="data:blog.searchLabel"/> の検索結果です。 <!-- ラベル検索に該当記事があった場合 -->
    <b:elseif cond='data:blog.searchQuery'/>
        <b expr:data-search="data:blog.searchQuery"/> の検索結果です。 <!-- ブログ検索に該当記事があった場合 -->
    </b:if>
</b:if>

また、以下のフォーラムによると、<data:blog.searchLabel/>と<data:blog.searchQuery/>は安全ではないコードのため、以下のコードをCSSに書き加えた方が安全のようです。

b[data-search]::after {
    content: attr(data-search);
}

参考URL：https://stackoverflow.com/questions/21072954/blogspot-datanavmessage

簡単に説明をすると、<b:if cond='data:numPosts == 0'>が記事数が0だった場合のタグで、<b:else/>でそうでなかった場合の表示（<b:if cond='data:numPosts != 0'>）を分岐しています。

以上です。
「の検索結果は0件です。」などのメッセージはカスタマイズして使用してみてください。

【JavaScript/jQuery】シンプルな方法でページが完全に読み込まれるまで要素を表示しない代わりにローディング画像を表示してみる

noreply@blogger.com (Unknown) — Sat, 05 Oct 2019 01:14:00 +0000

デザインの乱れ等の理由によって、ページが完全に読み込まれるまで要素を非表示にしたい場合は様々な方法がありますが、今回はシンプルな方法でこれを実現してみたいと思います。

方法は至って簡単で、ページが完全に読み込まれるまで表示したくない要素にdisplay:noneを付与し、ローディング画像など最初から表示させたい要素だけ表示。
ページが完全に読み込まれたら、/jQueryのshowメソッドで非表示にしていた要素を表示させ、ローディング画像などをhideで非表示にするといった方法です。

HTML

<!--ページが完全に読み込まれるまで表示する要素-->
<div class="photo1"><img src ="画像URL"/></div>

<!--ページが完全に読み込まれるまで表示したくない要素-->
<div class="body_test">要素</div>

CSS

.photo1 img{display:block;margin:0 auto;/*画像を画面の中央に*/}
.body_test {display:block;/*ページが完全に読み込まれるまで表示したくない要素を非表示に*/}

このままだとphoto1の要素が表示され、body_testの要素が表示されないだけなので、ページが完全に読み込まれた後に動作するjQueryを書き加えます。

ページが完全に読み込まれた後の処理を明記したい場合は主に以下の2つの書き方があります。

window.onload = function () {
       /*処理*/
    };

$(window).on('load', function() {
       /*処理*/
});

今回は最初のメソッドを使用し、以下のようにshowとhideメソッドを加えます。

<script>
    window.onload = function () {
       $('.photo1').hide();
$('.body_test').show();
    };
</script>

これでページが完全に読み込まれると、photo1がhideで非表示となり、body_testがshowで表示されるようになりました。

要素が表示されるときにふわっと表示されようなアニメーション効果を与えたい場合はshowをfadeInに書き換え、()内に完全に表示させるまでのミリ秒単位を指定しましょう（スライド表示させた場合はslideDown）。

（例）

<script>
    window.onload = function () {
       $('.photo1').hide();
$('.body_test').fadeIn(1000);
    };
</script>

ページが読み込まれるまでに表示したい画像はお好みの画像にして下さい。
ローディング画面であれば、自由にカラーを設定できる以下のサイトを利用するのがオススメです。

以上です。
シンプルな方法なのでコピペで簡単に導入できると思います。

【JavaScript】簡単にクリックで要素の表示・非表示を切り替える方法hide、show、toggle

noreply@blogger.com (Unknown) — Tue, 20 Aug 2019 12:33:00 +0000

初心者でもコピペだけで導入できるJavaScript第二弾です。

第一弾はこちら
【JavaScript】初心者でも簡単！CSSよりも便利に使えるJavaScriptコード 2選！
https://bloggercustoman.blogspot.com/2019/08/cssjavascript-2.html

jQueryを導入していない方はheader要素内に以下のコードを記述しておいて下さい。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

hide、show、toggleを使い分けてクリックで要素の表示・非表示を切り替えよう

ベースとなるのは以下のコードです。

<script>
  
$('#ID名').click(function() {
       
/*ここに動作を記述*/

    })
    
</script>

ここから#ID名がクリックされた場合の動作を記述していくことになります。

hide = 要素を非表示にする
show = 要素を表示する
toggle = 要素の表示・非表示を交互に繰り返す

hide、show

hide

それでは、サンプルです。

HTML

<span id="bana_t1">バナナ</span>
<span id="bana_t2">リンゴ</span>

JavaScript

<script>
  
$('#bana_t1').click(function() {
$('#bana_t2').hide();
 })
    
</script>

ID属性bana_t1の「バナナ」をクリックすると、ID属性bana_t2の「リンゴ」が非表示になるコードです。

サンプル

バナナリンゴ

「バナナ」をクリックすると「リンゴ」が消えましたよね？
CSSのdisplay:none;と同様の効果があります。
このままでは消えたままで出てきません。
showで出してみましょう。

show

showで要素を表示させるには、その要素を隠しておく必要があるので、予め表示したい要素をdisplay:none;で隠しておきましょう。

HTML

<span id="bana_t3">バナナ</span>
<span id="bana_t4" style="display:none;">リンゴ</span>

JavaScript

<script>
  
$('#bana_t3').click(function() {
$('#bana_t4').show();
 })
    
</script>

hideがshowに変わっただけです。
ID属性bana_t3の「バナナ」をクリックすると、display:none;を指定したID属性bana_t4の「リンゴ」が表示されるコード。

サンプル

バナナ

どうでしょう。
今度は「バナナ」をクリックすると「リンゴ」が出てきましたよね。
しかし、今度は出てきたままで消えません。
そこで、1クリックごとに交互に表示・非表示を繰り返すtoggleを使用してみましょう。

toggle

toggleは、1クリック目が非表示であるのなら、2回目は以降は表示・非表示を繰り返します。
予めdisplay:none;で隠しておいたものであるなら、1クリック目が表示となるので、2回目は以降は非表示・表示を繰り返すことになります。

HTML

<span id="bana_t5">バナナ</span>
<span id="bana_t6">リンゴ</span>
<span id="bana_t7" style="display:none;">メロン</span>

JavaScript

<script>
  
$('#bana_t5').click(function() {
$('#bana_t6').toggle();
$('#bana_t7').toggle();
 })
    
</script>

サンプル

バナナリンゴ

IDしか記述していない「リンゴ」は最初から表示され、1クリック目で非表示となった一方で、display:none;を記述してある「メロン」は逆に1クリック目で表示されていますよね。
toggleは何度クリックしても交互に動作を繰り返すのが特徴です。

おまけ

全てに共通することですが、.hide();の()の中に要素を表示・非表示するまでのミリ秒数（1000 = 1秒）を指定することが可能で、ちょっとしたアニメーション効果を演出できます。

HTML

<div id="bana_t11" style="padding:20px;background-color:#ff8080;">バナナ</div>
<div id="bana_t12" style="padding:20px;background-color:#226b80;">リンゴ</div>

JavaScript

<script>
  
$('#bana_t11').click(function() {
$('#bana_t12').toggle(1000);
 })
    
</script>

サンプル

バナナ

リンゴ

toggleとしか記述していないため、デフォルトの横方向のアニメーションが適用されていますが、toggleには他にもメソッドが存在します。

slideToggle = 縦方向のアニメーション
fadeToggle = フェードイン・アウトのようなアニメーション

※toggleの箇所を上記のどちらかに書き換えるだけ。Tを大文字にすることが必須！

サンプル（slideToggle）

バナナ

リンゴ

サンプル（fadeToggle）

バナナ

リンゴ

toggleClassというメソッドもあり、新たにclass属性を追加、削除が可能です。

また、今回はIDを指定しましたが、IDではなく、class名を指定したいときは、#を.に書き換えてください。

例

<script>
  
$('.bana_t5').click(function() {
$('.bana_t6').toggle();
$('.bana_t7').toggle();
 })
    
</script>

第二弾は以上です。
簡単に応用できるJavaScriptなので、様々な形で使用してみてください。

【CSS】CSSだけで要素を横並びにし、横スクロールを実装してスマホに対応させる方法！

noreply@blogger.com (Unknown) — Tue, 20 Aug 2019 10:43:00 +0000

デスクトップよりもスマホからのアクセスが増す一方の現代。
スマホでの観覧を考えると、多くの情報を表示したくてもユーザビリティへの悪影響を考えて情報を減らすこともありますよね。
そんなときに便利なのがスクロール機能で、表示領域を制限させたうえで必要な情報をスクロールで表示されることができます。
縦スクロールは簡単ですし、スマホの場合は誤操作を招く場合があるので、今回は横スクロールを実装する方法をご紹介します。

キーコードはFlexbox

FlexboxはCSS3から使用できるようになったコードで、簡単に言うとdisplay: flex; と記述するだけで要素が横並びになります。

HTML

<div class="flex_1">
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
</div>

CSS

<style>
.flex_1 {display:flex;}
.f_1 {padding:30px;color:#fff;background-color:#1fab89;margin:5px;}
</style>

サンプル

テスト1

HTMLの方を変更して子要素をもう少し増やしてみましょう。

<div class="flex_1">
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
<div class="f_1">テスト1</div>
</div>

サンプル

テスト1

デザインが汚くなってしまいましたが、折り返さないで横並びが永遠と続いていますよね。
Flexboxは折り返さないことが初期値となっていて、これが同じ横並びの作用を持つfloatやdisplay: inline-block;と違う所。

flex-wrap:を記述すれば、折り返すこともできますが、横スクロールは折り返さないことで実現するため、簡単な紹介だけしておきます。

flex-wrap:

nowrap = 折り返さない（何も記述しなければnowrapが初期値）
wrap = 折り返す
wrap-reverse = 逆方向へ折り返す

Overflow-xで横スクロールを実装してみよう

Flexboxで中身は完成しました。
では、表示領域を制限して横スクロールを実装してみましょう。

これも簡単です。
表示領域からはみ出した場合の処理を指定するoverflowを記述するだけです。

visible = ボックスからはみ出て表示（初期値）
hidden = はみ出た部分は隠す
scroll = スクロールで表示
auto = 一般的にはスクロールが適用

もうわかりましたね。
overflow:scroll;で横スクロールの実装は完成です。
overflowには水平方向の表示方法を指定するoverflow-xと、垂直方向のoverflow-yがありますが、横スクロールなのでoverflow-xを使用しましょう。

CSS

<style>
.flex_1 {display:flex;overflow-x: scroll;width:80%;}
.f_1 {padding:30px;color:#fff;background-color:#1fab89;margin:5px;}
</style>

サンプル（HTMLは上記と同様）

テスト1

今度は子要素の方法をアレンジしてみましょう。
コンテンツ内に表示する一つの子要素のサイズをflexで指定してみましょう。

CSS

<style>
.flex_1 {display:flex;overflow-x: scroll;width:80%;}
.f_1 {padding:30px;color:#fff;background-color:#1fab89;margin:5px;flex:0 0 30%;-webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;}
</style>

・flex:0 0 30%;は左から順番にflex-grow、flex-shrink、flex-basisの3つの値を指定していることになります。
今回はwithのように横幅を指定するflex-basisの値を指定しています。

サンプル（HTMLは上記と同様）

テスト1

-webkit-overflow-scrolling: touch;とoverflow-scrolling: touch;はスマホでのスクロールを滑らかにするプロパティですので、合わせて記述しておきましょう。

以上です。
横スクロールはFlexboxの登場によって簡単に実装できるようになりました。

Flexboxには他にも様々なプロパティがあるので、機会があったら、またご紹介したいと思います。
では、長文にお付き合い下さって、ありがとうございました。

【CSS】CSSで文字を蛍光ペンのようなマーカーを付けて綺麗に装飾する方法！

noreply@blogger.com (Unknown) — Sat, 17 Aug 2019 13:35:00 +0000

CSSも年々進化し、画像等を使用しなくてもCSSだけで幅広く文字を装飾できるようになりました。
読みやすい文章にすることは、サイトにとって必須ですよね。
CSSで文字を装飾して、多くの読者を獲得しましょう！

蛍光ペンのようなマーカー

まずはサンプルをご確認下さい。
サンプル1サンプル1サンプル1

<span style="background: linear-gradient(transparent 20%, #64e291 20%);">サンプル1サンプル1サンプル1</span>

サンプル2サンプル2サンプル2

<span style="background: linear-gradient(transparent 40%, #e6e56c 40%);">サンプル2サンプル2サンプル2</span>

サンプル3サンプル3サンプル3

<span style="background: linear-gradient(transparent 70%, #b6ffea 70%);">サンプル3サンプル3サンプル3</span>

サンプル4サンプル4サンプル4

<span style="background: linear-gradient(transparent 100%, #ffb3b3 100%);">サンプル4サンプル4サンプル4</span>

transparentが背景を透過することで実現しているため、%の大きさが透過度となっています。
つまり、100%にすると透過度が100%となるため、サンプル4のようにマーカーが表示されなくなります。数字が大きいほど線が細くなるのが特徴です。
カラーコードの方の%は高さとなるため、transparentの方の%と同値にすることが基本となっています。

また、mark要素でも代用可能です。

<mark>MARKMARKMARK</mark>

MARKMARKMARK

【JavaScript】初心者でも簡単！CSSよりも便利に使えるJavaScriptコード 2選！

noreply@blogger.com (Unknown) — Sat, 17 Aug 2019 08:26:00 +0000

サイトのデザインはHTML、CSSをメインにする方が多いと思います。
JavaScriptは見慣れないコードが並ぶため、難しいように思えますが、CSSよりも便利に使えて、痒いところに手が届く”サイトに動き”を与えるものです。
もちろん、複雑な動作をさせるためには複雑なコードを書く必要がありますが、今回は初心者でもコピペだけで実装できる簡単なJavaScriptコードをご紹介します。

基本編その1

本文に行く前に、CSSとJavaScriptの違いを確認しておきましょう。

CSS

class、id属性を与えれば、一箇所書き換えるだけで、文字、背景、高さなど、様々なデザインを装飾できる。
JavaScriptよりも処理速度が早い。

JavaScript

スクロールしたときなど条件付きでサイトに動作を与えられる。
class、id属性を与えたHTML、リンクを丸ごと書き換えるなど、CSSよりも幅広く、動的に書き換えられる。
JavaScriptを切っている環境では動作しない。

基本編その2

jQuery

jQueryはJavaScriptのライブラリで、初心者でも簡単にコードを書いて、動的に動かせます。
実装の条件は、本体をダンロードする方法もありますが、CDNを経由する方法はより簡単で、HTMLのheader要素内に以下のコードを書くだけ。
今後、使用するので導入しておきましょう。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

※最新版はjQuery公式サイトでご確認ください。

JavaScriptの書き方

JavaScriptの記述場所はheader要素内、body要素内など特に指定されていませんが（個人的には</body>タグの直前を推薦します）、<script> ～ </script>で囲うことは必須です。

<script> 

ここに記述

</script>

また、本記事ではid属性を取得するgetElementById("id名")を使用しますが、class属性を取得したい場合はgetElementById("id名")の部分をgetElementsByClassName("クラス名")やquerySelector(".クラス名")に書き換えて実装してください。
※querySelectorの場合はクラス名の前に.を忘れずに！

（サンプル）

var banana = document.getElementById("id名");

var banana = document.getElementsByClassName("クラス名");

var banana = document.querySelector(".クラス名");

varでbananaという変数名を宣言していますが、今回はあくまでもコピペで実装できる初心者向けの記事なので、専門的な知識は他ブログにお任せして、「データに固有の名前を与えている」程度と思っておいて下さい。
簡単に言うと、要素・属性を取得して、そこに動きを与えるといったことが基本的な流れです。

おまたせしました。
以下は本文です！

1.簡単に要素の中身を入れ替えてみよう！

一度、書いたHTMLを書き換えたくなるときってありますよね。
JavaScriptのinnerHTMLで書き換えてみましょう。

<p id="banana_1">バナナのブログ</p>

上記のid属性banana_1の中身「バナナのブログ」をJavaScriptで書き換えるとこうなります。

<script>
var banana = document.getElementById("banana_1");
banana.innerHTML = "<span style='color:#ff502f;font-size:20px;'>リニューアル</span>";
</script>

サンプル

バナナのブログ

↓↓↓↓

バナナのブログ

innerHTMLは要素の中身を壊して新たな要素を加えます。
CSSと違うところは、HTMLがそのまま反映されることで、CSSよりも楽に要素の中身を入れ替えられますし、様々な応用が可能ですね。

他にも、innerText、textContentでもほぼ同様の動作が可能ですが、使用できないブラウザなどがあるのでinnerHTMLがオススメです。

2.CSSの疑似要素before、afterをJavaScriptで再現してみよう！

※jQueryを使います。
導入がまだの方は、上記の基本編その2を参照。

before、after、prepend、append

基本的なコードは以下の通り。

<script>
$('#指定したい要素のid名').●($('#追加したい要素を持つid名'));
</script>

HTMLを代入する場合の表記

<script>
$('#指定したい要素のid名').●('ここに追加したいHTML');
</script>

この●の部分にbefore、after、prepend、appendを記述すると、それぞれのメソッドで動作します。

before = 指定の要素の前に新要素を追加
after = 指定の要素の後に新要素を追加
prepend = 指定の要素の子要素の前に新要素を追加
append = 指定の要素の子要素の後に新要素を追加

サンプル

before

HTML

<div id="ban_1">バナナです</div>


<div id="ban_22">わたしは、</div>

JavaScript

<script>
$('#ban_1').before($('#ban_22'));
</script>

結果

バナナです

わたしは、

after

HTML

<div id="ban_a1">バナナですか？</div>


<div id="ban_a22">あなたは、</div>

JavaScript

<script>
$('#ban_a22').after($('#ban_a1'));
</script>

結果

バナナですか？

あなたは、

テキストを代入する形なら、CSSの疑似要素before、afterと同様に使えますね。
JavaScriptなら簡単に属性に別の属性を追加できるので、デザインの幅が広がるのではないでしょうか。
※prepend、appendのサンプルは省略します。

replaceWith、replaceAll、appendTo、prependTo、insertAfter、insertBefore

replaceWith、replaceAllには細かい違いはありますが、基本的にはinnerHTMLと同様に要素を置き換えるメソッドです。

appendTo = 指定の要素の子要素の最後に別の要素を移動
prependTo = 指定の要素の子要素の先頭に別の要素を移動
insertAfter = 指定の要素の最後に別の要素を移動
insertBefore = 指定の要素の最初に別の要素を移動

jQueryなので、コードの書き方は上記のbefore、after、prepend、appendと同様です。
色々試してみると、CSSでは思いつかなかったアイディアが浮かんでサイトを一歩上のレベルに引き上げることができると思います。
JavaScriptには他にもまだ便利なコードはありますが、ここまでで長い記事になってしまったので、またの機会にご紹介します。
長文にお付き合い下さって、ありがとうございました。

【Blogger】Bloggerにお名前.comで取得した独自ドメインを設定する方法

noreply@blogger.com (Unknown) — Sat, 13 May 2017 08:25:00 +0000

Bloggerでブログを開設すると「http://○○.blogspot.jp/」というURLが作成されますが、末尾の「.jp」がその国によって変わってしまいますし、URLはオリジナルの方がサイトの価値は高まりますよね。

そこで、独自ドメインを取得し、Bloggerに設定してみましょう。

今回は、お名前.comで取得した独自ドメインを設定する方法です。

お名前.com
http://www.onamae.com/

1. お名前.comで独自ドメインを取得してBloggerに独自ドメインを設定しよう

お名前,comで独自ドメインを取得したら、Bloggerの「設定」→「基本」を選択し、公開の欄から「ブログのサードパーティ URL を設定」選択して取得した独自ドメインを入力して保存を選択しましょう。

しかし、ここでは「このドメインに対する権限を確認できました」というエラーが出て保存できなかったと思います。

これにはお名前.comでDNSを設定する必要があります。
「Name] (名前)～の行とCHANEの設定方法を～の行の間にある2行が必要となってくるので覚えておきましょう。

2. お名前.comでDNSを設定しよう

お名前.comのドメインNaviにログインして、「ドメイン設定」のタブをクリックし、メニューの「ネームサーバーの設定」から「DNS関連機能の設定」を選択します。

続いて、任意のドメインを選択し、「次へ進む」を選択しましょう。

DNSの設定は全部で6つです。

Googleのヘルプを参考に、上記のような入力欄にTYPE A (Aレコード)を4つ、CHAMEを2つ追加します。

【TYPE A (Aレコード)の設定】
216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21
※「ホスト名」の欄は何も記入しなくて良し。

【CHAMEの設定】
CHAMEの設定はBloggerに独自ドメインを入力してエラーが出た際に表示された2行を入力します。
左側の部分を「ホスト名」に入力し、右側の部分を「VALUE」に入力して下さい。

以上で、独自ドメインの設定は完了です。
再び、Bloggerの「ブログのサードパーティ URL を設定」選択して取得した独自ドメインを入力すると、今度は保存でき、BloggerのURLが独自ドメインにリダイレクトされると思います。

【CSS】CSSのみで擬似クラス内の文頭、文末を自由に装飾できる擬似要素「before」、「after」

noreply@blogger.com (Unknown) — Thu, 08 Dec 2016 10:44:00 +0000

ブログなどを作成していると、「文頭にアイコンをつけたい！」、「文頭や文末に文字を付け加えたい！」と思うことはありますよね。

記事が少なければ修正は楽ですが、記事が増えてしまうと、1記事づつ修正していくのはかなりの重労働。

しかし、その変更したい箇所を擬似クラスでかこっていれば、CSSを1つ書くだけで簡単に付け加えることができるんです。

文頭は「before」、文末には「after」を使用します。

詳しい解説は以下にて！

擬似クラス内の文頭、文末に文章を追加してみよう

<div class="testab">テスト記事</div>

上記のHTMLにCSSで文頭、文末に文章を追加してみます。

■文頭は「before」

.testab:before{content: "テスト文頭" ;}

■文末には「after」

.testab:after{content: "テスト文末" ;}

サンプル

テスト記事

どうですか？文章が追加されてますよね？
marginなどの細かい装飾も可能です。

■サンプル1

.testab:before {content: "テスト文頭" ;
color:#3FC1C9;
font-size:20px;
margin-right: 10px ;
}

テスト記事

■サンプル2

.testab:after {content: "テスト文末" ;
font-size:30px;
 border: 1px solid #ccc ;
      margin-left: 10px ;
      padding: 10px ;
      background: #FFBC65 ;
}

テスト記事

注意点：文章として認識されないため、SEOには不向きです。

画像を追加してみよう

■サンプル1

.testab:after {
      content : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlpv08_ixSOJJkt1KAxEpxivXzgSUfo0fDlXfucLh9zKDlU38zBHjUa31Cin3EgJbSug_ELWAEPy7mHQLHH9osIN8wUoZnbFuCjCtNxhTV8R-kqEyHWOjbgYoZbkmLsucnGR4YjxtOwww/s1600/1481213541_smile.png) ;  /* 画像URL */
     margin-left:10px; /* テキストとの間隔 */
}

テスト記事

上記のようにただ画像を挿入するだけなら簡単にできます。
しかし、擬似要素を使用して画像を挿入する場合は、主にアイコンが目的の方が多いと思います。
アイコンの場合はまず、画像を最適のサイズのものを選び、位置を微調整する必要があります。

■サンプル2

.testab:before {
      content : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqCRiNnUG4n-jMZHADnN5MzzMOc4_N3_3Dy63-2BE28Fz0NRrDrPCQWg00EsC8mKS6w2g-yK5chV3cQ4SXeDwl5l5E0q-qwZYTIdfKadHaJBLa56yAJybf5CZXviH8inUCxYNBwM6YpTQ/s1600/1481214657_list.png) ; /* 画像URL */
position:relative;
top:3px;  /* 上下位置の微調整 */
margin-right : 5px ; /* テキストとの間隔 */

}

テスト記事

■その他のサンプル

アイコンサンプル

注意点：画像のサイズは変更できないので、デザインを崩さないために最適サイズの画像を選ぶのがポイント！

【CSS】画像いらず！Webフォントを使って「i」タグだけでアイコンを表示する方法

noreply@blogger.com (Unknown) — Tue, 08 Nov 2016 03:41:00 +0000

※2016/12/08 記事を修正しました。

アイコンに画像を使用する場合は、画像を探して、アップロードして、さらにタグを記述する必要がありますが、たった少しのタグだけで表示可能という便利な方法もあるんです。
タグは「i」なので、テキスト表示されるため、色やサイズなどのデザインの変更も簡単にできます。

今回はFont Awesomeを使用する方法をご紹介します。

1.Font Awesomeのファイルを読み込む

Webフォントは、Font Awesomeにあるフォントを使用するので、Font Awesomeのサーバーを読み込むように指示してあげましょう。

以下のlink要素を<head>～</head>内に記述して下さい。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

Font Awesome
http://fontawesome.io/

2.「i」タグを記述してWebフォントを表示する

使用できるWebフォントは以下のFont Awesomeにあるアイコンです。
http://fontawesome.io/icons/

使用したいアイコンが見つかったらアイコンをクリックしてみましょう。そこで表示された「i」タグを記述するだけでWebフォントは表示されます。

■例

<i class="fa fa-home" aria-hidden="true"></i> ホーム
<i class="fa fa-play" aria-hidden="true"></i> 再生アイコン

このタグを記述すると、こう表示される

↓

ホーム
再生アイコン

応用編

CSSでアイコンのサイズ・色をカスタマイズしてみましょう。通常のCSSと同様にclassを指定するか、styleを記述するだけなので簡単です。

<p style="font-size:55px;color:#71C9CE;"><i class="fa fa-home" aria-hidden="true"></i> ホーム</p>
<p style="font-size:25px;color:#9E579D;transform: rotate(8deg);"><i class="fa fa-play" aria-hidden="true"></i> 再生アイコン</p>

このタグを記述すると、こう表示される

↓

ホーム

再生アイコン

■transform = 要素の角度を変える

rotate() = 回転
rotateX() = Xを軸として時計回りに回転
rotateY() = yを軸として時計回りに回転
rotateZ() = zを軸として時計回りに回転
rotate3d() = (x軸,y軸,z軸,数値)

()内に数値を記述。

※Font Awesomeのzipをダウンロードし、自身のサーバーにアップロードすれば、WebフォントをFont Awesomeの外部サーバーから読み込む必要はなくなりますが、今回は説明を省略します。

【Blogger】特定の位置にページの先頭（トップ）へ戻るボタンを常駐表示する方法

noreply@blogger.com (Unknown) — Thu, 20 Aug 2015 08:51:00 +0000

当ブログでも右下に設置しているのですが、スクロールダウンしていくと、いつでもページの先頭へ戻ることが可能だと便利です。

以下のタグを、レイアウト→ガジェットを追加→「HTML/JavaScript」内か、

</body>

より前に追加するだけで可能です。


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
/***********************************************
* Scroll To Top Control script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
var scrolltotop={ 
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control 
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). 
    setting: {startline:200, scrollto: 0, scrollduration:500, fadeduration:[500, 100]},
    controlHTML: '<img src="画像URL" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" 
   controlattrs: {offsetx:10, offsety:2}, //offset of control relative to right/ bottom of window corner 
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){ 
        if (!this.cssfixedsupport) //if control is positioned using JavaScript 
            this.$control.css({opacity:0}) //hide control immediately after clicking it 
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) 
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists 
            dest=jQuery('#'+dest).offset().top 
        else 
            dest=0 
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration); 
    },
    keepfixed:function(){ 
        var $window=jQuery(window) 
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx 
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety 
        this.$control.css({left:controlx+'px', top:controly+'px'}) 
    },
    togglecontrol:function(){ 
        var scrolltop=jQuery(window).scrollTop() 
        if (!this.cssfixedsupport) 
            this.keepfixed() 
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false 
        if (this.state.shouldvisible && !this.state.isvisible){ 
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]) 
            this.state.isvisible=true 
        } 
        else if (this.state.shouldvisible==false && this.state.isvisible){ 
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]) 
            this.state.isvisible=false 
        } 
    }, 
    
    init:function(){ 
        jQuery(document).ready(function($){ 
            var mainobj=scrolltotop 
            var iebrws=document.all 
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode 
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') 
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>') 
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) 
               .attr({title:'このページの先頭へ戻る'}) 
                .click(function(){mainobj.scrollup(); return false}) 
                .appendTo('body') 
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text 
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text 
            mainobj.togglecontrol() 
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ 
                mainobj.scrollup() 
                return false 
            }) 
            $(window).bind('scroll resize', function(e){ 
                mainobj.togglecontrol() 
            }) 
        }) 
    } 
}
scrolltotop.init()
</script>

以下カスタマイズ用に値の説明
startline : スクロールしてからボタンが出現するまでの時間
scrollto : 戻る位置
scrollduration : 戻るときにスクロールするスピード
fadeduration : [フェードインする時間, フェードアウトする時間]
controlHTML : ボタンの画像URL
ページの先頭へ戻るボタンのアイコンダウンロードサイト
http://www.scrolltotop.com/

controlattrs : ボタンの位置{offsetx:右からの距離, offsety:下からの距離}
.attr({title:'このページの先頭へ戻る'}) : ボタンにカーソルが乗った場合に表示される文字

もっと簡単でいいという方は、同ページ内へのリンクタグ

<a href="#"></a>

を利用して下さい。

例

HTML

<div id="testss2">当ブログでも右下に設置しているのですが、スクロールダウンしていくと、いつでもページの先頭へ戻ることが可能だと便利です。</div>



本文



<a href="#testss2">テストトップへ戻る</a>

こうなる

テストトップへ戻る

参考サイト
http://www.jqueryrain.com/?QZvq0gPa

Google AdSenseのレスポンシブ広告ユニットのサイズや形状をCSSを用いて指定する方法

noreply@blogger.com (Unknown) — Wed, 19 Aug 2015 13:29:00 +0000

Google AdSenseのレスポンシブ広告ユニットは、表示されている端末（画面）の機能に応じて、自動でサイズを調整してくれるので便利ですが、ここはどうしても長方形で表示させたい、若しくはどうしても縦長で表示させたくない…といったこともあると思います。

レスポンシブ広告ユニットの場合、以下公式サイトにあるように、サイズを指定するなど修正を加えてもポリシーには反しません。

https://support.google.com/adsense/answer/3543893?vid=1-635755850896601588-7906886932018929671#adv

では、サイズや形状をを指定してみましょう。
主に以下2通りがあります。

1・形状を指定する

通常のレスポンシブ広告ユニットのコード

<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<!-- 広告ユニットの名前 -->
<ins class='adsbygoogle' 
data-ad-client='ca-pub-*********' 
data-ad-format='auto'
data-ad-slot='*****' 
style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

この中の「data-ad-format」で形状を指定できます。
auto : 自動
rectangle : 長方形
horizontal : 横長
vertical : 縦長

（例）横長を指定する場合

<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<!-- 広告ユニットの名前 -->
<ins class='adsbygoogle' 
data-ad-client='ca-pub-*********' 
data-ad-format='horizontal' 
data-ad-slot='*****' 
style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

2・細かくサイズを指定する

上記の場合、形状の指定だけで、細かいサイズの指定はできません。
そんなときはCSSを使用します。

まず、通常のレスポンシブ広告ユニットのコードに「class名」をつけましょう。
adsbygoogleの後に半角スペースを空け、任意のクラス名を記述（今回は例として「test01」を記述）。
また、サイズはスタイルシートで指定するので、青字にしたdata-ad-formatは削除しても構いません。

<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<!-- 広告ユニットの名前 -->
<ins class='adsbygoogle test01' 
data-ad-client='ca-pub-*********' 
data-ad-format='auto'
data-ad-slot='*****' 
style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

次にスタイルシートを書きます。

広告サイズの指定はGoogleが指定するサイズのみなので、以下のサイトからお好みのサイズを選びましょう。

https://support.google.com/adsense/answer/6002621?hl=ja

今回は例として300×250を指定しました。

CSS


<style type="text/css">
.test01 { width: 300px; height: 250px; }
</style>

最後に応用編として、メディアクエリを用いてデバイスごとにサイズを指定する方法もあります。

（例）デバイスの画面横幅が480px未満の場合は広告サイズ320×100を表示し、画面横幅がそれ以上の場合は広告サイズ336×280を表示する場合。

<style type="text/css">
.test01  { width: 320px; height: 100px; } /* デフォルトのサイズ */
@media (min-width:480px) { .test01 { width: 336px; height: 280px; } } /* 画面横幅480px以上の場合のサイズ */
</style>

メディアクエリについては以下の過去記事を参照。
http://bloggercustoman.blogspot.com/2015/08/blogger-2.html

スマホやタブレットなど、任意のデバイスでの表示を確認する方法

noreply@blogger.com (Unknown) — Mon, 17 Aug 2015 14:06:00 +0000

スマホやタブレット向けにサイトをカスタマイズしても身近にそれぞれの端末がなければどのように表示されるのか分からず不安になることがあると思います。

仮に端末を持っていてもスマホ・タブレットには多くの種類があって、サイトの表示確認は困難です。

これを解決するには主に以下2つの方法があります。

1・スクリーンサイズをエミュレートしてくれるサイトを利用する

メディア・クエリのmax-with、min-withを用いてサイトをカスタマイズしている場合に反映されるもので、パソコンでサイトを開き、手動でブラウザのサイズを変えることを自動化してくれるサイトのことです。

resizr.coにアクセスしましょう。

Load URL : 確認したサイトのURLを入力
Devices : 確認したいデバイスを選択
Landscape/Portrait : 横向き/縦向き
Show scrollbar : スクロールバーを表示

2・Chromeのデベロッパーツールを利用する

上記の場合、アフィリエイトでnendを利用している方はバナーが表示されなかったと思います。

そんな時はChromeのデベロッパーツールを利用しましょう。任意のデバイスでの表示を完全にエミュレートできます。

1.Google Chromeで確認したいサイトを開き、右クリックをして「要素を検証」を選択。

2.左上部のDeviceの欄で確認したいデバイスを選択

以上で任意のデバイスの表示をエミュレートしてくれますが、上手くいかない方はページをリロードしてみてください。

【Blogger】ブログをスマホ用に最適化する方法 / 表示速度の高速化を計る【その3】

noreply@blogger.com (Unknown) — Fri, 07 Aug 2015 13:47:00 +0000

・その1 / 【Blogger】ブログをスマホ用に最適化する方法 / 3つの最適化パターン
・その2 / 【Blogger】ブログをスマホ用に最適化する方法 / メディア・クエリの使い方

ブログをスマホ用に最適化シリーズ最後の記事です（予定）。

スマートフォンは、電話会社の回線で通信した場合、自宅のWi-Fiなどと比べると読み込み速度が遅いので、必要のないものは外すなど、徹底的に節約して表示速度の高速化を計る必要があります。

まず、Googleのウェブパフォーマンスツール「PageSpeed Insights」で自身のサイトを分析してみましょう。

速度の基準としては最低でも60 / 100を目指しましょう。

「JavaScriptを縮小する」、「画像を最適化する」など、主にGoogleから指示された問題点を改善すれば表示速度はアップしますので、１つずつ解決していきましょう。

1・スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する

個人的に最も効果を確認できたのはこれです。
主にソーシャルメディアボタンなど、JavaScriptをはずすと表示速度の改善を体感できると思います。
どうしてもはずせない場合は、JavaScriptを「非同期」し、JavaScriptを読み込む前でもページのスクロールを可能にしましょう。

<script src='～.js'/>の中に「async」を追加するだけですが、Bloggerの場合テンプレートに入力するとエラーになるので「async='async'」と記述しましょう。

（例）

<script async='async' src='http://bloggergadgets.googlecode.com/files/related_posts_min.js' type='text/javascript'/>

非同期化すると表示されなくなってしまうものもあるので、必ずテンプレートのバックアップを取り、非同期化後は自身で確認しましょう。

Facebookの場合は以下の通り。

<script >(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

これを非同期化するには「js.async = true;」を追加。

<script >(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;js.async = true;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

2・JavaScript/CSSを縮小する

これはJavaScript/CSSコードの無駄な改行やスペースをなくすことです。
手動だと手間がかかるので、以下のサービスを使って下さい。

JavaScriptを縮小してくれるサービス
■Javascriptcompressor
「Paste your code: 」に縮小したいJavaScriptコードを入力→「Compress」クリック→「Copy:」に出力されたコードをコピー

CSSを縮小してくれるサービス
■CSS Compressor
「CSS Compressor」に縮小したいCSSコードを入力→「Compression Level:」でレベルを選択→「Compress」クリック→「Compressed JavaScript:」に出力されたコードをコピー

■Compress HTML
「HTML Compression Tool」に縮小したいCSSコードを入力→「Compress HTML」クリック→「New Compressed HTML」に出力されたコードをコピー

3・画像を最適化する

画像の容量を小さくすることです。

これは以下のサイトを使えば簡単にできます。

・Tiny Png
「Drop your .png or .jpg files here!」をクリックして容量を小さくしたい画像を選択。その後画像の軽量化が自動で始まるので、終了したら「Download」をクリック。

以上で「ブログをスマホ用に最適化する方法」シリーズは終了です。

楽しみつつカスタマイズシてみてください。

【Blogger】ブログをスマホ用に最適化する方法 / メディア・クエリの使い方【その2】

noreply@blogger.com (Unknown) — Thu, 06 Aug 2015 14:47:00 +0000

・その1 / 【Blogger】ブログをスマホ用に最適化する方法 / 表示速度の高速化を計る
・その3 / 【Blogger】ブログをスマホ用に最適化する方法 / 表示速度の高速化を計る

第二回はその1の記事の「2・スマホ用に自動でサイズを調整してくれるコードの入ったレスポンシブ・テンプレートをダウンロードする。」について解説していきます。

まず、「スマホ用に自動でサイズを調整してくれるコードの入ったレスポンシブ・テンプレート」をダウンロードしましょう。

非公式テンプレートは以下のサイトなどからダウンロードできます。

・Blogger Templates Gallery
・Pro Templates Lab
・ThemeXpose
・Templateism: Professional Blogger Templates

ダウンロードしたファイルを解凍したら、Xmlファイルを「テンプレート→バックアップ復元→ファイルを選択」の順に選びアップロードしましょう。

最後に、モバイルの設定を「いいえ。携帯端末で PC テンプレートを表示する。」にすれば完成です。

スマホ用に自動でサイズを調整してくれるテンプレートであれば、スマートフォンに対応したデザインに自動で切り替わると思います。

しかし、まだ満足できない！といった方はカスタマイズしてみましょう。

Blogger用のモバイルタグ

<b:if cond='data:blog.isMobile'>

は効かないので、メディア・クエリを使用します。

メディア・クエリ一覧

・max-width：表示領域の横幅。指定したサイズより小さい場合に適用
・min-width：表示領域の横幅。指定したサイズより大きい場合に適用

（例）画面の表示領域の横幅が800px以下のときに

class="sample"

で囲った部分の背景を赤色にしたい場合

@media screen and (max-width :800px) {
    .sample {background-color:red;
} 
}

・max-device-width：デバイスサイズの横幅。指定したサイズより小さい場合に適用
・min-device-width：デバイスサイズの横幅。指定したサイズより大きい場合に適用

（例）デバイスサイズの横幅が800px～1280pxのときに

class="sample"

で囲った部分の背景を赤色にしたい場合

@media screen and (min-device-width :800px) and (max-device-width :1280px) {
    .sample {background-color:red;
} 
}

・device-pixel-ratio：デバイス・ピクセル比

・orientation：デバイスの向き
portrait = 縦向きのときに適用 / landscape = 横向きのときに適用 / どちらも記入しない場合は、デバイスの向きに関わらず適用）

（例）画面の表示領域が800px以下で、縦向きのときに

class="sample"

で囲った部分の背景を赤色にしたい場合

@media screen and (max-width :800px) and (orientation : portrait) {
    .sample {background-color:red;
} 
}

これを使って、スマホとPCで見た際にデザインを変えることができます。

max-width、min-widthにすれば、PCでブラウザの横幅を変えるだけで反映されるので、どのようなデザインになるか簡単に確認できます。

また、どちらかのデバイス一方に表示させたくない場合は

{display: none;}

を記述して下さい。

スマホで表示させたくない場合

キーワードは「display: none;」

（例）画面の表示領域の横幅が420px以下のときに

class="sample"

で囲った部分を表示させたくない場合


 <div class="sample">
テスト
テスト
テスト
テスト
</div>

これを画面の表示領域が420px以下のときに表示させたくない場合はメディア・クエリを追加し、以下のようにスタイルシートを書きます。

@media screen and (max-width :420px) {
    .sample {display: none;}
}

スマホの主なサイズについては以下のサイトの「Devices」をクリックして確認してみて下さい。

http://resizr.co/

以上でメディア・クエリの説明は終わりです。

何かデザインを変えるときは、レスポンシブにするために基本的には横幅の指定は%で行いましょう。

・その1 / 【Blogger】ブログをスマホ用に最適化する方法 / 表示速度の高速化を計る
・その3 / 【Blogger】ブログをスマホ用に最適化する方法 / 表示速度の高速化を計る

【Blogger】ブログをスマホ用に最適化する方法 / 3つの最適化パターン【その１】

noreply@blogger.com (Unknown) — Wed, 05 Aug 2015 02:35:00 +0000

自分の運営している別のウェブサイトは気づくとスマホからのアクセスがPCに匹敵するほどになり、アドセンスのクリックはスマホからが圧倒し、スマホへの最適化は不可欠となりました。

恐らく、こういう現象が起きているのは自分だけではないはず！
今後、スマートフォンやタブレットの普及が広がることはあっても、落ちることはないと思うので、サイトを運営するうえで、スマホへの最適化を図るのは必須になっていくでしょう。

そんな自分が悪戦苦闘しながらスマホへの最適化を図ったので、その情報を共有していきたいと思います。

スマホ用に最適化するには、大きく別けて以下の3つのパターンがあります。

1・テンプレート→モバイル→設定→「はい。携帯端末でモバイルテンプレートを表示する。」でBloggerデフォルトのスマホ用テンプレートを使用する。

難易度：1
メリット：たったワンクリックでスマホ用に最適化できる手軽さ。
デメリット：記事本文以外にアドセンスの貼り付けをできないなど、カスタマイズはほぼ不可能。PC用と大きくテンプレートのデザインが変わる可能性大。

2・スマホ用に自動でサイズを調整してくれるコードの入ったレスポンシブ・テンプレートをダウンロードする。

非公式のテンプレートサイトでテンプレートをダウンロードしている方も多いと思います。中には、スマホ用に自動でサイズを調整してくれるコードの入ったレスポンシブ・テンプレートもあります。

難易度：3（カスタマイズしない場合は1）
メリット：PC用とテンプレートが変わることなく、カスタマイズ自由。
デメリット：カスタマイズするにはHTML/CSSの知識が必要。

※こういったテンプレートをスマホで正しく表示させる場合はモバイルの設定を「いいえ。携帯端末で PC テンプレートを表示する。」にしましょう。

この設定にすると、Blogger用のモバイルタグ

<b:if cond='data:blog.isMobile'>

は効かないので、メディア・クエリを使用します。これについては後日。

・その2 / 【Blogger】ブログをスマホ用に最適化する方法 / メディア・クエリの使い方

3・モバイル設定を「はい。携帯端末でモバイルテンプレートを表示する。」→「カスタム」を選択し、自分で最適化を図る。

HTML/CSSの知識があれば、そこまで難しくないのですが、結構な知識を必要としますので、オススメはしません。
というか、ここまでテンプレートをいじれる方は、このブログを必要としていないと思うので、当ブログでは以下、簡単なBlogger用のモバイルタグだけの説明に留めておきます。

難易度：4
メリット：全て自分の思い描く通りに再現可能。
デメリット：豊富なHTML/CSSの知識が必要。

■Blogger用のモバイルタグ

以下は、モバイル設定を「はい。携帯端末でモバイルテンプレートを表示する。」→「カスタム」を選択した場合に適用されます。

モバイルとPCで表示させたい内容を変えるタグ

<b:if cond='data:blog.isMobile'>

/* モバイルからのアクセスで表示される内容 */

<b:else/>

  /* PCからのアクセスで表示される内容 */

</b:if>

モバイルからのアクセスでもガジェットを表示させたい場合
表示させたいガジェットの

<b:widget id='' locked='false' title='' type=''>

の中に

mobile='yes'

を記述

<b:widget id='' locked='false' title='' mobile='yes' type=''>

最後に、Bloggerに限ったタグではないですが、デバイスの横幅に自動であわせるタグです。

</head>

内に記述しましょう。

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0" />

以上で、その1は終わりです。
次回は、「2・スマホ用に自動でサイズを調整してくれるコードの入ったレスポンシブ・テンプレートをダウンロードする。」について詳しく解説していきたいと思います。

・その2 / 【Blogger】ブログをスマホ用に最適化する方法 / メディア・クエリの使い方
・その3 / 【Blogger】ブログをスマホ用に最適化する方法 / 表示速度の高速化を計る

【CSS】DIV要素全体にリンクを効かせる方法

noreply@blogger.com (Unknown) — Tue, 04 Aug 2015 08:00:00 +0000

DIV要素全体にリンクを効かせたい！！

これには主に以下2つのパターンがあると思いますので、今回はこの2つの方法を紹介していきます。

DIV要素内がリンクタグのみ
DIV要素内にテキストや画像などリンクタグ以外の要素も存在する場合

1・DIV要素内がリンクタグのみ

これは簡単です。

a要素をwidthでリンクの横幅を広げ、displayでブロック要素にするだけです。

HTML

<div class="sam13"><a href="">テスト</a></div>

CSS

.sam13 a { display:block;
width: 100%; /* 横幅 */
background-color:#B2DBBF;
border:2px solid #00171F;
padding:10px; /* a要素内の余白 */
}

 /* 以下マウスを載せたときのスタイル */
.sam13 a:hover { background-color: #247BA0;
 color:#222222; }

こうなります

テスト

・横幅50%

テスト

2・DIV要素内にテキストや画像などリンクタグ以外の要素も存在する場合

HTML

<div class="sam22"><a href="">テストリンク</a><br />テストテキスト<br />テストテキスト</div>

CSS


.sam22{
color:#222;
position: relative;
width:100%;
padding:5px;
}
.sam22 a{
display: block;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
border:2px solid #00171F;
}

 /* 以下マウスを載せたときのスタイル */
.sam22 a:hover{
 color: #222;
 text-decoration: none;
opacity: 0.25;  /* 要素を透明にするタグ */
   background-color: #E6EBE0;}

こうなります

テストリンク
テストテキスト
テストテキスト

【Blogger】ページナビゲーションを導入してみる

noreply@blogger.com (Unknown) — Mon, 03 Aug 2015 22:31:00 +0000

Bloggerにページナビゲーションを導入する方法はいくつかありますが、個人的には以下のサイトのページナビゲーションが一番使いやすかったのでご紹介します。

・Awesome Page Navigation for Blogger | SOFTGLAD

では、解説していきます。

1・テンプレートを開き、以下のコードを見つけましょう。（「Crtl + F」で検索）

<b:includable id='mobile-index-post' var='post'>

2・見つけたらそのコードの前に以下のコードを挿入。

赤色のフォントは全て変更可。

<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7, /* 記事表示数 */
numPages: 5, /* ページ番号の表示数 */
firstText: &quot;First&quot;, /* 最初にページ戻るの文字 */
lastText: &quot;Last&quot;, /* 最後のページへの文字 */
nextText: &quot;&#187;&quot;, /* 「次へ」の文字の色 */
prevText: &quot;&#171;&quot; /* 「戻る」の文字の色 */
}</script>
<script src='http://awesome-navigation.googlecode.com/files/onlinetrick.js' type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>

3・テンプレートを開き、以下のコードを見つける。

<b:include name='nextprev'/>

4・見つけたらそのコードを以下のコードに置き換える。

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include name='page-navi'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
</b:if>

5・ページナビゲーションのデザインを整えるためスタイルシートを書きます。以下のコードを挿入しましょう。

(

]]></b:skin>

の前に。カスタマイズは自由。)

#blog-pager, .pagenavi {
     clear: both;
     text-align: center;
     margin: 30px auto 10px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
     margin: 0 5px 0 0;
     padding: 2px 10px 3px;
     text-decoration: none;
     color: #fff;
     background: #e06666;
     -moz-border-radius: 2px;
     -khtml-border-radius: 2px;
     -webkit-border-radius: 2px;
     border-radius: 2px;
     -webkit-transition: all .3s ease-in;
     -moz-transition: all .3s ease-in;
     -o-transition: all .3s ease-in;
     transition: all .3s ease-in;
}
#blog-pager a:visited, .pagenavi a:visited {
     color: #fff;
}
#blog-pager a:hover, .pagenavi a:hover {
     color: #fff;
     text-decoration: none;
     background: #000;
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
     color: #fff;
     text-decoration: none;
     background: #000;
}
.pagenavi .pages, .pagenavi .current {
     font-weight: bold;
}
.pagenavi .pages {
     color: #fff;
     background: #e06666;
}

【Blogger】日付・投稿者名・ラベルなどを表示する様々なテンプレートタグを紹介

noreply@blogger.com (Unknown) — Mon, 03 Aug 2015 17:13:00 +0000

テンプレートをカスタマイズしていると、任意の場所に日付、投稿者名・ラベルなどを表示させたくなると思います。

今回はそれらのタグをまとめてみました。

日付

<data:post.dateHeader/>

投稿時間

<data:post.timestamp/>

投稿者名

<data:post.author/>

ラベル

<b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>

【Blogger】スマホでページを開いたときに動画のサイズを自動で最適化する方法

noreply@blogger.com (Unknown) — Thu, 30 Jul 2015 21:01:00 +0000

Youtubeの動画をブログに埋め込むときの標準サイズは560x315なので、スマホで観覧するとページからはみ出てしまう場合があると思います。

そんな時は以下のコードを挿入するだけで解決します。

<b:if cond='data:blog.isMobile'>
<style type='text/css'>
object,embed,iframe{height:auto;
width:auto;}
</style>
</b:if>

「いいえ。携帯端末で PC テンプレートを表示する。」を選択している人は以下のコードを使用して下さい。

]]></b:skin>

内に


@media only screen and (max-width: 565px) {
object,embed,iframe{max-width:100%;}

]

@media only screen and (max-width:)とは画面の表示領域の横幅がこの値より小さい場合にのみ適用することを指示するものです。

【CSS】プルダウンメニューのデザインを変えてみる

noreply@blogger.com (Unknown) — Thu, 30 Jul 2015 20:53:00 +0000

以下の過去記事のようにプルダウンメニューを使用する機会がある方もいると思います。

・【Blogger】ラベルのガジェットをプルダウン表示にする方法

今回はプルダウンメニューの様々なスタイルに挑戦していきたいと思います。

まず、プルダウンのコードにclass属性を与えてスタイルシートを書きましょう。

一般的なプルダウンメニューは以下のようになっているとおもいます。

<form>
<select onChange='location.href=value;'>
<option selected='selected' value=''></option>
<option value=''></option>
<option value=''></option>
<option value=''></option>
</select>
  </form>

<select>～</select>

をclass属性を与えたdivで囲いましょう。

<form>
<div class="sample011">
<select onChange='location.href=value;'>
<option selected='selected' value=''></option>
<option value=''></option>
<option value=''></option>
<option value=''></option>
</select>
</div>
  </form>

ちなみにラベルをプルダウン化した場合も同様です。（例）

<b:includable id='main'>
<b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
<div class="sample011">
<select onchange='location=this.options[this.selectedIndex].value;'>
   <option>/* ここにタイトル */</option>
   <b:loop values='data:labels' var='label'>
      <option expr:value='data:label.url'><data:label.name/>
         (<data:label.count/>)
      </option>
   </b:loop>
</select>
</div>
  <b:include name='quickedit'/>
</b:includable>

今回は以下のようなスタイルシートを書きました。


.sample011 {
 overflow: hidden;
 width:100%;
 box-sizing:border-box;
 border-radius: 3px;
 padding:5px 15px;
 border: 2px solid #39393A;
 vertical-align: middle;
 background: #114B5F;
}
.sample011 select {
color:#fff;
 background: #114B5F;
border: 0;
margin: 0;
 padding:0; width: 130%;
}

すると、以下のようなプルダウンメニューになります。

【Blogger】ガジェット『人気記事 (Popular Posts)』のスタイルをカスタマイズしてデザインを変えてみる

noreply@blogger.com (Unknown) — Wed, 29 Jul 2015 20:19:00 +0000

まずは『人気記事』のガジェットを検索しましょう（テンプレートを開き「Crtl + F」で検索）。

すると、以下のようなコードが出てくると思います。


 <b:widget id='PopularPosts2' locked='false' title='人気記事' type='PopularPosts'>
    <b:includable id='main'> 
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
      </div>
</b:includable>
  </b:widget>

赤いフォントにしたulタグにスタイルを追加するだけで簡単にカスタマイズできます。

今回はulタグにclassを設定（今回はsample01）してスタイルシートに書いてみます。

1・ulタグにスタイルを追加

 <b:widget id='PopularPosts2' locked='false' title='人気記事' type='PopularPosts'>
    <b:includable id='main'> 
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul class="sample01">
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
      </div>
</b:includable>
  </b:widget>

2・スタイルシートを書く


.sample01 ul{
    width:100%;
    margin-top:20px;
    font-size:12px;    
}

.sample01 li{
    list-style:none;
     width:100px;
  background-color:#D6D1B1;
 border: 1px solid #F0B67F;
  padding:5px;
}

このスタイルシートを

]]></b:skin>

の手前に挿入すると、以下のようなリストに変えることができました。

テスト
テスト
テスト
テスト

3・マーカーにしてみる

リストのマーカーに画像を使用したい場合はスタイルシートにlist-style-imageを書きます。


.sample01 li{
  list-style-image: url(' 画像URL ');  
}

サンプル

テスト
テスト
テスト
テスト

【Blogger】ラベルのガジェットをプルダウン表示にする方法

noreply@blogger.com (Unknown) — Wed, 29 Jul 2015 11:46:00 +0000

ラベルが増えてくるとラベルのガジェットがごちゃごちゃしてきて、すっきりさせたい！といった方にオススメのカスタマイズです。

コードを入れ替えるだけで簡単にできます。

まず、テンプレートを開き、プルダウン表示に変えたいガジェットを探して下さい。

恐らく、以下のようなコードが出てくると思います。


 <b:widget id='Label2' locked='false' title='' type='Label'>
    <b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'><data:label.count/></span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'><data:label.count/></span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
  </div>
</b:includable>
  </b:widget>

このコードの赤いフォントにしてある

 <b:includable id='main'>

から

</b:includable>

までを以下のコードに置き換えて下さい。

<b:includable id='main'>
<b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
<select onchange='location=this.options[this.selectedIndex].value;'>
   <option>/* ここにタイトル */</option>
   <b:loop values='data:labels' var='label'>
      <option expr:value='data:label.url'><data:label.name/>
         (<data:label.count/>)
      </option>
   </b:loop>
</select>

  <b:include name='quickedit'/>
</b:includable>

【Blogger】ソースコードを表示する方法

noreply@blogger.com (Unknown) — Tue, 28 Jul 2015 09:04:00 +0000

これは多くの方のブログで説明されているので、以下のブログなどを参考にしてみてください。

しかし、それでも中にはエラーが出るものもあり、表示されない！！！という方がいると思います。自分もそうでした。
それはWEB表示用に「<」や「&」を変換していないのが原因です。

以下のサイトで「表示させたいソースコード」を変換しましょう。

ホームページ　作成、運営、管理ガイド

そこで変換したコードを

<pre>～</pre>

の中に挿入すれば、ソースコードが表示されると思います（「div,pre追加」のチェックマークをはずして、変換するのボタンをクリックするのがオススメです）。

バナナのBloggerカスタマイズ日記

CSSだけで要素をふわっと表示させるようなアニメーションを実装する方法

1.@keyframes

2.アニメーション効果を与えたい要素に@keyframesを付与

【Blogger】コメント欄をカスタマイズ！コメントを新しい順番で表示させ、「コメントを投稿」の表示位置を移動してみた

Bloggerのコメントを新しい順番で表示させる

Bloggerの「コメントを投稿」の表示位置を移動する

【Blogger】ブログ検索・ラベル検索の結果に合わせてメッセージの表示を分岐させる方法

【JavaScript/jQuery】シンプルな方法でページが完全に読み込まれるまで要素を表示しない代わりにローディング画像を表示してみる

【JavaScript】簡単にクリックで要素の表示・非表示を切り替える方法hide、show、toggle

hide、show、toggleを使い分けてクリックで要素の表示・非表示を切り替えよう

hide、show

hide

show

toggle

おまけ

【CSS】CSSだけで要素を横並びにし、横スクロールを実装してスマホに対応させる方法！

キーコードはFlexbox

Overflow-xで横スクロールを実装してみよう

【CSS】CSSで文字を蛍光ペンのようなマーカーを付けて綺麗に装飾する方法！

蛍光ペンのようなマーカー

【JavaScript】初心者でも簡単！CSSよりも便利に使えるJavaScriptコード 2選！

基本編 その1

CSS

JavaScript

基本編 その2

jQuery

JavaScriptの書き方

1.簡単に要素の中身を入れ替えてみよう！

2.CSSの疑似要素before、afterをJavaScriptで再現してみよう！

before、after、prepend、append

サンプル

before

結果

after

結果

replaceWith、replaceAll、appendTo、prependTo、insertAfter、insertBefore

【Blogger】Bloggerにお名前.comで取得した独自ドメインを設定する方法

1. お名前.comで独自ドメインを取得してBloggerに独自ドメインを設定しよう

2. お名前.comでDNSを設定しよう

【CSS】CSSのみで擬似クラス内の文頭、文末を自由に装飾できる擬似要素「before」、「after」

擬似クラス内の文頭、文末に文章を追加してみよう

画像を追加してみよう

【CSS】画像いらず！Webフォントを使って「i」タグだけでアイコンを表示する方法

1.Font Awesomeのファイルを読み込む

2.「i」タグを記述してWebフォントを表示する

応用編

【Blogger】特定の位置にページの先頭（トップ）へ戻るボタンを常駐表示する方法

Google AdSenseのレスポンシブ広告ユニットのサイズや形状をCSSを用いて指定する方法

1・形状を指定する

2・細かくサイズを指定する

スマホやタブレットなど、任意のデバイスでの表示を確認する方法

1・スクリーンサイズをエミュレートしてくれるサイトを利用する

2・Chromeのデベロッパーツールを利用する

【Blogger】ブログをスマホ用に最適化する方法 / 表示速度の高速化を計る【その3】

1・スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する

2・JavaScript/CSSを縮小する

3・画像を最適化する

【Blogger】ブログをスマホ用に最適化する方法 / メディア・クエリの使い方【その2】

メディア・クエリ一覧

スマホで表示させたくない場合

キーワードは「display: none;」

【Blogger】ブログをスマホ用に最適化する方法 / 3つの最適化パターン【その１】

1・テンプレート→モバイル→設定→「はい。携帯端末でモバイル テンプレートを表示する。」でBloggerデフォルトのスマホ用テンプレートを使用する。

2・スマホ用に自動でサイズを調整してくれるコードの入ったレスポンシブ・テンプレートをダウンロードする。

3・モバイル設定を「はい。携帯端末でモバイル テンプレートを表示する。 」→「カスタム」を選択し、自分で最適化を図る。

■Blogger用のモバイルタグ

【CSS】DIV要素全体にリンクを効かせる方法

1・DIV要素内がリンクタグのみ

2・DIV要素内にテキストや画像などリンクタグ以外の要素も存在する場合

【Blogger】ページナビゲーションを導入してみる

1・テンプレートを開き、以下のコードを見つけましょう。（「Crtl + F」で検索）

2・見つけたらそのコードの前に以下のコードを挿入。

3・テンプレートを開き、以下のコードを見つける。

4・見つけたらそのコードを以下のコードに置き換える。

5・ページナビゲーションのデザインを整えるためスタイルシートを書きます。以下のコードを挿入しましょう。

【Blogger】日付・投稿者名・ラベルなどを表示する様々なテンプレートタグを紹介

【Blogger】スマホでページを開いたときに動画のサイズを自動で最適化する方法

【CSS】プルダウンメニューのデザインを変えてみる

【Blogger】ガジェット『人気記事 (Popular Posts)』のスタイルをカスタマイズしてデザインを変えてみる

基本編その1

基本編その2

1・テンプレート→モバイル→設定→「はい。携帯端末でモバイルテンプレートを表示する。」でBloggerデフォルトのスマホ用テンプレートを使用する。

3・モバイル設定を「はい。携帯端末でモバイルテンプレートを表示する。」→「カスタム」を選択し、自分で最適化を図る。