【Blogger】PC版とモバイル版のテンプレートを個別に編集したい

こんにちは！テンプレートいじりがマイブームのtknriaです！

もともと用意してくれているテンプレートがちょいちょい気になり出したので、絶賛微調整中です☆


以前紹介した「Blogger　記事タイトル直下にアドセンスを設置したい」という記事がありますが、

PC版で大きい広告を設置しちゃうと、iPhoneで閲覧したときにはみ出すぎちゃうんですよね。


そこで、PC版に設置する広告と、モバイル版で設置する広告のサイズを変えたい！という要望や、

そもそもモバイルに特化したレイアウトにしたい！という、僕のようなわがままさんがいると思います。


それ、この記事にお任せください。


自己責任で！

■ BloggerのテンプレートをPC版とモバイル版で分けて編集したい！

HTMLの中身をよく見ると、実は簡単です。

「テンプレート」メニューをクリックし、「モバイル」の表示例の下にある歯車マークをクリック

↓

「はい。携帯端末でモバイルテンプレートを表示する。」を選択し、

「モバイルテンプレートの選択」で「カスタム」を選択して、「保存」

↓

「テンプレート」メニュー画面に戻るので、「HTMLの編集」をクリック

↓

「ウィジェットへ移動」から「Blog1」を選択

↓

<b:includable id='○○' var='●●'>という行が並んでいる箇所を探します。

この中で、

<b:includable id='main' var='top'>
<b:includable id='mobile-main' var='top'>

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

というように、似ているけど「mobile」と書いてあったりなかったりする部分があります。


なんとなく感付いた方もいると思いますが、

<b:includable id='main' var='top'>→PC版main部分
<b:includable id='mobile-main' var='top'>→モバイル版main部分

<b:includable id='post' var='post'>→PC版記事部分
<b:includable id='mobile-post' var='post'>→モバイル版記事部分

ですね。


ここで個別に設定することで、PC版とモバイル版のテンプレートを個別に編集することができます。

■ 億劫なあとがき

もっと自在にカスタマイズできるイケメンになりたい！

【Blogger】記事タイトル直下にアドセンスを設置したい

こんにちは！ブログを目下研究中のtknriaです！

ブログの見栄えを良くするために、記事タイトルの真下にアドセンス広告を置いたらどうかと思ったんですけど、レイアウトを調整するだけではできないんですよね。

記事タイトルの真上とか、記事本文の下なら設置できるんですけど、どうしても記事タイトル直下が良い。

そんな自分のわがままを叶えるために、HTMLいじってたらできました！

■ Bloggerの記事タイトル直下にアドセンスを設置したい！

※HTMLを編集していくので、自己責任でお願いします！

※HTMLを編集していくので、自己責任でお願いします！

※HTMLを編集していくので、自己責任でお願いします！

※ちなみに僕自身もよくわかっておらず、試行錯誤の結果、よくわからないままできちゃいました。

※ですので、重ねて、自己責任でお願いします！

まずは、以前紹介した「Blogger　リンクユニットを配置したい」を参考に、設置したいアドセンスの広告コードをコピーしておきます。

「テンプレート」メニューを選択し、「HTMLの編集」をクリック

↓

「ウィジェットへ移動」から「Blog1」を選択

↓

<b:widget id='Blog1'> という記載がある行まで移動したことを確認

↓

<b:includable id='post' var='post'> という行を探し、左向きの▲をクリックしてコードを展開

↓

<div class='post-header'> もしくは、<div class='post-body entry-content'> という行まで移動

↓

上記タグの間に、最初にコピーしておいた広告コードをペースト

ここでの注意点は、

　「"」→&quot;

　「<」→&lt;

　「>」→&gt;

と変換しておく必要があることです！


ここまで完了すると、

こんな感じに！

■ 億劫なあとがき

表示されない場合は、コードを貼り付ける位置を微妙に変えてみたり、上記の変換が抜けてる部分がないかを見直してみてください！

【Blogger】シンプルテンプレートの幅を調整したい

こんにちは！「シンプルが一番！」がモットーのtknriaです！

もちろん、Bloggerで使っているテンプレートも「シンプル」。


しかし、シンプル故に、ちょっとした幅が気になっちゃたりします。

とは言え、変更の方法がちょっとわかりにくかったりしたので、備忘のために書き殴っちゃいます。

※シンプルテンプレートの中でも、ブログの右側にメニューがあるテンプレートを使用しているので、参考にならない場合もあると思います。

■ Bloggerのシンプルテンプレートの幅をちょちょいといじりたい！

まずは、比較的簡単にいじれるところから。

Bloggerの管理画面の右メニューにある「テンプレート」をクリックし、「カスタマイズ」をクリック

↓

「幅を調整」の項目をクリックし、図の赤枠の2つの数字を変更します。

ここで変更できるのは、ブログ全体の幅と、右メニューの幅だけです。

これだけでも十分なんですけど、強いて言うなら余白とかまで細かく設定したい！という気持ちが芽生えてきたので、もっとよく調べてみることに。

■ Bloggerのシンプルテンプレートをもっと細かく設定したい！

※HTMLを編集していくので、自己責任でお願いします！

※HTMLを編集していくので、自己責任でお願いします！

※HTMLを編集していくので、自己責任でお願いします！

※ちなみに僕自身もよくわかっておらず、試行錯誤の結果、よくわからないままできちゃいました。

※ですので、重ねて、自己責任でお願いします！

Bloggerの管理画面の右メニューにある「テンプレート」をクリックし、「HTMLの編集」をクリック

↓

「<b:skin>」を探して、右向きの▲をクリックして、展開します。

（左側の行番号は、設定によって異なるのでアテにしないでください）

なかなか見つからないときは「Ctrl＋F」で検索ウィンドウが表示されるので検索してみてください。

↓

開くとこんな感じです。

↓

スクロールダウンして「Posts」という項目を探します

↓

「Posts」という項目の中にある、「.post-header」とか「.post-footer」という項目を探します。

この前後に、以下の項目を追記します。

.post-outer{
  padding: 5px 20px 5px 15px;
  margin: 0 0 5px -30px;
}

これで、記事周りの余白などを設定しています。

「padding」とか「margin」とか、それぞれの数字が何を表しているかはググってみてください。

個人的に参考になるなと感じたサイトだけ挙げておきます。

　・ブログが作りたい！

　・HTMLクイックリファレンス　　margin　　padding


あとは試行錯誤あるのみ！

■ 億劫なあとがき

ホント、わからないことを調べて、試行錯誤して、調べて、試行錯誤して・・・っていうプロセスって楽しいですね！

スタバの無線LANを使いたい

こんにちは！スタバを愛して止まないtknriaです！

世界規模でどこにでもあるスターバックス。


コーヒーが美味しいだけでなく、サービスまで最上級！

スタバの店員さんには良い人が圧倒的に多い！

空間づくりが素晴らしい！

作業スペースとしてではなく、ミーティングにももってこい！


私同様、そんな魅力を感じながら足繁く通っている方も多いのではないでしょうか。


そんなスタバは無線LANを導入している店舗も多く、さらに付加価値を高めています。


でも初めてだから使い方がわからなくてドキドキしちゃう・・・！

そんな私のようなあなた。

ここにうっかりメモしちゃうので、こっそり見ちゃってください。

■ スタバの無線LAN「at_STARBUCKS_Wi2」を使いたい！

手続きはめっちゃ簡単なんでパパッとやっちゃいましょう！

※web上での手続きが必要なので、スタバに入る前に別回線で登録してください。

公式ページにアクセスし、「ご利用方法」をクリック

↓

ページを少しスクロールダウンして「ご登録」をクリック

↓

メールアドレスとパスワードを入力し、「利用規約に同意する。」にチェックを入れ、「確認」をクリック

↓

上記で登録したメールアドレス宛にメールが届くので、本文に記載されているURLをクリック

↓

「ログインしました」という表示がされたら登録完了！無線LANが使えます。

↓

接続を確認してみると、「at_STARBUCKS_Wi2」に接続していることがわかります。

■ 億劫なセキュリティ対策

あのスタバとは言え、公衆無線LANを利用するわけなので、セキュリティ対策は気になりますよね。

ということで、公式サイトの「セキュリティ」の項目をチェック！

どうやら、「無線LANは暗号化しておりません」とのこと。

快適すぎて忘れてしまいがちですが、何かしら対策しましょう。


個人的には、Google Chromeが自動で「https」で接続してくれるので助かっています。

　※「https」でアクセスしている場合は暗号化されます

■ 億劫なあとがき

セキュリティなど、まだまだ気を付けないといけないポイントは多いですけど、ホント便利な世の中になってきました。

特に、テザリングに頼り切りな今の私には命綱とも言えるサービスです！

ありがとうスタバ！ありがとう水樹奈々！！

【Blogger】リンクユニットを配置したい

こんにちは！tknriaです！

見ておわかりの通り、「億劫な細道」はAdsenseの広告を設置しています。

ただ、Bloggerでリンクユニットを設置しようとすると、エラーになっちゃうんですよね。。


その設置方法を忘れないうちにメモっちゃいます！

■ Bloggerにリンクユニットを設置したい！

まずはBloggerの管理画面から！

左側メニューの「収益」→「AdSense」→Google AdSenseの「ダッシュボードを表示」をクリック

↓

AdSenseの管理画面の上メニューから「広告の設定」→「新しい広告ユニット」をクリック

↓

名前を付け、広告サイズのプルダウンメニューから「リンクユニット」とそのサイズを選択

↓

「保存してコードを取得」をクリックすると、「広告を作成しました」と表示されます。

広告コードをコピーして閉じます。

↓

Bloggerの管理画面に戻り、レイアウト→ガジェットを追加をクリック

「HTML/JavaScript」をクリック

↓

コンテンツに、先ほどコピーしたコードを貼り付ければOK！

■ 億劫なあとがき

これでエラーが出ちゃうリンクユニットも無事設置！

早く修正入ると嬉しいですね。

【HTML】<>を表示したい

こんにちは！もっとHTMLを使いこなしたいと切望しているtknriaです！

Bloggerでブログを書いている以上、基本的にはHTMLの知識は要らないのですが、たまに使うんですよね。


とは言え、全然覚えてないので、ネットのお世話になりまくりなんですけれども。


よく調べるのが「<」「>」を表示したいとき！

記号って


< → &lt;

> → &gt;


というように、コードで記述しないといけないんですけど、これ全然覚えられなかったです。

今でこそユーザー辞書に登録しちゃったんで問題ないですけど、ちょー面倒でした。


そう、あの日までは・・・

■ <>を覚えたい！

これ、数学記号なんですけど、数学記号としての読み方がわかれば覚えやすいです！

不等号ってやつですよね。


「<」は「小なり」で、「>」は「大なり」って読みます。

これを英語にすると、「less than」「greater than」


で、上記したように、


< → &lt;

> → &gt;

です。


もう繋がりました？


そう！実はこんなに覚えやすかったんです！

■ 億劫なあとがき

ホントに知らなかったんで、目から鱗！

この感情を誰かとシェアしたくて書いちゃいました。

【Blogger】Google Analyticsでアクセス解析したい

こんにちは！アクセス解析で興奮しちゃうtknriaです！


ブログを立ち上げてみたけど、どんな人が、どんな端末から、どういう経路で、自分のブログに来てくれているかが知りたい！

もしくは、そもそもどれくらいの人が来てくれていて、よく来てくれている人ってどれくらいいるのかが知りたい！

それを教えてくれるのが、アクセス解析ツールと呼ばれるもので、ホントにいろんなものがあります。


個人的には、Googleさんが提供しているサービスに、長期的に見て、勝るものはないんじゃないと確信しているので、

迷わず「Google Analytics」を利用させていただいてます。


でも実は、アカウント作ってから、解析を始めるまでに時間がかかったのです。。

■ BloggerにGoogle Analyticsを導入しよう！

完全に僕個人のミスなんですけど、解析に必要な設定をしていなかったんですよね。

というわけで、備忘のために書いちゃいます。


１．Google Analyticsにログインして、「アナリティクス設定」をクリック

↓

２．「アカウント」列と「プロパティ」列のプルダウンメニューから、目的に合うものを選択

↓

３．「プロパティ」列の「トラッキング情報」の中から「トラッキングコード」を選択

↓

４．表示されたトラッキングコード（<script>～</script>）をコピー

↓

５．トラッキングしたい全てのwebページにペースト

　（僕は、「テンプレート」→「HTMLの編集」で、</head>の直前にペーストしたら、うまく解析できました）


実はたったこれだけ！

意外とあっさりできちゃうので、やってみちゃってください！

■ 億劫なあとがき

いろんな数字が変動しているのを見て、毎日にやにやしています！

もっと良い記事を書いていこう！っていうモチベーションになりますよね！

Blogger 関連記事をサクッと表示したい

こんにちは！ブログは関連記事までしっかり読みまくるtknriaです！


関連記事へのリンクがしっかり張ってあるブログって、ついつい長居しちゃいますよね。

自分のブログでも関連記事を表示したいけど、イチイチ手作業でリンクを作成するのは大変だし。。


そんなときには！


Smarter Related Posts Widget for Google Blogger - v2.0

がオススメです。

■ Smarter Related Posts Widget for Google Bloggerを設置してみよう！

まさに、Bloggerのための関連記事表示ウィジェット。

上記リンクは英語なのでビビっちゃうけど、お兄さんが優しく教えちゃうよ！


Step1:記事中の「easy setup wizard」というリンクにアクセス


Step2:左側の「Options」で各種設定
　　　　
　　　　・Blog URL　・・・表示したいブログのトップページのURLを指定
　　　　
　　　　・Mode　・・・関連記事の表示（Related Posts）か、最新記事の表示（Recent Posts）かを指定

　　　　・Max Posts　・・・表示する最大記事数

　　　　・Max Tags　・・・「関連」するかを判断するのに使用する最大ラベル数

　　　　・Posts Per Tag　・・・1つのラベルあたりに表示する記事数

　　　　・Show Titles?　・・・記事タイトルを表示するか。表示する=yes、表示しない=no

　　　　・Show Thumbs?　・・・サムネイルを表示するか。表示する=yes、表示しない=no

　　　　・Default Thumb URL　・・・サムネイルで使用する画像ファイルのURLを指定

　　　　・Thumb Size　・・・表示するサムネイルの大きさを指定

　　　　・Use CSS Style?　・・・CSSを使用するか

　　　　・Related Title　・・・関連記事を表示する場合のウィジェットのタイトル

　　　　・Recent Title　・・・最新記事を表示する場合のウィジェットのタイトル

　　　　・Post Pages Only?　・・・記事個別ページのみで関連記事を表示するか。
　　　　　　　　　　　　　　　　　　　　トップページでも表示する=no、個別ページのみ=yes

　　　　よくわからん項目はdefaultのままです。


Step3:左側の「Options」ウィンドウ下の「Update Demo & Code」をクリック


Step4:下部の「Code」ウィンドウに表示されたコードをコピー


Step5:Bloggerにログインし、「レイアウト」で、ガジェット「HTML/Javascript」を追加


Step6:Step4でコピーしたコードを貼り付けて保存


これでブログを表示してみてください。まじ感動！感激！

■ 億劫なあとがき

ラベルによっては、記事数が少なくて設定した最大記事数だけ表示されないので、どのラベルの記事数を増やすと良いかの目安になるんじゃないでしょうか！

Blogger 記事のURLを任意のURLに変更したい

こんにちは！Blogger大好きtknriaです！

BloggerはHTMLやCSSの知識がなくてもすぐブログを作成できて、更新も簡単なのでちょー愛用してます！


ただ！

ただ一つ！気になることがありまして。。


それは、記事のURLが自動的に割り当てられること。


ラベル機能があるからカテゴリ分けしやすいけど、どうせならURLからもわかりやすくしたい！

自己満足だって思われても構わない！


そんな僕に朗報が訪れました。

■ パーマリンク機能を使おう！

パーマリンク機能は、URLを任意に指定できる機能です。

まさに、求めていた機能。


使い方は至って簡単。


Bloggerの投稿編集画面を開いて、右メニューに注目！

「パーマリンク」をクリックすると、投稿が「下書き」であれば、

　・自動パーマリンク
　・カスタムパーマリンク

と表示されています。


「自動パーマリンク」は、従来通り、ある一定のルールに従って自動でURLが割り当てられます。

「カスタムパーマリンク」は、名前の通りカスタマイズできます！


ここで任意に指定して、「公開」すればOK！簡単！

■ 既定のURLを変更したい！

「公開」してしまっている場合は、既にURLが割り当てられています。

しかも、「公開」の状態で、投稿編集画面を立ち上げて、「パーマリンク」をクリックしても、「カスタムパーマリンク」が表示されません。


しかし！

一度、「下書きに戻す」で「下書き」の状態にすることで、カスタマイズできます！

このとき、URLが変わってしまうので、他の記事などでリンクを張っている場合は注意が必要です。

■ 億劫なあとがき

管理しやすいだけでなく、閲覧者が覚えてしまうくらいのわかりやすいURLを目指します！

HTML / Javascript 数式を表示したい

こんにちは！微分方程式を愛してるtknriaです！

暇潰しに微分方程式を解いて、眠気覚ましにも微分方程式を解くくらい好き！

この溢れんばかりの愛情と情熱を、webサイトやブログで表現したい！


ということで調べてみると、どうも、MathJaxなるものがあるとのこと。

これを使うとTeXっぽく数式を埋め込めるらしい。

■　数式をweb上で表現しよう！

MathJaxなるものを使うためには、下記リンクにあるコードを<head>部に記述する必要があります。

http://irrep.blogspot.jp/2011/07/mathjax-in-blogger-ii.html

<html>
<head>
    ここが<head>部
</head>
<body>
    ここが<body>部
</body>
</html>

あとは、本文中に埋め込みたい数式を

\$e^{i\pi}=-1\$

という感じで記述すると
$e^{i\pi}=-1$
という感じで表示されます。


例えば、熱伝導方程式を解く過程で出てくる2次の常微分方程式は、
\[2\frac{d^2f(x)}{dx^2}+x\frac{df(x)}{dx}+f(x)=0\]
という具合に表示されます。なかなか良い感じでしょ？

■　億劫なあとがき

数学好きにはたまりませんよね！

充実した微分方程式ライフを☆