Teaprog.com

とあるエンジニアの日々の記録。エンジニアと関係のないようなことも書きます。

ブログ作成

スマートフォン向けのサイトメニューの作成

目次 はじめに 参考記事 手順 CSSソースコード 貼り付ける場所 HTMLソースコード 貼り付ける場所 最後に はじめに このサイトでは、はてなブログを使用していますが、スマホでサイトを表示させると、以下の左の図のようにメニュー内の文字が収まらずにはみ出…

はてなブログで記事のURLを任意に設定

目次 はじめに 参考記事 一般的なURL設定 「設定」をクリック 「詳細設定」をクリック 「フォーマット」から形式を選択 標準形式の弱み 手順 URL設定時の注意 最後に はじめに 今回は、はてなブログにおいて記事のURLを任意のものに設定する方法を紹介させて…

はてなブログのスマートフォン表示のデザイン改善

イメージ図 目次 はじめに 参考サイト 手順 レスポンシブデザイン対応がある場合 レスポンシブデザイン対応がない場合 おまけ 最後に はじめに 今回は、はてなブログにおいて、スマートフォンでのこのサイトの見た目を良くするために、方法を調べて実践して…

グローバルメニューのカスタマイズへの第一歩

イメージ図 目次 はじめに 参考サイト 手順 HTMLコードの記述場所 表示結果 CSSコードの記述場所 表示結果 おまけ 自身での編集後の表示結果 変更した箇所 HTMLコード CSSコード 最後に はじめに 今回はサイト上で新たにグローバルメニューを作ろうと思いま…

ページ内リンク先へ滑らかに動かす方法

イメージ 目次 はじめに 関連する過去記事 手順 1.jQueryで実装する方法 ソースコード 2.CSSで実装する方法 ソースコード 最後に 参考記事 はじめに 今回は、ページないリンクをクリックした時に滑らかにスクロールするように設定してみました。 これを機に…

はてなブログでjQueryの動作確認

目次 はじめに JQueryとは 参考サイト 手順 前準備 簡単な動作確認 最後に はじめに 今回ははてなブログでJQueryを試しに実行してみました。 JQueryとは 私も勉強不足ですので、調べてみました。 JQueryはJavaScriptを書き方を簡単にするためのJavaScriptの…

はてなブログでの目次の作成方法

目次 はじめに 参考サイト 手順 おまけ 最後に はじめに 今回ははてなブログにおいて、簡単に目次を作成する方法について紹介してみようと思います。 今回ははてなブログに最初から備えられている目次作成用のツールを使用します。 以前の記事でも、HTMLで目…

はてなブログのバックアップの取り方

目次 はじめに 参考記事 手順 おまけ:復元するには 最後に はじめに 今回は、はてなブログのバックアップの取り方を紹介します。 万が一、ブログの内容が消えてしまえば、今まで積み上げてきたもの全てが水の泡...。 想像しただけでも背筋がヒヤリとします…

はてなブログの固定ページの活用方法

固定ページのイメージ 目次 はじめに 固定ページとは 固定ページを利用するには? 固定ページの作成方法 例:サイドバーへ貼り付け方法 最後に はじめに 前回の記事ではてなブログに問い合わせフォームを作成する方法を紹介させていただきました。 teaprog.c…

はてなブログに問い合わせフォームを作る

問い合わせのイメージ 目次 はじめに 参考記事 Google Forms 手順 問い合わせフォーム構成の設定 メール通知の設定 送信完了メッセージ設定 サイトに貼り付ける方法 無料プランの場合の注意 動作確認 最後に はじめに 今回は、このサイトに問い合わせフォー…

ブログ村に登録してみた

ブログを書くときの机周りのイメージ 目次 はじめに ブログ村とは? ポイントシステム 登録手順 会員登録の手順 ブログの登録手順 最後に はじめに 他の方々のサイトを参考にしていると、「ブログ村」と書かれたバナーが表示されている事が度々ありました。 …

CSSでリストの余白を作る方法

SDによる余白のイメージ 目次 はじめに HTMLコード(改善前) 表示結果 参考にしたサイト CSSコードの追加 HTMLコード(改善後) 表示結果 HTMLコード(別表記) 表示結果 最後に はじめに 記事を書いている際に、上のように目次という章を作成して、サイト…

パンくずリストのデザイン変更

パンくずリストのイメージ画像 目次 はじめに パンクズリストとは? 参考にしたサイト 実際に行った手順 CSSコード(引用) 表示結果 CSSコード(微アレンジ) 表示結果 最後に はじめに はてなブログにおいて、パンくずリストを少しデザインを変更しようと…

HTMLで目次を表示する方法

目次 はじめに 参考書籍 HTMLコードと表示例 HTMLコード(リスト表示.1) 表示例 HTMLコード(リスト表示.2) 表示例 HTMLコード(リストの階層表記) 表示例 HTMLコード(サイト内リンク) 表示例 HTMLコード(リスト+サイト内リンク) 表示例 最後に はじ…

はてなブログでのTwitterのタイムラインの表示方法

はじめに はてなブログにおいて、Twitterのタイムラインを記事のサイドに埋め込む方法を見つけましたので、共有したいと思います。 参考記事:https://www.gachatsuku.com/entry/2018/12/22/000000 目次 手順 HTMLコード取得 はてなブログ側での設定 表示す…

はてなブログでの独自ドメイン設定方法

内容 はてなブログにおいて、お名前.comで購入した独自ドメインを自身のブログのドメインとして設定する方法を紹介します。 ↓お名前.comでのドメインの購入についてはこちらの過去記事から。 teaprog.com はてなブログ側の設定 (1.〜3.) 1.「はてなブログP…

独自ドメインの取得方法

はじめに 今回、このサイトに将来性を持たせるため、はてなブログで決められたドメイン名ではなく、独自ドメインの取得に踏み切りました。 独自ドメインをまだ購入していない方にもご参考になればと思います。 取得方法は簡単ですので、自身のサイトやブログ…