シバタスブログ 

このページの記事目次 (カテゴリー: その他(Web・PC・スマホ)

total 20 pages  次のページ →  

Googleドキュメントで画像を中央表示できない時の対処法

   ↑  2020/03/04 (水)  カテゴリー: その他(Web・PC・スマホ)
Googleドキュメントで画像を中央に寄せる(中央表示)する方法を紹介します。

画像を中央に寄せるためには、画像の表示方法を「行内」にする必要があります。

screenshot-docsgooglecom-202003.png

Googleドキュメント内で画像をクリックして選択すると、上記のように画像が青枠で囲われた状態になります。

すると、画像下に3つのアイコンが表示されます。左から「行内:テキストを折り返す:上下」です。これは画像の表示方法を表しています。

この内の「テキストを折り返す」と「上下」を選択すると、画像を中央寄せすることが“できなく”なります。

ここで一番左の「行内」を選択すると、画像を中央寄せするアイコンがツールバー上に表示されます(文字を中央寄せする時と同じアイコン)。

あとは中央寄せアイコンをクリックすれば、無事、画像も中央寄せすることができます。

この記事に含まれるタグ : Googleドキュメント 画像 

(記事編集) https://shibatas.blog.fc2.com/blog-entry-470.html

2020/03/04 | Comment (0) | HOME | ↑ ページ先頭へ ↑ |

CSSのみのリンクボタンを綺麗に横並び表示できたメモ

   ↑  2018/05/08 (火)  カテゴリー: その他(Web・PC・スマホ)

この記事で「CSSのみで作ったリンクボタン」の作業メモをしました。


このリンクボタンを横並びにしたいと思いました。

ボタンが横並びになるタグリスト?みたいなヤツです。ブログ個別記事のフッターあたりに、ずら~っと並んでいるアレのようなヤツです。

最初は普通にテキストリンクで、左右のスペースを全角スペースで取りながら、横に並べていたんですが、「スマホだとこれは死ぬほどタップしずらい・・」という事に気づいて、まず、冒頭の記事のように、テキストリンクをリンクボタンに変えました。

それでCSSのみで作ったリンクボタンを横にずら~っと並べたかったのですが、これが結構難しい。

左右の余白は全角スペースなどを使えばできるのですが、上下の余白を作るのが難しい。具体的にはリンクボタンをたくさん並べていくと2行以上になることがある。この時、上下に隣り合うボタンがピッタリとくっついてしまって、めちゃくちゃ見にくい。という状況になりました。「line-heightプロパティ」を使うのが良さげかも・・とも思いましたが、これでも上手く行きませんでした。

そうして調べていた所、「flex」というモノを発見。

これを使えば、メチャクチャ簡単にリンクボタンを横にずら~っと並べられて、しかもリンクボタンが2行以上になってもしっかりと余白を開けられるようになりました。

次の記事に詳しく書いてありました。


あとは、これの必要な部分コピペ&修正して、CSSソースに貼り付け。divタグでflexを呼び出せば、divタグで囲まれた部分は横並びにずら~っと並びます。それも綺麗に。

メモとして、CSSソースに貼り付けたモノを載せておきます。

.flex{
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.flex > *{
margin:7px 7px;
}

flex-direction: row;で横並びを指定。flex-wrap: wrap;で端に行ったら折り返すことを指定。.flex > *部分のmarginでリンクボタン周りの余白を指定。

HTML部分ではdivでflexをclass指定。後はdivで囲まれた部分に、リンクボタン(aタグ)をガシガシ貼り付けていけば、それが綺麗に横並びに表示されます。

な ん て 便利なんだ!!

。。。

こんな感じで想像以上に簡単に出来ました。CSS3ってスゲーな。

この記事に含まれるタグ : CSS リンク ボタン スマホ 

(記事編集) https://shibatas.blog.fc2.com/blog-entry-453.html

2018/05/08 | Comment (0) | HOME | ↑ ページ先頭へ ↑ |

画像を使わない(スマホを意識した)CSSリンクボタン作成メモ

   ↑  2018/05/08 (火)  カテゴリー: その他(Web・PC・スマホ)

新しくブログを作っているんですが、今更ながらモバイル(スマホ)を意識してリンクを作ろうと思いました。

PCの場合は、普通にテキストリンクで良かったのですが、モバイルだとテキストは小さくてタップしにくい。さらにリンク同士が隣り合っている場合、テキストリンクだとさらにタップしにくい・・。

また画像を使うのは単純に面倒くさい。そしてなんとなくスマートじゃない(笑)。

ということでスマホを意識して、リンクは画像を使わないで「CSSのみで作ったボタン」で作成することにしました。

その際のポイントや心がけたこと、手順などをメモしておきます。

スマホを意識したリンクボタンのポイント

  • 文字サイズは14〜15px
  • リンクボタンが隣り合う場合は余白を多めにとる(PCと比べて)

下記の記事に、スマホを意識するポイントが書かれています。


この記事を参考に、文字サイズは14〜15pxに指定。リンクボタンの余白(margin)は多めにとりました(私の場合は上下左右7pxでmargin指定)。

リンクボタンを作った手順

  1. Css Gradient Buttonでボタンを作成
  2. HTML email inline stylerでCSSをインライン化
  3. ブログに貼り付け

下記の記事にリンクボタンをCSSのみで手軽に作る方法が書かれていました。


これを参考に作業。

1.まず、Css Gradient Buttonでリンクボタンを作ります。この時、リンクボタン内の文字サイズを15pxに指定。

2.次にHTML email inline stylerで作ったCSSソース?をインライン化(ブログ投稿画面で普通に貼り付けられる形にする)します。

3.最後にブログ記事投稿画面で貼り付けます。※もちろんソースを貼り付けられる部分で、です。

リンクを別窓で開く時は「rel="noopener"」を付加する

最後にちょっと追記。

リンクを開く時に「別窓」を指定する場合、「rel="noopener"」は付加することを心がけました。なんでも、これを付加しないと色々と問題があるようなので。

。。。

これで完了。意外と簡単でした。

この記事に含まれるタグ : CSS リンク ボタン スマホ PC 

(記事編集) https://shibatas.blog.fc2.com/blog-entry-452.html

2018/05/08 | Comment (0) | HOME | ↑ ページ先頭へ ↑ |

BroadWiMAXオプション解約のための「ログインID、パスワード」の記載場所

   ↑  2017/09/18 (月)  カテゴリー: その他(Web・PC・スマホ)

BroadWiMAXの(少なくとも私が申し込んだ時点での)加入条件は以下のオプション2つに加入することになっていることが多いように思います。 

  • 安心サポートプラス 
  • My Broadサポート(PC)
私も上記のオプションに自動加入で申し込みました。

でもこれを解約したい。

解約するためには、以下のサポートサイトにログインしてマイページから解約する必要があるらしい。


でも、その「ログインIDとパスワード」がわからない・・(公式ヘルプに“それらしいこと”が書いてありますが、イマイチ言ってることがわかりませんでした)。

で、色々調べみたら、ようやく、そのログインIDとパスワードが記載してある場所を発見しました。

BroadWiMAXオプション解約のための「ログインID、パスワード」の記載場所

BroadWiMAXのオプションを解約するためのログインIDとパスワードは次の場所にありました。

申し込み後に送られてくる“端末が入った箱”の中に入っていた「ご契約の内容」という用紙の裏、その中段あたりに記載してあります。

そこそこ小さい文字で記載してありますので、注意深く探してみてください。

あとは、これをさっきのサポートサイトのログインフォームに入力して、マイページにログイン。「ご契約内容の変更」タブから解約できます。

これで月額費用をすっきりスリム化することができました。

ちゃんちゃんっ♪

この記事に含まれるタグ : BroadWiMAX Wi-Fi 

(記事編集) https://shibatas.blog.fc2.com/blog-entry-416.html

2017/09/18 | Comment (0) | HOME | ↑ ページ先頭へ ↑ |

Google Analyticsホーム画面でセッション(アクセス数)が急に表示されなくなった、の解決法。

   ↑  2017/03/13 (月)  カテゴリー: その他(Web・PC・スマホ)
つい先日、いつものようにGoogle Analyticsの管理画面(ホーム)に入った所、

いつもは表示されているはずのセッション(アクセス数)や平均セッション時間、直帰率、など全て非表示になってただ「-」が表示されているだけでした。

??とは思ったものの、新しい管理画面に移行する時の調整なのかなと思い、放ったらかしていたのですが(いずれは元に戻るだろうと)、今日、見てみても全然治る気配なし。

なので、調べてみたら、どうやら仕様が変わったようで、

「☆にチェックの入っているモノ“だけ”、データを表示する」ようになったようです。(データ=セッション、セッション時間、直帰率、コンバージョン率)

ですので、手っ取り早く元に戻す方法としては、

Google Analytics管理画面ホーム(サイト一覧が表示されている画面)で、「アカウント名(私の場合は自分の名前)横の☆にチェックを入れる」と、全てのサイトのデータがいつものように表示されるようになります。

(アカウント名横の☆にチェックを入れると、全てのサイト横の☆にチェックを入れたことと同じことになるので)


結構とまどいますよね、こういうことあると。

それにしても、アナリティクスの新管理画面まだかなぁ。

ではではっ。

この記事に含まれるタグ : GoogleAnalytics Google アクセス解析 

(記事編集) https://shibatas.blog.fc2.com/blog-entry-412.html

2017/03/13 | Comment (0) | HOME | ↑ ページ先頭へ ↑ |