2017年04月07日

カテゴリのツリー化を行いました!

 私は、さくらのブログを使っています。
 SeeSaaブログと言うそうです・・・毎回同じで・・・。
 
 ずぅ〜と、不満だったのがカテゴリ表示です・・・他のブログの様にツリー表示が出来ません。
 このため、細かくタグを登録して仕分けをしていたのですが・・・何と、さくらのブログでツリー表示されているサイトがありました。
 しかも懇切丁寧に導入方法の記載もあり早速利用させた頂きました。
 感謝です!
 元々公開されている「Lc.ツリーカテゴリー(for Seesaa) 2008.04.26」のソースコードを利用して簡単に出来ました。
 ソースコードについては、再配布禁止となっていますので、上記ページをご覧ください。
 
 悩みは、ツリーを開いたままにするか?閉じた状態が良いのか?思案中です。
posted by 友墨 一朗 at 17:19 | Comment(0) | ブログカスタマイズ
2017年04月05日

ブログに「トップに戻る」ボタンを設置

 私の利用しているさくらのブログは、さくらのレンタルサーバーにオマケに付いていたもので、Seesaaブログと言うそうです。
 ここまで、ズゥ〜と同じ・・・文章
 他のブログサイトの記事を読まさせていると、右下にフロー状態で「トップに戻る」(記事の一番上へ戻る)ボタンを設置されているブログが多く確かにスクロールで戻る手間も省け便利!
 で、さくらのブログに設置するにはと検索したところコピーペーストで出来る情報を見つけ早速導入しました。
 忘れそうなので、覚書です。
 CSSとHTMLに追記するだけでOKでした。

CSSへの追記

 ブログにログイン後→デザイン→デザイン設定と進みます。
トップに戻るボタン設置
 表示されたタイトル一覧から適用中のデザインを選択しクリックします。
トップに戻るボタン設置
 表示されたCSSに以下を追記しました。
#scroll-top { 
  position: fixed;  
  right: 20px;  
  bottom: 20px; 
  display: none;
  width: 50px;
  height: 50px; 
  cursor: pointer;
  text-align: center; 
  color: #fff; 
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px; 
          border-radius: 6px;
  background-color: #666;
  filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
 保存します。

HTMLヘッダ追記

 HTMLヘッダにscriptを追記します。
 ブログにログイン後→デザイン→HTMLと進みます。
トップに戻るボタン設置
  表示されたHTML一覧から適用中のHTMLを選択しクリックします。
トップに戻るボタン設置
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(){
  var tg = $("#scroll-top");
  $(window).scroll(function(){
    var i=$(window).scrollTop();
    if(i >50){tg.fadeIn("slow");}else{tg.fadeOut("slow");}
  });
  tg.on("click",function(){ $("html,body").animate({scrollTop:0},"slow"); });
});
</script>
 追記場所は</head>の直前にペーストしました。

ボディに追記

 上記HTMLのボディタグ内にスクロールソースを追記しました。
<!-- scroll-top -->
<div id="scroll-top" style="display: block; opacity: 0.359985;">
<p>▲</p>
</div>
<!-- /scroll-top -->
 追記場所は</body>の直前にペーストしました。
posted by 友墨 一朗 at 09:12 | Comment(0) | ブログカスタマイズ
2017年03月16日

ブログ「タグ」一括編集出来た!

 私の利用しているさくらのブログは、さくらのレンタルサーバーにオマケに付いていたもので、Seesaaブログと言うそうです。
 ここまで、前回と同じ・・・文章

 さて、最近、カテゴリとタグを纏め直す事にし作業を開始したのですが・・・
 カテゴリは設定と記事一覧で、比較的簡単に直せるのですが・・・
 タグについては、何処にもありません・・・記事を一つ一つ開いて、変更し保存・・・結構大変ヾ(゚Д゚)ノ

 出来ました!
 設定にはありませんでしたが、記事一覧で出来ました。
さくらのブログ タグ一括編集
 検索オプションの設定の中に・・・気が付きませんでした。
 「検索オプションの表示」をクリックすると、
さくらのブログ タグ一括編集

 表示項目が表示されるので、タグにチェックを入れ「検索する」ボタンを押すと下の編集画面にタグが表示されるようになります。
 名称を一括で変更するこたは出来ませんが、記事一覧内に表示が出ているので、ここで編集し下の「保存」ボタンを押すことで表示されて記事を纏めて変更する事が出来ました。
 随分、使っているのに知りませんでした。
 まだまだ知らない事があり勉強になりました。('∀`)
posted by 友墨 一朗 at 14:52 | Comment(0) | ブログカスタマイズ
2017年03月06日

ブログ「タグクラウド」の表示変更

 私の利用しているさくらのブログは、さくらのレンタルサーバーにオマケに付いていたもので、Seesaaブログと言うそうです。
 テンプレートも用意されており簡単に導入できるのですが、細かなデザイン変更が???
 ここまで、前回と同じ・・・文章

 今回は、表示させるとアクセス数に合わせ文字サイズが拡大されたりどうも今一な「タグクラウド」の表示をスマートにしました。
 遣ったことは、文字サイズの統一、文字を枠で囲いマウスオーバー時に背景色を付けるです。

 設定変更は、全体のCSSで行います。
 ブログにログイン後→デザイン→デザイン設定と進みます。
blog20170303_10.png
 表示されたタイトル一覧から適用中のデザインを選択しクリックします。
blog20170303_21.png

 表示されたCSSから「.side-tag a」を探し変更しました。

 変更前は、
 .side-tag a{font-size:12px;}となっていますが、これを.side-tag a{font-size: 14px !important;とにすると文字サイズが変更されなくなります。
 さらに、その下、input{max-width:200px;}を
 border: solid 1px #000080;
 border-radius: 4px;
 display: inline-block;
 padding: 4px;
 margin-bottom: 6px;}
 input{max-width:200px;}に書き換え文字を枠で囲いました。

 マウスオーバー時に背景色を変えるため
 .side-tag a:hover {background-color: #C1D8AC;
 text-decoration: none;
 color: #000;}を追記しました。
blog20170303_31.png
 拡大すると、
blog20170303_32.png
 こんな感じです。
blog20170303_01.png
 自分では随分スッキリしたつもり・・・
posted by 友墨 一朗 at 11:22 | Comment(0) | ブログカスタマイズ
2017年03月04日

ブログ「検索ボックス」のサイズ変更

 私の利用しているさくらのブログは、さくらのレンタルサーバーにオマケに付いていたもので、Seesaaブログと言うそうです。
 テンプレートも用意されており簡単に導入できるのですが、細かなデザイン変更が???

 今回は、少しサイズの短い検索ボックスが何とかならないかとやってみました。
blog20170303_03.png

 もう少し入力ボックスを広げたい・・・

 ブログにログイン後→デザイン→コンテンツ→検索ボックスと進みます。
blog20170303_11.png
 検索ボックスをクリック
blog20170303_12.png
 コンテンツHTML編集をクリック
blog20170303_13.png
 コンテンツHTML編集画面で表示された画面を下にスクロールし、
 .inputkeyword{width:140px;}の青線数値を変更します。
 私の環境では、140pxに変更して保存したところ
blog20170303_02.png
 丁度いい感じになりました。
posted by 友墨 一朗 at 09:08 | Comment(0) | ブログカスタマイズ
2016年02月29日

ブログの設定を若干変更しました

 私の利用しているさくらのブログは、メインのホームページ用としてレンタルしたさくらのレンタルサーバーにオマケに付いていたもので、Seesaaブログと言うそうです。

 無料なので、文句も言えませんが、スマホ等から私のブログにアクセスすると自動でスマホサイトに切り替わるのですが、このデザインが・・・選択肢も4テンプレートしかなく殆どカスタマイズも出来ません。
 そこで、PCサイトをレスポンシブ対応とすることで、スマホサイトからPCサイトへ切り替えた時に少しでも見易く成るようにしました。

 「とある秘密ブログの更新うぇぶろぐ」の「Seesaa ブログ レスポンシブ計画始動」に掲載されていた設定を拝借させて頂きました。
 併せて、デザインの一部を変更しました。

 と、言ってもスマホを持っていませんので、YogaタブとChromeの検証で確認しただけですが・・・。
posted by 友墨 一朗 at 16:07 | Comment(0) | ブログカスタマイズ
2013年08月10日

ファビコン

 ブログにファビコンを付けたので、忘れないように記録。
 ファビコンは、予め作成しておく。
 マイ・ブログにログインします。
blog001.jpg
 上部、ファイルマネージャをクリック
blog003.jpg
 アップロード画面からファイルを選択をクリックし、予め作成していたファビコンを選択
blog004.jpg
 アップロードボタンをクリックしファビコンをアップロードします。
blog005.jpg
 すこし下のファイル一覧にファビコンファイルを確認。右側のHTMLボタンをクリック
blog006.jpg
 右側にHTMLソースが表示されるのでコピーします。
blog007.jpg
 ページ上部のタブからHTMLをクリック
blog008.jpg
 HTMLファイルを選択しクリックします。表示されたHTMLソースの前に先ほどコピーしたソースを貼り付けます。
 貼り付けた後、次の様にソースを書き変えます。
<link rel="shortcut icon" href="http://○○.sakura.ne.jp/sblo_files/○○/image/favicon.ico">
blog010.jpg
 下部の保全ボタンを押して完了です。
 ファビコンが表示されない時は、ブラザーのキャッシュを削除すると直ぐに確認することができます。
posted by 友墨 一朗 at 16:09 | Comment(0) | ブログカスタマイズ