トップページ > 記事閲覧
【雑談】ページ移動用ボタンのテンプレ提供
投稿日 | : 2021/04/11(Sun) 15:41 |
投稿者 | : Yujiro |
参照先 | : |
ページ移動用ボタンのテンプレを貼っておきます。
ひとつのテーマで数ページにわたる記事を書くことがあります。
このとき使われるのが記事最下部にある「ページ移動ボタン」。
==========================
▼こんなのです
[←][1][2][3][4][→]
==========================
HAIKのボタンとリンク機能で簡単に書けますが、実作業は意外に面倒。
そこで「4ページ用」ではありますが、テンプレになるものを作って掲示しておきます。
適宜改造してお使いください。
なんの工夫もない単なるリンクです。
世間にはjavascritを使った高度なものもありますが、こちらは極めてシンプルなもの。
=====
・chapter-1〜4の記述がリンク先のページ名となります。適宜変更してください。
・ボタンサイズは最小の「xs」。このサイズで4ページ分だとかなり小さい画面のスマホでも収まります。
・左右矢印ボタンは https://fontawesome.com/icons?d=gallery&p=2 から借りています。
・今いるページのみボタンカラーを変え、見ているページを知らせています。
・1ページ、4ページは片側行きの矢印ボタンを廃しています。
=====
1〜4各ページに対応するページ用のコードを貼り付ける
//■1ページ用
CENTER:&button(,xs,info){1}; &button(chapter-2,xs){2}; &button(chapter-3,xs){3}; &button(chapter-4,xs){4}; &button(chapter-2,xs){&icon(fa,angle-right); };
//■2ページ用
CENTER:&button(chapter-1,xs){&icon(fa,angle-left); }; &button(chapter-1,xs){1}; &button(,xs,info){2}; &button(chapter-3,xs){3}; &button(chapter-4,xs){4}; &button(chapter-3,xs){&icon(fa,angle-right); };
//■3ページ用
CENTER:&button(chapter-2,xs){&icon(fa,angle-left); }; &button(chapter-1,xs,){1}; &button(chapter-2,xs){2}; &button(,xs,info){3}; &button(chapter-4,xs){4}; &button(chapter-4,xs){&icon(fa,angle-right); };
//■4ページ用
CENTER:&button(chapter-3,xs){&icon(fa,angle-left); }; &button(chapter-1,xs,){1}; &button(chapter-2,xs){2}; &button(chapter-3,xs){3}; &button(,xs,info){4};
これらのコードを貼り付けると以下のように(サンプルは2ページ目)
Re: 【雑談】ページ移動用ボタンのテンプレ提供
投稿日 | : 2021/04/15(Thu) 16:05 |
投稿者 | : Yujiro |
参照先 | : |
私の場合、文書管理アプリみたいなものによく使う書き方を保存しています。
文書タイトルにパーツの機能を書き、文書本文にコードを書きます。
タイトル一覧から必要な機能を選択し、文書本文からHAIKにコピペします。
小さな単発のプラグインは単純に辞書登録ですね。
Re: 【雑談】ページ移動用ボタンのテンプレ提供
投稿日 | : 2021/04/13(Tue) 18:22 |
投稿者 | : いしまる◆vOmCuTAP2Tw |
参照先 | : |
HAIKの編集時のツールボックスに機能を追加できると、
よく使うような定型文をワンクリックかツークリックで
本文に挿入(貼付け)できて編集の効率アップ出来そう
なのですが・・・。JavaScriptを編集しないとだと
思いますが、挑戦された方はいらっしゃいませんか。
少し調べたらわかるのかな。