アフィリエイト広告を利用しています

広告

posted by fanblog
<< 【雑談】あれ？もうのこり1/4？ | TOP | 【雑談】簡易NASを構築してみました【便利】 >>

【雑談】プルダウン式！よかったら参考にされてください

2021年09月11日

みなさま、こんにちはー(*´ω｀*)ﾉ
花です(*´ω｀*)

ちょっとブログのデザインをいじってみたのですが、どこをいじったのかお分かりになるでしょうか？(*´ω｀*)

ざつだん.jpg




分かりにくい変化ですが、月別アーカイブを表示するようにしてみました(*´ω｀*)

ただ、そのまま表示するとただ羅列するだけになってしまうので、プルダウン式にしてみました(*´ω｀*)

今回はそのやり方を紹介したいと思います(*´ω｀*)

ちなみに、参考にさせていただいたサイト様はこちらになります。

http://kingpcfx.seesaa.net/article/293667758.html

こちらのブログを見てもらったら分かると思いますが、seesaaブログの事かいてるやん！ ファンブログやないやん！ と思われると思いますが、このファンブログの書き方はseesaaと記述というかシステムがかなり似ているんです。

なので、こういったファンブログのシステムをいじる時はseesaaブログの記述を参考にさせてもらうんです。

で、さっそくやり方です。

こちらのサイト様のseesaaブログのやり方とほぼ一緒です。

①デザインのタブからコンテンツを開き、月別アーカイブのコンテンツを追加します。

②「コンテンツHTML編集」のところをクリックし、元々あった記述を消したうえで以下の記述をコピペ。

  1. <script language="javascript"type="text/javascript">
  2. <!--
  3. function ChangeArchive (sel) {
  4. if (sel.options[sel.selectedIndex].value != "") {
  5. location.href = sel.options[sel.selectedIndex].value;
  6. }
  7. }
  8. -->
  9. </script>
  10. <div class="sidetitle"><% content.title %></div>
  11. <div class="side" align="center" style="padding:10px 5px 10px 5px">
  12. <form method="get" action="">
  13. <select name="archive" onChange="ChangeArchive(this)" class="archiveselect">
  14. <option value="">【月別ログ】月を選択して下さい</option>
  15. <% content.header -%>
  16. <% loop:list_archives -%>
  17. <% if:archives.article_count -%>
  18. <option value="/自身のブログURLの「fanblogs.jp/」から後ろの部分/monthly/<% archives.createstamp | date_format("%Y%m") %>/"><% archives.createstamp | date_format("%Y年%m月") %>(<% archives.count | __or__ | echo('0') %>)</option>
  19. <% /if -%>
  20. <% /loop -%>
  21. </select>
  22. </form>
  23. <% content.footer -%>
  24. </div>



まず、大事なのは、赤色の部分、この部分がタイトル部分になります。
青色の部分は、初期表示の言葉です。
そして、特に大事なのがピンクの部分。
書いてある通りにしっかり編集してくださいね(*´ω｀*)


ちなみに、私の場合、自分のブログ用に下記のように編集しています。

  1. <script language="javascript" type="text/javascript">
  2. <!--
  3. function ChangeArchive (sel) {
  4. if (sel.options[sel.selectedIndex].value != "") {
  5. location.href = sel.options[sel.selectedIndex].value;
  6. }
  7. }
  8. -->
  9. </script>
  10. <h6 style="color: #888347; padding: 10px 5px 9px 35px; background: url(/_common/img/bg/100027/icon02.gif) 7px no-repeat #fff8d8; border-right: 2px solid #cccccc; border-bottom: 2px solid #cccccc; font-weight: bold; font-size: 12px;">月別アーカイブ</h6>
  11. <div class="side" align="center" style="padding:10px 5px 10px 5px">
  12. <form method="get" action="">
  13. <select name="archive" onChange="ChangeArchive(this)" class="archiveselect">
  14. <option value="">月を選択して下さい</option>
  15. <% content.header -%>
  16. <% loop:list_archives -%>
  17. <% if:archives.article_count -%>
  18. <option value="/flowersong/monthly/<% archives.createstamp | date_format("%Y%m") %>/"><% archives.createstamp | date_format("%Y年%m月") %>(<% archives.count | __or__ | echo('0') %>)</option>
  19. <% /if -%>
  20. <% /loop -%>
  21. </select>
  22. </form>
  23. <% content.footer -%>
  24. </div>



赤色の部分が、もともとあるタイトルのデザインをあえて消し、自分のブログ用に書き変えた部分です。
特に変更がなければ元々の記述のままでいいと思います。
青色の部分も、敢えて変更しています。
最後にピンクの部分ですが、私のブログのURLは「https://fanblogs.jp/flowersong/」なので、「https://fanblogs.jp/」から後ろの「flowersong」の部分を書いています。
ここはご自身のブログURLを見て変更してみてくださいね(*´ω｀*)
あと注意点として、頭の「/」とmonthlyとの間の「/」は必ずいるので、忘れないように気を付けてください(*´ω｀*)


これで、記述のミス等なければ「保存」をクリックすればしっかり反映されると思います(*´ω｀*)
くれぐれも、私のブログ用の記述の赤色部分はそのまま記述しないように気を付けてくださいね！
htmlやcssを知っている方ならわかると思いますが、この箇所は専用画像があるので、そのまま私のブログ用の方を記述しちゃうと同じようなタイトルは出ません＞＜



ということで今回は、ファンブログを利用している方のための記事でした(*´ω｀*)

では今回は、この辺でー(*´ω｀*)ﾉ

~~~ヾ(*'▽'*)o マタネー♪






【このカテゴリーの最新記事】
posted by 花 at 11:00 | Comment(0) | 雑談
この記事へのコメント
コメントを書く

お名前:

メールアドレス:


ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

月別アーカイブ
花のツイッター
プロフィール

20180227_213331-2.png

名前花
血液型Ａ
誕生日９月１３日
出身地福岡県
趣味ゲーム
×

この広告は30日以上新しい記事の更新がないブログに表示されております。