スマホ活用便利技~~スマホだけで魅せるブログの作成方法~~

岡山市で「解りやすい説明ですね」「間違い探すの早いですね」とよく言われるパソコン教室【キュリオステーション岡山店】では、スマホだけで、ブログ投稿する技も公開しています。

こんなのスマホでどうやって書いてるんだ?

みたいなのもありますよね、、、アメブロとかの無料ブログだと、CSSも独自で作れないですし・・・

※パソコン用のカスタマイズ可能CSSには追記できますが、スマホ向けと連動しておらず、スマホで見ると別物になります。

っと、いった結果になったので、CSSをあきらめて、、、HTMLで作る方法をまとめました。

アメブロさん記事でも公開してますが、、、消えてもいいように残しておきます。

 

知っておくとよいタグの話

岡山市のパソコン教室 パソコンHTMLを記述するのに、知っておくべき基本的なタグ

<div> ・・・ 範囲指定
<p> ・・・ 段落指定
<span> ・・・文字指定みたいなイメージ

<a href> ・・・ リンクさせる
<img> ・・・ 画像を表示する

 

範囲指定ですので、開始~終了となります。
<div>~</div>
/スラッシュ付きが終了の意味合いです。

 

リンクを作る場合のURLは、コピペして作ること
間違いなくできるので・・・

 

※「リンクって何?」「コピペって?どうやって何をコピペするん?」ってなる人のことは考えていない記事です。
すいません。操作が解らない場合は、それぞれの機種で探して下さい。

 

綺麗な枠をCSSを使わずにHTMLでつくってみよう!!

CSS用のデザインコードがあるサイトより

コピペ作成してみましょう。

検索すると、いろいろ出てきます。

 

CSSで組み込むか、CSSを元にして、HTMLで記述するか?

アメブロでは、アプリ用のCSS編集ができないので、HTMLで作る例です。

 

パソコンで見る場合は、デザインでCSS編集可能なデザインを選ぶと、

CSS編集できますけど、アプリ向けは、別っとなっている状況ですので・・・

パソコンで記事を書く場合も、同じような作業となります。

 

 

1.サイトに行き、デザインを選択

岡山市のパソコン教室 スマホでCSS変換1

 

2.コードを見て、HTMLサンプルをコピー

岡山市のパソコン教室 スマホでCSS変換2

div と P タグをコピーします。

 

3.アメブロアプリの記事にて、タグの編集を開いて、貼り付け

※複数アプリの切り替えが必要です。

岡山市のパソコン教室 スマホでCSS変換3

メモアプリなどでも可能です。

Windows での「メモ帳」の代わりになるアプリケーションを使うと使いまわしできます。

 

4.【WEB】に戻り

box10の内容を選択しコピー
画面上切れてますが全部ですよ!!

岡山市のパソコン教室 スマホでCSS変換4

 

5.【アメブロアプリ】

box10 の箇所に貼り付け

岡山市のパソコン教室 スマホでCSS変換5

 

6.【WEB】に戻り

box10 p の部分

中身をコピーします。

こちらも全部です。

岡山市のパソコン教室 スマホでCSS変換6

 

7.【アメブロアプリ】

<P のあとに、貼り付けし、コードを綺麗に整形していきます。

/*~~*/ ← コメントなので削除

<div class の箇所を style= を先頭に付け、最後に”ダブルクォーテーションで囲みます。

岡山市のパソコン教室 スマホでCSS変換7

 

<p の後ろにも、style= を付け、”ダブルクォーテーションで囲み

「ここに文章」の箇所に表示させたい言葉を書きます。

岡山市のパソコン教室 スマホでCSS変換8

 

8.通常の入力画面に戻ると、、、

綺麗に枠が出ていれば正解、、、間違えると出てきません。

岡山市のパソコン教室 スマホでCSS変換9

 

簡単な操作。コピペ作業で出来上がりです。

 

後は、このコードを保存しておき、

コピペ作業で使いまわしするとか、

この記事から必要な部分をコピペして使うとか

アメブロだと下書き保存できるので、下書きとして残しておくことも可能です。

 

こんな感じになります。

このコードは?

<div style="padding: 0.5em 1em; margin: 2em 0; color: #00bcd4; background: #e4fcff; border-top: solid 6px #1dc1d6; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);">
<p style="margin: 0; padding: 0;">こんな感じになります。</p>

 

同じ作業で、見出しもできます。

見出しの場合は、

Html だけで記述もできますし、

CSSを使って統一することもできます。

 

LINE@の友達追加ボタンの画像を変える

LINE@とかされている方へ

LINE@のこのボタン
友だち追加

綺麗な画像付きのボタンに変えている人って見かけますよね

でも、押すと、同じ画面に遷移します。

 

どうやるの?

 

コードは、こんな感じです。

<a href="https://lin.ee/jDgHyR“><img src="https://scdn.line-apps.com/n/line_add_friends/btn/ja.png" alt="友だち追加" height="36″ border="0″></a>

https://scdn.line-apps.com/n/line_add_friends/btn/ja.png

https://scdn.line-apps.com/n/line_add_friends/btn/ja.png

この分部を変えるか?

https://lin.ee/jDgHyR

こっち側を変えるか? となります。

 

アメブロで作業する場合は、

1.画像を記事に貼り付け、いったん保存、

2.再度開いて、タグの編集画面を開く

3.Https:の箇所を変える。

 

href の 部分がリンク先のアドレス

img src の部分が、画像の保存先となります。

この関係が理解できると、それほど難しい作業ではないでしょう。

 

 

セキュリティソフト

マカフィー・ストア

office 365

Microsoft Store (マイクロソフトストア)

PC

デル株式会社