ABOUT ME

                 

LATEST ENTRIES

CATEGORIES

RECENT COMMENTS

LINKS

LATEST ENTRIESの表示件数増加&引用デザイン変更

なぜだか急に、ふとこのブログをカスタマイズしたくなって、ちょっとだけ手を加え始めたら止まらなくなった。


1:LATEST ENTRIESの文頭に「●」を入れる
このブログのTOPページ左側最上段「LATEST ENTRIES(最新記事一覧)」は、記事タイトルがそのまま何のひねりもなくズラッと並ぶだけな上に、ぼくのブログの各エントリのタイトルは長いものが多いので、タイトルの切れ目が非常にわかりにくいのが、実は前々から気にはなっていた。

で、当初「・(中黒)」を差し込もうと思ったんだけど、まんま全角で入れちゃうとSEO的にアレかと思って、リストタグを入れようかと思ったら既にリストタグ入ってやんの。

 

とは言えタグは「・」付きのもののくせに「・」が入ってないから、SEO的に弱くなるかもしれないけど、ページタイトルは普通に「・」無しだから別にいっかと開き直り、どうせなら目立たせるためにと「●」にしたった。

 

手順としては、HTMLソースの下記部分に差し込むだけ。

 

<!-- BEGIN latest_entry_items --> 
<li>
<a href="./?eid={latest_entry_item_id}">{latest_entry_item_title}</a>({latest_entry_item_date})

 

※上記赤丸がそれ。


思ったほど見た目的にうるさくないと思うので、コレはこれで正解かな。


2:引用デザイン変更
JUGEMブログに限った話ではないけど、テンプレートによって「引用BOX」のデザインって全然違うじゃないですか。そういう意味じゃ、このぶろぐで唯一気に食わなかったのがそこで、全然引用している感が薄くて。

で、このブログはニュース記事やコラムを引用することが非常に多いので、やっぱりコレも気になってたので、よしついでにちょっと調べて簡単そうならその場でやったろか思たわけです。

で、下記サイトに当たったんだけど、思っていた以上に簡単そう。しかも結構おしゃれ。ってことで、早速使ってみるとこんな感じ。

 

※参考サイト:CSSで作る!魅力的な引用デザインのサンプル30(blockquote) - サルワカさま
 https://saruwakakun.com/html-css/reference/blockquote


どうよ。コレすごくいいと思う。上記サイトから気に入ったデザインのCSSを引っ張って、自分とこにブチ込んだだけ。


3:LATEST ENTRIESの表示件数を変える
コレすげー気になってた。多分多くのJUGEMユーザーも同じだと思う。何故Latest Entries(Recent Entries:最新記事一覧)って「5件」までしか表示してくんないんだろうかと。どう考えても少なすぎるし、この件数を任意で設定できないのはいくらなんでも不親切過ぎるだろう。

で、結構ブログ初心者が勘違いしてそうなこととして「記事表示件数」の設定を変えているのに、全然表示件数増えないよ!って思っている人多いだろう。これは、あくまで「TOPページ上で記事を何件表示するか」という設定であって「リスト表示件数」ではないんだよね。

で、なんとかリスト表示件数増やせないかと思って調べてみたら、この「記事表示件数」を利用した結構トリッキーなカスタマイズをしている人がいたので、試してみた。

 

※参考サイト:[JUGEMブログ] 最近の記事 {latest_entry_list} 表示件数を増やす - ちか室の手記さま
 http://latena.jugem.jp/?eid=5


手順をソースごと書くのめんどいなあと思ったけど、参照ブログがいつ消えるかわからんし備忘録として残す価値はあると思うので、続きを読むにて記載します。

あー。でも「NEWマーク」消えちゃったなあ。。。まあいいか。
 

2:引用デザイン変更のCSSソース

 

blockquote {
    position: relative;
    padding: 10px 15px 10px 60px;
    box-sizing: border-box;
    font-style: italic;
    background: #f5f5f5;
    color: #777777;
    border-left: 4px solid #9dd4ff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 7px;
    left: 0;
    vertical-align: middle;
    content: "“";
    font-family: sans-serif;
    color: #9dd4ff;
    font-size: 90px;
    line-height: 1;
}

blockquote p {
    padding: 0;
    margin: 7px 0;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

 



3:「LATEST ENTRIESの表示件数を変える」手順

 

まず必要なのは以下の手順。

 

手順1:最近の記事リストを出力するテンプレートの作成
手順2:最近の記事リストを取得するスクリプトの記述

 

「別のテンプレートとの複合技!」ってことで、まずは「手順1」

 

管理者ページ【デザイン】⇒【テンプレート変更】にて、テンプレートを新しく作成【適応しているテンプレートを複製】する。したらば、作成したテンプレートのHTML全文を下記のようにする。

 

<!-- BEGIN title --> 
<!-- END title --> 

<ul> 
<!-- BEGIN entry --> 
<li><a href="{entry_permalink}">{entry_title} ({entry_month}/{entry_day})</a></li> 
<!-- END entry --> 
</ul> 

<!-- ad -->{ad}

 

<!-- ad -->{ad}は、絶対削除しちゃいけないやつ。てゆーか消そうと思っても消えない奴。

 

で、このテンプレートは一旦置いときます。

 

手順2:最近の記事リストを取得するスクリプトの記述

 

まず{latest_entry_list} の親要素にIDを付与する。

※下記HTMLはあくまで一例というか、このブログのものです。{latest_entry_list} の前後のIDも任意です。

 

<!-- BEGIN selected_entry -->
<h3>LATEST ENTRIES</h3>
<div class="sideContents" id="latest-entries">

 

次に{latest_entry_list} 以降の適当な場所に次のスクリプトを配置。どこにしようか迷ったら <!-- END latest_entry --> の直後がベター。「http://blogrider.tokyo/?tid=39」部分は、手順1:で作成したテンプレートのプレビューページのURLになります。

 

<script type="text/javascript"> 
<!-- 
(function () { 
  var xhr = (function () { 
    if (window.XMLHttpRequest) { 
      return new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
      try { 
        return new ActiveXObject('Msxml2.XMLHTTP'); 
      } catch (e) { 
        return new ActiveXObject('Microsoft.XMLHTTP'); 
      } 
    } 
  })(); 
  if (xhr) { 
    xhr.open('GET', 'http://blogrider.tokyo/?tid=39'); 
    xhr.onreadystatechange = function () { 
      if (xhr.readyState == 4) { 
        document.getElementById('latest-entries').innerHTML = xhr.responseText.slice(0, xhr.responseText.search('<!-- ad -->')); 
      } 
    } 
    xhr.send(null); 
  } 
})(); 
// --> 
</script>

 

以上により「設定」にて設定している「最近の記事表示件数」が、そのままLatest Entryの表示件数になります。増やしたい場合は、恐らくこの「最近の記事表示件数」を増やすことで、こっちも増えるものと思われる。

 

 

 

スポンサードリンク

コメント
コメントする








   
この記事のトラックバックURL
トラックバック