My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

JavaScript 初心者にもおすすめ 10分でできるテキストカウンター

今日は、JavaScriptでテキストカウンターを作ってみました。 普段文章を作っていて、 「今、どれくらいの文字数なんだろう?」 って思う時がありますが、そんな時にはこうしたテキストカウンターがあると便利です。文字数の入力に応じてリアルタイムに入力文…

Contact Form7のコンバージョン計測方法紹介

「Contact Form 7」とは、 WordPressにメールフォームを設置するためのプラグインです。 ja.wordpress.org 今日は、WordPressのプラグイン「Contact Form 7」 のコンバージョンをGoogle Analytics で計測する方法についてお伝えいたします。 Google Analytic…

ブロガー専用テーマ「SWALLOWスワロー」をインストールしてみました

ブロガー専用テーマ「SWALLOWスワロー」のご紹介 「ブログを書くことに集中できる!」とかねてより評判の高かったブロガー専用WordPressテーマ「SWALLOWスワロー」をインスールしてみました。 ブロガー専用WordPressテーマ「SWALLOWスワロー」とは 以下、販…

Google Spreadsheet でカラーコード表を作成する

今日は、Google Spreadsheet でカラーコード表を作成する方法についてお伝えします。デザイナーさんが作成したカンプをコーディングで再現する作業過程で「使われている色がカラーコード表でまとめられていたら良いのに」と思い、こちらの方法にたどり着きま…

さくらサーバーで既存WordPressブログを常時SSL化、「接続は保護されていません」解決法手順紹介

今日は、さくらサーバーで既存WordPressブログをSSL化した際に起こった以下エラーの解決法をご紹介します。《Chromeの場合》 《Firefoxの場合》 【エラー内容】 SSL適用後にもかかわらず、アドレスバーに鍵のマークが表示されない。 代わりに「このサイトへ…

WordPress 失敗あるある - URL 変更時の注意点

今日は、WordPressでやってしまいがちな失敗の一つとして、 サイトURLを間違って変更してしまった場合の問題と対処法についてお伝えしていきます。 今回のお話の背景 先日、友人のWordPressサイトが突然正常表示されなくなるという現象が発生し、相談を受け…

超簡単!WordPressインストールまで3分で完了!(XSERVER簡単インストール編)

今日は、XSERVER(エックスサーバー)でのWordPress簡単インストールについてご紹介します。 XSERVERの簡単インストール手順 1. サーバーパネルにログインします。 サーバーパネル - ログイン | レンタルサーバー【エックスサーバー】 2. 「簡単インストール…

WordPressクイックインストール手順紹介 (さくらインターネットサーバー編)

今日は、さくらインターネットサーバーでのクイックインストール手順についてご紹介します。 さくらインターネット クイックインストール手順 1. サーバーコントロールパネルへログイン さくらインターネットのサーバーコントロールパネルにログインします。…

さくらインターネットサーバーでお名前.comの独自ドメインを設定するまでの手順

さくらインターネットでWordPressを設置するにあたり、 さくらインターネットサーバーにお名前.comで取得した独自ドメインを設定する手順を備忘録としてまとめました。以下、ご参照くださいませ。 1. さくらインターネット側 1.1. サーバーコントロールパネ…

無料でお試し可能! ワイヤーフレームツール「Prott」を使ってみました

Prott公式サイト: https://prottapp.com/ja/ Webサイトの制作をする際、ワイヤーフレームをなるべく簡単にサクッと作れたらって思います。今日は、そんな時にお役立ちのツール、「Prott」を使ってみたので、ご紹介します。 ワイヤーフレームツール「Prott」…

コーディング不要!ホームページ作成サービス「グーペ」でカフェサイトを作ってみました

今日は、ホームページ作成サービス「グーペ」のご紹介です。ホームページ作成サービス「グーペ」を使ってカフェのサンプルサイト を作ってみました。 デモサイト ※上記デモサイトでは、無料テンプレートの使用のみ、 特別な加工は何もしていない状態です。 …

【WordPress】Jetpackによる自動投稿ツイートでTwitterカードの画像が表示されない場合の解決法

本日は、WordPressからのツイッター自動投稿についてです。 連携しているTwitterで表題の問題が発生したため、解決法を確認してみました。 問題の現象 jetpackプラグインでWordPress記事更新時にTwitter自動投稿を行おうとすると、その結果投稿されたツイー…

WordPressのサイトURLを変更するには

今日は、WordPressのサイトURLを変更する方法についてお伝えします。 WordPressサイトURL変更について たとえば、サーバーの任意ディレクトリ(フォルダ)にインストールしたWordPressに独自ドメインを設定したい場合など、このような手順でサイトURLの変更が…

XSERVERでWordPressをインストール後の「このWEBスペースへは、まだホームページがアップロードされていません。」エラーについて

エラーの現象について XSERVERにWordPressをインストール後、 トップページにアクセスすると、 「このWEBスペースへは、まだホームページがアップロードされていません。」というエラーにより、トップページがまったく表示されません。WrodPressのインストー…

テキストや要素を簡単に上下中央揃えするCSS

今日は、テキストや要素を簡単に上下中央揃え(縦位置中央揃え)したい時に使えるCSSのご紹介です。今回の方法は、 「display:flex;」と「align-items:center;」 を使うのがポイントです。 「display:table-cell;」や「 vertical-align:middle;」で縦位置中央…

【WordPress】海外有料テーマ「Massive Dynamic」を使ってみました

WordPressの海外有料テーマ「Massive Dynamic」を使ってみました。 公式サイトはこちら↓ Massive Dynamic - Business WP Theme & Visual Website Builder ※ 以下画像の「Try Free」からメールアドレスを登録すると、実際の操作感覚が体験ができます。 販売ペ…

「Sourcetree」でGitデビューしました!

遅ればせながら、先日ようやくGitデビューしました。 ということで、以下、簡単ですが、Gitについてのご紹介です。 Gitとは Gitとは、 分散型バージョン管理システム(※1)のことです。 プログラムのソースコード管理にとても便利な仕組みであるため、いまや、…

WordPressに追加したjQueryが効かない、その対処法は?

先日作成したパラメータ引き継ぎスクリプトをWordPressにも流用しようとしたところ、まったく機能しない。 デバッグしてみるも、スルー。 コードは合っているはずなのに、なぜだろう?ということで、原因と解決策を調べてみました。ちなみに、先日のパラメー…

Scssコンパイル時のエラー「Invalid Windows-31J character」 原因と解決策は?

「Invalid Windows-31J character」 エラーって? 発生プロセス Webページ追加に伴い、scssファイルを新規作成、 いつものようにコンパイルしようとしたところ、エラー発生。 症状 以下、その際 Sass プリプロセッサーである Koala で出力されたエラーメッセ…

【Amazon タイムセール】Web制作参考書籍もお買い得 ( 3/25 23:59まで)

ただいま kindle書籍がお買い得です。 個人的には、やっぱり本は紙が好き。 ただ、セール中のkindle本、紙の書籍に比べて相当格安で購入できます♪ (紙書籍の半額以下のkindle書籍も多数あり) それに電子書籍なら場所も取らないし、検索もできるのが利点!…

【JavaScript】パラメータ引き継ぎ用JSを作りました(第2弾)

今日は、パラメータ引き継ぎ用のJavaScript第2弾を作成しました。【関連記事】 times-diary.hatenablog.com ちなみに、 パラメータとは?と思われた方は、 こちらの記事が参考になると思いますよ。↓ getパラメータ/クエリーストリングとは? « アクセス解析Q…

CSSで実装するタブメニュー (3)

今日は以下記事を参考にさせていただき、少しアレンジしてCSS + JS で実装するタブメニューを作ってみました。[ 参考記事 ] coliss.com 今回Demoに実装したコードは、以下の通りです。[ HTML ] <html> <head> <meta charset="utf-8"> <title>Tub</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <h1>タブメニュー</h1> <div class="box"> </div></body></html>

今見ているサイトをTwitterで即シェアできるChrome拡張機能「JustTweetボタン」

JustTweetボタン今日は、こちらのChromeアドオンをご紹介いたします。この拡張機能を使うと、 見ているページにTwitterシェアボタンがない場合でも即シェアできます。たとえばこんな感じで。 使い方は、これだけ 1. こちらの拡張機能をChromeウェブストアで…

【WordPress】"Powered by STINGER" が消せない問題 (StingerPlus2)

WPテーマ「StingerPlus2」でWordPressサイトを作ってみたところ、ページフッター箇所のクレジットが消せなくて困るという問題が発生。 ↓ こんな感じでクレジット表記が。。。 <p class="copyr" data-copyr="">Copyright© "サイト名" , 2018 All&ensp;Rights Reserved Powered by <a href="http://manualstinger.com/cr" rel="nofollow">STINGER</a>.</p> で…

便利なテキスト比較ツール 「difff デュフフ」のご紹介

本日は、便利なテキスト比較オンラインツール 「difff デュフフ」をご紹介させていただきます。公式サイト: difff《デュフフ》 このツールは、2004年からあり、私も数年前から愛用させていただいております。 ブラウザでサクッと手軽に使え、必要なら、一時的…

【はてなブログカスタマイズ】階層型グローバルメニューを設置してみました

階層型グローバルメニュー設置 本はてなブログに階層型グローバルメニューを設置してみました。 実装にあたりましては、こちらのゆきひーさんのブログ記事を参考にさせていただきました。 www.yukihy.comゆきひーさん、 大変参考になりました。 情報のご提供…

【お得情報】無料 商用利用可能フォント(2/26まで)

これはお得ですね~♪情報発信元は、コリスさん! コリスさん、いつも有益な情報をありがとうございます!まだの人はお忘れなく!これは嬉しい!Webデザインや同人誌に使える有料フォント約11,000円分が期間限定で無料ダウンロードできますhttps://t.co/oo9sl…

はてなブログにメールフォームを設置してみました

はてなブログにメールフォームを設置してみました。 今回メールフォームに使用したのは、忍者ツールズです。以下、その手順をお伝えいたします。 忍者ツールズメールフォーム設置方法 1. 忍者ツールズにログインします。2. メニューから、「その他」-「メー…

【はてなブログカスタマイズ】メニューバーを設置しました

本はてなブログをカスタマイズ、 ヘッダにグローバルメニューを設置してみました。 はてなブログ グローバルメニュー設置 コードは以下の通りです。[html] 以下HTMLを管理画面「デザイン」>「カスタマイズ」>「ヘッダ」の「タイトル下」に入力します。 <div id="menubar"> <ul> <li><a href="http://times-diary.hatenablog.com/" title="ホーム" >ホ</a></li></ul></div>…

【Bootstrap】無料で使えるBootstrapビルダー「Pingendo」のご紹介

今日は、Bootstrap4 ベースのビルダー「Pingendo 」をご紹介します。このツールを使うことで、プロトタイプ用のWebサイトがサクサク作れますので、オススメです。 作業は部品選択などの直感的操作で進められますし、スタイリッシュなサイトがあっという間に…