seesaa カスタマイズ: 豆袋

2015年07月11日

seesaa blog h2タグとH3タグの最適化

こういう記事も見つけた。
ちょっと難しいが今度じっくり読むことにしよう。
Seesaaブログの見出しタグ(h1,h2)をカスタマイズ　SEO対策に効果あり!?
http://blog.kantan-life.com/article/412794988.html
Seesaaブログの基本構造　カスタマイズの前にチェック！
http://blog.kantan-life.com/article/412516173.html

Seesaaブログのタグ基本文法、条件分岐など
http://powerfulchenge.seesaa.net/article/114693846.html

SeesaaブログHTML関数リファレンス
http://www.blogcustomize.com/customize_html_reference.html

ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ
テンプレート「デコもじコラボ」を使用したケース。
１．
デザイン＞ PC＞ HTML と進み、「HTMLの追加」　
１１２行目の　h2　を　div　に書き換える
１１５行目の　h3　を　h2　に書き換える
新しく追加したHTMLの方に「適用」のレ点を入れる。

２．
デザイン＞ PC＞コンテンツ　と進み、コンテンツHTML編集をクリック
69行目のh2をdivへ
71行目のh3をh2へ書き換える。

３．
デザイン＞ PC＞デザイン設定　と進み、CSSを編集する
同様に
4行目と72行目の　h2　を　.date　に
84行目と98行目の　h3　を　h2　へ書き換える

ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ

下の２つのサイトを参考にしよう。

シーサーブログの見出しタグ「hタグ」の最適化
http://affiliate150.com/tag-optimization

2009年07月08日
seesaa初期設定＜h2＞＜h3＞タグの変更
http://simple-blog-custom.seesaa.net/article/123041502.html

２つ目の方はかなり古い記事だが
seesaaカスタムについていろいろと興味深い記事も多いサイトなので
一度、目を通しておいた方がよさそうだ。

posted by mamebukuro at 22:00 | seesaa カスタマイズ

2015年06月16日

seesaa新デザイン　サイドバーの「最近の記事」をカスタマイズ

編集

seesaaブログの新デザインは、かなりかっこいいのだが、
いろいろと納得がいかないところもある。

サイドバーに設置する「最近の記事」では、
サムネイル画像と、
記事タイトルの前半部分と
記事本文の冒頭部分が表示されるが、
これが非常に中途半端。

もうちょっと表示される文字数を増やさないと、
記事の内容が把握できない。

いろいろと分かったことをメモしていく。（随時加筆）

ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ

「最近の記事」に表示される文字数の変更

デザイン⇒デザイン設定⇒コンテンツHTML編集へ。
２４行目あたりの部分を編集する
赤い数字の部分が文字の範囲に該当する。
◆表示される記事のタイトル文字数
多分、(26)だと、半角36個分のスペース、という意味だと思う。
上の26は画像がある場合、下は画像が無い場合、だと思う。（未確認）
◆記事の本文冒頭
同様に(58)は、半角58個分の範囲、という意味だろう。

ここには自分で最適と思われる数値を入れていけばいい。
いろいろな数値を入れてみて、実際の表示を確認しながら決めるのがいいだろう。

<% /if -%>
<h4 class="recent-entry__title">
<% if:article.first_image -%>
<% article.subject | tag_strip | shorten( 26 ) -%>
<% else -%>
<% article.subject | tag_strip | shorten( 36 ) -%>
<% /if -%>
</h4>
<p class="recent-entry__body">
<% if:article.first_image -%>
<% article.body | tag_strip | shorten( 58 ) -%>
<% else -%>
<% article.body | tag_strip | shorten( 74 ) -%>
<% /if -%>
</p>

ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ

サムネイル画像の大きさなどを変更する

デザイン⇒デザイン設定⇒スタイルシート編集へ
582行目以降のあたりを編集する。

画像の幅　width: 70px;
画像の高さ　height: 70px;
ちなみに、縮小されていない気がする。
ただ、小さく切り取られているだけ。
このへんも、後日変更方法を調べる予定。

.module--recent-entry .recent-entry__thumbnail {
margin-right: 10px;
float: left;
width: 70 px;
height: 70 px;
overflow: hidden;
position: relative;
}

.module--recent-entry .recent-entry__thumbnail img {
position: relative;
min-width: 70 px;
min-height: 70 px;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

補足参照 http://www.htmq.com/csskihon/603.shtml
主要ブラウザのベンダープレフィックス
-moz-　　…… Firefox
-webkit-　…… Google Chrome、Safari
-o-　　　　…… Opera
-ms-　　　…… Internet Explorer

ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ

更に補足。603行目あたりの記述はどういう意味か？

CSSの以下の部分はIE８のバグ対策？らしい。
参照 http://www.onside.com/web_design/5891.html
http://ondrecords.com/web/%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/
↓
.module--recent-entry .recent-entry__thumbnail img {
top: auto\9;
left: auto\9;
}
こんなの見たことなかった。

ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ
「最近の記事」の本文冒頭部分をカット。
タイトルだけを表示。
削除する部分。だいたい29行目あたりから。

<% article.body | tag_strip | shorten(58) -%>
<% else -%>
<% article.body | tag_strip | shorten(74) -%>
<% /if -%>

ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ

タグ： seesaa新デザイン

posted by mamebukuro at 08:01 | seesaa カスタマイズ

2015年06月15日

seesaaブログカスタムまとめ seesaaが一部リニューアル、新デザインシステムに

追加・編集

追記！
新しいseesaaのデザインを利用してみたが、
記事を更新してもサイドバーにある「最近の記事」には表示されない
とか、
サイドバーに設置した「自由形式」の中身を追加編集しても、
編集前の状態で表示されたりする。

トップページの表示ではちゃんと表示されているのに、
個別の記事で表示するとサイドバーの情報が編集前の状態
になったり不具合が目立つなぁ～・・・。
新デザインを利用していくつかブログを立ち上げてみたが、
どれも表示がおかしい。F5を押して最新の情報に更新してみてもダメ。

あちこちいじっても全然なおらないので諦めていたら、
翌日にはちゃんと表示されているという感じ。

これは勘弁してほしいなぁ・・・。
自分だけなのだろうか・・・？

デザイン自体はカッコいいので利用したいが・・・
seesaaさん、頼むよ～～～

ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ

いつの間にか、seesaaがリニューアルしていた。
今度のテンプレートはなかなかいい。
デザインもシンプルでお洒落で今風だ。
自分が思い描いていた理想に最初から近い。

ということで一つ作ってみたが、
カスタマイズの段取りだけ忘れないようにメモしておこう。
以下、随時加筆していく。

ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ
設定＞詳細設定＞ブログ設定

「メールマガジンの配信」の項目で
テキスト版 HTML版サマリー版(テキストのみ)
３つともチェックを外しておく。

「共通ヘッダー」の項目で
「表示しない」　にチェックを入れる。

設定によってどのような変化があるのかこれから調査する。
特に、サイドバーの「最近の記事」に表示されるサムネイル画像。
ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ
設定＞詳細設定＞広告設定

記事下広告の表示
60日間更新が無い場合
検索経由の広告表示
３つすべて「広告を表示しない」にチェックを入れる。

ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ
デザイン＞コンテンツ

サイドバーにいくつかある「広告パーツ」を全部外す。

ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ
設定＞詳細設定＞記事設定

コメント、トラックバックを承認後表示に。

広告の表示を「無効」に。

PINGの送信設定。
http://api.my.yahoo.co.jp/RPC2
http://blog.goo.ne.jp/XMLRPC
http://blogsearch.google.co.jp/ping/RPC2
http://blogsearch.google.com/ping/RPC2
http://ping.blo.gs/
http://ping.bloggers.jp/rpc/
http://ping.blogranking.net/
http://ping.dendou.jp/
http://ping.fc2.com/
http://ping.freeblogranking.com/xmlrpc/
http://ping.speenee.com/xmlrpc
http://pingoo.jp/ping/
http://rpc.pingomatic.com/
http://rpc.weblogs.com/RPC2
http://serenebach.net/rep.cgi
http://taichistereo.net/xmlrpc/
http://www.blogoon.net
http://www.blogpeople.net/servlet/weblogUpdates
http://www.hypernavi.com/ping/
http://www.i-learn.jp/ping/

続きを読むの文言設定。

ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ
デザイン＞デザイン設定＞HTML編集

任意でnofollowの設定
旧？　<meta name="robots" content="nofollow" />
新？　<meta name="robots" content="nofollow">
個別　<a href="" rel="nofollow" target="_blank"></a>

ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ
ファビコンを設置する。
シーサーブログにファビコンを設定する
画像の用意
16x16だけでもよいが32x32と48x48もあった方が良い。
（まずは１６の倍数で大きい画像を作成）

こちらで加工⇒ファビコン favicon.icoを作ろう!
http://ao-system.net/favicon/index.php

seesaaのファイルマネージャへUP
URLはhttp://●●●●. up. seesaa.net/image/favicon.ico
という感じになるはず。ブログのアドレスにUPが付いている。
それをhead内に書き込む
<link rel="shortcut icon" href=" favicon.ico" type="image/vnd.microsoft.icon">
<link rel="shortcut icon" href=" http://●●●●.up.seesaa.net/image/favicon.ico" type="image/vnd.microsoft.icon">

ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ
ディスクリプションを表示しない
.description{display:none;}

ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ
グーグルアナリティクスの設定と、サイトマップの出力

設定＞詳細設定＞外部連携
https://blog.seesaa.jp/cms/settings/services/edit/input

検索エンジンにサイトマップを出力送信？
「送信する」にチェックを入れる。

アナリティクス連携
Google Analytics トラッキングコードをコピペ。

ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ
ブログの本体、サイドバーの横幅変更。

画像をリサイズしなくても良いように
メインの記事部分を620から640へ変更

サイドバーに横幅336の広告を設置できるように
300から336へ変更

結果、トータルの横幅を960から1016へ

.l-wrapper {
width: 1016px;
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}

.main {
width: 640px;
}

.side {
width: 336px;
}

ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ

トップページに記事が複数表示されているときに
画像サイズが勝手に620にリサイズされるので修正。
640に変更

.entry__thumbnail {
margin-bottom: 10px;
width: 620px;
width: 640px;
height: 349px;
overflow: hidden;
position: relative;
}

ｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘｘ

タグ：カスタマイズまとめ blog Seesaa 新デザインリニューアル

posted by mamebukuro at 17:19 | seesaa カスタマイズ

2015年05月05日

テンプレート選びとカスタムする箇所のメモ

ここを編集・追加

テンプレート選び

（右サイドバーならデコ文字コラボがいいか？）

「ルーズリーフ」を選んでみたら、【タイアップ】というバナーが
右サイドバーの上に強制的に表示されるのでダメだった。
どのテンプレートに強制バナーが含まれるのか、
一度選んでみないと分からないので非常に煩わしい。

「ライトグレー」は可変型でディスプレイ上の
ウィンドウを狭くすると思いっきりレイアウトがずれるのでダメ。

選ぶなら「超シンプル」か「シンプルベージュ」になるか。

「超シンプル」のマイナス要素は、シンプルすぎ、
古い感じがする（フォント）、カスタムが全面改装になりそうで面倒

ということでいろいろ妥協して「シンプルベージュ」に決定。

記事タイトルを手直しする
★マウスオーバーで何も変化しないので
　とりあえず、アンダーラインが入るようにする。
a.title:hover { text-decoration:underline; }

★フォントサイズが記事本文と同じサイズなので
　大きくする
font-size:140%;

posted by mamebukuro at 19:16 | seesaa カスタマイズ