50のてならい

50のてならい

50になってからネットについて色々と検証していくブログです。

はてなブログテーマ Innocentのカスタマイズ

f:id:jr0704japan:20170522163509j:plain

すこし、ググッテみると今現在使用している、テーマ

Brooklynは、なんと一番人気で沢山の人が使っているらしい。

 

ただ、自分の場合スマホでの表示がどうも、違って見えるので変えようかと。

作者の人にメールしても返事もないので。

 

また、テーマを変える時に、何処を消せば良いか、わかるようにメモ記事作成しておきます。

 

 

新しいテーマは、Innocent

 管理画面→デザイン→「テーマストアでテーマを探す」→「Innocent」を選択プレビューしてインストール

 

前のテーマのBrooklynのグローバルメニュへー用のcssを削除

デザイン→カスタマイズ→ヘッドの中のcssを削除

 

ナビゲーションバーの設置から

作者の半月さんの、この記事でナビゲーションバーを設置しようとしたのですが

pc版は、またcssを書き変えないといけないようでした。

 

moonnote.hateblo.jp

 

まずは、以下をフッターにコピーしました。

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    (function($) {
        $(".menu-toggle").on("click", function() {
            $(".main-navigation").toggleClass("toggled");
        });
    })(jQuery);
</script>
以下をヘッダーにコヒー

こちらは、半月さんの所にあったサンプルhtmlです。

<nav class="main-navigation">
    <div class="menu-toggle">メニュー</div>
    <div class="main-navigation-inner">
        <ul>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">プロフィール</a></li>
            <li><a href="#">アーカイブ</a></li>
            <li>
                <a href="#" class="has-child">カテゴリー</a>
                <ul>
                    <li><a href="#">子カテゴリ1</a></li>
                    <li><a href="#">子カテゴリ2</a></li>
                </ul>
            </li>
            <li><a href="#">リンク</a></li>
        </ul>
    </div>
</nav>
<nav class="main-navigation">
<div class="menu-toggle">メニュー</div>
<div class="main-navigation-inner">
<ul>
<li><a href="#">ブログ</a></li>
<li><a href="#">楽天モバイル乗換編</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">アフィリエイト</a></li>
<li><a href="#">ポイントサイト</a></li>
       <li><a href="#">サーバー設定編</a></li>
</ul>
</li>
</ul>
</div>
</nav>

でも、何をしたのか、間違っているようで間隔がおかしいです。

そのうちに、直します。時間かかりすぎ。

 

スマホ版のカテゴリーは

こちらの記事はスマホ版の設定が簡単に出来る優れものです。

グローバルメニューのカスタマイズは、いちいちhtmlを入力して作成するのが面倒だったので、以下の記事内のcssをデザインのヘッダーにコピぺしたら、勝手に出来てました。

 

ただ、pc版は、やはり自分用に書き換えてコピーしないといけないようで、作者さんのページのcssを書き変えました。

 

とてつもなく便利で簡単で手間いらずで、とてもよかったです。

shunさん、ありがとうございました。

 

www.ituore.com

 

設定→詳細設定→検索エンジン最適化→headに要素を追加

 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

引用させて貰ってます。

 

デザイン→スマートフォン→ヘッダ→タイトル下

引用

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
  console.log($);
  var categories;
  $.get("/categories").done(
    function(data) {
      categories = $(data).find(".entry-content ul li a");
      console.log(categories);
      categories.each(function() {
        var categoryUrl = $(this).attr("href");
        var categoryText = $(this).text();
        $("<option></option>", {
          "value": categoryUrl,
          "text": categoryText
        }).appendTo(".categories-menu select");
      });
    }
  );
  $(".categories-menu select").change(function() {
    window.location = $(this).find("option:selected").val();
  });
});
</script>

<!-- カテゴリ一覧用のHTML -->
<div class="categories-menu">
<select>
<option value="hide">--Category--</option>
</select>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>

<!-- カテゴリ一覧のデザイン -->
<style type="text/css">
.categories-menu {
    position:relative;
    margin:3px;
    overflow: hidden;
    border:1px solid #333;
}
.categories-menu select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background:none;
    border-radius:0;
    display:block;
    width:150%;
    padding: 0.5em 1em;
    margin:0;
    border:0;
    outline:none;
    font-size:16px;
    line-height:1.5;
}
.categories-menu .fa-angle-down {
    position:absolute;
    top:0;
    right:0;
    display:block;
    padding:0.5em 1em;
    font-size:20px;
    font-weight:bold;
    pointer-events: none;
    border-left: 1px solid #333;
}
</style>

                                引用終わり

 こちらも引用させて貰ってます。"で囲むと、つぶれて表示されてしまうので、引用の文字で囲みました^^;

 

トップページに記事一覧の表示

 たまに毒を吐く さんのこの記事を参考にしてやりました。

dokuwohaku.hateblo.jp

 

 管理画面→設定→詳細設定 の中の「headに要素を追加」

赤い文字の3箇所を自分のブログのurlに書き換えます。

間違えると、私みたいに、たまにどくをはくさんのページに飛んでしまいます(笑)

<script type="text/javascript">
  if( location.href == 'http://dokuwohaku.hateblo.jp/'){
  location.href='http://dokuwohaku.hateblo.jp/archive';
}
</script>
<noscript>
<p><a href="http://dokuwohaku.hateblo.jp/archive">広汎性発達障害の女が毒を吐くブログ</a></p>
</noscript>
記事一覧から邪魔なものを非表示にして調整

これいいですね。随分と一記事毎の縦の幅が短くなって記事一覧がずらっと縦並びになります。

 

デザイン→カスタマイズ→デザインCSS


/*アーカイブ*/
.archive-entries .categories a {
display:none;
}
.archive-entries .hatena-star-star-container{
display:none;
}
.page-archive .archive-entry-body {
margin-top: 0px;
}
.page-archive .entry-thumb {
margin: 0px 26px 0px 0;
}

.entry, .page-archive .archive-entry {

margin-bottom: 20px;
padding-bottom: 20px;
}

パンくずリストの設置 

パンくずが、何なのかまだ勉強してないので、良くわからないのですが何やら、グーグルから検索された時に、良いみたいです。

 

f:id:jr0704japan:20170523102959p:plain

 

私の場合には、カテゴリーの下に孫カテゴリーって、いうんですか、まあ、それよりしたには、何もカテゴリーがないので、アフィリエイトしか表示されていない。

 

あっ、やばい   アフィエイトになっている。

直しましたけど、検索しても治ってない。まっ、いいか ( ´艸`)ムププ

 

パンくずリストの一個目までが、グーグルに認識されるようで、1週間熟成させるとグーグルからカテゴリーを認識して貰えるようになるようです。

池田仮名さん、ありがとうございます。

 

bulldra.hatenablog.com

 

デザイン画面のフッタに以下のスクリプトを配置します。

引用させて貰ってます。

<!-- CopyRight http://bulldra.http://bulldra.hatenablog.com -->
<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/breadcrumb.js" charset="utf-8"></script>

 

管理画面→デザイン→カスタマイズ→記事下に以下を貼り付けました。

コードを引用させて貰ってます。

<style>
div #breadcrumb div {
    display: inline;
    font-size: 13px;
}
</style>
<div id="breadcrumb"></div>

 

上記の訂正を作者の方が言われてました。

moonnote.hateblo.jp

 

カテゴリーとカテゴリーの間に挿入される > が全て最後のカテゴリーの後ろに表示されるという問題を修正するには、以下のコードをデザインCSS欄に追記して下さい。

 

デザインcssに追加して下さい、とのことでコピーしておきました。

.categories a{
    display: inline-block;
    float: none;
    margin-right: 0;
}

 

さらに、色々とボタンやら設置出来るようなのですが、頭がウニになりそうなのとやったことを全部忘れそうなので、メモにしてます。

 

さらなる、カスタマイズをしようとしたのですけれども、時間かかりすぎ。

まあ、少しずつですね!

 

けど、カスタマイズは面白いけれども、一旦変になると何処をいじっていいのかわからなくなるのが、シロウトのおつさんの悲しいサガであります。