【613人に聞いた】個人サイトどう作ってる？個人サイトのいいところ・悩んでいることは？【アンケート結果発表】 | 創作・同人サイト制作支援サイト do
昨今は創作をする人の中で脱・SNSや個人サイトへの移行が話題になっています。しかし、個人サイト制作に興味はあっても実際どんな感じか分からなくて、なかなか手を出せない……という人は多いでしょう。 また、今現在個人サイトを運営している人も、他の人たちが個人サイトをどうやって作っているのか、どんなことを考えて個人サイトを運営しているのか、気になることも多いと思います。 そこでこの記事では、実際に個人サイトを運営している人たちを対象に実施したアンケートの結果を発表します！ 個人サイトを運営している人たちの生の声を聞くことができるので、個人サイト運営とはどういうものか、イメージしやすくなったり、自分も個人サイトを持っている！という方は、共感できたりするはずです。なお、質問した項目は以下の通り。 サイトで取り扱っているものは何か（一次創作、二次創作、イラスト、小説……） サイトをどのように構築している
サイトのOGP画像を自動生成する
最近、個人の技術ブログをリニューアルしました（パンダのプログラミングブログ）。 リニューアルの際に、念願だった OG 画像の自動生成を実装してみたところ、意外と簡単にできたのでその方法を紹介します。 OGP画像とは何か OGP 画像の OGPとは Open Graph Protocol の略語で、ある URL のページをリッチなコンテンツで紹介できるというものです。 サイトのタイトルやページのコンテンツをイメージさせる画像などを meta タグを使って HTML に埋め込みページの内容を表現できます。 Twitter や Slack、Line で URL を貼り付けると URL とは別に表示される物がこれにあたります。サイトのページが増えるとページ一つ一つに OGP 画像を用意することは手間がかかります。そこでこの記事では、OGP 画像を自動生成する方法を紹介します。 OGP 画像の作成方
レシピページのOGP画像を動的に生成する - クックパッド開発者ブログ
こんにちは、クックパッドでエンジニアをやっている @morishin です。入社してわりと長い間 iOS アプリやそのバックエンドの開発を中心にやってきましたが、最近は専らウェブフロントエンドとその基盤をいい感じにするというのをやっています。先日クックパッドウェブサイトのレシピページの OGP 画像を素敵に刷新したのでそのお話をしたいと思います。 ※ ここで OGP 画像と呼んでいるのは Open Graph Protocol で定義されている og:image プロパティに指定する画像のことです。 ※ OGP 画像と呼んでいますが厳密には今回変更したのは Twitter Card (twitter:image) 用の画像のみなので、その他の SNS に表示される画像 (og:image) は変わっていません。 できたもの これまではレシピ作者さんがアップロードされた料理写真を単にクロップ
Hugo を使った 個人サイトの作り方 0 発起篇
個人サイトを作成するときの使用ツールとしてまず最初に候補にあがるのは WordPress でしょう。利用サイトも多く見つけられます。しかし、Wordpressや他CMSのような動的生成サイトの場合、万一のサイトデータ復旧が面倒です。 また、セキュリティリスクもあり、メンテナンスのためには日々多数のプラグインや本体のアップデートに対応しなくてはなりません。 そのような問題を解決する手段として、 静的サイトジェネレータ（Static Site Generator) があります。ローカルでサイトデータを出力し、それをアップロードという形を取ります。メリットは高速なこと、バックアップデータがとりやすいこと、セキュリティが堅牢なことです。 「静的サイトジェネレーター」について網羅的に説明します | Dyno 私は長らく静的HTMLのみで小説サイトを構築してきました。 ローカルに常にファイルをとってお
令和に個人サイトをWordPressで作り直したので入れたプラグインとかあれこれ | 日々放置プレイ
なお、新規で作成した話ではない。 もともとfreoで持っていたサイトをWordPressに移行した際に入れたプラグインやテーマ、行った変更などの備忘録的なアレ。 WordPressのプラグイン的な話は探してる人がいるかもしれないので見える場所にも残しておく。 ただし私は人に物事を教えるのがクソ下手、説明が死ぬほどできない人間なので、後から自分が読んであーこれやったわ……という備忘録的な意味合いが一番強い。下のほうに行けば行くほど理解できなくなってると思う。 PHPに関してはズブの素人で、1冊WordPressの教本写経してGO！あとは野となれ山となれ、わからん場所はググって継ぎ接ぎしてるうちになんとかなるだろうという行き当たりばったり精神なので、参考になる場所は少なさそう。 freoからのデータ移行（何故かCSVではなくXML使用）はこっちの記事。 サイトを作る理由ジャンルごとにアカウント
2021年最新版、Font Awesome アイコンの使い方と便利な機能のまとめ
Font Awesome アイコンの基本的な使い方をはじめ、Webサイトやスマホアプリでアイコンを使う時の便利な機能をまとめて紹介します。 Font Awesome guide and useful tricks you might not know about. by Kiss Patrik 下記は各ポイントを意訳・加筆したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 更新: 2021/2/1現在の最新情報にアップデートしました。 Font Awesomeとは Font Awesomeへの登録方法・アイコンの基本的な使い方 Font Awesome アイコンのサイズの指定方法 Font Awesome リスト用のアイコン Font Awesome アイコンの回転 Font Awesome アイコンのアニメーション Font Awesome アイコンを
リンクを作る時の target="_blank" の危険性 - 隙あらば寝る
html で リンクを新しいタブ(やウィンドウ)で開かせたい場合、target="_blank" を指定するが、 この使い方には落とし穴があるらしい。 www.jitbit.com リンクを開いた先の javascript から、開いた元のページを操作できてしまうとのこと。 気になったので確認してみた。 悪用のパターン insecure.html が最初に開くページで、ここに target="_blank" なリンクがある。 このリンクを押すと new_window.html を新しいタブで開く。 この new_window.html に javascript が仕込まれており、元ページを操作されるという話。 具体的には window.opener.location="./evil.html" と実行すると、元タブは evil.html に遷移する。 実際試してみたのが ここ。 リンクを開
【2018年4月版】もう迷わない！Webサイト横幅サイズの大正解 | FASTCODING BLOG
2021年、最新のWebデザインの横幅サイズはこちらの記事をご覧下さい。どうも、FASTCODINGディレクターのせりなです。Webサイトを制作するとき、デザインの横幅を何pxにすればいいかなーって思ったことありませんか？パソコンは何pxで作るの？スマートフォンは何pxがいいの？って聞かれることが多いので、デザインの横幅でもう迷わないための考え方をまとめてみました。基本的な考え方さえ抑えておけば、これから先いろいろな情報が出てきてもばっちりです！ もくじ 1. 「Webサイトデザインの横幅サイズ」の結論！！ 2. まず、... 人気なのはとても嬉しいことなのですが、WEBを閲覧するデバイスの進化は日進月歩。 去年の常識が今年の常識であるとは限りません！ ということで2018年4月現在、パソコン用のWEBサイトは何pxで作るの？スマートフォン用は何pxがいいの？ 最新のウェブデザイン
まだパワポで消耗してるの？ワイヤーフレーム苦手な人でも綺麗に早く作る方法！ | SONICMOOV LAB
こんにちは。お疲れ様です。ソリューション事業部でディレクターしてます かっきー です！もう今年半分以上過ぎているんですね…。私事ですが無事に(？)三十路になりました。(´_ゝ｀) ふ！ さて、今回は『ワイヤーフレーム作成が苦手な人でもきれいに早く作る方法！』ということで、記事を埋めれるといいなぁ、と思います。 ワイヤーフレームをきれいに早く作る方法！ 「きれい」とか自分で言っちゃったけど…言っちゃったけど…言っちゃったけど…。 たいがいの方々に「きれいね」とか「デザインからスクショしたの？」とか嬉しいことを言っていただけます。(*ﾉ∀*)ノ ｿﾝﾅ ﾏｻｶ~ ｵﾎﾎ~ 使っているツールはあれです、あれあれ、 です。 「Excelかよ…(ﾉ∀) ぷ」とお思いでしょうが、構成要素の位置を変えるときなど、パワポや他のプロトタイプツールと比較すると断然簡単きれいにできます！ また、Excelならク
WordPressで構築されたWebサイトの常時SSL化手順
本記事には古い情報が含まれている可能性があります。 2019年9月以降、各ブラウザのEV証明書のアドレスバー表示は変更されており、 本記事に掲載されている表示とは異なっている場合がありますので、ご注意ください。 常時SSL Lab.の「実践術」ではこれまで、HTMLやCSSで構成された静的なWebサイトを常時SSLに対応させる手順を説明してきましたが、近年、Webサイトの構築にはWordPressをはじめとしたCMSを利用することが多くなっています。 ということで今回は、代表的なCMSであるWordPressの常時SSL化の方法を簡単にご案内します。 WordPressで構築されたWebサイトの常時SSL化にはさまざまな方法がありますが、ここでは常時SSL化のためのプラグイン「Really Simple SSL」を利用した手順をご案内します。 事前準備 実際の作業に入る前に、以下の内容を確
びっくりするほど簡単！HTMLやCSSの作業なしで、Bootstrap 4のさまざまなページを作成できる無料ツール
さくっと短時間で、慣れれば1分！ デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。 HTMLやCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。 Froala Design Blocks Froala Design Blocks -GitHub Froala Design Blocksでは170種類以上のレスポンシブ対応のコンポーネントが用意されており、それらを好きなように組み合わせて、誰でも簡単にWebページを作成することができます。 作成したページは個人でも商用でも無料。詳しくはライセンスページをご覧ください。 短時間で、Bootstrap 4ベースのページを作成してみる 用意されているコンポーネント 短時間で、Bootstrap 4ベースのページ
HTMLのheadの書き方、head内に記述する要素の総まとめ
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。 <head> cheatsheet 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 去年紹介した以前の版からいろいろと変更されています。 head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。 <meta charset="utf-8"> <meta http-equiv="x-ua-c
imgタグでエラー時の画像をonerror属性で設定する方法 - Qiita
onerror属性はjavascriptでも書くことができますが、今回はimgタグに直接うめこんでしまうことで1行でスマートにエラー時用の画像も含めてimgタグを実装します。 こんなかんじです
普通のHTMLで作成したページの指定箇所のみをブラウザ上から更新・修正できるようにするシンプルなCMS -Sitecake
普通のHTMLで作成したページをブラウザ上から簡単に更新・修正できるようにするオープンソースのCMSを紹介します。 HTMLはごく普通なものでOK、BootstrapやFoundationにも対応しています。 ブラウザ上で編集できる領域を指定できるのもいいですね。特定ページの特定箇所だけ簡単に更新できるようにするとかにも使えます。 Sitecake Sitecake -GitHub Sitecakeの特徴 Sitecakeのデモ Sitecakeの使い方 Sitecakeの特徴 プレーンなHTMLで動作 通常のHTMLファイルをブラウザ上から修正して、保存することができます。PHPやテンプレートなどの知識は不要です。 更新・修正は簡単 テキストを変更する時はクリックするだけで編集可能に、要素を追加・削除する時はドラッグ&ドロップでOK。 データベースは必要無し すべての変更はHTMLファイ
jQuery 1.9 日本語リファレンス | js STUDIO
このサイトについて jQueryの日本語リファレンスです。 jQueryの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 News 2013.03.13 ver1.9の内容に更新しました。 2012.12.02 jQueryの似ているAPIまとめ 2012.10.13 サイトをオープンしました。 API APIのカテゴリー分けについては、本家サイトでは1つのAPIが複数のカテゴリーに所属していますが、 このリファレンスでは分かりやすさを重視して1つのカテゴリーに絞っています。 また、一部本家サイトのカテゴリーを削り、別のカテゴリーに所属させているAPIがありますので、 予めご了承ください。 Ajax Ajaxに関する処理 Attri
更新するのが面倒！サイトの共通部分を簡単に作る様々な方法
サイトにはヘッダーやフッター、ナビゲーション部分など全ページに共通して入る要素があります。 この部分を修正する時はHTMLを全ページ修正するととても手間がかかって大変です。自分のサイトはだいたいCMSで管理しているのでテンプレートを直せばあっと言う間なのですが、それ以外の場合の共通部分を簡単に治す方法を改めて調べてみました。 がんばって直に書いてるものを置換する Dreamweaverのテンプレート機能を使う JavaScriptを使う PHPを使う SSIを使う Node.jsやRubyのツールを使う がんばって直に書いてるものを置換する とりあえず普通にコーディングして、修正などある場合はソフトの一斉置換を使ってなんとかする方法です。 数ページものならあまり気にならないがページが増えていく毎に大変になる。リンクや画像が相対パス指定だと階層が増えると更に大変になります。 <footer>
【VIP】webディレクターだけど、初心者に役立つサイト教える てんこもり。
1: 以下、＼(^o^)／でVIPがお送りします 投稿日：2015/02/06(金) 17:42:31.05 ID:flJZIImcH 最近クソみたいなデザインとグッチャグチャのソースコード書いてる ミーハー丸出しアフィサイトが増えてきて鬱陶しいから、 これからサイト作る初心者用にサイトを紹介していく これ以上俺のウェブサーフィンライフを邪魔すんじゃねえぞ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
初心者も分かる！レスポンシブ・デザインの作り方
Web制作者はブックマークしておくと便利！HTMLやCSSやOGPやTwitterカードなどのコードを生成できるオンラインサービス
【html,css】メニュー部分の共通化は超簡単にできる！
