スポンサーサイト

一定期間更新がないため広告を表示しています

Fire fox 26.0

Firefox 26.0

26.0にアップデートしました。レスポンシブモードでスクリーンショットなどのボタンが表示されるようになったのはプラグインの関係なのでしょうか?

ナビゲーション

Page Slide

Page Slideを設置してみました。

さて、ここに設置する情報は何がいいのか検討中です。

続きを読む >>

広告を非表示にするアドオン:Adblock Plus

Adblock Plus -- Add-ons for Firefox

JUGEMブログに投稿する場合に使用しているブラウザはFirefoxなのですが、Adblock PlusをオンにしているとJUGEMブログの広告が表示されません。

Firefox アドオン Adblock Plusがオンの場合

Adblock Plusがオンの場合「スポンサーサイトって何?」みたいな事になります。広告が表示されないため。

Firefox アドオン Adblock Plusがオフの場合

全てのユーザーが「広告を非表示にするアドオンやエクステンション」をブラウザにインストールしているわけではないと思うので、JUGEMブログのテンプレートをカスタマイズする場合「広告を非表示にするアドオンやエクステンション」はオフにしてレイアウトの確認などが必要そうです。

月に315円

JUGEM PLUS(有料プラン)  無料ブログ(BLOG)作成【JUGEM】

315円の価値が見当たらないので無料のまま続けます。

続きを読む >>

ブログ記事のエクスポートとインポート

Q. アメーバブログからの引越し方法 | JUGEM ユーザー助け合い掲示板

この記事を読んで気になったので検索してみると

ブログお引越しツール

これで一度FC2ブログにお引越しして

FC2ブログをエクスポートしてMovableTypeに引っ越す方法 - ヲレサイト

MT形式でエクスポートして

Movable Typeログファイルインポート機能追加 | JUGEMお知らせブログ

MT形式でインポートする

試したことはないのですが上手くいくのでしょうか?

ブログパーツ

twitter memberjugem

ユーザー助け合い掲示板の質問を見ていたら公式JUGEMブログでブログパーツについての記事がアップされていました。ブログパーツ(widget等)に仕込まれているscript等は記述内容を確認して設置したいと思いました。

アフィリエイト

Linkplaza

簡単アフィリエイトのLinkplaza(リンクプラザ)

お試しに申し込んでみました。

順番待ちのようです。

登録申請いただきありがとうございます。
Linkplazaは現在、先行登録受付中のため申請を確認後、招待コードを発行させていただきメールにてご連絡いたします。

今しばらくお待ちください。

Studio Ousia
Linkplazaチーム | http://www.linkplaza.jp/

追記:2013/09/20-11:26
Linkplaza Screenshot

Linkplazaのマニュアルの通りにフリースペースに設置してみましたが設定しているインデックスページの表示方法と干渉するようなので現在はフリースペースを非表示にしています。

上下にスクロールするボタン

scroll button

上下にスクロールするボタンを設置してみました。
このブログで現在使用しているテンプレートはインデックスページで極力スクロールを少なくするために記事を横並び2列で表示していますが、記事が長くなる場合はページトップとページボトムにスクロール出来るボタンが設置されていると使い勝手が良くなるかと思います。

参考にさせていただいた記事
【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript | KLUTCHE ページの下までスクロールしたときに何らかの処理を実行する例 at softelメモ スクロール位置によってサイドバーを固定/解除させる jQuery実装方法 | mae's blog
設置例
<body>
…中略…
<div id="toppoint"></div>

…中略(ブログ記事等のHTML部分)…

<div id="updown">
<div class="toppoint">
<a href="#toppoint" title="ページトップに移動"><i class="icon-chevron-sign-up icon-3x"></i></a>
</div>
<div class="bottompoint">
<a href="#bottompoint" title="ページポトムに移動"><i class="icon-chevron-sign-down icon-3x"></i></a>
</div>
</div>
…中略…
</body>

ページトップに移動[ a href="#toppoint" ]をクリックすると[ id="toppoint" ]の設置している場所までスクロールさせ、ページポトムに移動[ a href="#bottompoint" ]をクリックすると[ id="bottompoint" ]の設置している場所までスクロールさせす。

基本的には[ id="toppoint" ]<body>の下(あるいはヘッダーの上)[ id="bottompoint" ]は</body>(あるいはフッターの下)に設置します。

※使用されているテンプレートのHTMLの構成で設置位置の調整が必要かもしれません。

ページトップに移動[ icon-chevron-sign-up ]とページポトムに移動[ icon-chevron-sign-down ]のボタンはFont Awesomeを使用しました。[ icon-3x ]を追記してアイコンのサイズを大きく指定しています。

Font Awesome Examples
#updown {position:fixed;right:20px;bottom:20px; display:none;}
#updown .toppoint {}
#updown .bottompoint {}

#updown a {color:#3b5b99;text-decoration:none;}
#updown a:link {color:#3b5b99;text-decoration:none;}
#updown a:visited {color:#3b5b99;text-decoration:none;}
#updown a:hover {color:#bccddb;text-decoration:none;}
#updown a:active {color:#3b5b99;text-decoration:none;}

#updownで上下にスクロールするボタンを表示する位置を指定して、display:noneで初期は非表示に設定しています。

※display:noneは設置するscriptの位置で不要の場合もあります。記事内容を読み込む前にscriptを設置している場合はscriptで非表示にしていますが、このテンプレートの場合は記事を読み込んだ後の</body>上にscriptを設置しているのでdisplay:noneを設定しています。

Font Awesomeを使用しているのでリンクの色指定をしています。

<script src="http://code.jquery.com/jquery.js"></script>

jqueryを設置します。設置箇所はこの記事で書いた部分です。

<script>
    jQuery(function() {
    var updownBtn = jQuery('#updown');
    updownBtn.hide();
    jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > 100) {
    updownBtn.fadeIn();
    } else {
    updownBtn.fadeOut();
    }
    });
    jQuery('a[href^=#]').click(function(){
        var speed = 400;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top;
        jQuery("html, body").animate({scrollTop:position}, speed, "swing");
        return false;
    });
});
</script>

<script>
$(window).bind("scroll", function() {
    scrollHeight = $(document).height();
    scrollPosition = $(window).height() + $(window).scrollTop();
    if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) {
            //スクロールの位置が下部5%の範囲に来た場合
            $('.bottompoint').css('display', 'none');
    } else {
            //それ以外のスクロールの位置の場合
            $('.bottompoint').css('display', 'block');
    }
});
</script>

scriptの内容は「参考にさせていただいた記事」に詳しく書いて下さっているのでそちらを参考にしてください。

今回設置したscriptの概要
  1. ページ表示時には上下にスクロールするボタンは非表示
  2. ページが下へ100スクロールすると上下にスクロールするボタンが表示される
  3. ページの下までスクロールすると下にスクロールするボタンのみ非表示

このブログで現在使用しているテンプレートはサイドバーに設置されるタイプのブログの情報がフッター部分に設置しているのでページの一番下までスクロールさせたほうが使い勝手がよくなったと思いました。

Google+の一般公開記事をブログに埋め込む

選ぼう ニッポンのうまい!2013」プレゼントキャンペーン
width440px

埋め込んだ記事の幅はデフォルトで440pxのようです。

追記:2013年9月12日

Facebookの記事の埋め込み幅はデフォルトで552pxのようです。

オンラインストレージサービス「KDrive」終了について

オンラインストレージサービス「KDrive」終了について

オンラインストレージサービス「KDrive」終了について

テンプレートのバックアップ用に使っていたのですが…

  • このエントリーをはてなブックマークに追加
  • Check