スポンサーサイト

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

フォトビューアー【SmartPhoto.js】

SmartPhoto.js
続きを読む >>

sliderを設置してみました【bxslider】

bxsliderを設置してみました

インデックスページのみトップページのみで表示される枠のタグ{toponly_dmy}にbxsliderを設置してみました。

続きを読む >>

投稿画像をウインドウで表示する【lightgallery】

lightgallery - cdnjs.com lightgallery - cdnjs.com 1lightgallery - cdnjs.com 2lightgallery - cdnjs.com 3

ブラウザ画面いっぱいに画像を表示する場合はlightgalleryがおすすめかもしれません。JUGEM(無料版)の場合は最大画像アップロードサイズが長辺1024pxなのでそのサイズが表示されているようです。

続きを読む >>

投稿画像をモーダルウインドウで表示する【lightbox2】

lightbox2 - cdnjs.com

大きなサイズの画像を記事に掲載してもやっぱりモーダルウインドウで表示したいと思ったのでlightbox2を組み込んでみました。こちらの方が.jsと.cssがlightbox2 - cdnjs.comにあるので簡単かもしれません。

続きを読む >>

投稿画像をモーダルウインドウで表示する【jquery.colorbox】

註:lightgallery導入後干渉しているのか同一ブログ内で動作しません

jquery.colorbox - cdnjs.com

大きなサイズの画像を記事に掲載してもやっぱりモーダルウインドウで表示したいと思ったのでcolorboxを組み込んでみました。

続きを読む >>

フッターの情報がを分ける【ドロワーメニュー】

ドロワーメニュー

フッターの情報が多いのでドロワーメニューを設置してみました。

続きを読む >>

テンプレート配布サイト【Talamh Tairngire】

Talamh Tairngire

フリーで配布されているテンプレートを参考にカスタマイズするのもいいかもしれません。配布テンプレートもきれいです。

ページャーの設定【テンプレート:ベーシック】

      <!-- BEGIN sequel -->
      <div id="entry-pager">
        <ul class="clearfix">
          <li id="entry-pager-prev-cursor">&laquo;&nbsp;</li>
          <li id="entry-pager-prev"><a href="{next_permalink}">{next_title}</a></li>
          <li id="entry-pager-top"><a href="./">TOP</a></li>
          <li id="entry-pager-next"><a href="{prev_permalink}">{prev_title}</a></li>
          <li id="entry-pager-next-cursor">&nbsp;&raquo;</li>
        </ul>
      </div>
      <!-- END sequel -->
/* ページャー */
#entry-pager {
    display: table;
    color: #ccc;
    padding-top: 35px;
    margin-bottom: 110px;
    border-top: 1px solid #ccc;
}
#entry-pager-prev {
    display: table-cell;
    width: 275px;
    max-width: 275px;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#entry-pager-top{
    display: table-cell;
    width: 130px;
    text-align: center;
}
#entry-pager-next {
    display: table-cell;
    width: 275px;
    max-width: 275px;
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#entry-pager-prev-cursor,
#entry-pager-next-cursor {
    display: table-cell;
    width: 10px;
}

text-overflow: ellipsis;で長いタイトルを省略表示している。

記事画像の表示【テンプレート:ベーシック】

テンプレートのHTMLを見ると下記の記述がある

<script type="text/javascript" src="http://imaging.jugem.jp/template/basic/js/img.js?20170301"></script>
続きを読む >>

記事ページ毎にソーシャルボタンを設置する【テンプレート:ベーシック】

記事ページ毎にソーシャルボタンを設置する

ブログ設定>基本設定>ブログの表示設定>ソーシャルボタン設定からも表示の設定が出来ますが独自タグを使って表示させます

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