はてなブログ最新記事のもっと見るをボタン風にカスタマイズしようWEB関連の記事を気楽に書いています。2019.05.18こんにちわ。今回は、はてなブログの簡単なカスタマイズを記事にしたいと思います。記事の内容は、はてなブログサイドバーモジュールの最新記事に追加された「もっと見る」リンクのボタン風カスタマイズです。はてなブログでは有料版と無料版がありますが、ここで紹介するのは僕が運営している無料版のサイトで実際に検証した内容です。(両方レスポンシブ対応)検証したテーマは、テーマストアのBrooklyn(ブルックリン)とCONTENTS(コンテンツ)になります。優先タグ(!important)ありの場合はてなブログもっと見るボタンカスタマイズまとめはてなブログ最新記事リンクボタンのカスタマイズ2019年4月にはてなブログに追加された最新記事下の「もっと見る」リンクはデフォルトでは以下のようなテキストリンクです。シンプルすぎると思いませんか?ほかの見出しの様に少しおしゃれにしたいので、ボタン風デザインのコードを作ってみました。いっても、ネットで見つけた基本的なコードに、サイズ変更や細部のデザインを変更できるようにコードを付け足したものになります。シンプル系をわずか10種類ですが、どうぞ見ていってください(*^^*)トグル(プルダウン)内のコードにできるだけわかりやすく説明書き(コメントアウト)を書いてあるので、デザイン変更しやすいと思います。簡単なコードを設置するだけで、以下のようなボタン風のデザインに変更できます。この機能(リンク)は、サイドバーモジュールの設定で最新記事を何件まで表示させるかという設定に追加された機能で、例えば最新記事を5件表示させている場合でも、その下の「もっと見る」をクリックすることで記事一覧ページ(月別アーカイブ)へ移動できるというものです。カスタマイズコードを設置する場所ココで紹介するカスタマイズは、HTMLコードは編集せずにCSSコードの設置だけでボタン風デザインにカスタマイズできます。それではコードを設置する場所です。ダッシュボードか、記事作成画面のブログ名をクリックしてデザインという項目をクリックします。そのままデザイン⇒カスタマイズ(スパナマーク)⇒デザインCSSに貼り付けてください。デザインCSSをクリックするとコードを設置するスペース(枠)が広がるのでそこにコードを貼り付けるだけです。以前にカスタマイズコードを設置している場合は、そのコードの下に貼り付けます。前のコードとの間に空白スペース(行)を開けても問題ないので、一行か二行開けたほうが後々のカスタマイズ(貼り付け)の際わかりやすいかも。コードを貼り付けたら、「変更を保存する」⇒「ブログを確認する」の順にクリックしてください。「もっと見る」のリンク表示の切り替えもっと見るのリンクは、サイドバーモジュール内の設定で、表示と非表示を切り替えることができるので必ず表示設定を行ってください。コードを設置するだけでは反映されません。表示設定は、デザイン⇒カスタマイズ(スパナマーク)⇒サイドバーの最新記事編集と進んでください。編集というところをクリックすると編集画面がポップアップで表示されるので、「表示件数を超える場合、もっと見るリンクを表示する」のボックスにチェックをいれ、適用をクリックします。最後に画面上の「変更を保存する」を忘れずクリックしてくださいね。やることは、デザインCSSへのコードの貼り付けと、最新記事モジュールでの表示設定の切り替えだけです。デザインCSSへの設置とサイドバーモジュールでの設定の順番はどちらからでも大丈夫です。デザインCSSに一度コードを貼り付けてしまえば、サイドバーモジュールの表示設定切り替えだけで表示と非表示を切り替えできます。これから紹介するコードは、この記事を書きながらプレビュー画面でコードをコピーしてはてなブログに設置、検証しているのでうまく反映されると思います。うまく反映されない場合の対処法一例を、コード一覧の下に書いておきますので参考にしてください。最新記事「もっと見る」リンクのボタン風コード一覧(デモ付き)今回はシンプル系のデザインを10種類掲載しておきますのでマウスを置いてみてください。画像は変化しますがデモ画像なのでページは移動(リンク)しません。コードには、/*----------*/(赤文字)で説明書きがありますが、実際の画面表示には反映されない覚え書き(コメントアウト)なので一緒に貼り付けて大丈夫です。今回紹介したコードは僕が運営しているはてなブログ無料版のサイトで、実際に設置して表示を確認しています。デザイン変更の簡単なカスタマイズ(編集)ですが、他のカスタマイズコードと干渉したりしてうまく反映されないなどのトラブルには責任を持てませんのでご了承くださいませ(__)例えば僕が検証中に経験した例を1つ紹介しておきます。(のちに復旧しました)今回のCSSを追加する以前から、最新記事やカテゴリーのリンク色をCSSで指定していたんですが、今回のコードと相性が悪いのか、うまく反映されないんですよね。以下(赤枠)のコードと今回のコードの組み合わせではうまくいかないと思います。下(青枠)のコードとの組み合わせはうまく反映されたので参考までに。{color:#ff00ff;}以下のコードに書き換えたら、見出しのみ反映。今回のコードも指定通り反映しました。僕の場合うまくいっただけで、サイトに設置しているコードの配置によってはうまくいくかどうかわからないと思います。{color:#ff00ff;}上の様にコードを書き換えてもうまくいかない場合、手っ取り早い回避策としては、今回のコードに最優先タグの「!important」を記述するというのも一つの手だと思います。僕がうまく反映されなかったのは、マウスを置く前の文字色だけで背景やマウスを置いたときの色はうまく反映したので「!important」を付けたのは2か所だけです。(以下画像参照)※「!important」の多用は、あまり好ましくないのでどうしても思いどうりに反映させたい場合に使用するようにしてください。(らしいです)「!important」はコードの記述順に関係なく最優先されるので、今後のカスタマイズに影響する場合があります。#○○○○○○!important;というふうに最後の番号(アルファベット)とセミコロン(;)の間に記入します。!imprtantなしで試してくださいね。優先タグ(!important)ありの場合はてなブログもっと見るボタンカスタマイズまとめいかがでしたでしょうか。最新記事のもっと見るボタンの移動先は、月別アーカイブ(記事一覧)なので、トップページを記事一覧にしている方や、画像などで記事一覧ページへのリンクを設置している方にとっては必要ないカスタマイズかも。いえ、特に専門的な知識がなくても、簡単なコードを設置するだけでおしゃれにカスタマイズできるのでよければお試しください。今回大々的に参考にさせてもらったサイトは、ご存知サルワカサイトさんです。CSSで作る!押したくなるボタンデザイン100(Web用)HTMLとCSSのコピペで使えるボタンデザイン例を100個まとめました。立体的なものや、フラットWebデザインで使えるもの、SNSボタンまで。saruwakakun.comありがとうございました(__)今回もいつものように真夜中の記事作成だったんですが、この記事を公開するまで延べ5日間もかかってしまいました。(今日で6日目かも!)どうも記事作成のコツってやつがいまいちわかんないんですよね・・・。睡魔と戦いながらの作業はほんと効率悪いです.........ZZZ。(T_T)それではまた。コメントをキャンセルメールアドレスが公開されることはありません。*サイトプロフィールこんにちわ。建築系の自営業をしている既婚者です。自分で初めて作成したホームページで少しずつ集客できるようになってきたので趣味でブログをはじめてみようと思いました。ジャンルにとらわれない自由なブログにしたいと思っています。プロフィールこんにちわ。建築系の自営業をしている既婚者です。自分で初めて作成したホームページで少しずつ集客できるようになってきたので趣味でブログをはじめてみようと思いました。ジャンルにとらわれない自由なブログにしたいと思っています。7デザインカスタマイズ【シンプル3選】2019.12.152019.12.25楽天モーションウィジェットが動かないときの対処法【スマホ最適化】2019.10.242019.11.12アドセンスポリシー違反の対処法【違反画像と修正画像公開中】2019.10.082019.12.02【画像解説】ワードプレスCocoonのコメントフォームカスタマイズ基本編2019.10.052019.12.25ワードプレスCocoonのコメントボタンのカスタマイズ8選2019.09.302019.12.25Chromeの画面が真っ白!検索出来ないときの対処方は3クリックで解決2019.08.142019.08.27トレンドネタはアクセス数を稼げるのか?初心者が無料ブログで検証してみた2019.07.042019.07.12はてなブログにGoogleアナリティクスを導入しよう【画像解説】2019.07.032019.07.27。