【SWELL】サイドバーにカスタムメニューやシェアボタンを固定表示させる
Qiitaを見ていたらサイドバーにアイコンが固定されてるデザインっていいな～。と思いまして、それをSWELLでやってみたというカスタマイズです。 Qiitaのページレイアウト 完成形はこんな感じ。↓ この記事で紹介するカスタマイズは SNS
今回はカスタマイザーで出来そうで出来ない、「もっと見る」ボタンのカスタマイズをしていきたいと思います！ moreボタンと言ったりもしますね もっと見るボタンは、投稿リストブロックの下に表示させることが出来るやつです。 初期状態はこれ かっち
SWELL初心者向け厳選おすすめプラグイン！必須なのは4つだけ
ブログを始めてすぐはどのプラグインを使ったらいいのかわからず、調べるためにたくさんの時間を使ったり、必須級のプラグインを入れずに数ヵ月過ごしていたりしました。 しばらくブログ運営をしてプラグインも色々試した結果現在の構成に落ち着いたので、S
【SWELL】RSSブロックを活用して他サイトの新着記事を表示する
複数のサイトを運営していて、別のサイトの新着記事をこっちのサイトにも表示したい！と思ったことはありませんか？ 個人ブロガーの方でブログカスタマイズ用にブログを分けている方、noteもやっている方などちょくちょく見かけるのですが、それはサイト
ニュースティッカーとはこんなものです↓ 企業サイトでお知らせを表示するのに用いられていることが多いですが、省スペースでたくさんの情報を表示できるので使い勝手がいいんですよね。 このブログでも新着記事を表示させる用途でティッカーを採用していま
今回はもくじのデザインをカスタマイズしていきます。 記事を読み始めてすぐ目に入る場所なので、ここがカスタマイズされていると結構目を引くんですよね。 パーツごとにカスタマイズを紹介しているので、お好きに組み合わせて使ってみてください。 初期状
CSSや画像の盗用を防ぎたい！プラグインなしでできる対策をご紹介（SWELL・Coccon向け）
ブログデザインをそっくりそのまま真似された！（CSSごとコピー） 画像を勝手に使われた！ という経験はありませんか？ そういったことを防止できるプラグインはあるのですが、「プラグインを入れるほどじゃないけどゆるくできる防止策があればいいな～
おしゃれなサイトを作りたいとき、イラスト・アイコン・写真などの素材は必要不可欠な存在ですが、全て自前で用意するのはなかなか大変ですよね。 そこでこの記事では現役エンジニアの私が実際によく使うフリー素材サイトをご紹介していきます。 無料・商用
女性向けデザインを学ぶなら『ingectar-e』で全部解決する件
ブロガーやデザイナーなら一度は目にしたことのあるこちらの書籍。 この本を監修しているのは「ingectar-e」という会社なのですが、出版している本が忖度なしで全部わかりやすい！ そして個人的にデザインが好みドンピシャで最高！ 恐らくこの会
【SWELL】ポチップをリッチカラムできれいに横に並べる（PC・タブレット限定）
商品リンクを簡単に作成できるポチップ。多くのブロガーさんがこのプラグインを使っていると思います。 SWELLにリッチカラムという便利な独自ブロックがありますが、これを使ってポチップをきれいに横に並べたい！と思ったことはありませんか？ 私はあ
【SWELL】投稿リストブロックの上に画像をのっけて可愛く装飾！
今回はSWELLの投稿リストブロックの記事の上に、好きなイラストを乗せる可愛いカスタマイズの方法をご紹介します！ このカスタマイズは当サイトのTOPページでも採用しており、実装するとこんな感じになります。 ※今回のカスタマイズ以外のスタイル
当ブログではSWELLをできるだけ簡単にカスタマイズできるように、コードが分からない方でもほぼコピペで対応できる解説を心掛けています。 しかしサイトのデザインや環境によって、コードの一部を変更する必要があることは多いんですよね。 コードの該
【SWELL】固定ページ・LPの好きな場所にSNSシェアボタンを挿入する
こんにちは。 今回はSWELLの標準機能で出来そうで出来ない、固定ページやLPにSNSシェアボタンを挿入するカスタマイズをやっていきます。 SWELLブロガーは固定ページをトップページに設定している方が多いと思いますが、そのトップページにも
【SWELL】検索ボックスのデザイン・プレースホルダーをカスタマイズ！検索ボックス
外観＞ウィジェットで追加できるSWELLの検索ウィジェット。 これはブログを訪問してくれたユーザーにとってかなり便利なものですが、見た目が結構ビジネスライクなので、自分のブログデザインに合わないがために実装を諦めたという方もいると思います。
【SWELL】LPのURLの「lp」部分を好きな文字列に変更する
SWELLのLP（ランディングページ）機能は、投稿ページや固定ページとは全く異なるページを管理できる機能としてかなり便利です。 企業サイトでLPを作る際に活躍しますね！ LP機能で作ったページのURLは通常以下のようになります。 ドメイン名
【SWELL】押したら画像が変わってフワフワするページトップボタンでサイトがリッチに！
こちらの記事ではSWELLのページトップボタンを画像に変更する方法を解説しました。 今回はボタンがクリックされると別の画像になってフワフワする、トップページボタンがさらにリッチに見えるカスタマイズです！ 完成形はこのサイトのページトップボタ
【SWELL】カスタマイズするなら子テーマを使おう！使い方と役割を解説
SWELLのカスタマイズ沼にハマってくると解説記事なんかでよく見るのは 「カスタマイズは子テーマでやりましょう」ということ。 子テーマはSWELLだけでなくWordpess自体にある仕組みですが、Wordpessに詳しくない方はどういうこと
キーボード風の装飾とはこれのことです↓ タスクマネージャーを開くにはCtrl+Alt+Delを同時に押します。 Cocoonにはインライン装飾「キーボードキー」という機能がありこのような装飾を簡単に入れることができますが、SWELLには同じ
【SWELL】404エラーページをブログパーツでまるごとカスタマイズ！（コード編集ほぼなし）
存在しないページにアクセスした際に表示される404ページ（エラーページ） SWELLでは現状このページをカスタマイズする機能はありませんが、カスタマイズ沼にハマった方ならここもいじりたいと思ったことはあるはず。 私もフッターの検索ボックスと
タグクラウドをカスタマイズ！アイコンを付ける・色を変える – SWELLカスタマイズ
タグクラウドというのはこれ↓のことです。 SWELLではこの部分のデザインを変更することができません。 しかしそのままだとなんだか無機質な感じがするので、細かいところではありますがサクッとカスタマイズしていきたいと思います！ いくつか例を載
投稿ページで日付やカテゴリーをタイトルの上に表示する – SWELLカスタマイズ
SWELLのタイトル部分の表示方法はカスタマイザーから色々といじれるのですが、日付やカテゴリーの表示とタイトル文の位置を変えることはできません。 そこでこの記事ではここの表示順を変えるカスタマイズをご紹介します。 before after
投稿リストブロックのテキスト型でタイトルを上に表示 – SWELLカスタマイズ
SWELLの便利な投稿リストブロックですが、テキスト型を選択した場合だけタイトルが下に、日付やカテゴリーなんかの情報（メタデータ）が上に表示されるようになっているんですよね。 これはおそらく企業サイトなんかでよく見かける「お知らせ欄」を簡単
セルフバックとは？弱小ブロガーがA8.netで5万弱稼いでみた【ブログ初心者におすすめ】
みなさんはセルフバックという言葉を聞いたことがありますか？ 通常のアフィリエイトでは、運営するブログに広告を掲載し、読者が商品の購入やサービスへの申し込みをすることで報酬が発生します。 しかしそのためにはある程度のアクセス数が必要になる為、
この記事ではスクロールバーのデザインをカスタマイズする方法を解説します。 スクロールバーとはこれのことです。（Chromeを使用した際のWindowsでの表示） Macだともう少しスマートなデザインみたいですが、いずれにしてもグレーっぽい感
会社の将来が心配になる古い体質と謎ルールにまみれた会社で働いた話
昭和的な考えの会社にいて疲れる。謎ルールの理不尽さにイライラする。転職したほうがいいのかな？ こんなお悩みをお持ちの方はいませんか？ 私もそんな会社で働いた経験があり、...というかそのうちの1社で今も働いていますが、なぜ転職していないのか
SWELLのメインビジュアル設定では表示する画像の設定の他、その上に表示するテキストを好きな文章に変更することができます。 デフォルトで「さあ、始めよう。」ってなってるところですね。 あとはサブテキストを追加したり、ボタンを表示できたりしま
【SWELL】見出しをおしゃれにカスタマイズ！エディターにもスタイルを反映させる
WordPressのテーマ『SWELL』はかなりオシャレでカスタマイズ性も高くいわゆる神テーマだと思うのですが、それゆえにSWELLを使っているユーザーや企業も多く、似たようなデザインのサイトがたくさんあるように思います。 カスタマイズ性が
【SWELL】ふきだしブロックがスライドインするようにカスタマイズする
ある企業サイトのブログページでふきだしがスライドインしてくるアニメーションが設定されているのを見て、自分のブログにも実装したい！と思ったのでやってみました。 完成したら こんな感じ WordPressテーマのSWELL環境上でなるべく手間と
通学不要の通信制大学『サイバー大学』を徹底解説！学費がネックかも？
私はかつてIT専門学校に通っており、途中で通い続ける意味を見出せなくなり退学し、そして現在日本大学の通信教育部の英文学科に在籍しています。 通信制の大学に通うと決めた時にどの学校にするか結構悩んだのですが、情報系の知識やプログラミングをがっ
副業エンジニア・ブロガーが開業届を出して個人事業主になる。手続きは超簡単！
今更という感じではありますが、この度晴れて個人事業主となりました。 開業届の提出はかなり大変でめんどくさいというイメージがあり正直避けていたのですが、重い腰を上げてやってみれば全ての作業はネット上で完結し、税務署に行く必要もなく終わったので
SWELLのランキングアイコンを好きな画像に変更する【5分で完成！】
SWELLのウィジェット『[SWELL]人気記事』では簡単に記事のランキングをブログに表示させることができます。 かなり便利ではあるのですが、上位3位までの順位が表示されているアイコンが自分のブログデザインに合ってないなと思ったことはありま
お洒落で使い心地も抜群。テンション爆上げキーボード【Keychron K2 Pro】レビュー
以前職場用に購入したKeychron K4のレビュー記事を書いたのですが、あまりにもKeychronにハマってしまい、自宅用にKeychron K2 Proも購入してしまいました。 K4のレビュー記事はこちら 今回の記事ではK2 Proを半
【意味なし】IT専門学校はやめとけ。中退経験者が本音で語ります
「IT系専門学校」で検索するとなんともネガティブなワードばかりが並んでいる印象を受けます。 私は現在IT分野を本業としていますが、現役の年齢でIT系専門学校に入学し中退しており、まさにこの予測ワードのように「行かなきゃよかった」と思っている
ブロックエディタで自由にデザインできる！SWELLにローディング画面を実装する方法
WordPressのテーマSWELLをお使いの方に向けて、ローディングアニメを実装する方法をご紹介します。 プラグインなし コピペでOK 初回アクセスのみ表示、毎回表示を選べる 全ページ表示、特定のページのみ表示を選べる デザインはコード編
SESは闇であるという話がある一方、優良企業もあるという話も聞きます。 今回は私がかつて在籍していた闇の方のSESの話をしたいと思います。 特にオチがないただの思い出話なので、こんな会社もあるんだーくらいの感覚で聞いてください。 全ての始ま
【独学エンジニア監修】プログラミングを独学するためのロードマップ
私は現在社内SE兼プログラマーのようなものをやっており、副業でもWEB制作をやっています。 またこのブログもPHPやCSS、jsなどを使い色々とカスタマイズして楽しんでいます。 そんな私ですが、実はプログラミングに関してはほぼ独学です。 こ
完全無料のプログラミングスクール【ZeroPlus Gate】を現役エンジニアが体験してみた！
プログラミング未経験だけど、これからWEB制作を学んで副業をしたい、フリーランスになりたいと思っている方は多いと思います。 WEB制作を学ぶ方法としてProgateが挙げられることが多いですが、自己学習完結型であり有料プランであってもメンタ
かもしゅうを全て受け終わった！と晴れ晴れとした気持ちでいたら、色々ミスってあと1科目受けなくてはいけなくなった人です。どうもこんにちは。 春なので日大通信関連の記事を書きまくっていますが、今回はかもしゅうの攻略法についてです。 私は今までに
【jQuery】フォームのinputを動的に追加・削除する（連番を振りなおす）
①動作サンプル（単純にinput要素を追加） See the Pen input_add_sample1 by Cheemo (@Cheemo-LapinWeb) on CodePen. ②より実践的なサンプル See the Pen in
【日大通信】入学後すぐに知るべき！失敗しない効率的な単位の取り方
前回は卒業しやすい学部・学科についての記事を書きました。 日大通信に実際に入学したら次はどうやって単位を取っていくのか？最初はその方法やスクーリングの仕組みなど分からないことだらけだと思います。 そこでこの記事では失敗しない、単位の取り方に
日大通信への入学を考えている方、そんな方々の最終的な目標はなんといっても卒業することだと思います。（教職生の方は違うかもですが） とにかく卒業資格が欲しくてなるべく効率的に、楽に単位が取りたい方、興味のある分野を学びたい！という方、色々と目
【jquery.inview】スクロールで画面内に入ったら要素をふわっと表示させる。子要素を順番に表示させる応用も【コピペOK】
おしゃれなページでよく見かけるアレです。 See the Pen inView_sample1 by Cheemo (@Cheemo-LapinWeb) on CodePen. 最後に子要素を順番に表示させる応用編も解説していきます！ js
ホバー時にアニメーションするボタンのデザインを20個作ってみました！ コピペで使えます ホバーアニメーションするボタンデザイン20選 「//共通スタイル」はボタンデザインの初期化をしているコードで、全デザイン共通です。デザインによっては必要
【Macでも可】Windows標準機能のみ！画面録画してクロップ（トリミング）・カット編集する方法
普段開発やブログカスタマイズの記事を書いていると、PC画面を撮った解説動画を載せたいな。と思うことが多々あります。 スマホだとアプリで簡単に録画・編集ができますが、PCでやろうとすると急にわかりにくく、有料ソフトがないとできないのかな？と思
【初心者向け】Webサイト制作の開発環境を整える。VSCodeでHTMLをリアルタイムプレビューしながらコーディング！
これからプログラミングを初めてみようという方にとっての最初の疑問は、 どうやってコードを書いていったらいいんだ？どうやって書いたコードを動かすの？確認するの？ ということだと思います。 今回の内容は、プログラミングの中でもホームページやブロ
【日大通信】東京スク 英米文学演習Ⅰ～Ⅲ『シスター・キャリー』
みなさんこんにちは。だんだん暖かく過ごしやすくなってきましたね！冬は苦手なので春が来るのは嬉しいです（花粉以外） 先週は東京スクーリングがあり、英米文学演習の授業を受けてきました。 現在3年の終わりで取得単位は112。 履修をミスったのでス
SWELLでSVGアニメーションを使うコツ！2通りの方法を解説
サイトやブログを作っているとき、アニメーションでページに動きがあると一気に見た目が華やかになりますよね。 今回はSVGアニメーションをSWELLで上手に使う方法を語りたいと思います。 使用用途による使い分けも解説していますのでぜひサイト作り
【SWELL】意外と簡単・コピペ可。画像クリックでSWELLの検索画面が開くようにする方法！
作成したブログパーツをヘッダー内部のウィジェットに設定することで、グローバルナビをカスタマイズできる方法は以前ご紹介しました。 前回の記事はこちら この方法で設定した画像やSVGのボタンを押したときに、SWELL機能の検索画面が開くようにし
みなさんiPadはお持ちですか？私はこれまで無印iPadを3台ほど持っていたのですが、特に使いこなせずに放置していることがほとんどでした。 そんな私がiPad miniを購入し、1年ちょっとほぼ毎日使用・持ち歩いてみてどうだったかをレビュー
【WordPress】オリジナルテーマの作り方！ローカル開発環境構築からHTMLサイトのWordPress化・カスタマイザー項目の追加まで
フリーランスでWordPress案件をやってみたい！という方は多いと思います。 がっつりプログラミング経験がないブロガーさんでも、既存のテーマを使用したノーコード案件や、そこからCSSをちょろっといじるローコード案件を受けていらっしゃる方も
「ブログリーダー」を活用して、ちーもさんをフォローしませんか？
