メインカテゴリーを選択しなおす
JetThemeでトップページ・関連記事・ガジェット等の画像なし記事に専用のサムネイルを表示する【Blogger】
Bloggerテンプレート「JetTheme」で画像のない記事に自動でNo Image画像サムネイルを表示させる方法を紹介。トップページや記事検索結果画面、人気記事ガジェット、最新記事ガジェット、記事下の関連記事セクションに対応。
ブログデザインをJetThemeに変更。独自のカスタマイズも紹介
ブログデザインをJetThemeに変更しました。独自のカスタマイズとして、TwitterのアイコンをXのアイコンに変更する方法やダークモードで色を変更する方法、ブログ記事上のコメントアイコンをコメント数に関わらず表示する方法を紹介。
Bloggerブログへの汎用シェアボタン設置例【Web Share API】
Web Share API を使ってBlogger用に汎用シェアボタンを設置する方法を紹介。ボタンデザインはJetThemeおよびQooQに適合するものを紹介しています。
Bloggerブログのスマホ表示で右側に不要な余白ができたり画像が片側に寄ってしまう問題の修正方法を紹介。自動挿入されるmarginの指定が原因で、これらを削除することで解決します。公開記事全ての修正に便利な一括置換できるウェブツールも紹介。
【WordPress】ブログのトップページのデザインを変更してみた！
Screenshot こんにちは、鈴木俊吾（すずしん）です。 この度、ブログの環境を、自作のブログ作成ツールKraftからWordPressに変更したのですが…。新しい環境に変えると、ついやりたくなるのがデザインの変更ですよね！ というわけ
こんにちはです。あっちのそららです。本日、ブログデザインを改良したので、変更点などをまとめました。 ヘッダーイラスト ハンバーガーアイコン プロフィール キャラクターページ にほんブログ村バナー はてなブログタグ おわりに ヘッダーイラスト 静止画だったヘッダーイラストをアニメーションにしました。パソコンをカタカタ叩く動きで、作業感増し増しに。なお、ブログの見やすさを考慮し、ヘッダーイラストはこれまでと同様、トップページでのみ表示させています。 acchinosorara.hatenablog.jp ハンバーガーアイコン Before After ページ右上のハンバーガーアイコンを改良しました…
こんにちはです。あっちのそららです。コツコツ進めてきたブログカスタマイズのゴールが見えてきました。作る作る詐欺で引き延ばしてきたキャラクター紹介ページもとりあえず完成。某青い鳥のアイコンをXに変えたり、ヘッダーイラストの使い回しだったにほんブログ村のバナーを新規イラストにしたりと、現行のブログデザインを維持しつつ、所々パワーアップした仕上がりになりそうです。反映の日は近い。最後の難関、そり立つ記事。ビフォーアフターを交えつつ、カスタマイズ内容をコンパクトにまとめて記事にしてこそ、真のゴール。 JavaScriptは重くなるので、極力使わない縛り。 ランキング参加中イラスト
こんにちはです。あっちのそららです。キャラクター紹介ページの作成と並行して、ブログのカスタマイズを計画中。といっても、細部をちょこっと改良するだけで、全体的には現行のデザインを維持します。上の画像は、ヘッダーイラストの改良アイデア。現在は一枚絵ですが、あんな感じでカタカタやってるアニメーションにしてみたい。キャラクター紹介ページのレイアウトを考える。デザインはブログに合わせるとして、サクッと見れるよう文章はコンパクトにまとめる予定。各ページにリンクも追加しますが、キャラクターは増えていく前提で、かつ程よく目立つ枠にしたいのです。にほんブログ村のバナーが、ヘッダーイラストの使い回しなので、新規イ…
自作ブログのカスタマイズ：タグ検索機能の実装方法 スズシンラボ
自作ブログにタグ検索機能を追加しました。キーワードを入力すると、そのキーワードに一致するタグの記事を検索できるようになりました。この記事では、そのタグ検索機能の実装方法を紹介します。一般的な方法とは若干異なりますが、参考にしていただければ幸いです。
目次・見出しのデザイン変更、マーカー機能、カテゴリーのタイル表示、実際にこのブログでのカスタマイズについて。CSSコードあり。
ブログの誹謗中傷対策。Googleフォームをカスタマイズしてみた
Gmailに届いた問い合わせフォーム。何かと思って開けば悪質なコメント。ショックだよねぇ～送信元がわからないから余計に気持ち悪い。ブログのモチベーションも下がるよねぇ～続くようならグーグルに情報開示請求してみようと思う。その前にワンクッション、カスタマイズしてコメントを残すことにしてみた。
【覚えておきたい】WordPressで固定ページのみを納品する方法
お客様のトップページをリニューアルするお仕事第1弾！しかしWordPressで固定ページと画像のみの一部納品ってどうやるの？私のような超初心者デザイナーさんのために、記録を残しておきます。
【はてなブログ】トップページの表示をスマホ版のみ「リスト表示（並列）」にする方法
ブログの顔である『トップページ』、皆さんどう表示していますか？ 記事を大きく表示すると見やすい反面、一度に見える記事数は少なくなってしまいますね。。 そこで、今回はトップページ表示を「PCは カード型 / スマホは リスト型」にカスタマイズしてみたので、その方法をご紹介したいと思います。 ⚠️今回のカスタマイズは、私が現在利用中のはてなブログテーマ「Innocent」の製作者様、直々に作っていただいたコードになります。 どんな環境でも正常に動作するかは分かりかねますので、必ずバックアップを取っておきましょう。 💡この記事は、【はてなブログProでのカスタマイズ】を紹介しています。Pro版でしか…
楽天ルームの公式ロゴのバナーはあるのだろうか？という疑問があり調べました。どこにあるのかと、ブログへ貼り付ける方法を紹介します。
基本がわかる！SWELLでサイト型トップページをおしゃれにカスタマイズ
WordPressテーマ「SWELL」を使ってトップページをサイト型にカスタマイズする方法を完全解説します。固定ページの作り方、ブログのデザインをおしゃれにするために意識していること、ヘッダーやフッターのカスタマイズまで紹介しています。
SWELLでメインビジュアルにメニューやアニメーションを入れて個性を出そう
WordPressテーマSWELLでメインビジュアルをカスタマイズしてサイトの個性を出してみよう。サイズ・アニメーション動画・ブログパーツを使ったメニューの設定の方法を紹介しています。
【アレンジいろいろ】SWELLの投稿リストを使った記事一覧デザイン5選
WordPressテーマSWELLの高機能な「投稿リスト」ブロック。独自のカスタマイズで、記事一覧デザインのアレンジアイデアをたくさん紹介します。
WordPressテーマSWELLの高機能なブロックで、自分好みのHTMLサイトマップを自作しました。プラグインを使わず自作することによって、ユーザーの利便性を上げることができます。
SWELLブログパーツの使い方6選！便利すぎる利用例も全部見せます
WordPressテーマSWELLではブログパーツがとっても便利。使い回しもできるし、ウィジェットや記事内にも呼ぶことができます。6つの使い方を詳しく解説します。
ピンタレストとブログは相性が良い！連携してアクセスアップ【SWELL設定】
ブログのアクセスアップに、ピンタレストと連携する方法を解説。SWELLでの設定やブログの更新時に自動でピンを作成する設定も解説しています。
簡単でおしゃれ！Canvaを使ったブログのアイキャッチの作り方を解説
ブログのアイキャッチ画像をCanvaで簡単・おしゃれに作る方法を紹介。当ブログのアイキャッチもすべてCanvaで作成しています。テンプレートを使ったアレンジが1番簡単でおしゃれに仕上がりますよ。
簡単おしゃれに！ブログのヘッダー画像をCanvaで作る方法を解説
Canvaでブログのヘッダー画像を作る方法を解説。ブログの雰囲気にあったおしゃれなヘッダーロゴを作ってみよう。WordPressテーマSWELLでのヘッダー設定方法を紹介しています。
はてなブログのフォントを変更するカスタマイズを紹介。テーマ「Minimalism」向けのフォントを統一するカスタマイズも紹介しています。
はてなブログのテーマ「Minimalism」では、太字で設定した部分がスマホでは太字にならない現象があります。CSSで対処する方法を紹介しているので、お悩みの方は参考にしてください。
はてなブログのテーマUnderShirtでおこなったカスタマイズ一覧です。この記事ではトップページと記事内に関するカスタマイズをまとめています。
はてなブログの目次カスタマイズ！シンプル・おしゃれ・コピペOK
はてなブログのテーマ「UnderShirt」の目次を、よりシンプルに・自分好みにカスタマイズしました。CSSはコピペOKです。
はてなブログのデザインテーマ「Minimalism」のカスタマイズのまとめ。フォント関連、ヘッダー画像、フッターなど。
【はてなブログ-カスタマイズ】スマホ版のグローバルナビゲーションに検索機能を追加する（JavaScript・HTML・CSS対応）
スマホ版のグローバルナビゲーションに検索機能を追加してみました。以前「スマホ版のグローバルナビゲーションを設置する」対応をしています（以下リンク）。 今回はそれに検索機能を追加しました。miya-moto-blog.hatenablog.com元々ページの下の方に検索機能はあったのですが、スマホ版だとそこに辿り着くまで意外と遠いです。 今回の対応で、グローバルナビゲーションからいつでも検索できるようになりました。それではサクッと本題へ。
![はてなブログカスタマイズの記事まとめ（その8）[CSS、HTML、JavaScript関連]](https://img.blogmura.com/sites/1251975/post-images/62402677.webp/crop/435x435)
はてなブログカスタマイズの記事まとめ（その8）[CSS、HTML、JavaScript関連]
ブログカスタマイズに関する記事をいくつか投稿したので、まとめてみようと思います。 ちなみにブログカスタマイズの記事まとめは8回目です。これまでのまとめ記事はこちら。 これまでのブログカスタマイズ まとめ記事 ブログカスタマイズの記事まとめ（その1）[CSS/JavaScript/デザインテーマ] ブログカスタマイズの記事まとめ（その2）[CSS/はてなブログ関連/デザインテーマ] ブログカスタマイズの記事まとめ（その3）[CSS/HTML/JavaScript] ブログカスタマイズの記事まとめ（その4）[CSS/HTML/JavaScript/はてなブログ関連] ブログカスタマイズの記事まとめ…
【はてなブログ-カスタマイズ】スマホ版で追従する目次を表示する（JavaScript・HTML・CSS対応）
スマホ版で目次を常に表示するように対応してみました。 スクロールの度に目次が追従するようにしています。以前「追従する目次をサイドバーに表示する」対応をしています（以下リンク）。 今回はそれをスマホ対応したような内容です。miya-moto-blog.hatenablog.com上記の対応（PCサイズ）だとサイドバーがあるため、そこに目次を表示するようにしました。 今回の対応（スマホサイズ）だとサイドバーがないため、別の方法で目次を表示するようにしています。今回はその辺りに関して詳しく書いていきます。
【はてなブログ-カスタマイズ】見出しデザインをCSSで変更（4回目）
数日前から適用していますが、見出しのデザインを少し変更してみました。見出しデザインは何度か変更していて、今回の変更で4回目です。 これまので見出し変更の記事は、この記事の最後に関連記事としてリンクしておきます。それではサクッと本題へ。
【はてなブログ-カスタマイズ】最新記事（サイドバー）にある「もっと見る」リンクのデザインを変更（CSS変更）
数日前から適用していますが、「もっと見る」リンクのデザインを変更してみました。 「もっと見る」リンクは、サイドバーの最新記事に表示されているものです。「もっと見る」リンクがだいぶ簡素だなと思い、変更してみました。 ちょっとした変更なのですが、良い気分転換になりました。それでは本題へ。
【はてなブログ-カスタマイズ】右下に固定表示している「トップへ戻る」「HOME」ボタンのデザインを変更（HTML・CSS変更）
数日前から適用していますが、「トップへ戻る」「HOME」ボタンのデザインを変更してみました。 右下に固定表示しているボタンです。以前も「トップへ戻る」「HOME」ボタンは変更しています。 以下の記事で詳しく書いています。miya-moto-blog.hatenablog.com変更前はアイコンだけだったのですが、それぞれのボタンに名称を付け足してみました。他のサイトでもよく見かけるので、アイコンだけでどんな機能か示せている認識でいます。 ただちょっと変化をつけたいなと思い、カスタマイズしてみました。それでは本題へ。
【完全保存版】SWELLサイト型トップページをおしゃれにカスタマイズする方法を解説
WordPressテーマ「SWELL」を使ってトップページをサイト型にカスタマイズする方法を完全解説します。固定ページの作り方、ブログのデザインをおしゃれにするために意識していること、ヘッダーやフッターのカスタマイズまで紹介しています。
【はてなブログ-カスタマイズ】グローバルナビゲーションの不具合対応（z-index）（CSS対応）
以前、グローバルナビゲーションのデザインを大幅に変更しました。変更内容の詳細は以下の記事に書いています。 miya-moto-blog.hatenablog.com 上記の変更からしばらくして、グローバルナビゲーションに不具合があることに気付きました。 ちょっとした不具合なのでササっと修正してお終いにしても良かったのですが、せっかくなので不具合対応の内容を記事にしてみようと思います。 それでは、どんな対応をしたか書いていきます。
【はてなブログPro／Innocent】使ったカスタマイズまとめ ～初心者用～
2021年の11月から、ど素人ながらに始めた『さるぼろぐ』。大変ありがたい事に、 🙈「○○のカスタマイズはどうやっていますか？」 とお声かけいただく機会もわずかながら、増えてきました。（ありがとうございます！） 私自身も、「手探り＆遠回り」ばかりしながらここまで来たので、必要な情報を必要としてくれる方へ届けたい✨ という事で、今までに書いてきたカスタマイズ記事をまとめようと思います＾＾ これから、「はてなブログ、始めてみよう！」という方も、是非、参考にしてみてくださいね＾＾ ⚠️以下のカスタマイズは、はてなブログProでなければ上手くいかないものもありますので、無料版の方はご注意くださいね＾＾…
![はてなブログカスタマイズの記事まとめ（その7）[アイコン、HTML、CSS関連]](https://img.blogmura.com/sites/1251975/post-images/61390015.webp/crop/435x435)
はてなブログカスタマイズの記事まとめ（その7）[アイコン、HTML、CSS関連]
ブログカスタマイズに関する記事をいくつか投稿したので、まとめてみようと思います。 ちなみにブログカスタマイズの記事まとめは7回目です。これまでのまとめ記事はこちら。 これまでのブログカスタマイズ まとめ記事 ブログカスタマイズの記事まとめ（その1）[CSS/JavaScript/デザインテーマ] ブログカスタマイズの記事まとめ（その2）[CSS/はてなブログ関連/デザインテーマ] ブログカスタマイズの記事まとめ（その3）[CSS/HTML/JavaScript] ブログカスタマイズの記事まとめ（その4）[CSS/HTML/JavaScript/はてなブログ関連] ブログカスタマイズの記事まとめ…
【はてなブログ-カスタマイズ】見出しデザインをCSSで変更（3回目）
数日前から適用していますが、見出しのデザインを少し変更してみました。見出しデザインは何度か変更していて、今回の変更で3回目です。 これまでの見出し変更の記事はこちらです。miya-moto-blog.hatenablog.commiya-moto-blog.hatenablog.comそれではサクッと本題へ。
ブログのおススメ記事って、皆さんどのようにお知らせしていますか？ 人気のある芸能人のブログなら、新しい記事を書けば多くの人に見てもらえますが、私の様な一般ピーポー（ど素人）の記事なんて、更新したとて。。。💧 しかし！せっかく一生懸命に書いた記事！同じ事で困っている人に読んでもらいたい!! という訳で、この記事では、【おススメ記事をヘッダー下に表示する方法】を紹介したいと思います。 イチオシの記事を埋もれさせない様に、固定してみませんか？？ こんな人におススメ👍 ブログ初心者で難しい事は分からない ブログをカスタマイズしたい おススメの記事を、ヘッダー下に並べたい ワードプレスの様なオシャレなデ…
【はてなブログ-カスタマイズ】グローバルナビゲーションのデザインを大幅に変更してみる（CSS変更）
数日前から適用していますが、グローバルナビゲーションのデザインを大幅に変更してみました。自分のブログに適用しているのは「Silence」というデザインテーマです。 このデザインテーマ「Silence」の追加カスタマイズとして、グローバルナビの設置が可能です。Silenceで用意されているカスタマイズなので、手順に従うだけでお手軽にグローバルナビが設置できます。 当初はこれで満足していたのですが、徐々に自分なりのカスタマイズをしていくうちに全部イチからグローバルナビを作成したくなりました。ということで、イチから作成した内容が今回の記事となります。それではサクッと本題へ。
【はてなブログ-カスタマイズ】スマホ版グローバルナビゲーションのデザインを変更してみる
数日前から適用していますが、スマホ版のグローバルナビゲーションのデザインを少し変更してみました。 直近のブログカスタマイズはアイコン関連のものが多く、今回の記事もその流れです（直近のアイコン関連の対応は以下リンクにて）。 直近のブログカスタマイズ グローバルナビゲーションのデザインを変更してみる グローバルナビゲーションのアイコンを変更してみる（Font Awesome） サイドバーのアイコンを変更してみる（Font Awesome） せっかくFont Awesomeのアイコンが使えるというのと、スマホ版にもアイコンを使える余地があったなということで、変更してみた次第です。 それではサクッと本…
【はてなブログ-カスタマイズ】サイドバーのアイコンを変更してみる（Font Awesome）
数日前から適用していますが、サイドバーのアイコンを変更してみました。 今回の変更は、2日前のグローバルナビゲーションのアイコン変更と同じような感じです。miya-moto-blog.hatenablog.comせっかくFont Awesomeのアイコンが使えるので、サイドバーのアイコンも変更してみようと思った次第です。それではサクッと本題へ。
【はてなブログ-カスタマイズ】グローバルナビゲーションのアイコンを変更してみる（Font Awesome）
数日前から適用していますが、グローバルナビゲーションのアイコンを変更してみました。 グローバルナビゲーションは何日か前にもデザインを変更しています。 miya-moto-blog.hatenablog.com 上記記事の対応は概ね満足しているのですが、それっぽいアイコンがなかなか見つからなかったのが心残りでした。 今回はその心残りに対応した内容となります。 それではサクッと本題へ。
AFFINGER6導入でおしゃれでモテるサイトへ。インストール方法を【画像付き・詳細解説】！
この記事では、そんなお悩みをしっかり解決します！！ 正直 「1万円以上するから・・・」「無料テーマでもいいから・・・」 私もそんな風に慎重になっていましたが、使用してみて・・ 結論「本気で収益化したい
![はてなブログカスタマイズの記事まとめ（その6）[CSS、デザインテーマ関連]](https://img.blogmura.com/sites/1251975/post-images/60771127.webp/crop/435x435)
はてなブログカスタマイズの記事まとめ（その6）[CSS、デザインテーマ関連]
ブログカスタマイズに関する記事をいくつか投稿したので、まとめてみようと思います。 ちなみにブログカスタマイズの記事まとめは6回目です。これまでのまとめ記事はこちら。 これまでのブログカスタマイズ まとめ記事 ブログカスタマイズの記事まとめ（その1）[CSS/JavaScript/デザインテーマ] ブログカスタマイズの記事まとめ（その2）[CSS/はてなブログ関連/デザインテーマ] ブログカスタマイズの記事まとめ（その3）[CSS/HTML/JavaScript] ブログカスタマイズの記事まとめ（その4）[CSS、HTML、JavaScript、はてなブログ関連] ブログカスタマイズの記事まとめ…
【はてなブログ-カスタマイズ】グローバルナビゲーションのデザインを変更してみる
数日前から適用していますが、グローバルナビゲーションのデザインを少し変更してみました。変更した理由は、なんとなくの気分です。グローバルナビゲーションは全ページに共通するため、少しの変更でも意外と影響が大きく感じました。それではサクッと本題へ。
![【はてなブログ-カスタマイズ】画像ホバー時に強調表示する（CSS変更）[半透明/少し拡大/縁取り]](https://img.blogmura.com/sites/1251975/post-images/60421873.webp/crop/435x435)
【はてなブログ-カスタマイズ】画像ホバー時に強調表示する（CSS変更）[半透明/少し拡大/縁取り]
数日前から適用していますが、画像ホバー時（マウスを乗せた時）に強調表示するようにしてみました。色々なサイトを見ていると、画像ホバー時にデザインが変化するサイトをたまに見かけます。 それを自分のブログでもやってみたくなったので試してみました。ちなみに何案か作成しており、見送った案も含めて書いていきます。それではサクッと本題へ。
SWELLの投稿リストを使った記事一覧のデザインアイデア5選
WordPressテーマSWELLの高機能な「投稿リスト」ブロック。固定ページで使う際にリッチカラムブロックを使うとレイアウトの幅が広がります。私が今まで使ってきた記事一覧デザインのアイデアを紹介します。
