徒然なるままにブログ…。: テンプレート

ラベル テンプレート の投稿を表示しています。すべての投稿を表示

2013年6月5日水曜日

ブログ移行してからLinkWithinに画像表示されない。

この数日の間に、
BloggerブログのURLを変更する為、

テンプレートの復元、記事のインポートやリンク先修正などをしてきました。

その中でも様々なwebサービス（LinkWithinなど）やソーシャルプラグインなどの、
修正もやっと終了しました。

2013年5月31日金曜日

Bloggerウィジェット（Widget）のPageのフォント指定CSS

ブログ自体のフォント指定CSSは、
簡単にFont-familyで指定可能でした。

ですが、
私のブログでは記事タイトルの上部に、
pageウィジェット？ガジェット？を追加してあります。
（というか元々追加されていました。）

そこのフォントだけは、
Font-familyCSS指定では変わりませんでした。

数日間四苦八苦(＠Д＠;　アセアセ・・・。

やっとの思いでCSSにて設定ができました。

2013年5月26日日曜日

Bloggerブログこれまで追加してきたCSSが消えていた！？

これまでBloggerブログにおいては様子を見ながら、
（かっこよく言えば様子を見ながらですが、
実際はやり方の詳細がわからなかっただけ…。）
ソーシャルメディアのプラグインはzenbackでの表示に頼っていました。

そこで、

アプリIDを取得してフェイスブックのソーシャルプラグインを導入しました。

プラグインの下部がちょっと空き過ぎかなぁ…。
という感じだったので、

CSSでmargin調整しようと思ったら…。

2013年5月19日日曜日

フォントについて考えてみる…。

WindowsVistaが発売されてからWindows系OSにはフォントとして、
メイリオというフォントが追加されました。

１．設定でよく使われている和文フォントは？

よく使われているかどうか分かりませんが、
OSのデフォルト和文フォントは次のようになっているようです。

Windows 7／Windows Vista：メイリオ
WindowsXP：ＭＳＰゴシック
Mac：ヒラギノ角ゴ Pro W3

2013年5月1日水曜日

IEでの表示が崩れないようにするmetaタグ

BloggerブログにてIE表示でもレイアウトがくずれない様にする方法

Bloggerブログにて、
zenbackのファビコンと記事がIE表示だとズレてしまうのをずっと気になっていました。

なんとかならないものかと調べてみました。
ありました！！

修正する前の表示状態。

修正する前表示状態

上記の様にzenbackのファビコンと記事がずれている状態です。

2013年4月29日月曜日

zenbackコードを記事下に綺麗に貼る方法

zenbackコードを綺麗に記事直下に貼る方法

zenbackコードを記事直下に表示した画面

以前から、
zenbackは使用させて頂いていましたが、
サイドバーにWidgetとして設置していました。

ですが、
記事直下に表示さすべく挑戦録を残しておきます。

＊zenbackは記事の個別ページを解析して、
　　　　　　　　　　関連記事や関連リンクを表示します。

サイドバーにzenbackを貼るということは、
トップページに表示されるという事でもあります。

ということは、
どの記事を開いても常にサイドバーに表示されている状態になります。
この場合、
記事の解析がしにくく精度のあまり高くない関連記事や関連リンクが、
表示されることがあるようです。
→関連記事の精度を上げる「Zenbackタグ」

関連記事が最大の要なので、『能ある鷹は爪隠す』状態で勿体ない状態…。

2013年4月28日日曜日

テンプレートデザインについて考える…。

テンプレートをカスタマイズしていくに当たって、色々なことを考える。

ヘッド直下に複眼RSSというサービスにより、
記事のサムネイル表示をしてみたり、

ヘッド直下に複眼RSS表示

2013年4月16日火曜日

Powered by Bloggerを再表示させる方法

以前カスタマイズで、

Powered by Bloggerを削除する方法

を紹介しました。
削除すると元に戻せない。

というのが、
通説でしたが元に戻せます。

2013年4月14日日曜日

諦めなかった!! IEでもBlinkerとサイドバーzenbackが表示（もちろんwebkitでもOK(^o-)）

つい数時間前、

→諦めた!! IEでBlinkerが表示されなくなる&zenbak表示も…。（webkitだと大丈夫なのに）

と記載したが、

やっとできた！！！
(..)(^^)(^。^)(*^o^)(^Ｏ^)ウレシーーー!!

以前の関連記事表示方法を
→関連記事を表示させる方法（Linkwithnなど使わずに）
なんとか絶対に生かしIEでも正常表示されるようにと
必死こいて頑張った甲斐あった！！

「Smarter Related Posts Widget for Google Blogger - v2.0」 &「Linkwithn」
を共に、
このテンプレートにおいて、（間違いなく他のテンプレートでもOK）
記事直下にブラウザによる異表示なしに表示させることに成功！！

忘れないうちに
備忘録！！

記事直下に関連記事表示とSmart&Linkwithn
コード挿入場所

2013年4月13日土曜日

BloggerのHTMLエディタが改善された…と言われても。 | Bloggerぶろっがー（仮）

私も、前回２回の記事にしました。
１回目
→BloggerブログのテンプレートHTMLの編集画面が変わった！

２回目
→ブロガーバズ：BloggerのテンプレートHTMLエディタの改善

との事ですが、

なんだか以前のHTML編集画面がやっと慣れてきた時に、
いきなりの変更で四苦八苦(・・;)

諦めた!! IEでBlinkerが表示されなくなる&zenbak表示も…。（webkitだと大丈夫なのに）

以前、個別ページ下部の
『次の投稿』と『前の投稿』表示を、
記事タイトルを表示させるようにした。

前後記事タイトル表示されている状態

→個別ページの前後記事表示をタイトル名に変更する方法

が、
関連記事等をさらに表示させたく
以下Smarter Related Posts Widget for Google Blogger - v2.0 コードとLinkwithinコードを
現在の関連記事表示されるコードの
</b:includable>上部に挿入するが、
IEにて、以下2点の課題が生じた。

１）個別ページにて前後記事がタイトル表示でなく、『次の投稿』『前の投稿』表示になる。
２）サイドバーのzenbackがなかなか表示されない。

2013年4月11日木曜日

ブロガーバズ：BloggerのテンプレートHTMLエディタの改善

昨日、私自身ビックリしたので以下記事にしましたが、
→BloggerブログのテンプレートHTMLの編集画面が変わった！！

ブロガーバズブログに23時間前に
記載されていました。

→ブロガーバズ：BloggerのテンプレートHTMLエディタの改善

2013年4月10日水曜日

BloggerブログのテンプレートHTMLの編集画面が変わった！！

本日の朝方までは、
以前のようなHTML編集画面でした。
（本日以降にBloggerブログを使用される方は想像しにくいですが_(._.)_）

『ウィジェットの表示』があって、

その右側にチェックボックス。

『プレビュー』すると、

新しいウィンドウにて表示されていた。

それが、
夕方には…。

変わっていた。
w(・o・)w

こんな感じ

個別ページの前後記事表示をタイトル名に変更する方法

Bloggerブログでの、
個別記事下部に表示される前後の投稿記事表示は、
「次の投稿」、「前の投稿」と表示され、
クリックしないと前後の記事タイトルすら分かりません。

そこで、
上記の「次の記事」「前の記事」と表示されている部分を、
記事タイトルが表示されていれば、
ユーザビリティの向上とその記事だけ読んでおしまい。
という直帰率改善に貢献できるのではと考えられます。

個別記事下部に前後記事のタイトル表示

こんな感じだとわかりやすいですよね。

そこで、
zerippeさんの作成したjQueryプラグイン
『bLinker』を使用すると上記リンク先の
記事タイトルを表示できます。

Syntax Highlighter2.1.364（最新版）を簡単に導入する方法

これまでBloggerブログにて、

Syntax Highlighterの導入に苦労されている方は、

多かったのではないでしょうか？

beautifulofcodeの導入も同様に苦労されている方は、

多かったと思います。

私自身も、その一人でした。

ですが、
上記してあるように
Syntaxhighlight簡単に導入する方法を以下に記載します。

これまで、
使用したかったのにできなかった方、
これから導入しようと考えている方など、
参考にして頂けると嬉しいです。

＊利用方法に関してですが、
　これまで、Bloggerブログなどに多く記載されていた
　利用方法とは若干異なりますので注意して下さい。

2013年4月9日火曜日

ブログのページタイトルを【記事タイトル/ブログタイトル】にする方法

以前にも紹介しましたが、
若干違うコードでも同じ様に表示されます。

以前の記事
→『記事タイトル』が検索メインになる方法　→【記事タイトルブログ名】

なので、
今日は違うバージョンです。

SEOの基本と言えば基本ですが、
ほとんどのブログサービスのデフォルトのテンプレートでは、
検索にかかる順番として、
『ブログタイトル|記事タイトル』
となっています。

このままでは、その時一番伝えたい
『記事タイトル』が2番目に重要と判断される為、
GoogleやYahoo!などのポータルサイトで
検索される時にマイナスとなってしまいます。

せっかくの記事を若干無駄にしてしまう事？になってしまいます。

そこで、少しテンプレートのHTMLをいじるだけで
『記事タイトル』をメインに持ってくることができます。

以下方法です。

2013年4月8日月曜日

レイアウト画面での、ガジェット追加を行えるようにする

レイアウト画面でのガジェット追加を行えるようにする説明の前に、
ヘッダー部分を例にとって説明します。

上の画像で確認ですが、

①の部分が『ヘッダー部分』
②が『ページ部分』です。

Bloggerのヘッダーを動かせるようにする方法

最初に！！
※HTMLの編集をする前に、テンプレートの保存を忘れずに！

本来は、
header部分は動かせない様に固定されていますが、
これをHTMLの編集から解除します。

では方法です。

jQueryでスクロールすれば現れるコンテンツ

サイドスペースを有効活用する為に、
スクロール時に現れるウィジェットコンテンツを表示する方法。

Bloggerでは、
公開ファイルを読み込むことによってjQueryを使えるようになります。

既に、
BLOGGERでブログトップまで移動できるアイコンを表示する方法においても
jQueryは導入済みですが、
（このページ（記事）をはじめて見られた方もいらっしゃると思うので記載します。）
　

まずはHTML編集で、
以下を
</head>の上に挿入。