メインカテゴリーを選択しなおす
ブログリニューアル進捗状況【4】：WordPress用phpファイル、9割移行終了
テーマに沿ったWebデザインに一新しちゃおう計画の「進捗状況その4」をご報告します。今回はphpのテンプレートがほぼ完成したお話になります！
ブログリニューアル進捗状況【3】：全テンプレートのhtml/css/jsのコーディングが完了
テーマに沿ったWebデザインに一新しちゃおう計画の「進捗状況その3」をご報告します。今回はコーディング完了記念にデモサイトを一時公開。リニューアル後は消えてしまうので、今だけ特別に！
ブログリニューアル進捗状況【2】：汎用ページhtml/cssのコーディングが8割完了しました
ブログオープンして数か月。ユーザー様に共有したい記事の方向性も徐々に明らかになってきました。かくなる上はテーマに沿ったWebデザインに一新しちゃおう計画の「進捗状況その2」をご報告します。
ブログリニューアル進捗状況1：Web設計と画像の書き出し完了しました
ブログオープンして数か月。ユーザー様に共有したい記事の方向性も徐々に明らかになってきました。かくなる上はテーマに沿ったWebデザインに一新しちゃおう計画の「進捗状況その1」をご報告します。
この記事ではサーバーに移管作業に関する手順をご紹介しています。新しくサーバーを変えたい方で、サーバーの移管作業を考えている方の参考になれば幸いです。
URLコピーボタンを各記事のシェアボタン内に配置させるカスタマイズ
WordPressブログに ｢URLコピー｣ のボタンを自作で作るのに、デザインは既に設置してあるシェアボタンに溶け込ませ、記事一覧からでもきちんと動作するようにしたい……ということで、｢URLコピー｣ ボタンを独自カスタマイズしてみた。今回はその内容をご紹介する。
こんにちはです。あっちのそららです。今回は、HTMLとCSS（ウェブ制作などで使う言語）で、太陽を描画してみました。「Result」で確認できます（レスポンシブ対応済）。 See the Pen Untitled by あっちのそらら (@acchinosoraranocode) on CodePen. 静止画だとシンプルすぎて味気なかったので、遊び心でアニメーションも加えました。ギザギザ部分は、複数の正方形をつなげて再現。円周上に並べるため、三角関数を使用したので、ざっくり解説します。 正方形を描画する spanタグで正方形を作ります。数が多いほどギザギザが細かくなりますが、見た目のバランス…
当ブログのテンプレート（背景、デザインなど）を変更しました。以前の設定がまだ反映されいないので少々読みづらかもしれませんが、今後どうぞよろしくお願いします。
画像をふわっと。初心者でも簡単に実装できるシンプルなテクニック。具体的なコード例を交えて紹介。デザインスキルを次のレベルに引き上げるための必読ガイドです。
ウェブサイト制作の教科書はネット、知りたいことはネット上にたくさん転がっている。ウェブサイトを制作していくこと自体は、実は簡単なことだ。しかし、その前にHTML文書を構成するためのタグ、そしてHTML文書とウェブサイトの構造について知っておかなければならない。
わざわざプロに頼まなくてもウェブサイト（ホームページ）は自分で制作できる
筆者は、自分で自社のウェブサイトを制作し、その補完としてブログも作り、それで本業の集客は十分できている。筆者はプログラマーでもウェブクリエイターでもない、本業は旅行屋だ。その旅行屋が、なぜウェブサイトを自作し、それで集客できているのか？それは、ウェブサイト制作は難しいものではなく、ド素人にもできる簡単なものだからだ。
Contact Form 7の送信ボタンを中央寄せにする方法
Contact Form 7を使っていると色々と細かい調整が必要になるときがあります。 使用しているWordpressのテーマによってレイアウトが崩れる場合もありますので。 今回...
【JavaScript】カラフルなオリキャラをランダムに描画する
こんにちはです。あっちのそららです。前回、HTMLとCSS（ウェブ制作などで使う言語）で、オリキャラを描画しました。 acchinosorara.hatenablog.jp 今回はそのアレンジで、大量のオリキャラをランダムに描画するコードを書いてみました。「Result」で確認、右下の「Rerun」で再描画できます。描画はランダムなので、毎回違った結果になります。 See the Pen Fairy-rain by あっちのそらら (@acchinosoraranocode) on CodePen. JavaScriptで乱数を生成、かつ値が被らないようにし、下記内容をランダムに設定しています…
【WordPressなどで使えます】スライムが現れたけど、触ったら逃げ出すソースコード！
WordPressのブログや、ホームページなどに、スライムを登場させるソースコードです。HTML,CSS,JavaScript、遊びで書いた簡単なコードですが、興味が沸いたらコピペして使ってみて下さい。
【WordPress】CocconでYouTube動画がサイズ変更できない？ときの追加コード設定！
YouTube埋め込み動画のサイズ変更が出来ねー！解説ブログと同じにやってるのに上手くいかない！と困り果てた末に、やっと辿り着いた解決方法です。
https化ってなんじゃい？？？常時SSL化ってなんじゃい？？？これってどっちも同じ意味なんですね。httpはセキュリティに良くないらしく、みんなhttpsになっていってるんだってさ。って事でライブドアの無料ブログもhttps化してみました。
【CSSイラスト】発光するオリキャラのアニメーションを作ってみた
こんにちはです。あっちのそららです。今回は、HTMLとCSS（ウェブ制作などで使う言語）で、オリキャラのアニメーションを作ってみました。「Result」で確認できます（レスポンシブ対応済）。 See the Pen Shine-Fairy by あっちのそらら (@acchinosoraranocode) on CodePen. アニメーション用の正円を作り、大きさや不透明度を徐々に変化させることで、発光を表現しています。また、正円は同じものを3つ重ね、各々のアニメーション開始のタイミングをずらし、波紋のような動きにしました（下記参照）。 正円1のアニメーションを開始 正円1の開始から0.3秒…
CSS（スタイルシート）を更新したときにキャッシュを自動で読み直すために対応した話
今回はCSSファイルを更新したときにだけ、最新のCSSを読み直させるための対策をご紹介したいと思います。
Googleカレンダーをサイトに表示させる方法。-その1-デフォルトタイプ
今回はGoogleカレンダーをサイトに表示させたいというご要望を頂きましたので、マニュアル代わりに記事として公開させて頂きたいと思います。
備忘録 CSSだけでSPの時はアコーディオン風でPCの時はタブ切り替えを実装する方法
CSSだけでSPの時はアコーディオン風になり、PCの特はタブ切り替え風になる方法をご紹介したいと思います。
このページでは、HTMLとCSSのみで要素の表示非表示をクリックやタップで切り替えられる方法についての覚え書きをまとめています。 デモはこんな感じ。 DEMO 映画やゲームの感想...
こんにちはです。あっちのそららです。今回は、HTMLとCSS（ウェブ制作などで使う言語）で、雪うさぎのアニメーションを作ってみました。「Result」で確認できます（レスポンシブ対応済）。 See the Pen Snow Rabbit by あっちのそらら (@acchinosoraranocode) on CodePen. CSSのアニメーション機能（@keyframes）で、下記の処理を順に実行させています。 雪うさぎを画面外に配置（スタート位置） 雪うさぎの縦位置を移動し、落下を表現 雪うさぎの縦横比率を交互に変え、着地時のぷるぷる感を表現 雪うさぎの横位置を移動＋角度を変更し、転がり…
はてなブログで、カスタムしたHTMLやデザインCSSを間違って消してしまい、バックアップも取っていなかった…というミスをしたことはありませんか？ はてなブログにはこれらのソースコードを復元できる機能がないため、バックアップがなければ一からコードを書き直す必要があります。そんなときには、Google検索の「キャッシュ」を使うと復元できる可能性があります。
初心者のためのHTML入門ガイド：HTMLの基礎をホームページを作成しながら勉強しよう
初心者向けHTMLガイドで自作ホームページの作成やホームページのカスタマイズに挑戦しませんか？HTMLの基本的な作法やタグの説明から公開方法まで、手順を追ってご紹介します。一緒にデジタルスキルアップを目指しましょう。
WordPress上のリンクをクリック中に現れる黒枠を消すCSS設定
WordPress ブログ内の テキストリンク をクリックしている最中、 黒い枠 が現れるようになりました。ブラウザに依らず発生するこの黒枠を、どのブラウザでも消えるような CSS 設定を調べてみます
WEBサイトを印刷した時、改行の位置が思った通りにならないことはありませんか？このページでWEBページの印刷時に、指定した位置で、文字を改行させる方法についてご紹介しています。
こんにちはです。あっちのそららです。今回は、HTMLとCSS（ウェブ制作などで使う言語）で、オリキャラを描画してみました。描いたのは、うちの子「ナムナムくん」。「Result」でイラストを確認できます（レスポンシブ対応済）。 See the Pen namunamu by あっちのそらら (@acchinosoraranocode) on CodePen. 単調なデザインと甘く見ていましたが、どっこい。パーツの多さもあり、頭が痛くなるコード量に。特に髪は、地味に複雑な形のため、なかなか思ったとおりにならず悩みました。髪と口は、複数の円を組み合わせ、一部分を消すことで、一つの線に見えるようにしま…
こんにちは。 今回の記事ネタはHTML。HTMLっていうのはWEBページ上の文書の構造を書いたものでページの元になっているもの。ブラウザにchromeを使っている人ならページの上で右クリック→ページのソースを表示と選ぶと表示されるやつです。はてなブログで記事を書くときはHTML編集という項目から編集ができますね。それからブラウザゲームもHTMLだったりします。 今回このHTMLを編集することでブログの文章を2列にしてみます。 ※一応の注意書き。HTML・CSSはプログラミングではありませんがJavaScriptに関係するので当サイトでのカテゴリーはプログラミングに分類しています。 ブログサイト…
Webデザイン初心者がprogateのHTML＆CCS初級編をやってみた感想【Webデザイナー入門日記#1】
こんにちは、星ノ宮です！ 皆さんはprogateというサイトをご存じですか？ 私はつい最近まで知らなかったのですが、どうやら無料でWebデザインのコーティングについて学べるなんとも素晴らしい代物らしく、 「こりゃあやるっきゃねえ！」 と意気
こんにちは。 ここ数日はオンラインイベント(クリエイターズ文化祭)に向けて専用ページを作成してます。って言っても大したもんじゃなくて出展するものの説明だったり挿し絵を載せてるだけのフツーのページなんですけどね。 その作成ページでやってみたことをネタにします。 やってみたことは背景の変更です。ブログに慣れた人にとっては当たり前のことかもですが、まぁ知らない人は知らないだろうし一応メモ的な感じで(´･ω･)b ※一応の注意書き。HTML・CSSはプログラミングではありませんがJavaScriptに関係するので当サイトでのカテゴリーはプログラミングに分類しています。 まず はてなブログの場合、背景画…
可愛いデザインの囲み枠の作り方！CSSとHTML簡単コピペでオシャレに作れる
サイトやブログをオシャレにしたい方の救世主は、おしゃれなデザイン囲み枠や可愛い囲み枠です。少しポイントで使うだけでも、読みやすくなったり目を引き付ける役目があります。WordPressの囲み枠をオシャレにしたいけど、初心者には難しいと諦めて
WordPressおしゃれな点線ドット囲み枠をCSSコードをコピペで作る
WordPressの文章を彩るブロック、囲み枠・装飾枠はどうやって作るの？wordpressをオシャレにしたいのに出来ない方の必殺技！かわいい囲み枠をコピペで作ろうです。CSSのコードをコピペするだけなので、初心者さんにも簡単にできます。オ
【HTML】戻るボタンでブラウザバックをする方法と次のページに進む方法
この記事ではHMTLでブラウザの戻る機能をボタンに実装する「戻る」ボタンや「次へ」ボタンを作成する方法をご紹介しています。戻るボタンはお問合せフォームの確認画面等でよく見かけますが、作成自体は簡単ですのでご興味のある方は是非お試し下さい！
こんにちはです。あっちのそららです。今回は、HTMLとCSS（ウェブ制作などで使う言語）で、夏にピッタリなひまわりの花を作ってみました。「Result」でイラストを確認できます（レスポンシブ対応済）。 See the Pen Sunflower by あっちのそらら (@acchinosoraranocode) on CodePen. 今年、CSSで三角関数がサポートされたので、試しに花びらの部分に取り入れました。三角関数の表現のひとつとして、要素を円周上に並べることができます。以下、今回の三角関数の工程をざっくり解説します。まずHTMLで、花びらの数に応じた番号を付与します。今回は10個なの…
cssで3D ＆ 回転Design コードを確認＆コピペできます。
デザインで遊んでみました。このままの形で実際に、使うことが少ないかもしれませんが、ややこしい部分はHTMLと.cssのSource Codeをご覧いただけま…
色見本・RGB値とHTMLカラーコード-Easy App for converting RGB to Color codes
HTMLやLaTeXなどを使っているとフォントやグラフの色指定でHTMLカラーコードによる色の調整が必要な場合
影で表現力UP！CSSシャドウのデザインテクニックまとめ【box-shadow】
CSSのbox-shadowプロパティは、要素に奥行きや立体感を加え、デザインをより魅力的にすることができます。影の位置や強さ、色などを調整することで、ウェブアプリケーションやウェブサイトに現代的な雰囲気を持たせることができます。
【CSS】改行の位置は指定したいけど出来れば一行に表示させたい
画面幅を縮めるとボックスの幅も同時に縮まり、ボックス内のテキストが折り返してしまう。改行タグ<br>を使ってもいいんだけど、画面幅が広ければ出来れば改行してほしくない。改行禁止を使うとボックスからはみ出してしまう…でも、1文字だ
【初心者向け】CSSのbackgroundプロパティの基本backgroundは、CSSのプロパティであり、要素の背景に関連する設定を行います。Webデザインにおいて、背景の設定は非常に重要な役割を担っています。その中でもCSSプロパティの
display:flex; フレックスボックスを使ったWebデザインの基本
フレックスボックス(display: flex;)は、Webデザインにおいて広く用いられているレイアウト方式です。極めて自由度が高く、様々なレイアウトを実現できるため、多くのデザイナーにとってなくてはならない技術の一つと言えます。しかし、初
【CSS新機能】text-wrap: balance;テキストのバランスを自動調整用スタイルを試してみた。
参考記事 coliss.com2023年5月30日に安定版がリリースされたGoogle Chrome 114（セキュリティの脆弱性により2023年6月14日 Chrome 114.0.5735.133/134がリリース。）では、複数行のテキ
【CSS】グローバルメニューを2段にしてみる(; ･`д･´)
こんにちは。 最近3Dモデリングをちょこっとさわってみたことでブログのカテゴリーが増えました。 なのでトップ絵の下にあるグローバルメニューっていうやつにカテゴリーが入りきらなくなり、なんとかすることにしました(PC表示のみ)。 グローバルメニューに項目をたくさん入れる手段としてドロップダウンリストがありますが、それを使うほどの数でもないのでメニューを2段にするという選択をしました。 こういうWEBページのデザインを変えるのはCSSってやつをいじることになるのですが難しいんですよね(;´Д｀) ちなみにCSSはプログラミング言語ではありませんがこのサイトでのカテゴリーとしてはプログラミングに分類…
数日前から適用しているのですが、記事ページに「更新日」を追加表示しています。これはJavaScriptとCSSを追加適用することで実現しています。たまに自分のブログの過去記事を見返すのですが、少し古くなった内容や、表現がイマイチだったものを見直して更新しています。ですが、更新日を表示していなかったので記事ページからは更新した旨が分からない状態でした。更新日を表示しているサイトにはちょくちょく遭遇していました。 なので自分のブログでも更新日を表示したいなと思い、対応してみました。ということで、変更内容や適用手順について書いていきます。
NFTゲームを開始しましたがプログラミングも学びたいと思い、ブログでも役立つHTML/CSS/JavaScriptの学習にPythonから変更しました。
