メインカテゴリーを選択しなおす
ブログリニューアル進捗状況【4】:WordPress用phpファイル、9割移行終了
テーマに沿ったWebデザインに一新しちゃおう計画の「進捗状況その4」をご報告します。今回はphpのテンプレートがほぼ完成したお話になります!
自作ブログのカスタマイズ:タグ検索機能の実装方法 スズシンラボ
自作ブログにタグ検索機能を追加しました。キーワードを入力すると、そのキーワードに一致するタグの記事を検索できるようになりました。この記事では、そのタグ検索機能の実装方法を紹介します。一般的な方法とは若干異なりますが、参考にしていただければ幸いです。
ブログリニューアル進捗状況【3】:全テンプレートのhtml/css/jsのコーディングが完了
テーマに沿ったWebデザインに一新しちゃおう計画の「進捗状況その3」をご報告します。今回はコーディング完了記念にデモサイトを一時公開。リニューアル後は消えてしまうので、今だけ特別に!
ブログリニューアル進捗状況【2】:汎用ページhtml/cssのコーディングが8割完了しました
ブログオープンして数か月。ユーザー様に共有したい記事の方向性も徐々に明らかになってきました。かくなる上はテーマに沿ったWebデザインに一新しちゃおう計画の「進捗状況その2」をご報告します。
ブログリニューアル進捗状況1:Web設計と画像の書き出し完了しました
ブログオープンして数か月。ユーザー様に共有したい記事の方向性も徐々に明らかになってきました。かくなる上はテーマに沿ったWebデザインに一新しちゃおう計画の「進捗状況その1」をご報告します。
こんにちはです。あっちのそららです。今回は、HTMLとCSS(ウェブ制作などで使う言語)で、太陽を描画してみました。「Result」で確認できます(レスポンシブ対応済)。 See the Pen Untitled by あっちのそらら (@acchinosoraranocode) on CodePen. 静止画だとシンプルすぎて味気なかったので、遊び心でアニメーションも加えました。ギザギザ部分は、複数の正方形をつなげて再現。円周上に並べるため、三角関数を使用したので、ざっくり解説します。 正方形を描画する spanタグで正方形を作ります。数が多いほどギザギザが細かくなりますが、見た目のバランス…
ほゆむんこんにちは「ほゆむん」です😊いつもいいね、フォロー、リブログ、コメントありがとうございます励みになります🥰今回は番外編のひとりごとです詳しい自己紹…
ほゆむんこんにちは「ほゆむん」です😊いつもいいね、フォロー、リブログ、コメントありがとうございます励みになります🥰今回は番外編のひとりごとです詳しい自己紹…
ほゆむんこんにちは「ほゆむん」です😊いつもいいね、フォロー、リブログ、コメントありがとうございます励みになります🥰今回は番外編のひとりごとです詳しい自己紹…
ほゆむんこんにちは「ほゆむん」です😊いつもいいね、フォロー、リブログ、コメントありがとうございます励みになります🥰今回は番外編のひとりごとです詳しい自己紹…
あまりにもひどいコードに驚愕してしまいますね。ツッコミどころ満載でどこから説明したらよいかわからないほどです。今回は筆者が適切だと思うコードで記述していきます。 << 参考例 >> ブログが好き! ムラゴン あなたも今日からブログを始めてみませんか? ブログは誰でもカンタン...
【JavaScript】パスワードを入力してページ遷移をさせる方法
この記事ではJavasscriptでパスワードを入力してページ遷移をさせる方法についてご紹介しています。特定のユーザーのみに表示を許可したい場合に、ベーシック認証等を設定する事が多いですが、サイト規模や場合によってはJavasscriptで簡単に実装できる事もありますので、是非一度試してみてください!
今回も『WebARでシューティングゲーム』で使っているやり方ですが 自分用覚書きです ARに必要不可欠 背面カメラの映像を取得する方法です <html> <head> <style> .v-case { left: 0; right: 0; top: 0; bottom: 0; margin: 0 auto; width: 100%; } .v-cover { position: relative; overflow: hidden; width: 100%; height: 100vh; background: url(img/video.jpg) no-repeat center cent…
ブログをはじめて もうすぐ3年。 ブロックエディタの使い方を改めて知る
ブログをはじめたころは、ブログを開設することと記事数を増やすことで手一杯でした。ネット上で得た情報で設定を済ませて書き始めたものの、細かいところまで気を配れませんでした。 HTML いつの頃からか、楽
【JavaScript】カラフルなオリキャラをランダムに描画する
こんにちはです。あっちのそららです。前回、HTMLとCSS(ウェブ制作などで使う言語)で、オリキャラを描画しました。 acchinosorara.hatenablog.jp 今回はそのアレンジで、大量のオリキャラをランダムに描画するコードを書いてみました。「Result」で確認、右下の「Rerun」で再描画できます。描画はランダムなので、毎回違った結果になります。 See the Pen Fairy-rain by あっちのそらら (@acchinosoraranocode) on CodePen. JavaScriptで乱数を生成、かつ値が被らないようにし、下記内容をランダムに設定しています…
【はてなブログ-カスタマイズ】スマホ版のグローバルナビゲーションに検索機能を追加する(JavaScript・HTML・CSS対応)
スマホ版のグローバルナビゲーションに検索機能を追加してみました。以前「スマホ版のグローバルナビゲーションを設置する」対応をしています(以下リンク)。 今回はそれに検索機能を追加しました。miya-moto-blog.hatenablog.com元々ページの下の方に検索機能はあったのですが、スマホ版だとそこに辿り着くまで意外と遠いです。 今回の対応で、グローバルナビゲーションからいつでも検索できるようになりました。それではサクッと本題へ。
はてなブログカスタマイズの記事まとめ(その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イラスト】発光するオリキャラのアニメーションを作ってみた
こんにちはです。あっちのそららです。今回は、HTMLとCSS(ウェブ制作などで使う言語)で、オリキャラのアニメーションを作ってみました。「Result」で確認できます(レスポンシブ対応済)。 See the Pen Shine-Fairy by あっちのそらら (@acchinosoraranocode) on CodePen. アニメーション用の正円を作り、大きさや不透明度を徐々に変化させることで、発光を表現しています。また、正円は同じものを3つ重ね、各々のアニメーション開始のタイミングをずらし、波紋のような動きにしました(下記参照)。 正円1のアニメーションを開始 正円1の開始から0.3秒…
【はてなブログ-カスタマイズ】右下に固定表示している「トップへ戻る」「HOME」ボタンのデザインを変更(HTML・CSS変更)
数日前から適用していますが、「トップへ戻る」「HOME」ボタンのデザインを変更してみました。 右下に固定表示しているボタンです。以前も「トップへ戻る」「HOME」ボタンは変更しています。 以下の記事で詳しく書いています。miya-moto-blog.hatenablog.com変更前はアイコンだけだったのですが、それぞれのボタンに名称を付け足してみました。他のサイトでもよく見かけるので、アイコンだけでどんな機能か示せている認識でいます。 ただちょっと変化をつけたいなと思い、カスタマイズしてみました。それでは本題へ。
JavaScriptさわってみる12回目(((´・ω・`))) 多重ループと多次元配列、表作成
こんにちは。 ひっさしぶりの”JavaScriptさわってみる企画"です。 前回、アイテムの組み合わせを考える記事を書いて、それをリスト化するってことでEXCELのVBAコードを急に載せたのですが折角だからEXCELを持ってない人でも使えるようにJavaScriptで作ってみようかと思いました(ページは作成中)。 前回の記事↓ JavaScriptさわってみる企画では前回の記事のVBAでやっているような多重ループを用いたことがなかったと思うので先にメモ書きを作っておこうと思います。 それに加えてJavaScriptでは表を作成する必要があるので値を管理しやすくするために多次元配列についても書い…
はてなブログカスタマイズの記事まとめ(その7)[アイコン、HTML、CSS関連]
ブログカスタマイズに関する記事をいくつか投稿したので、まとめてみようと思います。 ちなみにブログカスタマイズの記事まとめは7回目です。これまでのまとめ記事はこちら。 これまでのブログカスタマイズ まとめ記事 ブログカスタマイズの記事まとめ(その1)[CSS/JavaScript/デザインテーマ] ブログカスタマイズの記事まとめ(その2)[CSS/はてなブログ関連/デザインテーマ] ブログカスタマイズの記事まとめ(その3)[CSS/HTML/JavaScript] ブログカスタマイズの記事まとめ(その4)[CSS/HTML/JavaScript/はてなブログ関連] ブログカスタマイズの記事まとめ…
全部にピンクのマーカー 上半分薄くなったピンクのマーカー 文字半分にピンクのマーカー 文字の下にピンクのマーカー 赤のマーカー 紫のマー...
このページでは、HTMLとCSSのみで要素の表示非表示をクリックやタップで切り替えられる方法についての覚え書きをまとめています。 デモはこんな感じ。 DEMO 映画やゲームの感想...
見出し線や枠を入れるだけでページがぐっと読みやすくなりますよね。 ここではCSSは使わずにHTMLに貼り付けるだけで簡単に作れるシンプルで使いやすい【見出しデザイン】をご紹介します。
普段こうやってブログの更新をするときは、Markdownを使っています。 一時期ははてな記法とやらも使っていたのですが、Markdownの方が汎用性が高く、簡潔で分かりやすいためこっちのほうが良いと思います。 見た目の整形を執筆と同時進行で行えるというのも魅力的ですし、全体で統一した記述をすれば、あとから記事を修正したり更新したりするときに非常に楽になります。 「見たまま」設定は便利といえば便利ですが、正直言って見た目の調整はより正確なプレビューを使いますし、「見たまま」設定でHTMLコードを貼り付けても、HTMLとして認識してくれないので、これが地味に不便なのです。 しかし、Markdown…
【はてなブログ-カスタマイズ】グローバルナビゲーションのデザインを大幅に変更してみる(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 上記記事の対応は概ね満足しているのですが、それっぽいアイコンがなかなか見つからなかったのが心残りでした。 今回はその心残りに対応した内容となります。 それではサクッと本題へ。
こんにちは。 ”プログラミング”のカテゴリー名を”プログラミングとか”にしました。 これでなんでも当てはめることができます(・∀・)よっしゃ。 今回はその”とか”をやります。 タイトルの通りですが、レンタルサーバーを使ってみるハナシ。 サーバーっていう言葉を使いだすとなんだかインターネット中級者っぽいですよね。 (´ω`) o○(初心者の発想) ※この記事は初心者の日記です。だいたい間違っていると思ってください。すべての責任は負いかねます。 サーバーっていうのはデータを保管しておく場所で、ネットワークに繋がって他の端末からデータを置いたり取り出したりできるっていうもの。 世にはいろんなwebペ…
こんにちはです。あっちのそららです。今回は、HTMLとCSS(ウェブ制作などで使う言語)で、雪うさぎのアニメーションを作ってみました。「Result」で確認できます(レスポンシブ対応済)。 See the Pen Snow Rabbit by あっちのそらら (@acchinosoraranocode) on CodePen. CSSのアニメーション機能(@keyframes)で、下記の処理を順に実行させています。 雪うさぎを画面外に配置(スタート位置) 雪うさぎの縦位置を移動し、落下を表現 雪うさぎの縦横比率を交互に変え、着地時のぷるぷる感を表現 雪うさぎの横位置を移動+角度を変更し、転がり…
【はてなブログ-カスタマイズ】グローバルナビゲーションのデザインを変更してみる
数日前から適用していますが、グローバルナビゲーションのデザインを少し変更してみました。変更した理由は、なんとなくの気分です。グローバルナビゲーションは全ページに共通するため、少しの変更でも意外と影響が大きく感じました。それではサクッと本題へ。
この記事はブログ初心者がネットを検索して、自分のブログで試行錯誤したことをまとめたものです。 正しくない情報が含まれている可能性もありますのでご了承ください。 ここで紹介する方法はアメブロを利用し、パソコンでブログを書いていることを前提にしています。 Step1、並べたい画像を記事本文に貼る Step2、HTML表示の画面に移動 Step3、htmlの画面での作業 1、画像のコードの下に画像を並べるコードをコピーして貼り付ける。 2、画像を並べるコードに画像urlを貼り付ける Step4、画像サイズを調整 Step5、並べた画像を真ん中にしたい おまけ 画像を3個、4個並べた場合の見え方 画像…
『画像やバナーを中央に寄せたい』ご自身のWEBサイトの希望場所に下記のコードを用意し、〜ここにHTML〜に中央に寄せたい画像やバナーのHTMLを挿入すれば中央に配置されると思います。 </> <div style="tex
初心者のためのHTML入門ガイド:HTMLの基礎をホームページを作成しながら勉強しよう
初心者向けHTMLガイドで自作ホームページの作成やホームページのカスタマイズに挑戦しませんか?HTMLの基本的な作法やタグの説明から公開方法まで、手順を追ってご紹介します。一緒にデジタルスキルアップを目指しましょう。
ポップアップ作成のHTML/JavaScript/コピペ可能
HTMLとJavaScriptを使用してポップアップを作成する手順を紹介する記事。コピペ可能なコードと、WordPressでの導入方法も詳しく解説しています。ポップアップの外観やメッセージを簡単にカスタマイズでき、効果的なウェブサイト通知を実現できます。
ページ内リンクの最も簡単な方法/wordpress/html
WordPressやHTMLでページ内リンクを設定する最も簡単な方法について詳しく解説した記事です。リンクの設定手順と具体的なコード例を含み、わかりやすい画像も掲載しています。
【HTML】webページ/ブログに動画を埋め込む(・∀・) 【GitHub】
こんにちは。 本日のネタは前からやってみたかったけどどうやるのかなーって思ってたこと。動画をwebページに埋め込む方法です。 ※カテゴリーをプログラミングとしていますが内容はHTMLのみです。 ※初心者がやってみた、というだけの内容で単純な1方法です。 はてなブログだと編集画面の右側にある「+」のボタンからyoutube動画を簡単に貼り付けることができますが、画像のように直接アップロードっていうのはできないですね。 じゃあブログに自前の動画を貼り付けたかったら必ずyoutubeに投稿しなけらばならないのか?ってことになります。 別にそれでも大きな問題はありませんが動画投稿サイトにアップすると視…
先日から異変を感じていたのですが、原因が特定できず…ブログ村サポートチームに問い合わせまして発見がありました。 知ってる方からは「何を今更…」と云われてしまいそうですが、私は今まで知らなったので驚きでした。 今回はブログに「Bolgger」を利用している方向けの発信です。 ...
【WordPress】初心者でも簡単!Twitterの埋め込みのカスタマイズ
今回は、WordPressの投稿で「Twitterを埋め込む方法」について紹介していきたいと思います。やり方をマスターして、投稿に活用してみてください。 他の記事でもWordPressテーマのCocoonのカスタマイズ方法を紹介しています。
こんにちはです。あっちのそららです。今回は、HTMLとCSS(ウェブ制作などで使う言語)で、オリキャラを描画してみました。描いたのは、うちの子「ナムナムくん」。「Result」でイラストを確認できます(レスポンシブ対応済)。 See the Pen namunamu by あっちのそらら (@acchinosoraranocode) on CodePen. 単調なデザインと甘く見ていましたが、どっこい。パーツの多さもあり、頭が痛くなるコード量に。特に髪は、地味に複雑な形のため、なかなか思ったとおりにならず悩みました。髪と口は、複数の円を組み合わせ、一部分を消すことで、一つの線に見えるようにしま…
あ、お知らせするの遅くなりましたが、Ameba Pick、審査通りました!Pickていうところを押すだけで、商品のところにつながるそうです。簡単ですね。でも、…
アメブロやるついでに、アフィリエイトのAmeba Pickに申請してみました。特別本格的にやるつもりはないんですけど。あと、にほんブログ村にも登録してきました…
ホームページって言うのかな、企業とかでは無くて個人レベルだと、 ブログが中心で、自作でHTML、CSS、javascriptとか駆使して作ってとかって、 少なくてなった感じもする・・・・・・ でも、今はネットで沢山のアイデアとか、不都合での
これは、「浜崎あゆみ」さんの楽曲ランキングを作成改造して、 その関連で、現在作ってみてるヤツです。 英語での表現方法が「違うじゃね?」ってのも有るかもです・・・笑 あと、誤字脱字があるかもです。
浜崎あゆみ(ayumi hamasaki)さんが作詞(Lyrics)した楽曲を英語にしてみました。
サムネイル画像有りきで考えて画像は、webpにしてみたけど、 サムネイル画像が多い分どうなのか? って問題も有るけど・・・・・まぁ、良いかぁ・・・笑 ヘッダーとフッターどちらか、固定した方が良いのかも? カクカクした動きになる時も有るから・