「次の投稿」ナビを上部に移動する: Blogger Next post Previous post upper side.

次の投稿」前の投稿」にページタイトルを表示すること、
次の投稿」を次の記事」に変更すること、
はできた。

Bloggerの「次の投稿」にページタイトルを表示するには?
次の投稿を「次の記事に」変えるには?

今度はこれをもっと上の方に表示したい。
記事の上に表示したい。
それを試みたが、記事の上にはかなわず、記事の直下、コメントフォームの上には移動できた。

記事の直下に配置できた。

その手順は次の通り。

Step 0  上記、Bloggerの「次の投稿」にページタイトルを表示するには? の作業が完了している前提で。

Step 1  Blogger account にログインし、  Blogger ダッシュボードに行く

Step 2 Template -> HTMLを編集に行く。

Step 3  Ctrl+F で   <data:post.body/> を検索見つける。

 2~3個見つかるかもしれないが、2個めに移動。

Step 4 <data:post.body/> の直後に次のコードを挿入する。

  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>次の記事 &#187;&#187;</a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>&#171;&#171; 前の記事</a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>

  <div class='clear'/>

Step 5 既存の「次の投稿」リンクを隠す。前記Step4で挿入したコードがテンプレートの上の方にあるので、見つける。<div class='blog-pager' id='blog-pager'> を検索。

Step 6 これをコンディションタグで隠す。

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    ここに前記コードを配置する。
 </b:if></b:if>

例えば、次のようになる。

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <div class='blog-pager' id='blog-pager'>
     <b:if cond='data:newerPageUrl'>
       <span id='blog-pager-newer-link'>
       <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
       </span>
     </b:if>
     <b:if cond='data:olderPageUrl'>
       <span id='blog-pager-older-link'>
       <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
       </span>
     </b:if>
     <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
     <b:if cond='data:mobileLinkUrl'>
       <div class='blog-mobile-link'>
         <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
       </div>
     </b:if>
 </div>
 </b:if></b:if>



Step 7 テンプレートを保存する。
Step 8 スタイルを整えるには、次のようなCSSコードを、テンプレートに追加する。

/* 前の投稿・次の投稿 */
#blog-pager-newer-link {
float: right;
text-align: right;
padding: 0.2em 10px;
}
#blog-pager-older-link {
float: left;
text-align: left;
padding: 0.2em 10px;
}
#blog-pager-newer-link:hover {
background-color: #ffffcc;
}
#blog-pager-older-link:hover {
background-color: #ffffcc;
}
.blog-pager a {
background-color: transparent;
font-size: 25px;
}
.blog-pager span {
border-style: solid;
border-width: 3px;
border-color: #004d00;
width:240px;
}
#blog-pager-older-link-title {
font-size: 16px;
}
#blog-pager-newer-link-title {
font-size: 16px;
}

  • このサイトに新規記事を投稿する時、同時に Facebook にも投稿するように設定している。 Next Scripts: Social Networks Auto Poster  というプラグインを利用している。 Social Networks Auto Poster {SNAP} – Free plugin for WordPress - NextScriptsSNAP can publish nicely formatted messages to your social networks accounts. You can reach the most audience and let all your friends, readers and followerNextScripts&...
  • WordPress では、タグクラウドにそれぞれのタグの投稿記事数が表示されないのが標準であるが、時に投稿数が表示されているものもみかける。 どうすれば記事数を表示できるのか、調べてみたが、これがなかなかすんなりいかなかった。 最終的には2つの方法を見つけた。 1. Simple Tags プラグインをインストールする。 (既にインストールされていた。)    Tag Cloud 設定画面で次のように (%tag_count%) と加筆する <a href="%tag_link%" id="tag-link-%tag_id%" class="st-tags t%tag_scale%" title="%tag_count% topics" %tag_rel% style="%tag_si...
  • Bloggerの「人気の投稿」ガジェット (=WordPressの popular posts) に表示されている記事の中に表示したくない記事がある場合、次のように除外設定をすることができる。 Step 1  Blogger account にログインし、  Blogger ダッシュボードに行く Step 2 テンプレート -> HTMLを編集に行く。全選択+コピーしてバックアップしておく。 Step 3  次のコードを見つける。 <b:includable id='main'>   <b:if cond='data:title'><h2><data:title/></h2></b:if>   <div cl...
  • FlexSlider は Celtispack プラグインパック に含まれていて、画像ギャラリー作成時に、FlexSlider を選択できる。 このサムネイルが70x70pxで小さいので大きくする方法を探ってみた。 /DocumentRoot/wp-content/plugins/celtispack/modules/celtis-gallery-slider/ にある、celtis-gallery-slider.php を次の様に変更する。 赤字のsmall を好みの大きさのサムネイルの通称に変更すれば良い。  diff celtis-gallery-slider.php celtis-gallery-slider.php.back 80c80 < 'size' => 'thu...
  • Blogger からKusanagi-WordPress への移転が完了し、一段落したので、これまでの経緯を振り返り、次回のためのマニュアルとして記す。 BloggerからWordPressに移行決定。 Bloggerでも独自ドメインで運用していた。 WordPressでも同一ドメインで運用する。 使用中のお名前コムのVPSでセットアップ+インポートしてみたが、Blogger Importer Extended でのデーター削除+再インポートの試みが成功せず、Kusanagiサーバーを試してみる良い機会とした。 Kusanagi-WordPressが使えるサーバーを探す。 システム構成: WordPress 4.3 (KUSANAGI専用プラグイン同梱) ・CentOS 7・N...
  • Blogger に表を挿入するには、ExcelよりもGoogleDoc Spreadsheets からコピペした方が、書式が反映されやすい。 バンコクでミャンマーVISAをとるにはバンコクでミャンマーVISAをとるには3日かかる。1日目、ミャンマー大使館に午前9時から12時までの間に行く。写真2枚、パスポートのコピーが必要。館内でコピーできる。12時間際にギリギリついたら入れてもらえたが、待ち時間が長く、最後の最後になった。翌々日に取りに来いという引換券。カウンタ番号2に指定されている。13時30分に取りにいく。ここでも1時間は行列で待たされる。近くのビルにコワーキングスペースがあって、カフェ-がある。冷房効いてるので待機するのに良い所。信旅
  • 今時のCMSを調べてみると、Wordpress の他に、Concrete5 、Modx、Drupal 等があった。Concrete5 を使ってみることにした。 お名前コムVPS、CentOS Linux 7.1 +Webmin1.770+Mysql5.5.44+PHP 5.4.16 にConcrete5 をインストールしてみたら成功した。 めったにデーターベースの作成など、Mysqlをいじらない人にとっては、データーベースの作成、設定が一番とっつきにくいと思う。次の手順を踏めば簡単である。基本的にwordpress インストールの時と同じである。1. Mysql データベースの新規作成、ユーザー設定 いろいろな方法があるが、Webmin コントロールパネルから作成する。Web...
  • 支那ブロック回避対策でBloggerから引っ越しを検討する際に、あらためてVPSサービスの現状を調べてみた。 rootでログインできる自前サーバーである。 現在はお名前.com VPSを使用して、wordpressでサイト運営している。     これまで、アメリカのVPS、Osukini VPS、ServersMan@VPS、お名前.com VPS と経由してきた。 Osukini VPS はサービス中止で強制移転 DTIの ServersMan@VPS は変な制限が多くて使用に耐えない。DTIはSIMカードも悪どい儲け主義で辟易する。 DTI の ServersMan@VPS には変な制限がある ServersMan SIM Unlimited はボッタクアプリ   現在のお名前.com ...

blogger カテゴリ人気記事 Views most

blogger・ブログ カテゴリ人気記事 月間

タグ関連記事

閲覧履歴

    //cookieが無い場合の処理