【8/16】はてなブログのテンプレートを書こう　Part3

日記

f:id:pepojaurus:20210816215906j:plain

「5分で分かるアフィリエイト」でも全然分からないような僕が、アフィリエイトを学びながら、『「5分で分かるアフィリエイト」で分からない人でも分かるアフィリエイト』のブログを作るまでの日記。

 

どーも！　ぺぽじゃうるすです！

 

昨日に引き続き、ブログのレイアウトのテンプレートを作っていきます。

 

 

「この記事は○分で読めます」

多くのはてなブロガーの方の記事の一番上の部分には、

「この記事は○分で読めます。」

という部分があります。

これは便利なのかどうかあまりわかりませんが、とりあえずつけておきます。

調べてみて、必要ないと感じれば今後は消すかもしれません。

 

「この記事は○分で読めます。」は、

デザイン→カスタマイズ→記事→記事上

に下記コードを貼り付けることでできます。

 

このコードは「redo」さんの記事を参考にさせていただきました。

 

 

HTMLコード

<script type="text/javascript">
addEventListener('DOMContentLoaded', function() {
var wpm = 600;
var length = $('.entry-content').text().trim().replace(/[

]/g,'').length;
var message = '<p style="font-size: 80%; color: #999999; text-align: right;">この記事は約'+ Math.ceil(length/wpm) +'分で読めます。</p>';
$('.entry-content').prepend(message);
}, false);
</script>

 

トップボタンの設置

ページトップへ戻るボタンを画面上に常に表示させたいと思います。

こちらは「ごろ鯛」さんの記事を参考にさせていただきました。

 

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

に下記コードを貼り付けます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

 

フッター

管理画面→デザイン→カスタマイズ→フッター

<!-- ページトップへ戻る -->
<script>
$(function () {
   /** ページトップ処理 **/
   // スクロールした場合
   $(window).scroll(function() {
       // スクロール位置が200を超えた場合(常に表示は-1)
       if ($(this).scrollTop() > 200) {
           $('#pagetop').fadeIn("slow");} 
       else {
           // ページトップへをフェードアウト
           $('#pagetop').fadeOut("slow");}
   });

   // クリックした場合
   $('#pagetop').click(function() {
       // ページトップへスクロール
       $('html, body').animate({
           scrollTop: 0},"slow");
       return false;
   });
})(jQuery);
</script>

<!-- トップアイコンの設定 -->
<a id="pagetop" href="#top" class="page_top" style="display: none;"><i class="fa fa-arrow-circle-o-up fa-3x"></i></a>

<!-- ページボトムへ進む -->
<script>
$(function () {
   /** ページボトム処理 **/
   // スクロールした場合
   $(window).scroll(function() {
       // スクロール位置がボトム-1000を超えない場合(常に表示は−０)
       if ($(this).scrollTop() < $(document).height()-1000) {
           $('#pagebtm').fadeIn("slow");} 
       else {
           // ページボトムへをフェードアウト
           $('#pagebtm').fadeOut("slow");}
   });

   // クリックした場合
   $('#pagebtm').click(function() {
       // ページボトムへスクロール
       $('html, body').animate({
           scrollTop: $(document).height()},"slow");
       return false;
   });
})(jQuery);
</script>

<!-- ボトムアイコンの設定 -->
<a id="pagebtm" href="#btm" class="page_btm" style="display: none;"><i class="fa fa-arrow-circle-o-down fa-3x"></i></a>

 

デザインCSS

管理画面→デザイン→カスタマイズ→デザインCSS

/* ページトップへ戻るボタン */
#pagetop {
    position:fixed;
    bottom:60px;
    right:10px;
    padding:10px 20px;
    color:#7affff;
    text-align:center;
}

/* ページトップへ戻るボタン：ホバー時 */
#move-page-top:hover{
    color:rgba(0,0,0,0);
}

/* ページボトムへ進むボタン */
#pagebtm {
    position:fixed;
    bottom:60px;
    right:10px;
    padding:10px 20px;
    color:#7affff;
    text-align:center;
}

/* ページボトムへ進むボタン：ホバー時 */
#move-page-btm:hover{
  color:rgba(0,0,0,0);
}

 

更新日時の表示

記事投稿日時の右側に、更新日時を表示できるようにします。

こちらは「redo」さんの記事を参考にさせていただきました。

 

記事下

管理画面→デザイン→カスタマイズ→記事→記事下

自分のトップページのURLを入力する所が1箇所があります。

<!-- 更新日時表示 -->
<!--[if lt IE 9]>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<!--<![endif]-->
<script>
;(function($) {
'use strict';
var urls = [], opts = {cache: false, dataType: 'xml'}, p,
url = 'トップページのURL/sitemap.xml';
function parseSitemapXML(url) {
var d = new $.Deferred;
$.ajax($.extend(opts, {
url: url
})).done(function(xml) {
$(xml).find('sitemap').each(function() {
urls.push($(this).find('loc').text());
});
d.resolve();
}).fail(function() {
d.reject();
});
return d.promise();
}
function findURL(url) {
$.ajax($.extend(opts, {
url: url
})).done(function(xml) {
var isMatched = false;
$(xml).find('url').each(function() {
var $this = $(this);
if ($this.find('loc').text() === location.href) {
isMatched = true;
appendLastmod($this.find('lastmod').text());
return false;
}
});
if (!isMatched) nextURL();
}).fail(function() {});
}
function nextURL() {
urls.shift();
if (urls.length) findURL(urls[0]);
}
function appendLastmod(lastmod) {
var $container = $('<div></div>', {'class': 'lastmod'}).text(lastmod.replace(/T.*0/,""));
if ($('.entry-header > .date').get(0).tagName.toLowerCase() === 'span') {
$('.entry-title').before($container);
} else {
$('.entry-date').append($container);
}
}
p = parseSitemapXML(url);
p.done(function() {findURL(urls[0])});
p.fail(function(error) {});
})(jQuery);
</script>

 

デザインCSS

管理画面→デザイン→カスタマイズ→デザインCSS

/*更新日時表示*/
.lastmod {
background-color: transparent;
padding: 5px 0px;
text-decoration: none;
font-size: 15px;
display: inline;
margin-left: 0px;
color: #333333;
}
.lastmod::before {
margin-right: 5px;
margin-left: 10px;
padding-left: 3px;font-family: blogicon;
font-family: "blogicon";
content: "02b";
}
.entry-date a {
background-color: transparent;
padding: 5px 0px 5px 6px;
text-decoration: none;
font-size: 15px;
display: inline;
}
.entry-date a::before {
margin-right: 5px;
padding-left: 3px;
}

 

 

蛍光マーカー

蛍光マーカーを使用できるようにする。

こちらは「チキン」さんの記事を参考にさせていただきました。

チキンさんの記事をそのまま適用する場合、太字をピンク、斜体を黄色に対応させているため、太字、斜体は使用できなくなります。

斜体はあまり使わないと思いましたが、太字はたまに使用すると思いますし、ピンクについては太字の状態でピンクの蛍光マーカーが引かれてしまったため、太字は適用しませんでした。

その代わり、HTML編集にて<pink>、<green>を使用することで、それぞれピンクと緑色に対応させました。 

 

HTMLコード

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

<!--蛍光ペン-->
<style type="text/css">
/* 斜体表示を蛍光ペン（黄）風に */
article em{
/*font-weight:bold;*/
font-style: normal;
margin:0;
padding:0;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%) !important;
}
/* iタグは斜体*/
article i{
font-style:oblique !important;
}

/* pinkを蛍光ペン（ピンク）風に */
article pink{
font-weight: normal;
margin:0;
padding:0;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, rgba(255,153,255,1) 60%) !important;
}

/*greenを蛍光ペン（緑）風に */
article green{
/*font-weight:bold;*/
text-decoration: none;
margin:0;
padding:0;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, rgba(102,255,204,1) 60%) !important;
}
</style>

 

その他

ソースコードの貼り付け方

今日の記事のようにソースコードを貼り付けたい場合は、少し工夫が必要です。

僕は記事を書くときは、編集モードを「見たままモード」にしています。

今日の記事ようにいい感じに貼り付けるためには、編集モードを「はてな記法モード」にする必要があるのですが、記事は「見たままモード」で書きたいです。

そのため、はてな記法の下書き記事を1つ作り、そこに下記のように載せたいソースコードを貼り付けます。

 

>|| ソースコード ||<

 

それをプレビュー画面からコピーし、貼り付けたい記事の「見たままモード」で貼り付けます。

少し手間ではありますが、見栄えは良くなります。

また、

 

>|css| ソースコード ||<

 

とすると、ソースコードに自動で色が付き、さらに見栄えが良くなります。

”css”の部分を変えることで色使いを変えることができるそうですが、このままでも十分だと僕は思います。

 

 

最後に

この3日間で大体のテンプレートは完成しました。

ただブログを書いているうちにカスタマイズしたいことが見つかると思いますので、その時々にカスタマイズしていきたいと思います。

 

もし見てくださった方で、こんなカスタマイズおすすめだよとか、こうしたほうがいいよなどありましたら、ぜひぜひコメントにお書きください。

お待ちしております。

#日記 #アフィリエイト #はてなブログカスタマイズ

pepojaurus 読者になる

広告を非表示にする
コメントを書く