ASANOBLOG | ー旅・WEB・ちょっとお酒ー https://xn--l8jvb4dympg8e.com ー旅・WEB・ちょっとお酒ー Wed, 17 May 2023 04:23:51 +0000 ja hourly 1 https://wordpress.org/?v=6.1.5 https://xn--l8jvb4dympg8e.com/wp-content/uploads/2020/05/cropped-rogo_7-32x32.png ページが見つかりませんでした – ー旅・WEB・ちょっとお酒ー https://xn--l8jvb4dympg8e.com 32 32 122407651 【Bootstrap v5.0】トグルスイッチのラベル・スイッチの順序を反転させる https://xn--l8jvb4dympg8e.com/web/html/toggleswitch https://xn--l8jvb4dympg8e.com/web/html/toggleswitch#respond Wed, 17 May 2023 12:18:15 +0000 https://xn--l8jvb4dympg8e.com/?p=4266

やりたいことは、デフォルトのトグルスイッチの「ラベル」:「スイッチ」の順を 「スイッチ」:「ラベル」に反転させたい。 通常のトグルスイッチコード  &…]]>

やりたいことは、デフォルトのトグルスイッチの「ラベル」:「スイッチ」の順を
「スイッチ」:「ラベル」に反転させたい。

通常のトグルスイッチコード

  1.     <div class="form-check form-switch">
  2.       <input
  3.         class="form-check-input"
  4.         type="checkbox"
  5.         id="flexSwitchCheckDefault"
  6.       />
  7.       <label class="form-check-label" for="flexSwitchCheckDefault"
  8.         >Default switch checkbox input</label
  9.       >
  10.     </div>

項目・スイッチを反転させたコード

  1.     <div class="d-flex">
  2.       <label class="form-check-label" for="SwitchCheck1"
  3.         >default switch checkbox input</label
  4.       >
  5.       <div class="form-check form-switch">
  6.         <input class="form-check-input" type="checkbox" id="SwitchCheck1" />
  7.       </div>
  8.     </div>

]]>
https://xn--l8jvb4dympg8e.com/web/html/toggleswitch/feed 0 4266
【札幌小樽余市旅行】JR函館本線の景色が絶景だったのでブログで語る https://xn--l8jvb4dympg8e.com/travels/oatru_yoichi https://xn--l8jvb4dympg8e.com/travels/oatru_yoichi#respond Thu, 17 Nov 2022 06:33:27 +0000 https://xn--l8jvb4dympg8e.com/?p=4204

2022年9月頃に札幌周辺を旅行してきたので感想を勝手に綴ります。 いざ札幌・小樽・余市へ 家族が札幌出身だった為、筆者も6年振りに同行。そもそも今回の旅行目的…]]>

2022年9月頃に札幌周辺を旅行してきたので感想を勝手に綴ります。

いざ札幌・小樽・余市へ

家族が札幌出身だった為、筆者も6年振りに同行。そもそも今回の旅行目的は「西区役所」へ書類取りにいくことでした。
ちょうど改装工事してた。
それ以外の予定は特に決めていなかったので札幌駅周辺から比較的観光しやすい「小樽」「余市」へ遊びに行くことに。

順序としては札幌駅(快速エアポートか函館本線)→小樽駅(バス)→余市。先に余市へ行ってから復路で小樽へ。

函館本線の景色で泣く

今回の旅で一番感動したのが札幌小樽間を走る「函館本線」からの景色でした。地図を確認すると分かり易いのですが、電車のすぐ横が海(石狩湾)。遠くへ続く海・時々見える陸地、ガタンゴトンと揺れる電車・なんとなく懐かしい車内アナウンス。ほろりと涙が出た。ありがとう、ありがとう…。

 

 

小樽から余市へ

小樽からはバスに乗り、余市へ到着。
余市といえば「ニッカウヰスキー」なのですが、筆者は地元民にも大人気の老舗の魚屋「柿崎商店」(かきざきしょうてん)へお昼を食べに。二階にあるのがお目当ての海鮮工房。観光客に地元の方々でめちゃ並んでた。「海鮮丼」が人気で、運良く筆者の注文で品切れ。MAJI感謝。サイドメニューのイカソーメンも美味しかったしかなりリーズナブルだった(1330円くらい)(ビールも安い!)その日によって海鮮丼に追加?されるみたいでその日は赤つぶ貝が入っていた。

あとはのんびり観光!といってもニッカウヰスキー見学をする予定はなかったのでぐるりと周辺を回って終了(途中で道に迷って1時間くらい滞在した…)

余市から小樽へ

余市観光後、バスで小樽駅へ。小樽といえば「小樽運河」、そして北一硝子。

筆者が小樽で一番行きたかったのが「かま栄」工場直売店」。かま栄のパンロールは昔から本当によく食べていたので、買いに来たのですが、こちらも大繁盛。あまりにも混んでいたので結局札幌滞在最終日に東急で購入。
(新千歳空港店・大丸店とかは混んでるけど、東急は全然混んでないのでおすすめ)


↑かま栄のパンロール

観光地もいいけど…

生まれが札幌だったので何度も行っているけど、やっぱり好きダナー。
「北海道観光」といえば、旭川動物園とか大通り公園とかのイメージあるけど、筆者は、雪虫とか七竈(ナナカマド)といった「冬の訪れ」を感じさせてくれるものもとても好き。9月に旅行したので雪はなかったけど、雪が屋根の高さまであって、夜オレンジ色の街灯に照らされる雪や山の光景も除雪車の音、ストーブで大豆を煮るのも本当に愛しい。

札幌市内から気軽に行ける小樽と余市はとてもいい

思いつきでも1日あればフラッといける小樽と余市について紹介をしました。

]]>
https://xn--l8jvb4dympg8e.com/travels/oatru_yoichi/feed 0 4204
【WP(WordPress)】デザインが違う固定ページの作り方【page.php】 https://xn--l8jvb4dympg8e.com/web/wordpress/page-php https://xn--l8jvb4dympg8e.com/web/wordpress/page-php#respond Fri, 23 Sep 2022 13:28:59 +0000 https://xn--l8jvb4dympg8e.com/?p=4161

WordPressのサイトで時々依頼される新規LPページ制作。 LP毎にデザインや内容を変更したいので、テンプレートの使い回しが出来なさそうだったので今回は「p…]]>

WordPressのサイトで時々依頼される新規LPページ制作。
LP毎にデザインや内容を変更したいので、テンプレートの使い回しが出来なさそうだったので今回は「page-{slug}.php」を使用したページの作り方の備忘録です。

デザインが違う固定ページとは?

何がしたいかというと、WordPressの既存デザイン(元々テーマで準備されている投稿、個別ページのテンプレ)とは全く違う新規ページを1つ作成。

事前準備

WordPressの管理画面上ではなく、FTPサーバーへの接続が必要なのでFTP設定情報+クライアントソフトのご準備を(筆者はFileZilla)

【WP】デザインが違う固定ページの作り方

今回は、「 https://ドメイン/testpage 」というURLで新規ページを作っていきます。

手順は以下

  1. page-testpage.php ファイルを作る
  2. FTPソフトで設置
  3. WP側の固定ページに紐づける

page-testpage.php 作成

エディタで「page-testpage.php」を作成します。

固定ページの新規デザインページを作るときは、ファイル名を page-○○.php とします。

中身は下記をコピペ↓

<?php
/*
Template Name: page-testpage.phpのテンプレート
*/
?>


FTPソフトで設置

FTPソフトで下記箇所に作成した「page-testpage.php」を設置。


………/wp-content/themes/使用しているテンプレート/ここに設置

WP側の固定ページに紐づける

後は、【WP側】管理画面>固定ページ>新規追加
記事テンプレートを「page-testpage.phpのテンプレート」にする


(わかりやすくするために)パーマリンク(スラッグ)を、「page-testpage」に設定してページ公開をする。

以上で新規ページが完成。作成したページは下記↓
https://xn--l8jvb4dympg8e.com/page-testpage

後はこのページに画像設置や文章追記など通常のページを作成→FTPでアップして更新。という手順をとっていけばOKです。

WordPressデザインが違う固定ページの作り方まとめ

WordPressのデザインが違う固定ページの作り方の備忘録でした。

本当はLP用のカスタムフィールド設定したりして、使い回しすれば便利そうなんだけど作成するページがそれぞれ違うからナァ(*´`*)動きも変えたいみたいだし…

参考記事は、 Codexテンプレート階層でご確認を。

]]>
https://xn--l8jvb4dympg8e.com/web/wordpress/page-php/feed 0 4161
【WP】ビジュアル・テキストエディターの有無を記事ごとに分ける方法【備忘録】 https://xn--l8jvb4dympg8e.com/web/wordpress/visualeditor https://xn--l8jvb4dympg8e.com/web/wordpress/visualeditor#respond Sat, 03 Sep 2022 01:53:12 +0000 https://xn--l8jvb4dympg8e.com/?p=4150

WordPressを複数人で使用すると「ビジュアルエディター派」と「テキスト派」に分かれるのよね… 何が問題なのかというと、テキストエディーターで作成したものを…]]>

WordPressを複数人で使用すると「ビジュアルエディター派」と「テキスト派」に分かれるのよね…

何が問題なのかというと、テキストエディーターで作成したものをビジュアルエディターに切り替えるとコードが崩 れ る のだよ。ラジオボタンを設置した記事をビジュアルエディターで修正されようとして見事に記事を破壊された経験がある。(3回位)

今回は殴り合いになる前に、WP上の設定で「ビジュアルエディター派」と「テキスト派」を分けて作業できる事が出来たので備忘録。

ビジュアル・テキストエディターの有無を記事ごとに分ける方法

WP既存設定は、「ビジュアル・テキストエディター」両方を記事作成途中で切り替えとなっているのですが、ここでは「ビジュアルエディター」を選択する項目をなくす設定を紹介していきます。

結論:ユーザー追加して別々にログインすればOK。

結論:ユーザー追加して別々にログインすればOKでした、やり方は、
①WordPress>ユーザ>新規追加


②必要情報追加→新規ユーザー登録


③作成したユーザー編集画面→ビジュアルリッチエディターを使用しないにチェック→権限グループ「管理者」→ユーザーを更新④WPからログアウト→①で作成したユーザーで再度ログイン

まとめ

以上です。
記事制作を外注すると結構ある問題だと思うので、「ビジュアルエディター派」と「テキスト派」専用のアカウント作成してそれぞれ使ってもらおうと決めた日。

]]>
https://xn--l8jvb4dympg8e.com/web/wordpress/visualeditor/feed 0 4150
ゴールドラベルシールを一部白抜きして印刷・入稿する方法【グラフィックデザイン】 https://xn--l8jvb4dympg8e.com/web/illustrator/whiteout https://xn--l8jvb4dympg8e.com/web/illustrator/whiteout#respond Sun, 17 Jul 2022 07:56:30 +0000 https://xn--l8jvb4dympg8e.com/?p=4099

結構苦戦したので備忘録。 やりたいデザイン:背景ブラックの金文字 やりたいデザインは、下記。 依頼内容: ラベルシール 背景黒の文字は金色。 ※コストがかかるの…]]>

結構苦戦したので備忘録。

やりたいデザイン:背景ブラックの金文字

やりたいデザインは、下記。

依頼内容:
ラベルシール
背景黒の文字は金色。
※コストがかかるので箔押しは駄目。

更にいうと期限締切が5日後だと…??!
依頼業者によりますが、結構箔押は高い。
入稿してからも1週間位必要なのでは箔押はダメー。

…となると、納品が早め&文字を金ピカにするには????
5分くらい考えた結果がこれ↓

ラベルシート自体を「金色」(ゴールドラベル)にして、文字箇所を白抜き・他を黒インクでぬってしまう。という力技。

入稿データ作っていこう!

さ、さっそく入稿データ作成スタート。
デザインは出来ているので、はじめにやることは印刷する業者さんの「入稿方法」、「入稿方法の注意点」の熟読。「デザインレイヤー」にデザイン入れて!とか「カットパス」はこれ、とか「黒塗りはK100」など細かい指示が記載しています。
業者さんによって指示が異なるので要注意だ。

印刷業者さんによっては、「入稿用.ai」が準備され、DLが出来るようになってるのでそちらを使えばいいよ。筆者がお願いした印刷業者さんには入稿用.aiなかったので、ざっくり自分で入稿データを作成。

ほいで、今回は背景の「ゴールドラベル」が見えるように「白抜きした」データも必要なのでそちらをっ作ってゆくう。

白抜きデータ作成

白抜きは「印刷した時にインクが乗らない(背景の色が見える)」なので、文字部分だけ色がのっていないデータを作成します。
※筆者の場合、白抜きしたいレイヤー以外はロック&非表示設定。

①文字をアウトライン
(オブジェクト複数ある時は「複合パスの作成」をしておく(Ctrl+8(win)/command+8(Mac))

②文字・背景を選択後、「パスファインダー」>「中マド」を使用。

抜きたい色以外に、色を付ける。今回は黒背景なので黒く塗りつぶす。 

見事に文字箇所には色がなく背景が見える。白抜き成功。

③白インクレイヤーも作成して完了。
白版・ホワイト版・白塗り・白インクなど呼び方があるのですが、これは印刷した時にデザイン透けを予防する版のことです。今回は特にデザインないので説明省きます。
もし必要な方は、②の工程で作成したレイヤーをコピーして印刷業者さんの指定した白版のルールに従い白版を作成すればOK。

以上で、入稿データを印刷会社さんに提出して2回位で印刷成功。
話が出てから3日位で納品出来たので印刷業者さんには感謝しかないですます。

まとめ

流石に時間なさすぎで力技で作成したラベルデザインのお話でした。
普段、グラフィックデザインしてないのでもっと詳しい方がいるかと思いますが、なんとかこの方法印刷が出来たので備忘録として残しておきます。


白抜きサンプルAiですー。もしよければどうぞ!

中身こんなふうになっていますー。

]]>
https://xn--l8jvb4dympg8e.com/web/illustrator/whiteout/feed 0 4099
FFFTPの画面が真っ白に?ファイル一覧の取得は正常終了しているのに…【解決したので備忘録】 https://xn--l8jvb4dympg8e.com/web/ffftp_white_screen https://xn--l8jvb4dympg8e.com/web/ffftp_white_screen#respond Sun, 03 Jul 2022 05:28:28 +0000 https://xn--l8jvb4dympg8e.com/?p=4084

久々自宅PCでのFFFTPを使ったWordPressいじりを始めようとしたところ、画面のような事態に。 画面真っ白やんけ!!!(通常はディレクトリがずらーっと並…]]>

久々自宅PCでのFFFTPを使ったWordPressいじりを始めようとしたところ、画面のような事態に。

画面真っ白やんけ!!!(通常はディレクトリがずらーっと並んでいます)
サーバー側に問題に何か問題があるなら、画面右側だけ真っ白になるのは理解出来るんだけどもローカル側も真っ白だと…??
という訳で解消方法を発見したので備忘録として残します。

※使用しているサーバーはさくらサーバ(今回の原因はあんまりサーバー関係なかったけどね。)

FFFTPの画面が真っ白に原因は「表示」?

筆者の場合は表示設定をいじったら解決しました。

表示設定は、画面上「表示(V)」>形式。
この項目の「詳細(D)」にチェックが入っていたことが原因だったぽい。
詳細→一覧に変更してあげると全画面が表示されたので一安心…????
気になったので更にネットで調べてみました。

Ctrl + +(画面拡大)をクリックが正解かも

他の人も同じような現象になっているのか気になったので検索したところちょこちょこ同じ現象の方を発見
解決方法は画面上で「Ctrl++」をクリックとのこと。うわ~、こっちの方が1.5秒くらいで終わるじゃん…と感動
ちなみにこのショートカットって画面表示を「拡大」(WIN)。

okwaveで回答している方でこんな発言をしている方がいらっしゃいました。


(出典:https://okwave.jp/qa/q9694543.html)

あぁ、成る程~!
(原因は不明だけど急に)列幅が0になってしまった可能性ありそう。

なので、画面上「表示(V)」の変更しても異なるディレクトリ見に行ったらまた列幅が0になっている可能性があるのか。
たまたま「詳細(D)」の幅が0になっていただけかもしれないので、解決方法としては「Ctrl+ +(画面拡大)」が正解っぽい。
勉強になった。

まとめ

何もしらない状態で既存サイトとかいじっている時にFFFTP画面が急に真っ白になるとか想像するだけでおしっこちびりそうになりそうだ。。。。
どうして急に真っ白になったか原因は不明だけど解決方法がみつかって良かったと心から思う。
以上、備忘録&文章書きながら色々考えたことをまとめてみました。

FFFTP画面真っ白になったら「Ctrl ++」だ

]]>
https://xn--l8jvb4dympg8e.com/web/ffftp_white_screen/feed 0 4084