ショートコードでブログを気楽に作る(おやじの恋快適化計画)

ブログ作成

ショートコードとは??

 ショートコードとはfunctions.phpに書いて置いたプログラムを呼び出すコードの事で、自分で作成する事が出来るそうだ。

 しかし、自分にはそんな小難しい事は無理なので、既製品のプラグインを利用してその恩恵を頂いている。

[su_row][su_column size=”1/3″ center=”no” class=””][/su_column]
[su_column size=”2/3″ center=”no” class=””] 主に使っているのはcolumns(カラム)というショートコードで、ブログ記事スペースの幅を2~3列に分ける事である。

 以前イメージ(写真等)の文字の配置にHTMLを利用していたが、これをこれから使ってはいけませんよとグーグル様からご指摘を受けたからだ。(2018年)

 画像の右側に文字を5mm位、離して表示したいとかいうやつである。[/su_column][/su_row]

 そんな時にこのcolumnsコードを使うと左側の1/4に画像を入れて、右側3/4に文章を入れると、その比率で処理してくれるのである。 お約束は1/4+3/4=1のようにトータルで1になるようにするだけですw

[su_row][su_column size=”1/3″ center=”no” class=””][/su_column]
[su_column size=”2/3″ center=”no” class=””] 「Shortcodes Ultimate」というプラグインをインストールし有効化するとショートコードを挿入するというのがテキスト画面に現れます。

 これをクリックするとショートコード一覧が出てきますのでcolumnsを選択する。

 するとショートコードcolumnsの設定画面が出て来て、サンプルコードが表示されることになるw

 これは記事画面全幅を1として左と右の割合を分数で分割できるので好みの割合に書き換えて利用する訳だ。

 今回の場合は横幅を3分割にしたいので、サンプルの一行をコピーして下段に貼り付け増加しました。

 自分はどれくらい迄出来るんだ? と思い5分割まで試しましたが正常に機能しました。 が、普通はそんなに分けないと思いますぜw

 緑の〇で囲んだ部分を1/3に書き換えます。 3つなので合計1になります?(/ω\)

 黒●の所は、画像でも文字でもOKですが今回は黒丸●を3つ入れました。 1/3を書き換えた[  ]の後が挿入スペースですので確認してね。

 そして、これをワードプレスでプレビューすると、ほら~●が3個等分された箇所へ表示されました。

 ちなみに、このページのこの部分は左側が1/3で画像、右が記事で2/3のスペースで配置されていますが、下の方の広告部分は3分割してそれぞれの商品コードを張り付けています。[/su_column][/su_row]

 また、画像部分を小さくして、文字部分を増やすには1/4と3/4に書き換えるとOKです。

 この他にも使えそうなコードがあるのですが、自分のブログではあまり使用していません?

 あっ、ハイライトとリストとアニメーションと先頭文字が大きくなるDropcapは使いました
(-。-)y-゜゜゜

 とりあえず、ショートコードそれぞれにサンプルが記述されていますので、海外産ですが感覚で使用できるのが良い所かな?

 まあ、俺みたいなおやじでも使えるんだから大丈夫だろ???

 ちなみにPCの場合、左の画像は右クリで画像開くで大きくなります。

 [su_label type=”success”]ブログ作成関連記事はこちらです (`・ω・´)ゞ[/su_label]



[su_row][su_column size=”1/2″ center=”no” class=””][/su_column][/su_row]

コメント