# ワードプレス電光掲示板プラグインを作りました。
電光掲示板（お知らせ）のプラグイン取扱に関して記載します。
プラグインに関してはワードプレス5.2以降を推奨としテーマファイル（外観）のheader.phpのbody直下に下記の記述が存在しない場合は追加記述を
お願いいたします。
```
<?php wp_body_open();?>
```
尚、プラグインのソースコードはご自由に変更頂き二次配布も構いませんが
ひとつ注意事項があります。参照した記事にリンクを貼ってください、
なお、事前の連絡等入りません。
電光掲示板（お知らせ）のソースコードは下記になります。
現在、テキストはHTMLタグを許していますので、いろいろと自由に
変更することが可能かと思います。
ちなみにこういった電光掲示板みたいな流れる仕様のコードは
インターネットの初期のころは多く見られましたが
このごろは全然、見なくなりましたね。。。
CSSの記述に関してはとくめいさんの記述を使用させて頂きました。
<https://creatorclip.info/2014/06/css3-electric-bulletin-board/>
とくめいさんも同じようなことを記事に記載しておりますが
自分もそのように感じました。
とくめいさんへ断りもなく使用してすみません、
Twitterで連絡しようかなと思ったのですが、それもなんだかと思い
勝手ながらこのような手段を取りました。
お知らせ（電光掲示板）のダウンロードは下記になります。
下記のファイルを解凍しワードプレスのプラグイン領域にフォルダごと
アップロードしプラグインを有効にするとご使用頂けます。
<https://zip358.com/plugin/Z-Electric-bulletin-board.zip>
```
<?php
/*
Plugin Name: Z-Electric-bulletin-board
Plugin URI: https://zip358.com/plugin/Z-Electric-bulletin-board.zip
Description: お知らせ
Author: taoka toshiaki
Version: 1.0
Author URI: https://zip358.com/
*/
add_action( 'wp_head', function() {
$color = get_option('ZEBB_color')?get_option('ZEBB_color'):"ffffff";
$cssdata ="
<style>
/* =====================
電光掲示板
======================= */
.ledText {
overflow: hidden;
position: relative;
padding:5px 0;
color: #$color;
font-size: 60px;
font-weight: bold;
background: #333333;
}
/* CSS3グラデーションでドット感を出す */
.ledText:after {
content: ' ';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(#0a0600 1px, transparent 0px), linear-gradient(0, #0a0600 1px, transparent 1px);
background-image: -webkit-linear-gradient(#0a0600 1px, transparent 0px), -webkit-linear-gradient(0, #0a0600 1px, transparent 1px);
background-size: 2px 2px;
z-index: 10;
}
/* CSS3アニメーションでスクロール */
.ledText span {
display: inline-block;
white-space: nowrap;
padding-left: 100%;
-webkit-animation-name: marquee;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 15s;
-moz-animation-name: marquee;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 15s;
animation-name: marquee;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 15s;
}
@-webkit-keyframes marquee {
from { -webkit-transform: translate(0%);}
99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
from { -moz-transform: translate(0%);}
99%,to { -moz-transform: translate(-100%);}
}
@keyframes marquee {
from { transform: translate(0%);}
99%,to { transform: translate(-100%);}
}
</style>
";
print $cssdata;
});
add_action("wp_body_open",function(){
$text = get_option('ZEBB_text')?get_option('ZEBB_text'):"";
if($text)print '<p class="ledText"><span>'.$text.'</span></p>';
});
add_action('admin_menu','Z_Electric_bulletin_board_set');
function Z_Electric_bulletin_board_set(){
add_options_page(
'zip358.com：プラグイン',
'電光掲示板設定',
'administrator',
'Z_Electric_bulletin_board',
function(){
if(isset($_POST["ZEBB_color"]) or isset($_POST["ZEBB_text"])){
$color = preg_match("/[a-zA-Z0-9]*/",$_POST["ZEBB_color"])?$_POST["ZEBB_color"]:"ffffff";
update_option('ZEBB_color', wp_unslash($color));
$text = $_POST["ZEBB_text"];
update_option('ZEBB_text', wp_unslash($text));
}
?>
<form method="post" action="">
<h2>電光掲示板設定</h2>
color code #<input type="text" style="width:350px" name="ZEBB_color" value="<?=get_option('ZEBB_color')?get_option('ZEBB_color'):""?>" placeholder="f7f7f7"><br>
text <input type="text" style="width:350px" name="ZEBB_text" value="<?=get_option('ZEBB_text')?get_option('ZEBB_text'):""?>" placeholder="文字を記入してください"><br>
テキスト文字を未入力にすると電光掲示板が表示されません
<?php submit_button(); ?>
</form>
<?php
}
);
}
```
[  保護中: 普通って何だろう🤔
](https://zip358.com/2026/02/10/%e6%99%ae%e9%80%9a%e3%81%a3%e3%81%a6%e4%bd%95%e3%81%a0%e3%82%8d%e3%81%86%f0%9f%a4%94.html)
[  紹介料はポイントで貰ってきたけど.
](https://zip358.com/2026/02/09/%e7%b4%b9%e4%bb%8b%e6%96%99%e3%81%af%e3%83%9d%e3%82%a4%e3%83%b3%e3%83%88%e3%81%a7%e8%b2%b0%e3%81%a3%e3%81%a6%e3%81%8d%e3%81%9f%e3%81%91%e3%81%a9.html)
[  AIは能力の鏡だとさ.そうかも知れない.
](https://zip358.com/2026/02/08/ai%e3%81%af%e8%83%bd%e5%8a%9b%e3%81%ae%e9%8f%a1%e3%81%a0%e3%81%a8%e3%81%95-%e3%81%9d%e3%81%86%e3%81%8b%e3%82%82%e7%9f%a5%e3%82%8c%e3%81%aa%e3%81%84.html)
[  考え過ぎずに行動力.逆算出来れば凄いけどね.
](https://zip358.com/2026/02/07/%e8%80%83%e3%81%88%e9%81%8e%e3%81%8e%e3%81%9a%e3%81%ab%e8%a1%8c%e5%8b%95%e5%8a%9b-%e9%80%86%e7%ae%97%e5%87%ba%e6%9d%a5%e3%82%8c%e3%81%b0%e5%87%84%e3%81%84%e3%81%91%e3%81%a9%e3%81%ad.html)
[  ネガティブ思考は駄目なのか本当にそう？
](https://zip358.com/2026/02/06/%e3%83%8d%e3%82%ac%e3%83%86%e3%82%a3%e3%83%96%e6%80%9d%e8%80%83%e3%81%af%e9%a7%84%e7%9b%ae%e3%81%aa%e3%81%ae%e3%81%8b%e6%9c%ac%e5%bd%93%e3%81%ab%e3%81%9d%e3%81%86%ef%bc%9f.html)